原课程在这里:https://www.icourse163.org/learn/BJFU-1003382003?tid=1003609002#/learn/announce
标签选择器
对某一种标签统一设置样式,且与标签同名
下面的例子中,样式的名字或者说选择器的名字就是标签的名字。如下面的style中的body样式就作用于body标签。其中背景设置为#fff即白色,从示例截图中我们可以看出示例的背景为白色。
同理,例子中的style中的h1作用于一级标题,p作用于段落,hr作用于分割线。
<style type="text/css">
body{background-color:#fff;
text-align:center;
font-size:12px;}
h1{font:"黑体";font-size:20px;}
p{color:red;font-size:16px;}
hr{width:200px;}
</style>
--------------------------------------
<body>
<h1>标题</h1>
<hr>
<p>正文的段落</p>
版权所有
</body>
类别选择器
让相同的标签可以有不同的样式
如例子所示,我希望不同的段落文字有不同的标签格式,便使用类别选择器。
点
样式在定义时,以点开头,后面定义的样式名称,可以自己根据含义来定义,比如把类别一定义成one,类别二定义成two。
引用时,在要作用的标签内使用它的class属性来进行类别样式的引用,引用时不加点;如果没有用class来引用,则就是标签类型的选择器,也就是p所规定的样式。
<style type="text/css">
p {font-size:12px;}
.one{font-size:18px;}
.two{font-size:24px;}
</style>
----------------------------
<body>
<p class="one">类别1</p>
<p class="one">类别1</p>
<p class="two">类别2</p>
<p class="two">类别2</p>
<p>普通段落中的文字</p>
</body>
ID选择器
井号开头,后面的名称自己定义
使用id属性进行引用,引用时注意去掉井号,直接引用就可以了。
<style type="text/css">
#one{font-size:12px;}
#two{font-size:24px;}
</style>
---------------------------
<body>
<p id="one">文字1</p>
<p id="two">文字2</p>
</body>
嵌套声明
想要某一部分以特殊的形式显示出来
<style type="text/css">
p span{
color:red;
}
</style>
<body>
<p><span>固态硬盘</span>具有传统机械硬盘不具备的快速读写、质量轻、能耗低以及体积小等特点,同时其劣势也较为明显。</p>
</body>
集体声明
<style type="text/css">
h1,p{text-align:center;}
</style>
------------------------------
<body>
<h1>web前端开发</h1>
<p>web前端开发</p>
</body>
全局声明
<style type="text/css">
*{text-align:center;}
</style>
---------------------------
<body>
<h1>web前端开发</h1>
<p>web前端开发</p>
<h2>web前端开发</h2>
</body>
混合
多个class选择器混用,用空格分开
<div class="one yellow left">......</div>
id和class混用
<div id="my" class="one yellow left">...</div>
id选择器不可以多个同时使用