时间:2021-04-16
1.行内样式
行内样式是所有样式方法中最为直接的一种,它直接对HTML的标记使用style属性,然后将CSS代码直接写在其中。
<html>
<head>
<title>行内样式</title>
<body>
<p style="color:#FF0000;font-size:20px;text-decoration:underline;">正文内容1</p>
<p style="color:#000000;font-style:italic;">正文内容2</p>
<p style="color:#FF00FF;font-size:25px;font-weight:bold;">正文内容3</p>
可以看到在3个<p>标记中都是用了style属性,并且设置了不同的CSS样式,各个样式之间互不影响,分别显示自己的样式效果。
2.内嵌式
内嵌样式表就是将CSS写在<head>与</head>之间,并且用<style></style>标记进行声明。
<html>
<head>
<title>内嵌式</title>
<style type="text/css">
<!--
p{
color:#FF00FF;
text-decoration:underline;
font-weight:bold;
}
-->
</style>
</head>
<body>
<p>紫色、粗体、下划线、25px的效果1</p>
<p>紫色、粗体、下划线、25px的效果2</p>
<p>紫色、粗体、下划线、25px的效果3</p>
</body>
</html>
所有的CSS的代码部分被集中在了同一个区域,方便了后期的维护,页面本身也大大瘦身。但如果是一个网站,拥有很多的页面,对于不同页面上的<p>标记都希望采用同样的风格时,内嵌式的方法就显得略微麻烦,维护成本也不低。因此仅适用于对特殊的页面设置单独的样式风格。
3.链接式
链接式CSS样式表是使用频率最高,也是最为实用的方法。它将HTML页面本身与CSS样式风格分离为两个或者多个文件,实现了页面框架HTMl代码与美工CSS代码的完全分离,使得前期制作和后期维护都十分方便,网站后台的技术人员与美工设计者也可以很好的分工合作。
而且对于同一个CSS文件可以链接到多个HTML文件中,甚至可以链接到整个网站的所有页面中,使得网站整体风格统一,协调,并且后期维护工作量也大大减少。下面来看一个链接式样式表的实例。
<html>
<head>
<title>页面标题</title>
<link href="1.css" type="text/css" rel="stylesheet">
</head>
<body>
<h2>CSS标题1</h2>
<p>紫色、粗体、下划线、25px的效果1</p>
<h2>CSS标题2</h2>
<p>紫色、粗体、下划线、25px的效果2</p>
</body>
</html>
然后创建1.css
h2{
color:#0000FF;
}
p{
color:#0000FF;
text-decoration:underline;
font-weight:bold;
font-size:20px;
}
如上例子,文件1.css将所有的CSS代码从HTML文件中分离出来,然后在html页面的<head></head>标记之间加上“<link href="1.css" type="text/css" rel="stylesheet">”语句,将文件链接到页面中,对其中的标记进行样式控制。
链接式样式表的最大优势在于CSS代码与HTML代码的完全分离,并且同一个CSS文件可以被不同的HTML所链接使用。因此在设计整个网站时,可以将所有页面都链接到同一个CSS文件,使用相同的样式风格。如果整个网站需要进行样式上的修改,就仅仅只需要修改这一个CSS文件即可。
4.导入样式
导入样式表与链接样式表的功能基本相同,只是语法和运作方式上略有区别。采用import方式导入的样式表,在HTML文件初始化时,会被导入到HTML文件内,作为文件的一部分,类似内嵌式的效果。而链接式样式表则是在HTML的标记需要格式时才以链接的方式引入。
在HTML文件中导入样式表,常用的有如下几种@import语句,可以选择任意一种放在<style>与</style>标记之间。
@import url(sheet1.css);
@import url("sheet1.css");
@import url('sheet1.css');
@import sheet1.css;
@import "sheet1.css";
@import 'sheet1.css';
如下例子:
<html>
<head>
<title>页面标题</title>
<style type="text/css">
<!--
@import url(1.css);
@import url(2.css);
-->
</style>
</head>
<body>
<h2>CSS标题1</h2>
<p>紫色、粗体、下划线、25px的效果1</p>
<h2>CSS标题2</h2>
<p>紫色、粗体、下划线、25px的效果2</p>
</body>
</html>
然后创建1.css
h2{
color:#0000FF;
}
p{
color:#0000FF;
text-decoration:underline;
font-weight:bold;
font-size:20px;
}
再创建2.css
h3{
color:#00FFFF;
font-style:italic;
font-size:40px;
}
不单是HTML文件的<style>与</style>标记中可以导入多个样式表,在CSS文件内也可以导入其他的样式表。例如:将“@import url(2.css);”去掉,然后在1.css文件中加入“@import url(2.css);”,也可以达到相同的效果。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文主要讲解如何用CSS控制网页段落行间距的三个实例:1、使用百分比设置行间距,2、使用像素值设置行间距,3、使用数值来设置行间距。本文主要讲解如何用CSS控制
三个知识点:1.css后代选择器https://ponent/datetime-picker在搞清楚上述三个知识点的前提下,在vue页面的全局样式中(即不带有s
去掉超链接的下划线,需要用样式表CSS来控制,如果你暂时不想深入了解CSS的概念,下面将举三个简单的实例来说明如何控制超链接的下划线。用记事本打开网页源代码(也
本节主要讲解,两个内容,第一:CSS如何控制页面样式,有几种方式;第二:这些方式出现在同一个页面时的优先级。使用xHTML+CSS布局页面,其中有个很重要的特点
基本思路首先你得画三个圆吧,那三个圆怎么重叠到一块呢?这个就得靠-margin来控制了。css#t1{float:left;width:150px;height