1.1 CSS 语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
selector {property: value}
下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。
在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。
h1 {color:red; font-size:14px;}
下面的示意图为您展示了上面这段代码的结构：
image.png
1.1.1 字体属性：
属性 含义 属性值
font-family 字体 各种字体
font-style 字体样式 italic、oblique
font-variant 小体大写 small-caps
font-weight 字体粗细 bold、bolder、lighter…
font-size 字体大小 absolute、relative、%
color 字体颜色 颜色值
1.1.2 颜色与背景属性：
属性 含义 属性值
Color 颜色 颜色值
Background-color 背景色 颜色值
Background-image 背景图案 图片路径
Background-repeat 背景图案重复方式 Repeat-x | repeat-y | no-repeat
Background-attachment 背景的滚动 Scroll | fix
Background-position 背景图案初始位置 % | n em | top | left | right | bottom
1.1.3 文本属性:
属性 含义 属性值
word-spacing 单词间距 n em
letter-spacing 字母间距 n em
text-decoration 装饰样式 underline| overline| line-through| blink
vertical-align 垂直方向位置 sub| super |top |text-top| middle| bottom| text-bottom
text-transform 转为其他形式 capitalize| uppercase| lowercase
text-align 对齐 left| right| center| justify
text-indent 缩进 n em| %
line-height 行高 pixels、n em、%
1.1.4 边距属性:
属性 含义 属性值
margin-top 上边距 n em | %
margin-right 右 n em | %
margin-bottom 下 n em | %
margin-left 左 n em | %
1.1.5 边框属性:
属性 含义 属性值
Border-top-width 上边框宽度 n em | thin | medium | thick
Border-right-width 右 同上
Border-bottom-width 下 同上
Border-left-width 左 同上
Border-width 四边 同上
Border-color 边框颜色 Color
Border-style 边框样式 Dotted | dash | solid | double | groove | ridge | inset | outset
Border-top|right|bottom|left 上(右|底|左)所有属性 Border-width | border-style | color
1.1.6 图文混排:
属性 含义 属性值
Width 宽度 n em | %
Height 高度 n em
Float 文字环绕 Left | right
clear 去除文字环绕 Left | right | both
1.1.7 列表属性:
属性 含义 属性值
Display 是否显示 Block | inline | list-item | none
White-space 空白部分 Pre | nowrap | normal（是否合并)
List-style-type 项目编号 Disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none
List-style-image 项目前图片 Img-url
List-style-position 第二行位置 Inside | outside
List-style 全部属性 Keyword | position | url
1.1.8 鼠标属性:
属性值 含义 属性值 含义
Auto 自动 N-resize 上箭头
Crosshair "+" Se-resize 右下
Default 默认 Sw-resize 左下
Hand 手形 S-resize 下箭头
Move 移动 W-resize 左箭头
E-resize 右箭头 Text "I"
Ne-resize 右上 Wait 沙漏
Nw-resize 左上 help 帮助
1.2 CSS选择器
1.2.1 li标签选择器
html:
<li>列表项1</li>（改变标签里的样式类型）
css:
针对所有列表
li{
color: rgb(255,0,0); /*#ff0000 red*/
font-size: 30px;
}
1.2.2 类选择器 class（把一堆样式划为一类）
<pre style="margin-bottom:18.0pt;line-height:16.5pt;background:#F6F8FA;
word-break:break-all">div`.topBar +Tab = <`divclass`=`"topBar"`></`div`>`</pre>
当前页面内可以多个同样 html:
<pre style="margin-bottom:18.0pt;line-height:16.5pt;background:#F6F8FA;
word-break:break-all"><li class="blue">`列表项``2`</li></pre>
css:
<pre style="margin-bottom:18.0pt;
line-height:16.5pt;background:#F6F8FA;word-break:break-all"> color: #0000ff;</pre>
<pre style="margin-bottom:18.0pt;
line-height:16.5pt;background:#F6F8FA;word-break:break-all"> }</pre>
1.2.3 ID选择器 id（也可控制某个DIV样式）
当前页面内唯一id； 如果页面内出现多个相同id，虽然可以解析出，但不规范，不建议
<li id="item">列表项1</li>
#item{
color: #00FF00;
font-size:40px;
}
权重越大，优先级越高，优先级高的覆盖优先级低的
各种选择器可以用在列表li、容器div等中
html:
<div>这是一个Div</div>
CSS:
div{
background-color: #ccc;
}
1.3 CSS样式规则
1.3.1 三种定义样式的方法
①****在本文件下的表示方法
<head>
<style type="text/css"> //样式
选择器（即修饰对象）{ //.g{ }
对象属性1：属性值1； //font：
对象属性2：属性值2； //height：50px；
}
</style>
</head>
②在1.css文件中的表示方法
<link rel="stylesheet" type="text/css" href="1.css">
③直接跟着定义样式
<div class=" size show show-1"></div>
每个样式间用空格隔开，有三个样式 size、show、show-1
1.3.2 颜色
red = #FF0000 = rgb(255,0,0) 红色
blue = #0000ff = 蓝色
green = #00FF00 = 绿色
#ccc = #cccccc 灰色
#fff = #ffffff 白色
black = #333 黑色
background: #fff; 背景为白色
background: #fff; 背景为白色
cursor: pointer; 当移动到当前位置时（配合li:hover）变成小手
transition: all 1s ease; 渐变效果（有些浏览器不支持）
-webkit-transition:all 1s ease;
-o-transition:all 1s ease;
-moz-transition:all 1s ease;
-ms-transition: all 1s ease; 对于不支持的浏览器，解决方案
1.3.3 字体font
width: 200px;宽度
font-weight: bold; 字体粗细（粗体）
font-size: 12px; 字体大小
color: #ff7300; 字体颜色
background-color: #ccc; 背景色
height 高度
width 宽度（可以认为是长度）
font-family：隶书；字体
长度单位：
px 像素
颜色
十六进制：#ffffff
颜色名称：red
尺寸属性：
Height、max_height、min_height
width、max_width、min_width
字体、字号：
font 缩写形式
font-weight 粗细
font-size 大小
font-family 字体系列
font-style 字体样式
字体颜色
color
opacity 透明度 css3
行距、对齐等
line-height 行高
text-align 对齐
letter-spacing 字符间距
text-decoration 文本修饰
overflow 浮动
text-overflow
text-indent
1.3.4 列表宽度决定了列表项宽度
height: 100px;
line-height: 100px; 使其上下居中对齐
text-align: right; 水平对齐方式：水平靠右
text-align: center; 水平对齐方式：水平居中
letter-spacing: 10px; 字间距
text-decoration: none; 下划线设置（去除）
white-space: nowrap; 设为一行显示
overflow: hidden;
display: block; 隐藏多余内容
1.3.5 图片
background-image: url(images/1.jpg); 插入图片
background-image: url(../images/1.jpg); 插入上一级文件夹中images文件夹中的图片1.jpg
background-repeat: no-repeat; 图片默认多大就是多大（不加自动复制显示）
background-position: 50px 50px; 移动图片（正数为右下角，负数为左上角）
1.3.6 块级元素 默认占一行
★float: left; 浮动 将块级元素变为行级元素 让多行在一行 如果一行放不下，自动转第二行
height: 50px; /*使其上下居中对齐*/
line-height: 50px; /*使其上下居中对齐*/
text-align: center; 水平对齐方式：水平居中
margin-right: 5px; 每个元素间间隔5px
font-size: 20px; 字体大小
1.3.7 焦点
鼠标移到当前位置时的状态
a:hover{
color: red;
}
/*鼠标激活选定状态*/
a:active{
color: green;
}
1.3.8 超链接样式的四种状态
未访问状态 a:link
已访问状态 a:visited
鼠标移上状态 a：hover
激活选定状态 a：active
、
1.3.9 盒子（矩形方框）
margin（外边距/边界）
border（边框）
padding（内边距/填充）
width 宽度
height 高度
margin 外边距/边界
margin：1px 2px 3px 4px 外边距/边界（上右下左）
margin：1px 2px 外边距/边界（上下、左右）
margin：1px 外边距/边界（上下左右、通常表现出来上左）
margin
一个值：4边
两个值：上下、左右
四个值：上右下左
margin-left: auto; 左边距自动
margin-left: auto; /水平居中/
margin-right: auto; /水平居中/
margin: 0px auto; /水平居中，有的浏览器不支持/
默认下，div没有边框border（有颜色）
默认不显示border
border-color: blue;
border-width: 10px;
border-style: solid; 以上三句话使其最终显示 solid实心的
border width style color
border：20px solid green 一句话也可以显示
border-top:30px solid #ccc; 设置上边框属性
padding-top: 20px; 内边距（上）
padding: 20px; 内边距（上下左右）
padding: 20px 50px; 内边距（上下、左右）
对同一属性做设置，后面的优先级高
对外边距/边界设置，一般统一格式，不要上边设下边距，下边设上边距；如果设置，按大的显示
margin-bottom: 30px;
.topbar .search .topabar .link{float:right;} 共用一种样式{浮动 将块级元素变为行级元素}
1.3.10 解决浮动问题，使用尾类
.fix{*zoom:1;*clear:both;}
.fix:before,.fix:after{
display: table;clear:both;
content: '';
}
<div class="wrap fix"> +fix谁的子元素浮动，就可以清除影响
.fix{*zoom:1;*clear:both;}
.fix:before,.fix:after{
display: table;clear:both;
content: '';
}
1.3.11 定位
position: absolute; 绝对定位
position: relative; 相对定位
参照物是距离最近 定位的父元素
1.3.12 对定位元素显示排序
z-index: 1; 数字越大，优先级越高
设置 鼠标指到哪里，哪里在上边
.c4:hover{
z-index: 3;
}
1.3.13 响应式
viewport
设备方向：Orientation
设备方向：Orientation
1.3.14 其他样式
header、footer、center、left、right
头 尾 中间 左 右
链接 默认带下划线
<div class=" size show show-1"></div>
每个样式间用空格隔开，有三个样式 size、show、show-1
list-style:none; 去除前面的列表序列号
border 边框
border: 1px solid red; 添加边框
<div style="clear: both"></div> 用于消除浮动效果导致的顺序错乱
height 高度
width 宽度（可以认为是长度）
font-family：隶书；字体
top: 25px; 距离上方25px
left: 15px; 距离左边15px
display: none;不显示
@media screen and (max-width: 900px){ } 当分辨率小于900px时
line-height: 1.8; 行高
1.4 为CSS单独建立文件（建立链接link）
<link rel="stylesheet" type="text/css" href="style.css">
<link + Enter
style.css 新建文件
@charset 'utf-8';
