html零基础必看——CSS的三种样式结构、CSS常见选择器详解
第三章:CSS基础知识
前言
通过前面两章我们学习了html的页面结构和一些常见标签,这些标签来呈现我们的页面内容,那么如何去更好的美化这些页面呢?这就需要用到本章及后续所讲解的CSS知识了!
一、认识CSS
1.1.CSS基本概念
- CSS是:层叠样式表(英文全称:Cascading Style Sheets)。是一种用来表现HTML等文件样式的计算机语言,CSS可以静态地修饰网页。
- HTML是网页骨架,CSS是用来修饰网页的。
1.2.结构
CSS 规则由两个主要的部分构成:选择器,声明块(一条或多条声明)
即:选择器 {属性 :属性值}
- 选择器:在{}前面的内容就是选择器,选择器通常是你需要改变样式的 HTML 元素。
- 声明块:由{}包裹的内容就是声明块,每条声明由属性和属性值组成;每个声明结束要用分号结尾。
- 属性:是你希望设置的样式属性,每个属性有一个或多个值。属性和值用冒号分开,并以分号结尾。
- 为了让CSS可读性更强,可以每行只描述一个属性。
二、CSS的三种写法
CSS样式可以直接存储于HTML网页中(内部样式和行内样式),或被放置在一个文件扩展名为.css的外部样式单文档中,需要通过引入使用。
2.1.内部样式
- 内部样式写在头部head标签里面,一般是在title标题标签下面紧接着,用style标签包裹着。
- style标签可以加上
type="text/css"
这条属性,用于告诉浏览器这里是什么格式的代码,但是在HTML5规范中可以不用写。- CSS样式的注释快捷键和HTML标签的注释一样都是ctrl+/。
<head>
<title>Document</title>
<style>
/*这里写css代码*/
/* CSS的注释也是 ctrl+/ */
</style>
</head>
2.2.行内样式
直接写在标签里面
<body>
<!-- 这是行内样式 -->
<p style="color: brown;">我是段落文字p,我的样式就写在我的标签里面</p>
</body>
2.3.外部样式
单独创建.css
后缀的文件,然后通过link标签引入,link通常放置于头部
<head>
<title>外部样式</title>
<link rel="stylesheet" href="rest.css">
</head>
- link: 链接标签
- rel:定义这个你引入这个文件是什么样的格式属性
- stylesheet: 样式表
- href: 相当于你的引入地址 地址
2.4.三种样式的优先级
就近原则:行内样式>内部样式>外部样式
<head>
<title>三种样式写法</title>
<!-- 外部样式,需要link标签引入 -->
<link rel="stylesheet" href="rest.css">
<!-- 内部样式,需要用到style标签包裹 -->
<style>
/*这里写css代码*/
p{
color: yellow
}
</style>
</head>
<body>
<!-- 这是行内样式 -->
<p style="color: red;">我是段落文字p,我的样式就写在我的标签里面</p>
</body>
注意:我们可以发现外部样式和内部样式都是写在头部head标签并且在标题title标签后面。外部样式使用次数较多,需要外部引入,一般规范格式都是外部样式link标签写在内部样式style标签前面。
内部样式和行内样式都给了p标签颜色属性,但是最终文字颜色是red红色的。内部样式写在头部标签里,行内样式直接写在p标签里,因为代码是从上往下加载的,由于就近原则,离p标签最近的属性是行内样式,所以文字最终显示红色。(都给同一个p标签颜色属性,内部样式的属性会被覆盖,就只显示行内样式的红色属性了)
2.5.三种样式的比较
- 行内样式
- 优点:写法简单 容易 (权重高 优先级大)
- 缺点:不利于维护 后期修改代码不方便 不能重复利用
- 使用次数: 很少使用
- 内部样式
- 优点: 方便维护 阅读方便 部分结构和样式分离了
- 缺点: 没有真正的 样式和结构完全分离开
- 使用次数: 较多 (自己写案例时候常用)
- 外部样式
- 优点: 样式和结构分离 代码可以重复利用
- 缺点: 用起来麻烦需要引入
- 使用次数: 开发中使用次数是最多的 (开发规范写法)
三、CSS选择器
3.1.基本选择器
3.1.1.元素选择器(标签名选择器)
通过标签名选择添加样式,如:
<style>
h1 {
color: red;
}
</style>
3.1.2.类名选择器
- 写法:<标签名 class=“类名”>
- 获取样式;以 .类名 作为选择器
- class类名,不是唯一的,单个标签元素可以拥有多个类名;允许不同标签使用相同类名(相当于一个人可以有多个外号和小名;不同的人名字也有重名)
<head>
<title>类名选择器</title>
<style>
/* 用类名p1获取样式 */
.p1{
color: green;
}
</style>
</head>
<body>
<!--给p标签取一个类名为p1 -->
<p class="p1">我是p</p>
</body>
3.1.3.id选择器
- 写法:<标签名 id=“id名”>
- 获取样式:以 #id作为选择器
- id名是唯一的,就如同身份证号,不允许重复,只能用一次
<head>
<title>id选择器</title>
<style>
/* 用id名text获取样式 */
#text{
color: green;
}
</style>
</head>
<body>
<!-- 给p标签取一个id名为text -->
<p id="text">我是p</p>
</body>
3.1.4.通配符选择器
- 获取样式:以 * 作为选择器
- 作用是可用来清除默认样式
<style>
* {
/* 背景颜色;绿色 */
background-color: green;
/* 外边距:0,下章会讲到 */
margin: 0;
}
</style>
3.1.5.群组选择器
将具有相同属性的选择器合并,可用多种不同类型的选择器组合起来,中间用逗号隔开。
<style>
/* 群组选择器:多个不同类型选择器合并起来,设置相同的属性 */
h1,.p1,#text,p,span{/*多个选择器中间用逗号隔开*/
font: size 17px;;
}
</style>
3.1.6.优先级问题:
对于同一个元素而言,如果设置有多个选择器,那么就会有一个优先级的问题:
1.一般而言,优先级:ID选择器 > 类选择器 > 标签(元素)选择器>通配符
<head>
<title>优先级比较</title>
<style>
*{
color: brown;
}
p{
color: red;
}
.p1{
color: green;
}
#text{
color: blue;
}
</style>
</head>
<body>
<p class="p1" id="text">我是p,谁的优先级最大,我就是谁设置的颜色</p>
</body>
在上述代码中,p标签用多种不同的选择器来设置颜色属性,由于id选择器的优先级最高,所以文字颜色是Id选择器设置的颜色为blue蓝色。
效果图:
2.有行内样式,行内样式的优先级高。
- 如果标签内设置了行内样式的话,行内样式的属性大,因为就近原则。
- 优先级:行内样式>ID选择器 > 类选择器 > 标签(元素)选择器>通配符
<p class="p1" id="text" style="color: darkorange;">我是p,谁的优先级最大,我就是谁设置的颜色</p>
</body>
在上述代码基础上,在p标签内加入了style="color: darkorange行内样式,此时文字颜色应该是darkorange深橘色。
效果图:
3.! imporant 提高指定样式的优先级(最大)
- 用法:在指定选择器属性值后面直接加上 !important 直接把对应样式的优先级提高到最大。
- 优先级:! imporant>行内样式>ID选择器 > 类选择器 > 标签(元素)选择器>通配符
<style>
*{
/* 加了!important,此时优先级是最大的 */
color: brown !important;
}
</style>
在上述代码基础上,在通配符样式中,属性值后面加上了! imporant,把它的样式优先级提到了最大,此时此时文字颜色应该是brown 棕色。
效果图:
3.2层次选择器
层次选择器 通过DOM元素之间的结构(层次关系)来获取特定元素,例如后代元素、子元素、相邻元素、兄弟元素等。
3.2.1后代选择器
选择后代中所有的元素,范围比较大
3.2.2子代选择器
选择后代中的元素中某一个子元素,范围比较小
<head>
<title>后代、子代选择器</title>
<style>
/* 后代选择器:选择ul标签后代中所有的li标签 */
ul li{
color: yellow;
}
/* 子代选择器:选择ol后代中类名为li1的这个子元素 */
ol > .li1{
color: red;
}
/* 子代选择器:选择ol后代中类名为li3的这个子元素 */
ol > .li3{
color: hotpink;
}
</style>
</head>
<body>
<div>
<ul>
<li class="li1">11</li>
<li>22</li>
<li class="li3">33</li>
</ul>
<ol>
<li class="li1">11</li>
<li>22</li>
<li class="li3">33</li>
</ol>
</div>
</body>
效果图:
3.2.3相邻兄弟选择器
在同一个父级下,一个元素的下一个相邻的同级兄弟元素
3.2.4后续兄弟选择器
在同一个父级下,一个元素后续所有的同级兄弟元素
<head>
<title>Document</title>
<style>
/* 相邻兄弟选择器:h1和p在同一个父级中,h1元素之后紧接着的元素p */
h1+p {
color: red;
}
/* 后续兄弟选择器:span和p在同一个父级中,span元素后面,所有的p元素 */
span~p {
color: goldenrod;
}
</style>
</head>
<body>
<div>
<div class="div1">
<h1>哈哈哈</h1>
<p class="p1">111</p>
<p>222</p>
<p class="p3">333</p>
</div>
<div class="div2">
<span>我是span</span>
<p class="p1">111</p>
<p>222</p>
<p class="p3">333</p>
</div>
</div>
</body>
效果图:
3.3结构伪类选择器
结构伪类选择器,可以根据元素在文档中所处的位置,来动态选择元素,从而减少HTML文档对ID或类的依赖,有助于保持代码干净整洁。
可动态选择具体元素位置,如第一个,最后一个,奇数个,偶数个等
<head>
<title>Document</title>
<style>
/* 选择ul中后代第一个li子元素 */
ul li:first-child{
color: red;
}
/* 选择ul中后代最后一个li子元素 */
ul li:last-child{
color: green;
}
/* 奇数行选择器 */
ol li:nth-child(odd) {
color: yellow;
}
/* 偶数行选择器 */
ol li:nth-child(even) {
color: blue;
}
/* 和上面一样分别是奇数、偶数行选择器 */
/* ol li:nth-child(2n) {
color: yellow;
}
ol li:nth-child(2n+1) {
color: blue;
} */
</style>
</head>
<body>
<ul>
<li>哈哈哈</li>
<li>哈哈哈</li>
<li>哈哈哈</li>
<li>哈哈哈</li>
<li>哈哈哈</li>
</ul>
<ol>
<li>你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>
</ol>
</body>
效果图:
总结
上述是小编为大家整理的一些CSS的初步认识、结构、三种样式的写法、以及常用到的一些选择器,具体案例及使用场景做了一个比较详细的讲解。参考多方资料加上自己的理解整理出来的,或有不确之处和疏漏的地方,还望各位大佬能够不吝赐教,加以斧正,小编在此先行谢过了。