1、CSS选择器
标签选择器：html中的所有标签都可以作为选择器
类（class）选择器：body内的所有元素都有class属性。
id选择器：body内的所有元素都有 id 属性。
2.类（class）选择器
类（class）选择器使用标志符（句点）开头，类（class）选择器使用标志符（句点）开头
3.id选择器
id选择器定义：body标签中的所有标签都有id属性。body标签中的所有标签都有id属性。
id选择器使用：id选择器使用散列符号（#）开头，后面写上id的名称。
4.CSS选择器优先级
id选择器>类选择器>标签选择器
5.网页中引入CSS样式
(1).内联（行内）样式
html中的所有标签都有style属性，在style属性中直接写入css样式。
示例： <div style=“color:red;font-size:20px;”>
这是内联样式
</div>
(2)内部样式表
将html代码和css样式做简单分离，在网页头部创建style标签，在其中写入css样式
(3)外部样式表
将css样式单独写入到一个 xxx.css外部文件中。
（1）使用link标签引入外部css文件。 （2）使用@import导入外部css文件
6.link标签引入外部样式文件
声明外部样式表 rel=“stylesheet”
引入的文件类型 type=“text/css”
引入的文件地址 href=”style.css“
7.CSS样式优先级
内联样式>内部样式表>外部样式表
8.字体样式
字体类型:font-family :“隶书” “楷体” 其他
字体大小:font-size : 像素：px
字体风格:font-style : normal 默认值，标准文档样式 italic 斜体
字体粗细:font-weight : bold 定义粗体字符 100-900 定义由细到粗的字符
9.文本样式
color 设置文本颜色 red #362596 rgb(32,250,50)
text-align 设置元素水平对齐方式 left center right
text-indent 设置首行文本的缩进
line-height 设置文本的行高
text-decoration 设置文本的装饰 none:默认，标准文本
underline：定义文本下划线
overline：定义文本上划线
line-through：定义穿过文本的一条线
10. 鼠标样式（cursor）
defalut 默认光标
pointer 超链接指针
wait 等待状态
help 指示可用的帮助
text 指示文档
crosshair 鼠标呈现十字状
11.背景样式
背景颜色：background-color red #536256 rgb(30,250,13)
背景图片地址： background-image:url(图片路径)
图片绝对路径
图片相对路径
背景重复方式： background-repeat no-repeat 不重复
repeat-x 水平重复
repeat-y 垂直重复
repeat 默认重复
背景定位：background-position
像素：px
水平方向：left、center、right
垂直方向：top、center、bottom
12.背景样式简写
background：图片地址，图片重复方式，背景颜色，背景定位
13.列表样式
list-style-type：
（1）无序列表 disc 实体圆心（默认） circle 空心圆 square 实体方心 none 无列表标记
（2）有序列表 1 / a / A / i / I
list-style-image：自定义列表标记为图片 属性值：url(图片路径)
list-style-position：
列表标记定位 outside inside
14.列表样式简写
list-style：1.列表标记属性 2.自定义列表标记图片 3.列表标记定位
15.CSS伪类
单击访问前：link
单击访问后：visited
鼠标悬浮其上：hover
单击未释放：active
16.CSS高级选择器
1.并集选择器
多个选择器通过逗号连接而成 示例：
div,p,span,.codeup,#helloid{
color:red;
font-size:20px; }
2.交集选择器
由两个选择器连接构成，选中二者范围的交集，两个选择器之间不能有空格
第一个必须是标签选择器，第二个必须是类选择器或者ID选择器
示例：
div.codeup{
color:red; font-size:20px;
}
div#codeup{
color:red;
font-size:20px;
}
3.后代选择器
外层的选择器写在前面 内层的选择器写在后面 之间用空格分隔
标签嵌套时，内层的标签成为外层标签的后代
使用标签选择器、id选择器、类选择没有先后顺序
示例：
div .codeup{
color:red;
font-size:20px;
}
4.子元素选择器
通过 > 连接在一起而成，仅作用于子元素
示例：
div>.codeup{
color:red;
font-size:20px;}
5.属性选择器
选取带有指定属性的元素
示例：
input[name]{
border:1px soild red; }
input[type=”text”]{
border:1px soild red; }
div[ class=“codeup”]{
color:red; }
盒子模型
6.盒子模型之边框(border)
属性 | 说明 | 样式值 |
border-top-style | 上边框样式 | none：无边框 solid：实线边框 dashed：虚线边框 dotted：点状边框 double：双线边框 hidden：与none相同，应用于解决边框冲突 |
border-right-style | 右边框样式 | |
border-bottom-style | 下边框样式 | |
border-left-style | 左边框样式 | |
border-style | 设置四个边框样式 |
边框颜色： border-color
7.边框粗细
top right bottom left
border-width
8.边框简写:
border 同时设置四个边框的粗细、颜色、样式
9.盒子模型之内边距(padding)
top right bottom left
10.box-sizing属性
border-box:盒子的实际高度和宽度包括元素内容、边框和内边距
11.盒子模型之外边距(margin)
top right bottom left
12.网页文本流
1.标准文档流:
块级元素:<h1> - <h6>、<p>、<div>、列表等
总是在新行上开始，占据一整行
高度，行高以及外边距和内边距都可控制
宽度始终是与浏览器宽度一样，与内容无关
它可以容纳内联元素和其他块元素
2.内联（行内） 元素
<span>、<a>、<img>、<strong>等
和其他元素都在一行上
高，行高及外边距和内边距部分可改变
宽度只与内容有关
行内元素只能容纳文本或者其他行内元素
不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用
13.display 属性
display属性作用:控制元素的显示和隐藏 块级元素和内联（行内）元素的转变
inline-block 行内块元素
14.浮动
float 属性：float是css样式中的定位属性，用于设置标签对象的浮动布局。 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
left：元素向左浮动
right：元素向右浮动
none： 默认值 元素不浮动
both 在左、右两侧不允许浮动元素
15.定位
static：
默认值，没有定位
relative 相对定位
top right bottom left
设置相对定位的元素会相对它原来的位置，通过指定偏移，到达新的位置
设置了相对定位的网页元素，无论是在标准流中还是在浮动流中，都不会对它的父级元素和相邻元素有任何影响，它只针对自身原来的位置进行偏移
相对定位可进行top、right、bottom、left方向的定位
absolute 绝对定位
top 根据离本身最近的已经定位的祖先元素进行顶部偏移，如没有，则根据浏览器窗口进行偏移
right 根据离本身最近的已经定位的祖先元素进行顶部偏移，如没有，则根据浏览器窗口进行偏移
bottom 根据离本身最近的已经定位的祖先元素进行底部偏移，如没有，则根据浏览器窗口进行偏移
left 根据离本身最近的已经定位的祖先元素进行左侧偏移，如没有，则根据浏览器窗口进行偏移
使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位
绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响
绝对定位可进行top、right、bottom、left方向的定位，定位偏移单位为 px
fixed 固定定位
z-index属性：调整元素定位时重叠层的上下位置
z-index属性值：整数，默认为 0
设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系
z-index值大的层位于其值小的层上方
