阅读提示
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化
一、css的语法
(1) 格式
选择器{属性:值;属性:值…}
其中选择器 也叫选择符
(2) 注释
/*注释的内容*/
多行注释 不能嵌套多行注释
二、在HTML中如何使用css样式
(1) 内联样式 （行内样式）
就是在HTML标签中 使用style属性 来设置css样式
格式： <html标签 style=“属性名:属性值;属性名:属性值;”></html标签>
使用：
<div style="border:1px solid blue;color:red;font-size: 20px;font-weight: bold;">行内样式</div>
特点：
只对当前标签起作用
(2) 内部样式(内嵌样式)
就是在html的head头中 添加style标签
格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
span{
display: block;
width: 200px;
height: 200px;
border: 3px double blue;
}
</style>
</head>
<body>
<span>我是span行级标签</span>
</body>
</html>
特点：
作用于当前的整个页面
(3) 外部导入（外部链入）
link.css
div{
border: 2px solid blue;
border-radius: 50px;
width: 100px;
height: 100px;
}
俩种方式：
使用link标签
<link href="**.css" rel="stylesheet" type="text/css">实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="link.css"> <style> </style> </head> <body> <div></div> </body> </html>使用css的导入方式
<style> @import '**.css' </style>实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> @import "link.css"; </style> </head> <body> <div></div> </body> </html>
特点：
作用于整个网站
俩种导入的区别：
link属于HTML标签 @import是属于css的语法
加载顺序区别
在加载页面的时候 link标签引入的css样式被同时加载
@import 引入的css样式 在页面加载完成以后被加载
兼容性的区别
@import 是css2.1的时候 才有的语法 所以只能在IE5+才能识别 link标签作为HTML标签 不存在兼容问题
三、css2的选择符
命名规则：
使用数字字母下划线 和 减号组成 不要以数字作为开头
(1) HTML选择器（也叫标签选择器）
HTML选择器 顾名思义就是 HTML标签作为css的选择符(选择器)
格式：
HTML标签名{属性名:属性值;}
特点：
网页中 所有的当前的这个标签 都会采用此样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
display: block;
width: 200px;
height: 200px;
background-color: orange;
}
</style>
</head>
<body>
<span></span>
<span></span>
<span></span>
</body>
</html>
(2) class选择符（类选择器）
定义： 通过给HTML标签添加 class属性
使用：.+class名称{属性名:属性值}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.span{
display: block;
width: 200px;
height: 200px;
background-color: orange;
}
</style>
</head>
<body>
<span class="span"></span>
<div class="span"></div>
</body>
</html>
特点：
只要标签中叫这个类名的 都采用此样式（可以被多次引用）
(3) ID选择符(ID选择器)
定义: 给标签中添加id属性
使用： #id名{属性名:属性值;}
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#span{
display: block;
width: 200px;
height: 200px;
background-color: orange;
}
</style>
</head>
<body>
<span id="span"></span>
<div id="span"></div> #错误的写法 id选择器的样式只能被使用一次
</body>
</html>
特点:
id选择器只能被使用一次 不能被多次引用（多次引用也好使）
注意
- 如果一个标签有多个选择器来设置样式 不冲突（样式会叠加） 冲突（如果选择器为同一个选择器 则就近原则 谁离的近就听谁的）
- 如果选择器不同 则优先级为 ID>Class>HTML选择器
(4) 关联选择符（关联选择器 包含选择器）
格式： 选择符1 选择符2 选择符3{}
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul li{
border: 1px solid red;
}
</style>
</head>
<body>
<ul>
<li>ul里面的li</li>
</ul>
<li>就是li</li>
</body>
</html>
特点：
只有 ul 里面的li 才会采用此样式
(5) 组合选择符(选择符组)
格式：选择符1,选择符2,选择符3{}
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body,ul,ol,dl,dt,dd,li,a{
padding: 0;
margin: 0;
text-decoration: none;
color: #000;
}
</style>
</head>
<body>
</body>
</html>
特点：
多个选择器共用一个样式
一般作为网页页面样式的初始化
选择符使用HTML选择器
原因： HTML选择器 优先级最低 也就是说 可以被别的选择器 或者就近原则 给原有样式的设置 替换掉
(6) * 通配符(全局选择器)
说明：
通配符的写法为 * 其含义就是所有元素
用法：
常用来重置样式
*{padding:0;margin:0;}
注意：
会给所有标签 都采用此样式
四、CSS3选择器
(1) 关系选择器
div>p 选择div中所有的子元素p
div+p 选择div紧贴着的p元素
div~p 选择div后面所有的同级p元素
(2) 属性选择器
[attr] 选择具有attr属性的标签
[attr=value] 选择具有attr属性 并且属性值等于value的标签
[attr^=value] 选择具有attr属性 并且属性值以value作为开头
[attr$=value] 选择具有attr属性 属性值以value作为结尾
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*选择input标签具有name属性的节点*/
/*input[name]{*/
/*input[type=text]{*/
/*input[type^=p]{*/
/*input[type$=t]{*/
input[name*=u]{
color: red;
}
</style>
</head>
<body>
<input type="text" name="username" value="用户名"><br>
<input type="password" name="userpass" value="密码">
</body>
</html>
(3) 结构性伪类选择器
::first-letter 设置对象内第一个字符的样式
::first-line 设置对象内第一行的样式
:before 设置在对象内之前发生的内容
:after 设置在对象内之后发生的内容
/*span:before{*/
span:after{
/*必须的content属性*/
content: 'Hello';
border:1px solid red;
color: red;
}
:first-of-type 匹配同类型中的第一个同级兄弟元素
:last-of-type 匹配类型中的最后一个同级兄弟元素
:nth-of-child 匹配类型中的 某一个同级兄弟元素
:first-child 匹配父元素的第一个子元素
:last-child 匹配父元素的最后一个子元素
:nth-child(n) 匹配某一个子元素
:nth-last-child(n) 匹配倒数第几个元素
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*ul li:first-child{*/
/*ul li:last-child{*/
/*ul li:nth-child(2){*/
/*ul li:nth-last-child(3){*/
ul li:nth-child(2n){
border: 4px solid blue;
height: 20px;
}
ul li:nth-child(2n+1){
border: 4px solid red;
height: 20px;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>3</li>
<li>3</li>
<li>3</li>
<li>3</li>
<li>3</li>
</ul>
</body>
</html>
注意：
type和child的区别：
child所指定的必须为第一个或者最后一个 否则不生效 但是type可以
(4) 状态伪类选择器
:link 设置超链接a在未被访问前的样式
:visited 设置超链接a在访问过后的样式
:active 设置元素再被用户激活时候的样式
*: 设置鼠标在悬停时候的样式（比较重要）
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*位置不要乱写 否则不生效*/
a:link{
color: #F00;
text-decoration: none;
}
a:visited{
color: #0F0;
text-decoration: none;
}
a:hover{
color: #F0F;
text-decoration: underline;
}
a:active{
color:#00FFFF;
text-decoration: underline;
}
</style>
</head>
<body>
<a href="">点击我</a>
</body>
</html>
:focus 设置元素在获取焦点时候的样式
:target 匹配相关url指向的元素 将锚点跳转的代码进行设置
:disabled 匹配用户界面上处于禁用状态的标签
:checked 匹配用户界面上处于选中状态的元素
:selection 设置对象被选择时的样式
1293
(5) !important 应用优先权
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
color:red !important;
background-color: #000;
}
p{
color: #ffffff;
}
</style>
</head>
<body>
<p>拼搏到无能为力 坚持到感动自己</p>
</body>
</html>
注：添加！important后 该属性不会被后续的同属性替换掉
五、CSS常用的属性
(1) color颜色属性
RGB 分别代表 红 绿 蓝 颜色值的区间在 0~255之间
实例
background-color:rgb(255,0,0)RGBA 分别代表 红 绿 蓝 透明度 那其中透明度值的区间在0-1之间
实例：
background-color:rgba(255,0,0,0.5)十六进制 0-F
background-color:#FF0000;opacity 图片的透明度 取值范围在 0-1之间
实例
<style> img{ opacity: 0.5; } </style> <img src="./2.jpg" alt="">
(2) font 字体属性
font：[ [ <’ font-style ‘> ||
<’ font-variant ‘> || <’ font-weight ‘> ]? <’ font-size ‘> [ / <’ line-height ‘> ]? <’ font-family '> ]
font-style normal正常 italic
font-variant small-caps 小型的大写字母字体
font-weight 字体加粗 bold
font-size 字体大小
font-family 字体
注意：
使用第一种声明方式参数必须按照如上的排列顺序，且 <’ font-size ‘> 和 <’ font-family '> 是不可忽略的。每个参数仅允许有一个值
实例
<style>
p{
/*font-size: 20px;*/
/*font-family: 宋体,楷体;*/
/*font-style: italic;*/
/*font-weight: bold;*/
/*font-variant: small-caps;*/
/* 组合式写法 */
font:italic small-caps bold 20px/2 宋体,楷体;
}
</style>
</head>
<body>
<p>拼搏到无能为力 坚持到感动自己 Hello World</p>
(3) 文本属性
text-indent 首行缩进 2em 首行缩进俩个字符
text-overflow 文本溢出是否使用省略标记… clip|ellipsis(不显示省略标记|显示省略标记)
text-align 文本的位置 left|center|right
text-transform 对象中文本的大小写： capitalize首字母大写|uppercase大写|lowercase小写
text-decoration 字体划线 none无 underline下滑下 line-through贯穿线
text-shadow 设置文本文字的阴影和模糊值 水平 垂直 模糊值 颜色
eg: text-shadow: 5px 5px 2px aqua;
vertical-align 文字的垂直对其方式 middle居中
实例
<style>
span{
font-size: 40px;
vertical-align: middle;
}
</style>
<span>老婆</span>老公
white-space nowrap 不让文本换行
实例 实现文字超出显示…
width:400px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
letter-spacing 文字或者字母的间距
line-height 当设置文字内容垂直居中的时候 使用的最多
word-break 让超出边框的文字换行 break-all
(4) border 边框
border-color 边框颜色
border-style solid 边框样式
border-width 边框宽度
border:宽度 样式 颜色;
实例
li:first-child{
border-left-color:red;
border-left-style: dotted;
border-left-width: 2px;
}
li:nth-child(2){
border-right:2px dashed #000;
}
li:nth-child(3){
border-color:green;
border-style: double;
border-width: 2px;
}
li:nth-child(4){
border:5px groove red;
}
border-radius 圆角处理
/*四个角*/
/*border-radius:20px;*/
/*对角*/
/*border-radius:20px 40px;*/
/*左上 右上左下 右下*/
/*border-radius:20px 40px 60px;*/
/*左上 右上 右下 左下*/
/*border-radius:20px 40px 60px 80px;*/
box-shadow 设置检索对象阴影
(5)background 背景
background-color 背景颜色
background-image 背景图片
background-repeat 背景平铺 no-repeat 不平铺 repeat-x repeat-y
backgroundd-position 定位
center 居中
left 左侧
right 右侧
top 顶部
bottom 底部
background-attachment 是否固定背景 scroll默认随着浏览器滚动 fixed背景图像固定
background-size 背景图片的大小
实例
div{
width: 800px;
height: 800px;
border:1px solid red;
/*background-color: aqua;*/
background-image:url(2.jpg);
/*background-image:url(1.gif);*/
background-repeat:no-repeat;
/*background-repeat:repeat-x;*/
/*background-repeat:repeat-y;*/
/*background-position: center;*/
/*background-position:left;*/
/*background-position:right;*/
/*background-position:left 100px top 50px;*/
/*background-attachment: fixed;*/
/*background-attachment: scroll;*/
/*background-size:400px 400px;*/
/*background: aqua url(2.jpg) no-repeat scroll center / 400px 400px;*/
background: aqua url(2.jpg) no-repeat fixed center / 400px 400px;
}
(6) margin 外补白（外边距）
margin
一个参数 代表四边
二个参数 上下左右
三个参数 上左右下
四个参数 上右下左
margin-top 距离顶部的边距
margin-bottom 距离底部的边距
margin-left 距离左侧边距
margin-right 距离右侧边距
margin:auto; 水平居中(不能水平和垂直都居中)
注意：
外边距会重合 也就是说 margin-bottom:10px; margin-top:10px;
(7) padding 内补白(内边距)
padding 一个值的情况下 为4边
padding-top 距离顶部
padding-bottom 距离底部
padding-left 距离左侧
padding-right 距离右侧
(8) 盒子模型
css定义所有的元素都可以拥有像盒子一样的外形和平面空间 即包含边框 外边距 内边距以及内容
计算公式
宽 = 左右margin+左右border+左右padding+内容宽
高 = 上下margin+上下border+上下padding+内容高
怪异盒子模型
从左边边框到右边边框之间的距离 才是宽度（计算宽度非常容易）
box-sizing:border-boxs
(9) Position 定位
position absolute(绝对定位)|fixed（固定定位）|relative（相对定位）
left 距离左侧的距离
right 距离右侧的距离
top 距离顶部的距离
bottom 距离底部的距离
z-index 层叠顺序 值越大越在上方
注意：
- 绝对和固定定位 是不会保留其物理空间的（漂浮在我们的样式的上一层）
- 相对定位 是相对于当前的位置的改变而改变的（通常用于页面样式的微调）
- position中的绝对定位和相对定位会参照外层的定位而定位 如果外层都没有定位 则参照最终的body体而定位
- position的固定定位 会参照最终的body体来定位
(10) layout 布局
display 如何显示 none（隐藏）|block（块状显示）|inline-block（行级的块级标签）
float 浮动 left(左浮动)|right(右浮动)|none(不浮动)
clear 清除浮动 left(左侧)|right|(右侧)|both(left和right)
overflow-x 内容超出给定宽度 怎样处理
overflow-y 内容超出给定高度 怎样处理
resize 调节对象大小的属性 none（不允许）
cursor 光标的形状 pointer（小手）
总结
层叠样式表（Cascading Style Sheet，CSS）有助于实现负责任的Web设计。CSS对开发者构建Web站点的影响很大，并且这种影响可能是无止境的。将网页的大部分甚至是全部的表示信息从（X）HTML文件中移出，并将它们保留在一个样式表中有诸多优点，如降低文件大小、节省网络带宽以及易于维护等。此外，站点的表现信息和核心内容相分离，使得站点的设计人员能够在短暂的时间内对整个网站进行各种各样的修改。
CSS简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量（因为重复设置的格式将被只保存一次）。只要修改保存着网站格式的CSs样式表文件就可以改变整个站点的风格特色，在修改页面数量庞大的站点时，显得格外有用。这就避免了一个个网页的修改，大大减少了工作量。