CSS 层叠样式表（表示层）
一、CSS引入方式
1.CSS行内样式
直接使用style属性
style=”width:100px;height:100px;background-color:#f00;”
2.内嵌样式
<style></style>
3.外链式
将CSS写入单独的一个文件，文件扩展名为“.css”
eg:<link type="text/css" rel="stylesheet" href=“sy.css" />
4.导入样式
使用@import指令将CSS文件中的CSS样式导入不同地方
！！！必须写在<style></style>里的第一行。
！！！优先级高低：谁离标签近，谁的优先级最高。
二、CSS语法规则
1.类型选择器
语法：标签{规则} eg：td{color：#f00;}
2.通配选择器
*规则 eg：*{font-family:”宋体”}
3.ID选择器
语法：#id{规则}
4.类选择器
.classname{规则} eg：ul.con //类名叫con的ul
5.包含选择器
父元素 子元素{ } 此时的子元素可能是父元素的直接子元素 也可能是子元素的子元素
eg：div .box{ } div下方 所有类名叫box的元素
选择直接子元素 父元素>子元素{ }
三、CSS中单位
px像素
em字大小的倍数
四、CSS颜色表达方式
1.直接使用颜色的英文单词
使用三色数值 rgb（120,222,100）//数值在0-255之间
r：red g：green b：blue
2.使用三色百分比
rgb（10%，20%，100%）
rgba(数值1，数值2，数值3，透明度) 透明度取值范围0-1
3.使用三色数值的十六进制
eg：#0000ff
五、字体样式
1.font-family：可以指定多个字体，不同字体间用“，”隔开
2.font-size：字体大小
单位 px 、 em eg：font-size:30px;
3.font-style：字体倾斜效果
normal 正常（默认）
oblique 倾斜体
italic 斜体
4.font-weight 字体加粗
值：
normal 正常（默认）
bold 粗体
bolder 加粗体
lighter 细体
100-900 数字越大 字体越粗
5.text-transform 字体英文大小写转换
值：
uppercase 全大写
lowercase 全小写
capitalize 首字母大写
6.text-decoration 字体的修饰
值：
none 去除下划线
underline 增加下划线
line-through 中划线（删除线）
overline 上划线
7.text-align 文本水平对齐方式
值：
left 左对齐
center 居中对齐
right 右对齐
justify 两端对齐（一般常用与英文）
8.line-height 行高
文字在一行内垂直居中 line-height:height的值
9.vertical-align 垂直居中
行内块级元素与行内元素或文本的垂直对齐
值：
baseline
top
middle
bottom
10.overflow 内容溢出处理
值：
visible 超出部分 可见
hidden 超出部分 隐藏
scroll 出现滚动条
auto 浏览器自动处理
11.text-overflow 文本溢出处理
值：
clip 超出部分 剪切
ellipsis 超出部分 显示省略号
12.white-space 空白处理
值：
normal
pre 保留空格
nowrap 不换行 =====》<nobr>强制不换行</nobr>
13.text-indent 文本缩进
值：正负都可以
14.letter-spacing 字母与字母之间的间距/中文的字与字之间的间距
值：正负都可以
15.word-spacing 单词与单词之间的间距（英文）
六、权重
通配符选择器 权重 0.5
标签选择器 权重 1
类选择器 权重 10
id选择器 权重 100
行内样式 权重 1000
样式里的值后面 !important 权重最大
包含选择 权重相加
谁的权重大 谁的样式起作用
七、盒子模型
1.padding 内边距（内补丁）
padding-top/padding-right/padding-bottom/padding-left
padding:100px;代表上下左右都为100px;
padding:100px 50px;代表上下100px，左右500px；
padding:100px 50px 20px;代表上100 左右50 下20；
padding:100px 30px 20px 50px;代表上 100 右30 下20 左50（顺时针方向）
2.border 边框
border-width 宽度
border-color 颜色
border-style 样式（1.Solid 实心 2.dotted 圆点 3.dashed 虚线 4.double双实线）
eg:border:2px solid red;
边框的小应用：
小三角：
width:0;
border:10px solid transparent;
border-top-color:red;
3.a元素的伪类
a:link{} 未访问状态
a:visited{} 访问过后的状态
a:hover{} 鼠标悬停时的状态
a:active{} 激活时的状态
4.元素之间的转换
<1>任何元素转换为块级元素 display:block;
<2>任何元素转换为行内块级元素 display:inline-block;
<3>任何元素转换为行内元素 dispaly:inline;
<4>任何元素消失不见 display:none;
5.盒子模型外边距
上下两个盒子距离
margin-bottom=50px
Margin-bottom=100px
则两个盒子之间距离是100px（以大的为准）
两个盒子都有margin-top，以数值大的为准。
margin:0 auto; 可以实现块居中
6.背景
<1>背景颜色 background-color:4种颜色表达方式
<2>背景图片 background:url(“image”)
<3>背景平铺
repeat 图片平铺 重复(默认)
repeat-x 水平平铺
repeat-y 垂直平铺
no-repeat 不平铺
<4>background-position 定义背景图片位置
值：
表示位置的英文单词 left right center top bottom
百分比
具体有单位的数值
left top ====> 0 0 左上角
center top =====>50% 0 顶部中间
right top =====>100% 0 右上角
left center ====>0 50% 左中
center center=====>50% 50% 正中间
right center====>100% 50% 右中
left bottom=====>0 100% 左下角
center bottom====>50% 100% 下中
right bottom===>100% 100% 右下角
<5> background-size背景图片的大小
值:
百分比
数值+单位
cover 等比例扩展图片至足够大 （图片可能被裁减）
contain 等比例扩展图片至足够大（图片可以完整显示，可能会引起区域内空白）
<6> background-attachment 背景图片是否固定
值:
scroll 背景图片会随着正常的文档流滚动（默认）
fixed 背景图片固定不动 不会随正常的文档滚动
简写：background:background-color background-image background-repeat background-position;
background:背景颜色 url(图片路径) 是否重铺 背景图片的位置;
eg:background:#fff url(img/1.jpg) no-repeat center center;
八、浮动
float:
值:
left 左浮动
right 右浮动
none 不浮动
任何元素加了浮动后（left,right）,变成了块级元素
清除浮动的方法：
1.给父元素加height
2.给父元素加overflow:hidden
3.在浮动元素后面加一个空的块级元素 给它加样式 clear:both clear(left清除左浮动 right清除右浮动 both清除左右浮动）
a.给父元素加伪类 :after
父元素:after{
content:"";
display:block;
clear:left;
}
九、定位
position定位：
值：
static 不定位（默认 正常文档流）
relative 相对定位 （相对于自身）
absolute 绝对定位
1.有定位的元素的外面包着它的元素（可能是直接元素，也可能是间接元素）有定位，相对于有定位的那个元素定位
2.有定位的元素的外面包着它的元素没有定位，相对于浏览器定位
fixed 固定定位 （相对于浏览器定位）
多个定位元素的覆盖次序 通过z-index来判断 z-index的值是一个没有单位的数值
谁的z-index的值越大，谁就在最上层
补充：定位时使居中的方法
<1>left:0; right:0; top:0; bottom:0; margin:0 auto;
<2>width:100px;
height:100px;
position:absolute;
left:50%;
top:50%;
transform:translate:(-50%,-50%);
<3>width:100px;
height:100px;
position:absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;
十、列表样式
1.list-style-type 列表样式类型
值：
disc 实心原点
none 去掉样式
circle 空心圆
square 实心方形
2.list-style-image 列表样式图片
值：
url(图片路径)
3.list-style-position 列表样式的位置
值：
outside 列表样式在内容的外面
inside 使列表样式在内容再里面
十一、几类隐藏
1.display ：none 元素在页面不显示 位置也不见了
2.visibility:hidden 元素在页面不显示 位置还在
3.opacity:0 元素在页面看不见 位置还在
4.z-index ： -999999 元素在页面也看不见
十二、鼠标的几种样式
cursor 光标
值：
pointer 小手样式
wait 等待
help 帮助
url(图片路径),auto 光标变成所需要的小图片
网友评论