本文详细讲解了CSS的概念、基本语法，包括选择器、颜色表示、使用方式（内联、内嵌、外部导入）以及注释、优先级和各种选择器、属性。还介绍了布局技巧、盒子模型、浮动和页面设计规范，以及关键的CSS特性如背景、字体和文本处理。
CSS的概念
层叠样式表
主要控制网页的样式和布局
能够使样式、布局和标记能够分离的语言
CSS的基本语法
选择器{
属性1:值1;
属性2:值2;
....
属性n:值n;
}
注意：
1、每个属性/值一对的后面加上分号
2、web浏览器将会忽略空格和回车
CSS颜色的四种表示方法
color:颜色值，设置字体的颜色
1）、16进制的数字。
2）、英文单词
3）、rgb颜色，格式为：rgb(红，绿，蓝);
4）、rgba颜色，格式：rgba(红，绿，蓝，透明度);
透明度：0~1之间，0为完全透明
CSS的使用方式
内联方式
在HTML的body标签中使用属性来设置CSS样式
格式：
<标签名style="属性1:值1;属性2:值2...."></标签名>
特点：仅作用于本标签
内嵌方式
在head标签中使用<style>标签来设置CSS样式
特点：作用于当前整个页面
格式：
<style>
选择器{
属性1：值1;
属性2:值2;
.........
}
</style>
外部导入方式
格式：
<linkhref=
"文件名.css"type="text/css"rel="stylesheet"/>
href，哪个CSS样式文件。
type，text/css这是一个css文件。
rel，样式表。
特点：
如果整个网站都引入这个CSS文件，文件中的CSS将可以作用到整个网站的页面中。
注意：
1、以上三种方式，当样式冲突时，采用就近原则。如果没有属性冲突的时候将会叠加。
CSS的注释符：
/*注释的内容*/
选择器
HTML选择器(标签选择器)
用HTML标签作为选择器的名称来选择
ID选择器
在HTML标签中定义一个ID属性，然后在CSS中使用#ID属性对应的值
作为选择器来使用。
方式：#ID值
class选择器
在HTML标签中定义一个class属性，然后在css中使用.class属性对应的值来选择。
注意事项：
1、ID选择器在规范中一个ID的值只能在一个页面中出现一次。
2、类选择器，class选择器，因为，他们属于一类。一类中可以包含多个。
3、一个标签可以属于多个类：使用的时候：class="类1类2"
.类名
组合选择器
将所有的选择器一并写出来，一起选择。
选择器1,选择器2,选择器3
层次选择器
后代选择器：EF
选择匹配的F元素，且匹配的F元素被包含在E元素内。
子选择器：E>F
选择匹配的F元素，且匹配的F元素是E元素的子元素。
（这俩是兄弟，必须得是同辈的）
相邻兄弟选择器：E+F
选择匹配的F元素，且匹配的F元素仅位于匹配的E元素的后面。
通用选择器：E~F
选择匹配的F元素，且位于匹配的E元素后面的所有的F元素。
伪类选择器
伪：不存在于HTML中，只有当用户和网站交互时才会体现出来。
E:link
匹配的E元素，且E元素未被访问过。
E:visited
匹配的E元素，且已经被访问过。
E:hover
匹配的E元素，且用户鼠标悬停在上面。
E:active
匹配的E元素，用户点击的那一刹那。
注意：必须遵守一个“爱恨原则”，LoVe/Hate（？）
Link-->visited->hover->active
E:focus：
选择匹配的E元素，当E元素获得焦点时。
E:target：
锚点指向的时候会触发。
background-color:背景颜色
结构性伪类选择器
E:first-child：
选择父元素的第一个子元素且元素为E的元素。
E:last-child：
选择父元素的最后一个子元素且元素为E的元素。
E:nth-child(n)：
选择父元素的第n个子元素且元素为E的元素。
n，表示一个整数，也可以是关键字odd奇数，even偶数。
E:first-of-type：
选择父元素中第一个E元素。
E:last-of-type：
选择父元素最后一个E元素
E:nth-of-type(n)：
选择父元素的第n个E元素。
属性选择器
E[attr]：
选择匹配具有attr属性的E元素。
E[attr='val']：
选择匹配具有attr属性的E元素，且attr属性的值为val
E[attr*='val']：
选择匹配具有attr属性的E元素，且attr属性的值的任意位置出现了val
E[attr^='val']：
选择匹配具有attr属性的E元素，且attr属性的值以val开始。
E[attr$='val']：
选择匹配具有attr属性的E元素，且attr属性的值以val结束。
选择器优先级
计算优先级：
1、一个标签选择器1分
2、一个类选择器10分
3、一个ID选择器100分
4、一个内联方式1000分
5、一个伪类选择器10分
6、属性选择器10分
7、层次选择器，先拆开然后进行相加。
注意事项：
1、数值越大，权重越高。
2、权重值相同时候最后一个样式胜出。
3、如果要忽略权重值时，需要在属性后面加上!important（一般不用）。
字体属性
font-family
指定想要的字体。
格式：font-family:字体1,字体2,字体3....
注意：
1、使用的是客户端的字体。
2、如果客户端没有这个字体，将会使用浏览器默认的字体。
3、可以使用多个字体，方便客户端无此字体的话可以直至找到想要的字体，如果第一个没有找到就看第二个能不能找到，如果第二个找到了那么就直接使用不再向下寻找。
存储字体的位置
C:\Windows\Fonts中存储的是你的所有字体。
font-size
设置字体的大小
px：像素值。
百分比：按照基准文本尺寸的百分比来进行计算。62.5%=10px
em:按照基准尺寸来进行计算。1em=16px;
font-style
字体风格
格式：
font-style:值
值：
normal，默认值
italic，斜体
font-weight
定义字体粗细
格式：
font-weight:粗细
值：
normal，默认值
bold，定义粗体字体。
line-height
定义行高
格式：line-height:值
值：
px
em
%
数值，没有单位，表示以数值乘以文本的大小来计算。
font-size
font-family
font-style
font-weight
简写方式：
font:styleweightsize/line-heightfamily;
注意：
1、必须指定字体大小和字体的系列
2、注意顺序。
文本属性
color
设定文字颜色
格式：color:值
值：
单词
16进制
rgb
rgba
text-transform
定义字母大小写
格式：text-transform:值
值：
none，默认，标准
capitalize，每个单词以大写字母开头
uppercase，都大写
lowercase，都小写
text-decoration
修饰文本
格式：text-decoration:修饰值
值：
none，标准文本
underline，文本的下划线
overline，上划线
line-through，贯穿线
注意：可以使用多个值：text-decoration:underlineoverlineline-through;
text-shadow
文本阴影
格式：text-shadow:左右阴影上下阴影模糊度颜色
注意：
1、左右阴影为负数放在文本左侧，正数放在文本右侧。
2、上下阴影为负数表示放在文本上，正数文本下。
3、模糊度值越大表示越模糊，0px表示完全不模糊
4、IE9之前不支持。
text-align
对齐文本
格式：text-align：值
值：
left：默认的，左边。
right：右边
center：居中。
注意：只能用于块状元素。
text-indent
首行文本缩进
格式：
text-indent：值
值：
px
em
百分比，基于父元素的宽度的百分比来进行缩进。
width:宽度
height:高度
border:1pxsolidgreen;
overflow
规定内容溢出元素框时候发生的事情
格式：overflow:值
值：
visible，默认值，内容不会更改。
hidden，超出的内容被隐藏。
scroll，带滚动条。
word-break
用于设置对象内文本的换行行为。
格式：word-break：值
值：
normal，默认值，根据语言自己的规则确定换行方式。
break-all：自动进行换行。
列表属性
list-style-type
列表项的标志。
格式：list-style-type:值
值：
none,无标记
list-style-image
使用图片作为列表项的标志。
格式：
list-style-image:url('图像地址');
list-style-position
设置列表项标记的位置。
格式：list-style-position:值
值：
inside，放置在文本以内。
outside，默认值，放置在文本以外。
简写：
list-style:list-style-imagelist-style-typelist-style-position
注意：如果有image会将type的值给覆盖掉。
表格选项
border-collapse
设置表格的边框是否显示为单一边框。
格式：border-collapse:值
值：
separate，默认值，边框会被分开
collapse，边框合并为一个单一的边框。
注意：怎么使用通常先给table标签设置border-collapse，然后给table、th、td设置border边框属性:border:1pxsolidred;
border-spacing
设置相邻单元格之间的距离
格式：border-spacing:值
值：
一个值，表示水平和垂直距离。
两个值，第一个值表示水平距离，第二个值表示垂直距离。
注意：border-spacing只能用在border-collapse为默认值的时候用。
caption-side
设置表格标题的位置
格式：caption-side:值
值：
top：上，默认值
bottom：下
left，左
right，右
vertical-align
垂直对齐方式：
格式：vertical-align:值
值：
top，上对齐
middle，垂直居中，默认值
bottom，底端对齐。
盒子模型
盒子模型的概念
浏览器把每个元素都做一个盒子模型，任何的标签都是里面装有东西的盒子。包括文本、包括图像。
盒子模型的组成
每个盒子都是由宽度、高度、内边距、边框、外边距组成。
width：
定义元素内容的宽度。
格式：width:值
值：
auto，浏览器会自动的计算出实际的宽度。
px
%，包含他的块级元素（父元素的百分比宽度）。
注意：行内元素标签会忽略width属性
height：
定义元素内容的高度。
格式：height:值
值：
auto，默认
px
%，包含他的块级元素（父元素的百分比高度）。
注意：行内元素标签也会忽略height属性
padding：
内边距，定义内边距距离
格式：
1、padding-top:设置上内边距
2、padding-right：右内边距
3、padding-bottom:下内边距
4、padding-left:左内边距
简写方式：
padding:上内边距右内边距下内边距左内边距
4值：上-》右-》下-》左
3值：上-》右左-》下
2值：上下-》右左
1值：上右下左
采用“顺时针”原则
border：
是围绕元素内容和内边距的一条或多条线
border-style：
定义了边框的样式。
格式：
border-top-style:上边框样式
border-right-style:右边框
border-bottom-style:下边框
border-left-style：左边框
值：
none，无边框
border-style:顺时针原则
4值：上-》右-》下-》左
3值：上-》右左-》下
2值：上下-》右左
1值：上右下左
border-width:
定义边框的宽度
格式：
border-top-width:上边框宽度
border-right-width:右边框
border-bottom-width:下边框
border-left-width：左边框
简写：border-width:
4值：上-》右-》下-》左
3值：上-》右左-》下
2值：上下-》右左
1值：上右下左
border-color:
定义边框的颜色
格式：
border-top-color:上边框颜色
border-right-color:右边框
border-bottom-color:下边框
border-left-color：左边框
简写：border-color:
4值：上-》右-》下-》左
3值：上-》右左-》下
2值：上下-》右左
1值：上右下左
颜色：
颜色名
rgb
rgba
十六进制
transparent:
透明颜色。默认值
border:宽度样式颜色;
border-top:
border-right:
border-bottom:
border-left:
border-radius：
边框圆角
格式：border-radius:值
值：
1个值：左上、右上、右下、左下
2个值：左上、右下-》右上、左下
3个值：左上-》右上、左下-》右下
4个值：左上-》右上-》右下-》左下
注意：
img标签是特殊的行内元素标签。它能够应用width和height并且多个img不会产生换行。
box-shadow：
盒子阴影
格式：box-shadow:
水平阴影的位置垂直阴影的位置模糊度阴影的尺寸
阴影的颜色阴影的类型
值：
水平阴影的位置：正值右边，负值到左边。
垂直阴影的位置：正值下边，负值到上边。
阴影的类型：不填的时候为外阴影，inset表示内阴影。
background：
背景属性
background-color：
设置元素的背景颜色
格式：background-color:颜色值
注意：使用背景的时候会连同边框一起覆盖。
opacity：
透明属性
格式：opacity:值
值：默认为1，可以使用0~1之间的任意浮点数，值为1时，完全不透明，为0的时候完全透明。
rgba和opacity的区别：
1、rgba是用来对元素设置透明度，针对元素的背景色、文字颜色、边框颜色。
2、opacity，只能给整个元素背景设置一个透明度，并且其透明度会直接继承给后代元素。
background-image：
设置元素的背景图片。
格式：background-image:url('图像地址');
background-repeat：
设置是否及如何重复背景图像
格式：background-repeat:值
值：
repeat：默认值，背景图像将在垂直方向和水平方向重复。
repeat-x：水平方向重复
repeat-y：垂直方向重复
no-repeat：不重复。
background-attachment：
设置背景图像是否固定或随着页面的其他部分滚动
格式：background-attachment:值
值：
scroll，默认值。背景图像随着页面其余部分的滚动而滚动。
fixed，当页面的其余部分滚动时，背景图像不会移动。
background-position:
设置背景图像的开始位置，默认的时候是从左上角开始。
值：
Xpx,Ypx，第一个值是水平位置，第二个值是垂直位置。
0px0px
简写方式：
background:colorimagerepeatattachment;
margin：
设置元素的外边距
1、margin-top:
2、margin-right:
3、margin-bottom:
4、margin-left:
简写格式：margin:值;
4值：上-》右-》下-》左
3值：上-》右左-》下
2值：上下-》右左
1值：上右下左
box-sizing:
规定两个并排的带边框的框，以特定的方式匹配某个区域内的特定元素。
格式：box-sizing:值;
值：
content-box:默认的时候width和height中不包括padding
border-box:widht和height中。包括边框和padding
供应商前缀：
各个浏览器对新属性的支持程度不同，有些还在测试阶段。所以每个浏览器厂商使用特定的前缀来进行标记。
firfox:-moz-
safari:-webkit-
opera:-o-
ie:-ms-MicroSoft
浮动与页面设计规范指导
display
改变元素的类型：
值：
none，该元素不显示。
block，显示为块级元素。
inline，行内元素。
float
浮动：
定义元素往哪个方向浮动。
格式：float:值;
值：
left，元素向左浮动，元素下的内容移动到元素的右边。
right，元素向右移动，元素的内容移动到元素的左边。
none，无浮动。
注意事项：
1、由于浮动框不在普通的文档流中，所以对于普通的文档流就像不存在一样。
2、如果父元素包含浮动元素，并且父元素没有设定高度值，那么父元素的高度将会被压塌。
3、任何一个元素设置为浮动都会自动的被设置为块状元素。
clear属性
清除哪一侧的浮动：
格式：clear:值
值：
none，允许浮动元素出现在两侧。
left，左侧不允许出现浮动元素。
right，右侧不允许出现浮动元素
both，两侧都不允许出现浮动元素。
position
规定元素的定位类型：
格式：position:值
值：
static，默认值，没有定位，按照文档流自己的位置来进行处理。
absolute，来生成绝对定位，网页上面的其他正常的元素不知道他的存在。设定为position为absolute时自动变为块状元素。
relative，生成相对定位，相对于它在HTML流中的本来的位置来进行定位。
fixed，生成绝对定位的元素，并且元素的位置永远按照浏览器窗口的位置进行定位。
注意事项：
1、absolute靠body的左上角定位。
2、relative靠元素的本来的位置来进行定位。
3、如果一个标签的位置是绝对定位的，且它又不存在于其他任何设定了absolute、relative、fixed定位的标签里面。他就是相对于浏览器的body进行定位。
4、如果一个标签的位置是绝对定位的，且它在另外一个设定了absolute、relative、fixed定位的标签内，那么他就是相对于它父类的标签的位置来进行定位。
设定元素的位置
1、top，规定元素的上边缘
2、bottom，规定元素的下边缘
3、left，规定元素的左边缘
4、right，规定元素的右边缘
px
%，设置以包含元素的宽度的百分比计算。
注意：postion为static时不起作用。
z-index
设置元素的堆叠顺序。
格式：z-index:数值
注意：
1、z-index仅能在定位的元素上有效。
2、值越大，元素就会出现在越顶部的地方。默认的时候z-index为0
常用的套路性问题
居中
1）、行内元素居中：设置父级元素属性text-align:center;
2）、块级元素居中：设置元素margin:0auto;
3）、块级元素中的内容垂直居中：只有一行的情况下line-heihgt等于height
4）、如果一个块级别元素的内容垂直居中并且有多行，那么这个时候将父元素设置为display:table-cell，然后使用vertical-align:middle
5）、块状元素垂直居中：
步骤
1、设置父元素为position:relative
2、设置子元素position:absolute
3、设置子元素top：50%;
4、设置子元素上边距为margin-top:负子元素高度的一半
书写顺序
注释的写法：
/*头部开始*/
头部的修饰内容
/*头部结束*/
位置属性
position\top\right\left\bottom\display\float\z-index\margin
大小属性
width、height、padding、margin
文字系列
font\line-height\letter-spacing\color\text-align
背景
background\border
663
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
