目录
CSS
一、CSS概述
二、CSS的选择器
2.1CSS语法
2.2选择器--基本类型
2.3选择器--分组、继承
2.4选择器--高级类型
三、CSS常用样式
3.1 样式--背景
3.2 样式--文本
3.3 样式--字体
3.4 样式--链接
3.5 样式--表格
3.6 样式--轮廓
四、CSS框模型
4.1 CSS框模型示意图
4.2 CSS框模型--内边距、边框、外边距
五、值复制
六、CSS定位
定位-position：流、相对、绝对、固定、浮动定位
七、伪类&伪元素
7.1 伪类--主要针对超链接
7.2 伪元素
CSS
Cascading Style Sheets层叠样式表。
修饰HTML标签的显示。
一、CSS概述
CSS：数据(html)和显示(css)分离
外部样式的引入方式：<link rel="stylesheet" type="text/css" href="xxx.css"/>
优先级：就近原则，后加载的覆盖先加载的。
二、CSS的选择器
2.1CSS语法
选择器{
属性：属性值；
}
选择器：选取HTML页面中的标签元素。
属性：设置相关的属性值。
2.2选择器--基本类型
元素选择器、id选择器(不推荐使用，JS使用元素id属性)、类选择器(推荐使用)
2.3选择器--分组、继承
2.4选择器--高级类型
属性选择器： 选择器[属性='值']
/* 元素选择器 */p{color: blue;}/* id选择器 *//* 不建议在CSS中使用，JS要使用元素的id属性 */#pId{color: aqua;font-size: 24px;}/* 类选择器 */.pClass{color: aqua;font-size: 24px;}/* 分组选择器 --多个元素共享*/p,h1,#pId,.pClass{font-weight: bolder; /* 字体加粗*/}/* 继承选择器 --body下子元素受到影响*/body{font-family: 宋体; /* 设置字体*/}/* 后代选择器:影响所有后代 */h1 span{color: red;}/* 子元素选择器：只影响直属的子元素 */h2 > strong{color: red;}/* 相邻兄弟选择器 */h2+p{color: red;}/* 属性选择器 */input[type="password"]{border-color: red;}
三、CSS常用样式
3.1 样式--背景
3.2 样式--文本
3.3 样式--字体
3.4 样式--链接
3.5 样式--表格
3.6 样式--轮廓
四、CSS框模型
4.1 CSS框模型示意图
Box Model--盒子模型，规定了元素框处理 元素内容、内边距、边框和外边距 的方式。
4.2 CSS框模型--内边距、边框、外边距
<!DOCTYPE html><html><head><meta charset="utf-8"><title>DIV盒子--系统后台</title><style type="text/css">body{margin: 0px;}.top{background-color: #0000FF;height: 30px;}.left{background-color: #00FFFF;height: 600px;width: 100px;position: absolute;top:30px; bottom: 0px;left: 0px;}.main{background-color: black;height: 600px;position: absolute; /* 绝对定位，需要定义上下左右的距离*/top:30px; bottom: 0px;left: 100px;right: 0px;}</style></head><body><div id="" class="top"></div><div id="" class="left"></div><div id="" class="main"></div></body></html>
五、值复制
六、CSS定位
定位-position：流、相对、绝对、固定、浮动定位
<!DOCTYPE html><html><head><meta charset="utf-8"><title>定位</title><style type="text/css">body{margin: 0px;}.yellow{background-color: yellow;position: relative; /* 相对定位 没有脱离流定位 */top: 10px; /* 相对元素原来的位置移动 */left: 10px;}.green{background-color: green;position: absolute; /* 绝对定位 脱离流定位*/top: 40px; /* 参照物：最靠近的外围已定位的元素*/left: 80px;}.red{background-color: red;position: fixed;/* 固定定位 脱离流定位*/top: 10px; /* 参照物：浏览器窗口--body */left: 10px;}.subdiv{height: 100px;width: 100px;}.maindiv{border: 1px solid;position: absolute;width: 80%;margin: 20px;height: 500px;}</style></head><body><div class="maindiv"><div class="yellow subdiv"></div><div class="green subdiv"></div><div class="red subdiv"></div></div></body></html>
<!DOCTYPE html><html><head><meta charset="utf-8"><title>浮动定位</title><style type="text/css">body{margin: 0px;}div{/* background-color: #000000 */height: 100px;width: 100px;float: left; /* 浮动定位 */}.yellow{background-color: yellow;}.green{background-color: green;}.red{background-color: red;}</style></head><body><div class="yellow"></div><div class="green"></div><div class="red"></div><div style="clear:both"> </div> <!-- 消除浮动 --></body></html>
七、伪类&伪元素
7.1 伪类--主要针对超链接
超链接的几种状态。
结合display实现简单的下拉窗口。
