一、基本概念
1.层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言
2.CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化
3.CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力
4.属性和属性值用冒号隔开，以分号结尾
5.CSS 四种引入方式：
1）行内式——是在标签的style属性中设定CSS样式
<div style="..."></div>
2）嵌入式——是将CSS样式集中写在网页的<head>标签的<style></style>标签对中
<head>
...
<style type="text/css">
...此处写CSS样式
</style>
</head>
3）导入式——将一个独立的.css文件引入HTML文件中，导入式使用@import 引入外部CSS文件，<style>标记也是写在<head>标记中，
导入式会在整个网页装载完后再装载CSS文件
<head>
...
<style type="text/css">
@import "My.css"; 此处注意.css文件的路径
</style>
</head>
4）链接式—— 将一个独立的.css文件引入到HTML文件中，使用<link>标记写在<head>标记中，链接式会以网页文件主体装载前装载CSS文件
6.样式应用顺序：
1）行内样式优先级最高
2）针对相同的样式属性，不同的样式属性将以合并的方式呈现
3）相同样式并且相同属性，呈现方式在<head>中的顺序决定，后面会覆盖前面属性
4）!important 指定样式规则应用最优先
二、常用属性分类
1.字体
1）font-family 字体名称
2）font-size 字号大小
3）font-style 斜体字的名称（normal正常状态、italic斜体字、oblique 斜体和正常状态之间）
4）font-weight 字体粗细（取值是：number(100～900) 或者参数 lighter（细体） 和bold(粗体)bolder（特粗体））
5）text-transform 参数
（1）uppercase 所有文字大写显示
（2）lowercase 所有文字小写显示
（3）capitalize 每个单词的头字母大写
（4）none 不继承母体的文字变形参数
6) text-decoration 参数
（1）underline 为文字加下划线
（2）overline 为文字加上划线
（3）capitalize 使文字闪烁
（4）none 不显示上叙任何效果
7) color #rrggbb或者 #rgb(也可以简单的英语颜色单词)
8) font 可以用font 属性全部定位,示例：p{font:italic bold 12pt;}
2.背景
1）background-color 背景颜色
2）background-image 背景图片{background-image:url('http://baidu.com/zhouliang.gif')}
3）background-repeat 参数
（1）repeat 表示图像从水平和垂直角度平铺
（2）no-repeat 不重复平铺背景图片
（3）repeat-x 使图片只在水平方向上平铺
（4）repeat-y 使图片只在垂直方向上平铺
4）background-attachment参数
（1）fixed 网页滚动时，背景图片相对浏览器而言固定不动
（2）scroll 网页滚动时，背景图片相对浏览器而言一起滚动
5）background-postion 背景定位
（1）top 相对前景对象顶对齐
（2）bottom 相对前景对象底对齐
（3）left 相对前景对象左对齐
（4）right 相对前景对象右对齐
（5）center 相对前景对象中心对齐
说明：一般用坐标的方式来确定图片的位置
6）background 可以直接用 background 复合属性来确定式样，示例：table{background:#001122 url(zhouliang.jpg) no-repeat bottom right}
3.文本
1）word-spacing 英文单词间距（取值可以是：normal或者是单位像素）
2）letter-spacing 英文字母间距（取值可以是：normal或者是单位像素）
3）line-height 行距（可以是精确的值，也可以是百分比）
4）text-aglin 文本水平排列
（1）left 左对齐
（2）right 右对齐
（3）center 居中
（4）justify 相对左右对齐
注意到：text-aglin 是块级属性，只能用于<p><blockquqte><ul><h1>-<h6>等表示符里
5) vertical-align 文本垂直排列
（1）top 顶对齐
（2）bottom 底部对齐
（3）text-top 相对文本顶对齐
（4）text-bottom 相对文本底对齐
（5）baseline 基准线对齐
（6）middle 中心线对齐
（7）sub 以下标的形式对齐
（8）sup 以上标的形式对齐（相对于元素行高属性的百分比）
6）text-indent 文本缩进（缩进距离必须是值或者%比）
7）white-space 设置元素中空白的处理方式
（1）normal 合并连续的多个空格
（2）pre 保留原样式
（3）nowrap 不换行，直到遇到<br>标签
8）text-decoraition
（1）none 表示不对文本进行修饰，也是默认值，
（2）underline 表示对文字添加下划线
（3）overline 表示添加上划线
（4）line-through 表示对文本添加删除线
（4）blink 表示文字具有闪烁效果
9）text-transform 文本转换
（1）none 表示原有值
（2）capitalize 使每个字的第一个字母大写
（3）uppercase 大写
（4）lowercase 小写
4.定位——可以用来控制任何网页元素在浏览器文档窗口中的位置
1）position
(1)absolute 采用绝对定位（分别用四个边框来定位）
(2)relative 采用相对定位（也得用四个边框来设定位置）
(3)static 默认值
2)left/top/width/height
3)z-index 也就是元素的堆叠,大的在上，小的在下。默认是按照先后顺序取值auto默认值，表示它遵循其父对象的定位属性；如果设置为数字,必须是无单位的正整数，可以取负值，但是一般为正数,一般数字为1时间是最底层
5.布局
1）visibility 可视性
（1）inherit 表示对象继承父本的继承性
（2）visible 表示对象可见
（3）hidden 表示对象隐藏
2）display 设置或检索对象是否及如何显示（设置值：block、inline、list-item、none，inline-block）
3) clip 可视区域
（1）auto 表示对象不裁剪
（2）rect (数值表示)(一般有四个设置值：方向定位于上右下左的顺序，一般以左上角(0,0)坐标计算4个偏移数值。其中任何一个值都可以用auto代替)
4)overflow 超出范围
（1）isible 扩大浏览器
（2）hidden 裁剪掉多余的文本
（3）scroll 滚动条
（4）auto 当有多余的时候才显示滚动条
5)float 浮动属性
(1)left 表示文字浮在元素左侧
(2)right 表示文字浮在元素右侧
(3)none 默认值，表示不浮动
6）clear left ,right,none,both;指要清除本元素四周的浮动对象
7）page-break-before 设置值：always 是否强制分页
8）page-break-after 设置值：always 打印后设置是否强制分页
9) width和height 表示层的宽度与高度。设置值为 auto|数值
6.边距与填充属性
1) margin 复合属性,与边距的距离 (margin-top margin-left margin-bottom margin-left,说明：取值可以是一个或者两个或者三个或者四个,auto默认,%比或者具体的值)
2) padding 复合属性填充（指用白值填充）,说明：和margin的用法一样
3) border-width 边框宽度(取值为：medium 默认宽度；thin 细边框 thick 粗边框)
(1)border-top-width 上边框宽度
(2)border-right-width 右边框宽度
(3)border-bottom-width 底边框宽度
(4)border-left-width 左边框宽度
4)border-style
(1)border-top-style 上边框样式
(2)border-right-style 右边框样式
(3)border-bottom-style 底边框样式
(4)border-left-style 左边框样式
取值：
none 不现实边框，为默认值
dotted 点线（电线）
dashed 虚线，也称短线
solid 实线
double 双实线
groove 边框带有立体感的沟槽
ridge 边框成脊形
inset 使整个表框凹陷，即在边框内嵌入一个立体边框
outset 使整个边框凸起，即在边框外嵌入一个立体边框
5）border-color 设置边框的颜色：用法同上margin
6）border 复合属性：border:边框宽度|样式|颜色
7.列表
1）list-style-type 指显示于列表项前的标识符号（none 表示不显示列表符号）
2）list-style-postion 列表缩进，列表位置描述列表在何处显示
（1）inside 列表内容和列表标识符号处在不同垂直位置，在符号内测
（2）outside 列表内容和列表标识符号处在同一垂直位置
3）list-style-image 用图片符号作为链接标题（none 表示不指定图像，url(网页地址) 指定图片位置）
4) list-style 复合属性,实现以上三种属性
8.光标属性
1) cursor 当点击某个内容时，鼠标显示其他的图形
(1) style="cursor:hand" 手形
(2) style="cursor:crosshair" 十字形
三、CSS选择器
1.基本选择器
1）通用元素选择器 * 表示应用到所有的标签
* {color: yellow}
2）标签选择器 匹配所有使用 div 标签的元素（可以匹配所有标签）
div {color: yellow}
3）类选择器 匹配所有class属性中包含info的元素（类名不能以数字开头，类名要区分大小写）
.mycolor {color: yellow}
<h3 class="Mycolor">nick</h3>
4) ID选择器 使用id属性来调用样式，在一个网页中id的值都是唯一的（是W3C规范而不是规则，所以不会报错）
#mycolor {color: yellow}
<h3 id="Mycolor">Nick.</h3>
2.组合选择器
1）多元素选择器 同时匹配h3,h4标签，之间用逗号分隔
h3,h4 {color: yellow;}
2）后代元素选择器 匹配所有div标签里嵌套的p标签，之间用空格分隔
div p {color: yellow;}
3）子元素选择器 匹配所有div标签里嵌套的子P标签，之间用>分隔
div > p {color: yellow;}
4）毗邻元素选择器 匹配所有紧随div标签之后的同级标签P，之间用+分隔（只能匹配一个）
div + p {color: yellow;}
3.伪类选择器
1）link、hover、active、visited
（1）a:link （未访问的链接状态）,用于定义了常规的链接状态
（2）a:hover （鼠标放在链接上的状态）,用于产生视觉效果
（3）a:active （在链接上按下鼠标时的状态）
（4）a:visited （已访问过的链接状态）,可以看出已经访问过的链接
实例： a:link{color: black}
a:hover{color: yellow}
a:active{color: blue}
a:visited{color: red}
2）before、after
（1）p:before 在每个<p>元素的内容之前插入内容
（2）p:after 在每个<p>元素的内容之后插入内容
4.属性选择器
1）[title] & p[title] 设置所有具有title属性的标签元素 & 设置所有具有title属性的p标签元素
2) [title=Nick] 设置所有title属性等于“Nick”的标签元素
3) [title~=Nick] 设置所有title属性具有多个空格分隔的值、其中一个值等于“Nick”的标签元素
<p title="Nick Jenny">Nick</p>
<p title="Jenny Nick">Nick</p>
4) [title|=Nick] 设置所有title属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以"Nick"开头的标签元素
<p title="Nick-Jenny">Nick</p>
5) [title^=Nick] 设置属性值以指定值开头的每个标签元素
<p title="NickJenny">Nick</p>
6) [title$=Nick] 设置属性值以指定值结尾的每个标签元素
<p title="JennyNick">Nick</p>
7) [title*=Nick] 设置属性值中包含指定值的每个元素
<p title="SNickJenny">Nick</p>
四、CSS规范
1.书写顺序
1）位置属性 (position, top, right, z-index, display, float等)
2）大小 (width, height, padding, margin)
3）文字系列 (font, line-height, letter-spacing, color- text-align等)
4）背景 (background, border等)
5）其他 (animation, transition等)
参考网址
注：文章是经过参考其他的文章然后自己整理出来的，有可能是小部分参考，也有可能是大部分参考，但绝对不是直接转载，觉得侵权了我会删，我只是把这个用于自己的笔记，顺便整理下知识的同时，能帮到一部分人。
ps : 有错误的还望各位大佬指正,小弟不胜感激
8815
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
