CSS简介
CSS英文全称为Cascading Style Sheets，即层叠样式表，是一个用于修饰文档（可以是标记语言HTML，也可以是XML或者SVN）的语言，可以将文档以更优雅的形式呈现给用户。
CSS语法介绍
css声明（CSS declarations）
属性：属性值
注意：css的属性和属性值都是大小写敏感的
css声明块（ CSS declaration blocks）
1、属性名和属性值之间用 : 隔开
2、多对属性之间使用 ; 隔开
3、最后一对属性可以不加
4、用{}括起来
例如：
div{
font-size: 28px;
background-color: red;
}
css的速记写法
类似于font，background， padding， border， margin 这些都被称为速记属性。
这些属性允许在一行中写多个属性值。速记属性可以节省时间，使代码整洁。
例如：
border:1px solid red;
background-color:red;
padding: 10px 15px 15px 5px; 等价于padding-top: 10px; padding-right: 15px; padding-bottom: 15px; padding-left: 5px;
CSS的引入方式
内联样式（行内样式）
缺点：样式与结构冗余
优点：优先级较高
内联样式表就是把css代码直接写在现有的HTML标签中，具体的使用方法如下面所示：
<div style="color:red;font-size:14px">
设置字体颜色为红色，并且字体大小为14px
</div>
内部样式表
缺点：样式的复用率较低
优点：样式与结构分离
将样式表编写到head中的style标签中
<style type="text/css">
p{
color:red;
background-color:yellow;
}
</style>
外部样式表
优点：
- 样式与结构分离，解耦；
- 样式的复用率高（框架:例如bootstrap），共用，定义好的css文件可以应用到多个页面中；
- 将样式编写到外部样式表中，可以在不同的页面中使用同一个样式表，完全将表现和结构分离，方便后期的维护。
1.将样式表编写到外部的CSS文件中，然后通过link标签将外部文件引入
<link rel="stylesheet" type="text/css" href="CSS文件的路径"/>
2.还可以通过import方式导入CSS文件
<style>
/*要写在style标签的最前面，否则不会生效 或者直接在外部css文件中直接使用*/
@import url('./style.css');
</style>
使用import 方法的缺点：
- 优先加载html，再加载css，当网络环境较差时，会出导致页面效果较差的现象
- 兼容性较差 （IE5以上的浏览器支持）
- 属于css
优先级
行内样式 > 内部样式 / 外部引入
就近原则：哪一种设置方式距离元素最近，谁的优先级更高；
CSS选择器
标签选择器
格式:
标签名称{
属性:值;
}
div{
color: pink;
font-size: 28px;
}
id选择器
格式:
#id名称{
属性:值;
}
注意:
1. 每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id
2. 在同一个界面中id的名称是不可以重复的
3. 在编写id选择器时一定要在id名称前面加上#
4. id的名称是有一定的规范的
4.1 id的名称只能由字母/数字/下划线，a-z 0-9 _
4.2 id名称不能以数字开头
4.3 id名称不能是HTML标签的名称，不能是a h1 img input ...
5. 在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为id是留给js使用的
#one{
background-color: red;
}
类选择器
格式:
.类名{
属性:值;
}
.two{
background-color: pink;
}
注意:
1. 每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名
2. 在同一个界面中class的名称是可以重复的
3. 在编写class选择器时一定要在class名称前面加上.
4. 类名的命名规范和id名称的命名规范一样
5. 类名就是专门用来给CSS设置样式的
6. 在HTML中每个标签可以同时绑定多个类名
绑定多个类名的方式：
空格隔开即可。
<div class="div3 div4">我是多类名div</div>
id和class的区别：
1、id相当于人的身份证不可以重复，class相当于人的名称可以重复
2、一个HTML标签只能绑定一个id名称，一个HTML标签可以绑定多个class名称
使用id选择器还是类选择器？
id一般情况下是给js使用的, 所以除非特殊情况, 否则不要使用id去设置样式
后代选择器
格式:
标签名称1 标签名称2{
属性:值;
}
先找到所有名称叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签, 然后在设置属性
<style>
/* 后代选择器(子代 其他后代) 空格隔开 */
div p{
color: pink;
}
</style>
<body>
<div class="div1">
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<div>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
</div>
</div>
</body>
注意:
1. 后代选择器必须用空格隔开
2. 后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
3. 后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器
4. 后代选择器可以通过空格一直延续下去
子元素选择器
格式:
标签名称1>标签名称2{
属性:值;
}
<style>
/* 子代 子元素选择器 >隔开 (直接子代,不包括其他子代) */
.div1>p{
color: blue;
}
</style>
<body>
<div class="div1">
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<div>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
</div>
</div>
</body>
交集选择器
格式:
选择器1选择器2{
属性: 值;
}
<style>
/* 交集选择器 */
p.p1{
color: red;
}
</style>
<body>
<p class="p1">第1个标签</p>
<p id="p2">第2个标签</p>
<p>第3个标签</p>
<p>第4个标签</p>
</body>
注意:
1. 选择器和选择器之间没有任何的连接符号
2. 选择器可以使用标签名称/id名称/class名称
3. 交集选择器仅仅作为了解, 企业开发中用的并不多
并集选择器
格式:
选择器1,选择器2{
属性:值;
}
<style>
/* 并集选择器 */
.p1,#p2{
color: blue;
}
</style>
<body>
<p class="p1">第1个标签</p>
<p id="p2">第2个标签</p>
<p>第3个标签</p>
<p>第4个标签</p>
</body>
注意:
1. 并集选择器必须使用,来连接
2. 选择器可以使用标签名称/id名称/class名称
兄弟选择器
1.相邻兄弟选择器 （CSS2）
格式:
选择器1+选择器2{
属性:值;
}
<style>
/* css2兄弟选择器 */
.p1+p{
color: yellow;
}
</style>
<body>
<p class="p1">第1个标签</p>
<p>第2个标签</p>
<p>第3个标签</p>
<p>第4个标签</p>
<p>第5个标签</p>
</body>
注意:
1. 相邻兄弟选择器必须通过+连接
2. 相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签
2.通用兄弟选择器 （CSS3）
格式:
选择器1~选择器2{
属性:值;
}
<style>
/* css3兄弟选择器 */
.p1~p{
color: pink;
}
</style>
<body>
<p class="p1">第1个标签</p>
<p>第2个标签</p>
<p>第3个标签</p>
<p>第4个标签</p>
<p>第5个标签</p>
</body>
注意:
1. 通用兄弟选择器必须用~连接
2. 通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中
伪类选择器
伪类以" : "开头，用在选择器后，用于指明元素在某种特殊的状态下才能被选中
序选择器（结构伪类选择器）
<style>
/* 伪类选择器 适用范围：同级别 */
p:first-child{
color: aqua;
}
p:last-child{
color: pink;
}
/* div:last-child{
color: pink;
} */
p:nth-child(5){
color: blue;
}
/* 奇数 */
p:nth-child(odd){
color: brown;
}
/* 偶数 */
p:nth-child(even){
color: chartreuse;
}
/* n从0开始 */
p:nth-child(3n+1){
color: goldenrod;
}
/* 同级别同类型 第一个 */
div:first-of-type{
color: red;
}
</style>
<body>
<p>第1个标签</p>
<p>第2个标签</p>
<p>第3个标签</p>
<p>第4个标签</p>
<p>第5个标签</p>
<p>第6个标签</p>
<p>第7个标签</p>
<p>第8个标签</p>
<!-- <div>我是一个div</div> -->
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
</body>
动态伪类选择器
<style>
/* 链接没有被访问过 */
a:link{
color: black;
}
/* 用户已经访问过 */
a:visited{
color: red;
}
/* 鼠标悬停 */
a:hover{
color: yellow;
}
/* 鼠标按住不动 */
a:active{
color: blue;
}
/* 有严格的顺序要求：:link :visited :hover :active
记忆：love hate
*/
</style>
<body>
<a href="https://www.baidu.com">百度一下，你就知道</a>
</body>
否定伪类
格式：
:not(选择器)
<style>
/* 否定伪类 */
p:not(.p2){
color: red;
}
</style>
<body>
<p>第1个p标签</p>
<p class="p2">第2个p标签</p>
<p>第3个p标签</p>
<p>第4个p标签</p>
</body>
伪元素选择器
<style>
/* 在最后面添加内容 */
p::after{
content: '我是一个::after';
}
/* 在最前面添加内容 */
p::before{
content: '我是一个::before';
}
/* 首字符样式 */
p::first-letter{
color: red;
font-size: 28px;
}
/* 首行文字样式 */
p::first-line{
color: pink;
}
</style>
<body>
<p>我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签<br>
我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签
</p>
</body>
属性选择器
一般用于 input 标签
1、[attribute=value]
2、属性的取值是以什么开头的
[attribute|=value] （CSS2）
[attribute^=value] （CSS3）
两者之间的区别:
CSS2中的只能找到value开头,并且value是被-和其它内容隔开的
CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开
3、属性的取值是以什么结尾的
[attribute$=value] （CSS3）
4、属性的取值是否包含某个特定的值
[attribute~=value] （CSS2）
[attribute*=value] （CSS3）
两者之间的区别:
CSS2中的只能找到独立的单词, 也就是包含value,并且value是被空格隔开的
CSS3中的只要包含value就可以找到
<style>
/* 标签[属性=值] */
/* input[type='text']{
background-color: pink;
} */
/* 以什么开头 css2*/
/* input[name|='user']{
background-color: red;
} */
/* css3 */
input[name^='user']{
background-color: blue;
}
</style>
<body>
<form action="">
用户名：<input type="text" name="username">
密码：<input type="password" name="user-name">
</form>
</body>
通配符选择器
*{ }
<style>
/* 作用：去除标签默认样式 */
*{
text-decoration: none;
list-style-type: none;
margin: 0;
}
</style>
<body>
<div>我是一个div</div>
<a href="">百度一下</a>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
CSS三大特性
继承性
给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性
注意:
1.并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承
2.在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承
3.继承性中的特殊性
3.1 a标签的文字颜色和下划线是不能继承的
3.2 h标签的文字大小是不能继承的
层叠性
层叠性发生在多个选择器选中"同一个标签", 然后又设置了"相同的属性", 才会发生层叠性。（这时候要根据优先级来判断哪个生效，优先级相同时，后面的会覆盖前面设置的样式）
优先级
优先级：
1、!important （优先级最高）
2、style内联样式 （权值1000）
3、id选择器 （权值 100）
4、类选择器、伪类选择器、属性选择器 （权值 10）
5、标签选择器、伪元素选择器 （权值 1）
6、通配符选择器、复合选择器（+、>、~等）、否定伪类（：not） （权值0）
扫一扫
473
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
