目录
4、元素 ID 选择器：严格的定义---页面比较特别的组成，比如标题、布局
一：CSS 概述
1、CSS 的作用：统一的方式定义外观
相对于原始的html：属性可以用来设置样式，比如 border、width、cols
二：CSS 基础语法
1、如何用？--多种方式，供灵活选择
方式一：内联方式---html 元素有个 style 属性
style="color:red;"
----适用於单个元素
方式二：内部样式表---当前页面里样式重用
head 里添加一个 style，将 CSS 样式定义
<style>
p
{
}
</style>
方式三：外部样式表
单独定义一个文件/.css---定义样式
html页面，引入样式文件
优先建议使用“外部样式表”---实现内容和表现分离，从而提高可维护度和可重用性
换皮肤：a.html/b.html/c.html....
s1.css
s2.css
s3.css
2、重复:没有冲突的取并集，重复定义的依靠优先级
优先级：就近原则
内联方式 > 内部或者外部样式表
如果优先级别相同，以最后一次定义为准
*** 补充：
内联方式：方便快速演示( 如, Boss演示)
外部样式表：便于维护
三：选择器：谁选择使用{}中定义的样式
1、元素选择器---html中的标签名称
p{}
h1{}
h2{}
优点：使用简单，为某种标签定义样式
缺点：跨类别、同一种下的细分
2、类选择器
CSS中：
.s1 {
...
}
例如：
.s1{//点 名字
border：1px solid red; //边框： 尺寸 实线/虚线等 颜色
}
HTML中：
<标签 class="s1” >
3、分类选择器：定义更清晰，同一种下的细分
CSS 中：
input.txt {}
input.btn {}
html 中：
<p class="txt"></p>--error
<input class="" />
4、元素 ID 选择器：严格的定义---页面比较特别的组成，比如标题、布局
CSS 中：
#a1 {}
html中：
<标记 id="a1" >
5、派生选择器：以层次关系作为定义
CSS 中：
div a {...}
div.left a {...}
ul li ol li a {...}
HTML 中：
<div class="left">
txt
<a>ddd</a>
</div>
6、选择器分组：需要为一些元素定义它们样式中相同的部分时
CSS 中：
p,input.txt,#a1{....}
7、伪类：在不同状态下的样式
XXX:link {}---未访问过
XXX:active {}---激活
XXX:hover {}---悬浮、悬停--鼠标移入
XXX:visited {}---已访问过的
XXX:focus {}---获得焦点( 如, 选中文本框 )
四：常用的单位
尺寸:%/px/pt
颜色：#dddddd
//pt： 绝对, 不根据屏幕大小变化, 根据人的肉眼. 基准为9pt-->字体
//px: 相对 -->长宽高
可见／隐藏／滚动条／自动(多滚动条，少可见)
visible／hidden／scroll／auto
五：尺寸
width/height
overflow:visible/hidden/scroll/auto;
六：边框
1、定义所有的边框
border:1px solid red;---简写方式
等同于：
border-width:1px;
border-style:solid;
border-color:red;
2、定义单边的边框
border-left:1px solid red;
border-right:1px solid green;
top/bootom
七：框模型（box modal，盒子模型）--间距
处理元素内容（height/width）、边框(border)、内边距(padding)和外边距(margin)的方式，设置，会导致元素所占的面积变大
1、margin：外边距
2、padding：内边距
//从上往下, 从左往右
3、写法
margin:30px;--四个方向，左边/上边优先
margin-left:;---单方向
margin-right:;
margin-top:;
margin-bottom:;
简写1：4个值
margin:10px 20px 30px 40px;--顺时针
top right bottom left
简写2：2个值
margin:10px 20px;
4、特殊写法
margin:0px auto;---居中显示
分析：
布局
背景,表格,导航
八：背景
background-color:;--背景色
background-image:url(a.jpg);--背景图片
background-repeat:repeat/no-repeat/repeat-x/repeat-y;---平铺，渐变色的效果
background-position:left top;
10px 20px
background-attachment:fixed/scroll;--背景图像的附着方式，可以实现类似于水印的效果
九：文本
color:;--颜色
font-size:;--大小
font-family:value1,value2,..;--字型
text-align:center/left/right;--水平对齐
font-weight:normal/bold;--加重
text-decoration:none/underline;--是否有下划线
text-indent:10px;---设置首行缩进
line-height:;—行高
十：表格---表格特有的样式
border-collapse:collapse;
vertical-align:top/middle/bottom;---垂直方向上的对齐，设置单元格中的垂直对齐
十一：浮动
默认情况下，流模式布局
float:left/right;---让元素脱离原有的布局，浮动起来，停靠到包含框的左侧或者右侧----修改默认布局
clear:both/left/right;--清除附近浮动元素所带来的影响
课堂练习一：
新建一个 html 页，使用内联方式为 P 元素定义样式：文本为红色，背景色为灰色
使用内部样式表的方式为 h1 元素定义样式：文本为绿色
使用外部样式表为 h2 定义样式：文本为黄色，字体大小为 10pt
十二：显示
1、html元素有默认的显示方式：块级、行内
对于行内元素设置高度或者宽度
2、需要修改默认的显示方式
display:static/block/inline/none(常结合js代码实现元素的动态显示或者消失);
//静态 块级 行内 不显示
十三：列表特有的样式
list-style-type:none;--设置列表项的标示符
list-style-image:;--设置图片为标示符
十四：定位
1、默认流模式，修改原有的定位方式
float：设置浮动，不能随意设置位置
相对定位
绝对定位
2、position:;--修改定位方式，脱离原有的层
a、相对定位：没有偏移属性，位置不变，因为偏移是相对于原有位置；移动，原有区域依然保留
b、绝对定位：没有偏移属性，位置不变，有偏移，相对于最近的已定位的祖先元素；原有区域不保留
3、偏移属性：
top/left/bottom/right:20px;
4、堆叠顺序
z-index:-1;---层
十五：光标属性
cursor:default/pointer/help/wait/../image;
