CSS
-
css是什么
-
css怎么用
-
css选择器*
-
美化网页
-
盒子模型
-
浮动
-
定位
-
网页动画
css的优势：
-
内容和表现分离
-
网页结构表现统一，可以实现复用
-
样式十分的丰富
-
建议使用独立于html的css文件
-
利用SEO，容易被搜索引擎收录
css的三种导入方式
优先级：就近原则
-
行内样式：在标签元素中，编写一个style属性
-
内部样式：style标签
-
外部样式：
-
<link 标签
-
@import
-
选择器
作用：选择页面上的某一个或者某一类元素
基本选择器 id>类>标签
-
标签选择器 格式：直接标签名{}
-
类选择器 格式 ：.+class{}
-
id选择器 格式：#+id名称{}
层次选择器
-
后代选择器：在某个元素的后面
body p{
background：red；
}
-
子选择器：一代，儿子
body>p{
background: ...;
}
-
相邻兄弟选择器：同辈（只有一个，相邻（向下））
.active + p{
background: ...;
}
-
通用选择器：当前选中元素的向下的所有兄弟元素
.active~p{
background: ...;
}
结构伪类选择器
ul的第一个子元素
ul li:first-child{}
ul的最后一个子元素
ul li:last-child{}
属性选择器（常用）
=绝对等于
*=包含这个名称的
^=以这个开头
$=以这个结尾
标签[属性（可以使用正则表达式）]{
}
美化网页
span标签：重点要突出的字用span标签套起来
字体样式 font
font-family字体
font-size字体大小
font-weight字体粗细
color字体颜色
文本样式
颜色(单词或者RGB 0-F或者RGBA)
文本对齐方式 text-align:center
首行缩进 text-indent:2em
行高 height line-height
装饰 text-decoration(下划线)
文本图片水平对齐 vertical-align:middle
ul li 的style list-style
背景
背景图片
渐变
盒子模型
margin：外边距 居中元素
padding：内边距
border：边框
-
边框的粗细
-
边框的样式
-
边框的颜色
浮动 float display（变成块元素或者行内元素）
标准文档流
clear：right；右侧不允许浮动
父级边框塌陷的问题
-
增加父级元素的高度
-
增加一个空的div标签
-
overflow
在父级元素中增加一个 overflow：hidden
-
父类添加一个伪类：after
定位
-
相对定位 position：relative
-
绝对定位 position：absolute
-
固定定位 position：fixed
-
z-index 默认是0，最高999