2018-07-31
CSS样式表
1内联样式（行内样式） 其他标签不受影响
2内部样式 html 里面 定义 style 可以 实现代码重用
3 外部样式 引用css文件
llink @import “ xxx.css”
1继承性 2 层叠性 3优先级 （！impotant）
css 特征 继承性 重叠性 优先级
css 基础选择器
通用选择器 元素选择器 类选择器(类名 不能用 数字开头) .XXX{} 分类选择器 ID 选择器 群组选择器（隔开的选择器列表）
*{
}
后代选择器 子带选择器（必须是父子关系）
--------------------------------------------------------------------------------------------------------
伪类选择器
尚未访问链接的样式 点击中的样式
a:link{ a:active{ }
}
点击过后
a:visited{
}
---------------------------------------------------------------------------------------------------------------
display none 是全隐藏 并且不占据高度了
overflow hidden 超出部分隐藏
-------------------------------------------------------------------------------------------------------------------
/*设置滚动条的宽度*/
ul::-webkit-scrollbar{
width:10px;
}
/*设置滚动条轨道的样式*/
ul::-webkit-scrollbar-track{
background-color:brown;
}
/*设置滚动条滚动的颜色*/
ul::-webkit-scrollbar-thumb{
background-color:chartreuse;
}
------------------------------------------------------------------------------------------------------------
边框 border : 边框倒角 边框阴影
设置四个边框 宽度 样式 颜色 border-radius= 50%（圆形） box-shadow:5px 5px 5px 10px red;
border:width style color;
border:1px solid black;
-------------------------------------------------------------------------------------------------------------
盒模型
外边距 内边距 边框 宽度 高度
margin padding border width height
---------------------------------------------------------------------------------------------------------------------
背景图片
backgroung - color -image (颜色 背景图片)
background -size （背景图片的尺寸）
-------------------------------------------------------------------------------------------------------------------------------
渐变
1线性渐变（直线变） 重复渐变 repeating
linear-gradient
2 经性渐变（圆形变）
radial-gradient
---------------------------------------------------------------------------------------------------------------------------------
字体
font-family
字体的大小 字体的颜色 首行文本缩进
font-size color text-indent : value ;
-------------------------------------------------------------------------------------------------------------------------------------
显示
dispiay non'e 隐藏
display block 显示
让 行内元素 像块级元素一样去显示
让 块级元素 隐藏 再显示出来
------------------------------------------------------------------------------------------------------------------------------------------
浮动定位
1、普通流定位 2、绝对定位 3相对定位 5、固定定位
static absolute relative fixed
需要修改元素出现的位置时
-----------------------------------------------------------------------------------------------------------------------------------------------------
3、浮动
flow left right
浮动元素外边缘不会超过父元素的边框
浮动元素默认不会重叠
浮动只能左右浮动，不能上下浮动
所有元素设置为浮动元素的话，默认将转换为块级元素
overflow:hidden;（消除浮动）
