一.CSS
Cascading Style Sheet 级联样式表1.表现HTML或XHTML文件样式的计算机语言
2.包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定 二.css的优势：1.内容与表现分离
2.网页的表现统一，容易修改 3.丰富的样式，使得页面布局更加灵活 4.减少网页的代码量，增加网页的浏览速度，节省网络带宽 5.运用独立于页面的CSS，有利于网页被搜索引擎收录 三.css语法基本结构： 选择器{声明1;
声明2;
}h1 {
font-size:12px;
color:#F00; }四.三种样式：
1.行内样式 <h1 style="color:blue;font-size: 10px;">今天可能下冰雹，大家每人回家准备一口锅，盖头上</h1>行内样式有style属性控制，双引号中间的内容就是样式列表，且内个样式用分号分割
2.内部样式表
在<head></head>标签中写<style type="text/css"></style>
<head lang="en">
<meta charset="UTF-8"> <title>内部样式效果</title> <style type="text/css"> h1{ color: green; font-size: 100px; } </style> </head>注意：将全部符合条件的标签全部变样式
3.外部样式表
需要创建.css文件 style.css h1{ color: aqua; font-size: 15px; } 在HTML文件当中引用样式 链接式：<link href="文件路径" rel="stylesheet" type="text/css"/> 导入式：<style type="text/css"> @import "文件路径";</style>
4.链接式和导入式的区别
4.1<link/>标签属于XHTML，@import是属于CSS2.1
4.2使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示 4.3使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中 4.4@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的5.样式优先级
1.行内样式>内部样式表>外部样式表 2.就近原则6.三种基本选择器
6.1 标签
<h1>支佳宁说p和h1有什么区别</h1>
h1 { color: green; }6.2 class选择器
<h1 class="ZJN">支佳宁说p和h1有什么区别</h1> .ZJN{ color:yellow; } 6.3 id选择器 <h1 id="ZJNHH">支佳宁说p和h1有什么区别</h1> #ZJNHH{ color：black; } 遵循id>class>标签，注意，id不能重复7.层次选择器
7.1 /*后代选择器*/
body p{ background: yellow; } body标签下的所有p标签都要变7.2 /*子类选择器*/
body>p{ background: blue; } 只有body下的p变，其他包含p的不变7.3/*相邻兄弟选择器*/
.active+p{
background: green; } 定位class为active相邻的第一个p变7.4/*通用选择器*/
.active~p{ background: red; }8.结构伪类选择器
<style type="text/css"> /*定位ul下的第一个li*/ ul li:first-child{ background: yellow; } /*定位ul下的最后一个li*/ ul li:last-child{ background: blue; } /*定位第三个p*/ p:nth-child(3){ background: green; } /*定位第一个p*/ p:first-of-type{ background: red; } /*定位指定位置的p*/ p:nth-of-type(2){ background: blueviolet; } </style><p>p1</p>
<p>p2</p> <p>p3</p> <ul> <li>li1</li> <li>li2</li> <li>li3</li> </ul>E:first-child 作为父元素的第一个子元素的元素E
E:last-child 作为父元素的最后一个子元素的元素E E F:nth-child(n) 选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd E:first-of-type 选择父元素内具有指定类型的第一个E元素 E:last-of-type 选择父元素内具有指定类型的最后一个E元素 E F:nth-of-type(n) 选择父元素内具有指定类型的第n个F元素9.属性选择器
<style type="text/css"> .demo a { float: left; display: block; height: 50px; width: 50px; border-radius: 10px; text-align: center; background: #aac; color: blue; font: bold 20px/50px Arial; margin-right: 5px; text-decoration: none; margin: 5px; } /*属性*/ a[id]{ background: red; } /*属性值*/ a[href=efc]{ background: yellow; } /*属性开头*/ a[href^=s]{ background: orange; } /*属性结尾*/ a[target$=k]{ background: palevioletred; } /*属性包含*/ a[href*=a]{ background: purple; } </style><p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first" >1</a> <a href="" class="links active item" title="test website" target="_blank" >2</a> <a href="sites/file/test.html" class="links item" >3</a> <a href="sites/file/test.png" class="links item" > 4</a> <a href="sites/file/image.jpg" class="links item" >5</a> <a href="efc" class="links item" title="website link" >6</a> <a href="/a.pdf" class="links item" >7</a> <a href="/abc.pdf" class="links item" >8</a> <a href="abcdef.doc" class="links item" >9</a> <a href="abd.doc" class="linksitem last" id="last">10</a> </p>E[attr] 选择匹配具有属性attr的E元素
E[attr=val] 选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写） E[attr^=val] 选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串 E[attr$=val] 选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串 E[attr*=val] 选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配