css基础总结
css作用：控制网页的样式
css语法：
选择符{
属性1：属性值；
属性2：属性值；
属性3：属性值1 属性值2 属性值3；
}
css实例：
div{
width:300px;
height:400px;
background:red;
}
css语法解释：
1、选择符：对标签进行获取
2、所有声明都放在大括号里面，声明和声明之间用分号（“；”）连接
3、声明包括属性及属性值，属性和属性值之间用冒号连接
4、如果一个属性拥有多个属性值，属性值之间用空格隔开
例：border（边框）:10px(像素大小) red（颜色） solid（线的类型）;
注：所有的css代码，必须放在“css样式表”内！！！
扩展：css样式表内的注释：/* css的注释 */
css样式表
css样式表：
一、内部样式表：
创建方法：使用style标签创建样式表,然后把样式表最好放在head描述区内
<style type="text/css"(可以省略)>
css代码
</style>
二、外部样式表：
创建方法：新建一个.css文件
外部导入方式：
1、<link rel="stylesheet" href="url">
rel="stylesheet" //创建关联性
href="url" //导入的路径
type="text/css" //css文本类型
2、<style>
@import url（路径）;
</style>
link 和 @import 区别
1、本质区别：link标签属于html语言、@import属于css提供的一个方法
2、加载顺序的差别：link导入的css 和 结构同时加载、@import需等结构加载完毕然后再加载css样式
3、兼容性差别：@import兼容性不好（IE5）
4、js动态dom操作差别：js动态可能无法修改@import所导入的css样式
三、内联样式表
创建方：
<标签 style="css代码"></标签>
样式表的权重关系
内联样式表权重最高
内部样式表和外部样式表的权重关系和书写的顺序有关，写在后面的权重高
后面的把前面的样式覆盖，覆盖的只是相同属性，不同属性继续执行
注：内联样式表只对当前标签起作用
css选择符
css选择符的目的：对网页的元素进行获取
一、类型选择符（标签选择符）
html中所有标签懂能直接作为选择符 (div、p、h1-h6......)
特点：能选择页面中所有相同类型的元素
应用：
1、如果想统一某个标签样式的时候
2、想改变某个默认样式的时候
二、id选择符
语法：
<标签 id="名称"></标签>
id样式表写法：#名称{css代码}
特点：id名称在同一页面只能出现一次，唯一性
应用：id名称常用来写页面的外围结构
三、class选择符
语法：
<标签 class="名称"></标签>
.名称{css代码}
特点：
每一个元素都可以拥有多个类名
适合定义一类样式
四、群组选择符
语法：
以逗号“，”分隔的方式，把多个选择符组成一组
选择符1，选择符2，选择符3{css代码}
例： #box,.cont,p{ }
五、包含选择符（子选择符）
语法：
通过父元素找子元素，父元素与子元素之间用空格隔开
父元素选择符 子元素选择符{ }
六、伪类选择符
a:link{} 超链接初始状态
a:visite{} 超链接访问过后的状态
a:hover{} 超链接鼠标滑过的状态
a:active{} 超链接按下时的状态
例：
a:link{color:purple;}
a:visited{color:pink;}
a:hover{color:yellow}
a:active{color:green}
注：顺序不能更改
常用形式：
a{color:red}
a:hover{color:yellow;}
div:hover{}
.box:hover{}
鼠标滑过父元素改变子元素的样式：
父元素：hover 子元素{}
七：通配符
语法：
*{} 用来改变页面所有元素的样式，通常用来清除元素的留白
常用方法：
*{
margin:0;
padding:0;
}
选择符权重
!important > 内联样式表 > id > class（伪类）> 类型（ 标签 ）
内联样式表 ： 1000
id : 100
class/伪类 : 10
类型 : 1
包含选择符 ： 为选择符权重之和
群组选择符 ： 权重保持不变
扩展：
!important ( 如果一个css属性后面有!important,当前属性具有最高权重。 )
语法：
属性：属性值！important;
css层叠性
只要产生权重关系，必然体现css层叠性
权重高的覆盖权重低的，权重相同的优先执行后书写的
文本属性
font-size: 像素
网页中文本默认大小： 16px;
注：文本大小一般都是偶数、pc端文本大小最小别低于12px；
涉及到的单位：
px
pt
em 1em == 16px( 默认情况下 ) （ 相对大小、相对于父元素font-size的值 ）
line-height: 行高
如果line-height的值等于容器高度的时候，实现单行文本垂直居中对齐
font-family: 字体 默认的字体 ： 微软雅黑
宋体、楷体、微软雅黑......安全字体（大部分浏览器能支持的）
注：
如果字体为中文： 放在引号里面
如果英文字体字体名称是多个单词的时候， 放在引号里面
如果有多个字体，字体和字体之间用逗号隔开； 英文在前中文在后
color： 文本颜色
颜色：必须使用十六进制表示颜色值。
16进制数字（ 0-9 a-f ）
#000000 #000
#ffffff #fff
红绿蓝 0带表最暗 f代表最亮
扩展：
rgb(255,0,0)模式
rgba(255,0,0,0.5) a 颜色值透明。
transparent 透明色
font-weight:
属性值：bold（加粗） bolder（更粗的） normal（常规） 100 - 900
font-style:
属性值: italic（倾斜） oblique（更倾斜） normal（常规）
font-variant:
属性值：normal small-caps（缩小的大写）
text-align: 文本的水平对齐方式
属性值： left right center justify(两端对齐)
text-decoration
属性值：none underline（下划线） overline（上划线）
line-through（删除线） blink(闪烁，高版本不支持)
text-indent:
首行缩进: text-indent:2em;
悬挂式缩进： text-indent:负数
letter-spacing:30px;
字符与字符之间的间距
word-spacing:30px;
词与词之间的间距（依据空格判断）
text-transform:
属性值:
capitalize ( 首字母大写 )
uppercase ( 大写 )
lowwercase (小写)
列表属性
list-style-type: disc(实心圆) 定义列表符号样式
list-style-image：url 使用图片作为列表符号
list-style: none 清除列表符号！
list-style-position: outside(外边)/inside(里边) 使用图片作为列表符号
边框属性
border:10px solid red; 复合式写法（简写）
border-width:10px;
border-style:线形；
border-color:颜色
常用的线型：solid( 实线 ) dashed (虚线) dotted( 点状线 ) double(双线) none/0
给单一方向设置边框
border-left/right/top/bottom ： 10px solid red
border设置方法：
border复合式写法的后面的3属性值，可单独拆分出来。
单独拆分出来的属性例如：border-width:
border-width:10px; 四周
border-width:10px 20px; 上下 左右
border-width:10px 20px 50px 上 左右 下
border-width:10px 20px 50px 100px 上右下左
背景属性
1: background-color:颜色值 ( 背景色一直会平铺到边框区域 )
2: backgrond-image:url(); 背景图 默认情况下背景图的展示形式：
容器大于背景图 -> 铺满
容器等于背景图 -> 显示一张
容器小于背景图 -> 只显示容器区域
3：background-repeat:
属性值： no-repeat 不平铺
repeat
repeat-x
repeat-y
4:background-position 控制背景图的位置
属性值：两个属性值 第一个水平位置（距离左侧的距离） 第二个垂直位置（ 距离顶端的距离 ）
background-position:100px 100px;
background-position:right bottom
background-position:center bottom
5:background-attachment 控制背景图是否固定 ( 滚动条 )
属性值：scroll fixed;
简写：
background:red url（） no-repeat left right;
网页中的图片的展示形式： img导入的图片(占空间) 背景图（不占空间）
css浮动属性
语法：float:none/left/right;
添加浮动的元素，不占据空间、脱离文档流
注：只要有浮动，父元素 一定添加高度、否则父元素会出现” 高度塌陷 “
盒模型
一、padding用法：
1：padding是在盒子里面，在盒子与内容之间。
2：padding的作用：控制子元素在父元素里面的位置关系。
3：padding会把盒子撑大。
4：如果想让盒子保持原有的大小：在宽高基础上减掉padding值。（ 如果一个元素是被内容撑开的，没有设置固定的宽高，padding直接撑开。不用减掉 ）
5:如果给单一方向添加padding值
padding-top/bottom/left/right
6:padding的设置特点：
padding:30px; 四周
padding:10px 30px; 上下 左右
padding:10px 30px 50px 上 左右 下
padding:10px 30px 50px 100px 上右下左
7:padding不会对背景图的位置造成影响。
二、margin用法： 外边距
1、margin在元素的外围，不会改变元素的大小
2、作用：控制元素之间的距离
3、给单一一方向添加margin：同上（padding）
4、margin的设置特点：同上（padding）
5、margin：0 auto; 左右居中
6、margin常出现的Bug
a:两个相邻的元素上下margin值，不会叠加，按最大值
