1. CSS : cascading style sheet(层叠 样式 表)
- HTML标签，指定元素， CSS让标签更美， javascript: 可动
- 能写在哪？？
- 外部引入 css文件 用 link标签
- 内部样式： 用style标签
- 内联样式： 标签的style属性上
<!-- 外部样式 --><link type="text/css" rel="stylesheet" href="test1.css" /><style>/* 内部样式 */div:hover {width: 0px;height: 0px;border-width: 10px;border-style: solid;border-color: transparent transparent black transparent ;}div {width: 0px;height: 0px;border-width: 10px;border-style: solid;border-color:black transparent transparent transparent ;}</style>
</head>
<body><div></div><!-- 内联样式 --><p style="color:red">hello world</p><h1>hello world</h1>
</body>
2. 选择器：
选择符{属性：属性值；属性：属性值；}
2.1 元素选择器;元素 {样式}； 权重1
2.2 类选择器：class ； 权重10
-
class定义用
..abc {样式} .a2{样式} -
用的时候写在标签的class属性上
<div class="abc a2"></div>
2.3 ID选择器： #id； 权重100
-
定义是用
#id#a1 {样式} -
使用的时候用id属性：
<div id="a1"
2.4 * 所有元素：基本不用
2.5. 空格表示父子关系（派生）
E F： F是E的子就可以
E>F: F是E的一级子元素
2.6. 逗号， 并列的关系
<style>div {color :red;}div > p, abc > p {color: green;}</style>
</head>
<body><div>555<p>33<span>hello world</span>44</p>666<abc>dklfakl<p>hello world</p></abc></div>
</body>
2.7 + 同辈相邻的弟弟css3
h1 + p{color:yellow;}
※ h1的同辈，且相邻，且弟弟
2.8 属性选择器用【】
- [属性=值]： 常用name选择器
- [属性*=值]： 包含值
- [属性^=值]： 以值开头
- [属性$=值]：以值结尾
[a2='a3'] {font-weight: bold;}/* 属性过滤name */[name='ename'],[name='empno'] {background-color: red;;}/* 包含3 */[a2*='3'] {font-size: 2em;} /* 以a开头 */ [a2^='a'] {color: blue;}/* 以4结尾的 */ [a2$='4'] {border:1px solid black;}/* 空格split的包含 */[a2~='c5'] {font-style: italic;}
3 伪类：
3.1 ： nth系列：
- first-child: 第一个子。如果不是第一个子就失效
- nth-of-type(n); 第几个子元素
- nth-of-child(n): 第几个子元素是
<style>li:first-child {text-decoration: line-through;}li:last-child {text-indent: 4em;}div.a2:first-child {/* 不是第一个孩子无效 */color: red;}div.a2:nth-child(3) {/* 第几个是.a2的 */color: red;}div.a2:nth-of-type(3) {/* 第几个.a2 */color: green;}</style>
3.2： 一堆
:link/ visited/ active/ before/after/ hover/
4. CSS样式：定位：
定位一般都是和left/right/top/bottom连用
- fixed: 固定定位。广告跟着滚动条走。
- 文档流中清除位置。相对与整个窗体定位
