CSS指层叠样式表 ，控制如何显示HTML元素
为什么要用css控制样式？而不直接用属性呢？
同样是设置文本的颜色，元素用的是text属性，元素用的是color属性，而元素根本就没有用于单独设置字体颜色的属性。这意味编程人员实现不同元素里的相同样式，却要通过不同的属性值，这样是很难记住的，所以把样式抽离出来。
内联样式：style属性
内部样式：在style标签里写
外部样式：外部写CSS文件，引入html中（常使用，多个html可能用同个样式，可复用，效率高）
引入外部样式表
<link rel="stylesheet" type="text/css" href="文件名" />（rel表示样式表）
CSS初始化
相同元素，在不同浏览器下，显示效果不同，通过CSS强制让所有元素的属性值都一样，使得各浏览器显示结果相同（各大网站有不同初始化模板，可查）
css具有层叠性
当一个Web页面使用多个样式表，多个样式表中的样式可层叠为一个。在多个样式表之间所定义的样式没有冲突的时候，浏览器会显示所有的样式。假如一个html同时有内联样式，内部样式，外部样式的时候而且都对同一个样式进行了设置，执行循序是先执行外部样式，然后是内部样式，最后是内联样式。也就是说内联样式可以覆盖内部样式，内部样式又可以覆盖外部样式
基础语法：选择器+声明
•选择器：决定哪些元素使用这些规则
•声明：由一个或者多个属性/值对组成，用于设置元素的外观表现。
h2{color:orange;background-color:silver;}h2是选择器，大括号里的是声明
声明通过属性：属性值 进行样式声明，每对属性/值应该使用分号与下一对属性/值分开
选择器
1.派生选择器： 元素1元素2 {} (元素2是元素1里的元素)
2.类选择器元素定义加上class属性 通过.类名{}控制样式，
3.id选择器： 元素定义的时候加上id元素属性通过#id值{}控制样式，
4.元素选择器：元素名{}不常用
5.属性选择器：
(1)[title] { }
(2)属性和值选择器 ：[title=W3School]设置所有title="W3School"的元素样式
包含指定值的属性[title~=hello] { color:red;}设置所有title值里面有hello的元素样式
[lang|=en] { color:red; }表示只要这个属性中有lang这个值，这个属性所属元素就被设置样式
当没有类和id时，使用它与元素选择器结合进行选择
注:id，类选择器常结合派生选择器一起使用
6.选择器分组：选择器可以声明为以逗号隔开的元素列表，从而实现选择器分组，以便于将一些相同的规则作用于多个元素。
例：#id值，.className{}对id=id值和class=className的元素同时设置样式
7.伪类选择器
CSS 伪类用于向某些选择器添加特殊的效果
这四种效果的顺序不可变,可以和选择器联用
focus伪类：在元素获得焦点时向元素添加特殊的样式，该伪类应用于有焦点的元素。例如文档中一个有文本输入焦点的输入框，其中出现了文本输入光标；也就是说，在用户开始键入时，文本会输入到这个输入框。
input:focus
{
color:red;
font-size:20pt;
}
在这个例子中，当用户激活文本框，并开始键入时，文本框中的文本会显示为红色，且字体大小为20px
单位
px 像素
em 当前大小的几倍 2em 2倍
百分比 ，整个网页的百分比大小显示
内联与块转化
display:block; 内联--》块
display:inline; 块--》内联
CSS盒模型(块状)
在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
none表示什么都没有 transparent表示透明颜色
一、边框
border: 宽 形状 颜色
border-style/border-width/border-color
border/border-top/border-right/border-bottom/border-left
border-radius:[ <length>|<percentage>]{1,4} 设置边框的四角是平滑的
用长度或者百分比设置半径，可单独设置一边
border-image:<border-image-source>||<border-image-slice> 用图像做边框
利用边框画三角形：边框足够大，盒子大小为1PX，一边有颜色，其它为透明
二、外边距margin：块与块之间的距离
margin:10px 20px 20px 20px 顺时针分配
margin: auto auto居中
单边控制外边距：margin-top/margin-left/margin-right/margin-bottom
优先上左的距离
三、内边距（若不设置，文字能撑满整个盒子）
padding: 上 右 下 左
颜色为盒子的颜色
实际的空间（布局空间！）=margin+border+padding+内容区域
margin合并现象
当两个垂直外边距相遇时，它们将形成一个外边距，这个外边距并非简单相加，而是等于两个发生合并的外边距的高度中的较大者。
注释：请注意，如果不设置 div 的内边距和边框，那么内部 div 的上外边距将与外部 div 的上外边距合并
CSS样式
尺寸
CSS尺寸属性用来控制元素的高度和宽度：
height属性(min-height/max-height)：用于设置元素的高度，即元素内容区的高度，在内容区外面可以增加内边距、边框和外边距；
width属性(min-width/max-width)：用于设置元素的宽度，即元素内容区的宽度，在内容区外面可以增加内边距、边框和外边距。
overflow属性规定当内容溢出元素框时如何处理，可能的取值为：
visible：内容不会被修剪，会呈现在元素框之外，为默认值
hidden：隐藏溢出内容（内容还存在只是隐藏了）
scroll：溢出内容以滚动条形式显示
auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
背景
background-color 属性
如果您希望背景色从元素中的文本向外少有延伸，只需增加一些内边距：
p {background-color: gray; padding: 20px;}
background-image：url("文件名")
background-size：对背景图片大小修改，100%图片铺满div
background-position:水平 垂直
小div，大图片，可通过位置改变得到想要的部分图片
background-repeat : 背景图的铺开方式（铺开大小，是否重复等）
background-attachment：背景图片是滚动还是固定（默认滚动） scroll滚动 fixed固定
background-clip:颜色从什么位置开始显示（盒模型的什么位置）
background-origin:图片从什么位置显示（盒模型的什么位置）
颜色
color：字体颜色
opacity： <number>指定透明度 [0.0-1.0]
16进制 #2567
十进制 rgb（12,23,45）
颜色名称
字体 font
font-style 文字类型（normal - 文本正常显示italic - 文本斜体显示 oblique - 文本倾斜显示）
font-weight 文字粗细
font-size 文字大小 （默认16像素(16px=1em) inherit 大小和父类一样）
font-variant 是否转为小写的大写字体
font-family 字体（可设置首选，次选字体）
文本 text
text-align文字对齐方式
text-indent 块级元素（段落）缩进
word-spacing 改变字（单词）之间的标准间隔
letter-spacing 字母间隔修改的是字符或字母之间的间隔
text-transform 文本转换大小写
line-height 行高
white-space 对文字间空白字符处理（默认不识别空白符）
word-wrap normal可溢出 break-word 内容在边界内换行
一个块可能有很多行，当一个块状元素的高和行高相同，文字在块中居中
text-decoration 文本装饰
none
underline 下划线
overline 上划线
line-through 贯穿线
blink 闪线
应用：可以手动去除超链接的下划线
列表；list
list-style-type：标记的形状
list-style-image : url(xxx.gif) 标志图片
list-style-position标记在文本内还是文本外
表格
table, th, td {border: 1px solid blue;} 设置表格边框
table {width:100%;} th{height:50px;} 设置表格的高度和宽度
border-collapse 属性设置是否将表格边框折叠为单一边框：
text-align:水平对齐方式
vertical-align:垂直对齐方式
padding内边距
表格颜色可以通过边框颜色，背景颜色，文本颜色设置
empty-cells：当表格无内容时，是否显示表格边框
border-spacing ：单元格左右间距离 单元格上下间距离
(border-collapse属性为separate值的情况下，也称为边框分离模式)
定位
CSS 有三种基本的定位机制：普通流定位、浮动和绝对定位
普通流定位（相对）和绝对定位
Position定位
position：relative|absolute
relative相对定位，相对原来位置，会和其他块一起移动
absolut绝对定位，相对父元素定位，不影响其它块（left表示距离父元素的左边多少像素）
top/rigt/left/bottom：Xpx
Z-index：当两元素重叠，Z-index大的在上边
clip：修剪尺寸 clip:rect(0px 50px 200px 0px)；
visibility:visible|hidden 元素是否可见（不可见的元素也占空间，主要用于想让内容不显示，却又不想把内容删除）
浮动定位
float:left 尽量往左浮
float:right 尽量往右浮
清除浮动 clear:left/right/both; 不和浮动在一行
如果框窄，浮动的东西会被挤到下边
网友评论