###CSS
- CSS:Cascading层叠 Style样式 sheet表,css用于美化页面，html相当于盖房子，css相当于装修
####CSS的引入方式 - 三种引入方式：
-
内联样式： 把样式代码写在标签的style属性里面，缺点：不能复用
<div style="color: red">今天是星期一，好困哦！</div> -
内部样式： 在页面的head标签内部添加style子标签，在style标签内部写样式代码，缺点：只能当前页面复用，不能多页面复用
-
外部样式： 在单独的css文件中写样式代码，在页面中通过link标签把样式文件引入当前页面
####三种引入方式的优先级
- 内联优先级最高
- 内部和外部优先级相同，后执行的覆盖先执行的
###CSS选择器
- 标签名选择器
- 格式:
标签名{
样式名称1:值;
样式名称2:值;
}
- id选择器
- 格式：
#id{
样式名称1:值;
样式名称2:值;
} - 通过id选择器选择页面中的某一个元素
- 类选择器
- 格式：
.class{
样式名称1:值;
样式名称2:值;
}
- 分组选择器
- 分组选择器可以将多个选择器合并成一个选择器
- 格式：
div,#abc,.c1{
样式名称1:值;
样式名称2:值;
}
- 属性选择器
- 格式：
标签名[属性名=‘值’]{
样式名称1:值;
样式名称2:值;
}
- 子孙后代选择器
- 格式：
div p span{
样式名称1:值;
样式名称2:值;
}
- 子元素选择器
- 格式：
div>p>span{
样式名称1:值;
样式名称2:值;
}
- 伪类选择器
- 用于选择元素的状态
- 状态有：未访问状态、访问过状态、悬停状态、点击状态
- a:visited{} a:link{} a:hover{} a:active{}
- 任意元素选择器
- 格式 *{} 选择所有元素
###常见样式
####颜色的赋值方式
- 三原色 红绿蓝 red green blue rgb
-
颜色单词赋值
-
6位的16进制 #0000ff
-
3位的16进制 #f00
-
3位的10进制 rgb(0-255,0-255,0-255)
扫描二维码关注公众号，回复： 5841802 查看本文章
-
4位的10进制 rgba(0-255,0-255,0-255,0-1) 0-1值越小越透明 alpha
####背景图片设置背景图片 background-image: url("../imgs/1.jpg"); 设置图片尺寸 background-size: 100px 100px; background-repeat: no-repeat;/* 禁止重复 */ 设置显示位置 /* background-position: left bottom; *//* left right top bottom center */ background-position: 90% 90%;
####布局相关（盒子模型）
- 盒子模型由以下几种组成
元素宽高、元素外边距、元素内边距、元素的边框
元素宽高
- 通过width、height给元素宽高赋值
- 通过像素和上级百分比赋值
- 块级元素可以修改宽高， 行内元素不能修改宽高，只能由内容决定
元素的外边距
- 设么是外边距：元素距上级元素或相邻兄弟元素的距离，称为外边距
- 注意事项：
- 块级元素可以给元素添加四个方向的外边距，行内元素只能添加左右外边距，上下外边距没效果
- 行内元素左右外边距相加 ，块级元素上下相邻取最大值
- 当元素的上边缘和上级元素的上边缘重叠时，给元素添加上外边距会出现显示异常，通过给上级元素添加overflow:hidden解决此问题
- 赋值方式： margin-top/left/right/bottom
margin:10px; //四个方向全部是10px
margin:20px 50px; 上下20px 左右50px
margin:0 auto; 重要 水平居中
margin:10px 20px 30px 40px; //上 右 下 左 顺时针
#####元素边框 - 赋值方式： border:1px solid red border-left/right/top/bottom
- 注意事项：
- 块级元素边框全部生效，并且会影响元素所占的宽高，行内元素边框全部生效 但是只影响元素所占宽度 不影响元素所占高度
- 盒子模型精简版：
宽高
行内元素不能修改宽高，由内容决定
外边距
行内元素不能添加上下外边距
左右相加 上下取最大值
显示异常 overflow:hidden
边框
行内元素边框不影响元素所占高度
###盒子模型之内边距
- 什么是内边距：元素边框距内容的距离称为内边距
- 赋值方式：和外边距赋值方式类似
padding:10px;
padding:10px 20px; 上下 左右
padding:10px 20px 30px 40px; 上右下左 - 注意事项：行内元素上下内边距有效果但是不影响元素所占的高度
- 如果需要移动元素的文本内容只能通过元素的内边距移动
- 如果需要移动的是元素的子元素有两种移动方式，1. 给元素添加内边距，切记此种方式会影响元素的宽高 2. 给子元素添加外边距(推荐)
####行内元素特殊点
- 不能修改宽高
- 不能添加上下外边距
- 边框不影响所占高度
- 内边距不影响所占高度
###文本相关 - 水平对齐方式 text-align:left right center
- 文本修饰 text-decoration: overline/underline/line-through/none
- 文本阴影 text-shadow:颜色 x偏移 y偏移 浓度
- 文本颜色 color:red;
- 行高 line-height: 可以控制文本垂直居中
###字体相关 - 字体大小 font-size
- 字体加粗 font-weight:bold/normal
- 斜体 font-style:italic
- 字体设置 font-family:xxx,xxx,xxx;
####溢出设置 overflow
- hidden：超出隐藏
- visible：超出显示（默认）
- scroll：超出滚动显示
####显示方式 display - block：块级元素的默认值 ，可以修改宽高，只能独占一行
- inline：行内元素的默认值，可以共占一行，不能修改宽高
- inline-block:行内块，既可以修改宽高，也可以共占一行
####定位方式
#####position定位 - 有四种定位方式
- 静态定位static（文档流）
- 默认的定位方式
- 行内元素从左向右，块级元素从上到下
- 相对定位relative
- 元素不脱离文档流从元素所在位置做位置偏移（通过top、left、right、bottom控制元素的位置）
- 绝对定位absolute
- 元素脱离文档流 元素相对于窗口（默认）或某一个上级元素(需要给上级元素添加postion：relative)做位置偏移
- 固定定位fixed
- 脱离文档流 元素相对于窗口做位置偏移
####浮动定位 float
- 浮动定位脱离文档流，元素从当前所在行向左或向右浮动，直到撞到上级元素边框或其它浮动元素停止
- 当纵向排列的元素需要改成横向排列时使用浮动定位
- 如果一行装不下会自动换行，换行时有可能被卡住。
- 如果元素的高度为自动识别高度，元素内部的所有子元素全部浮动后，自动识别的高度为0，可以通过给元素添加overflow：hidden 解决此问题
- 如果元素上面的其它元素浮动，则元素会自动往上顶，如果不希望元素顶上去给元素添加clear属性
###CSS的三大特性
- 继承性： 子元素可以继承上级元素的部门样式，只能继承文本相关和字体相关的样式
- 部分元素不受继承影响，比如超链接a不受继承影响、h1-h6字体大小不受继承影响
- 层叠性： 当不同的选择器选择到同一个元素，如果作用的样式不同则全部层叠到一起响应，如果作用的样式相同则由优先级决定
- 优先级：作用范围越小优先级越高，直接选中优先级高于间接选中(继承属于间接选中) id>class>标签名
###行内元素的垂直对齐方式 vertical-align
- top 上对齐
- bottom 下对齐
- middle 中间对齐
- baseline 基线对齐 默认