目录
1.样式的使用
使用样式,我们需要通过使用作为其他标签的style
属性或是<style>
标签。
1.1 行内样式
行内样式,就是通过使用其他标签的style
属性来改变样式。
如代码(color
改变字体颜色,font-size
改变字体大小):
<p style="color: red;font-size: 30px;"> 该段使用行内样式</p>
运行结果如图:
1.2 内嵌样式
内嵌样式,就是通过使用<style>
标签来改变样式。
在<head>
标签中创建<style>
标签,改变其他标签的样式(下面代码改变<p>
标签的样式),如代码:
<style type="text/css">
p{
color: green;
font-size: 40px;
}
</style>
在<body>
标签中使用<p>
标签,如代码:
<p>该段使用内嵌样式</p>
运行结果如图:
1.3 链接样式
链接样式,就是通过把style
定义在CSS文件中的方法,实现样式定义与内容的分离,来达到一次定义,多次使用的目的,避免了同样样式的多次定义。
CSS文件,代码如下:
p{
color: blue;
font-size: 40px;
text-align: center;
}
如果想要使用CSS文件中的内容,我们必须得引用它,与它建立链接。在HTML文件中的<head>
标签中,添加如下代码:
<link rel="stylesheet" type="text/css" href="lib.css"/>
现在,我们在CSS文件中定义的样式就可以使用了,在标签中,添加如下代码:
<p>该段使用链接样式</p>
运行结果如图:
1.4 样式选择器
在内嵌样式和链接样式中,我们定义了样式,但它们使用时,只能设置默认样式,在我们要使用多种样式时就会不方便。比如我们写文章时,要使用多种样式,比如,我第一段文字要用红色,第二段文字要用蓝色,这时,只用一种样式是不够的。这是我们就要使用选择器来解决这个问题。
1.4.1 标签选择器
我们上文所使用的所有选择器都是标签选择器,但因为这么说并不具体,所以,给出一个例子,代码如下:
p{
color: blue;
font-size: 40px;
text-align: center;
}
1.4.2 id选择器
id选择器就是在定义时,在标签选择器前加上一个#
。需要注意的是,id选择器只能唯一使用(只能用一次)。
举例,代码如下:
#p1{
color: red;
font-size: 40px;
}
在使用id选择器时,我们需要在要使用的标签中设置id
属性。
举例,代码如下:
<p id="p1"> 该段使用id选择器</p>
<p id="p1"> 该段也使用id选择器</p>
运行结果如图:
嘻嘻,奇怪,刚才我还说id选择器只能唯一使用,可现在为什么我们两次使用id选择器的时候都好使呢?
别着急,我来解释一下,id选择器实际上是可以多次使用的,但是这是不合标准的。举个例子,每个人都有一个唯一的身份证号,虽然我们可以拥有多个身份证,且我们的所有身份证都是有效的,但实际上一个人有多个身份证是不合理的。所以,从理论上说,id选择器只能唯一使用。
1.4.3 类选择器
那我们想拥有可以多次使用的样式时,怎么办呢?这是就该类选择器出场了。类选择器定义的时候和id选择器差不多,只不过把#
换成.
,代码如下:
.p1{
color: red;
font-size: 40px;
}
在使用类选择器时,我们需要在要使用的标签中设置class
属性。
举例,代码如下:
<p class="p1"> 该段使用类选择器</p>
<p class="p1"> 该段也使用类选择器</p>
运行结果如图:
1.5 样式优先度
我分享了三种使用样式的方式,但是具体的,三种方式的优先度又是怎么样的呢?如果它们两个或三个同时使用时,又会出现什么样的状况呢?
1.5.1 测试
1.定义行内样式(红色)
代码如下:
style="color: red;"
2.定义内嵌样式(蓝色)
代码如下:
p{
color:blue;
}
3.定义链接样式(绿色)
代码如下:
p{
color:green;
}
4.运行代码如下:
<p>有内嵌样式和链接样式</p>
<p style="color: red;">全都有</p>
5.运行结果如下:
1.5.2 结论
优先度:行内样式>内嵌样式>链接样式