您的位置：首页 > Web前端 > CSS

web前端开发学习笔记-06-css选择器

2018-12-16 15:55 197 查看

原课程在这里：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选择器不可以多个同时使用

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航