CSS——（CSS样式规则，CSS样式表单，选择器，常用的CSS属性）

CSS（Cascading Style Sheets，层叠样式表单）是由W3C所提出，主要的用途是控制网页的外观，也就是定义网页的编排，显示，格式化及特殊效果，有部分功能与HTML重叠。

1.CSS样式规则与选择器

CSS样式表单是由一条一条的样式规则（style rule）所组成，而样式规则包含选择器（selector）与声明（declaration）两个部分：

选择器{属性：值[；属性：值[; …]]}

1.1选择器（selector）：
选择器是用来指定样式规则所要套用的对象，也就是HTML元素。

1.2声明（declaration）：
声明是用来指定HTML元素的样式，以大括号括起来，里面包含属性（property）与值（value）,中间以冒号（：）连接，同时样式规则的声明个数可以不只一个，中间以分号（；）隔开。

1.3CSS注意事项：

1，空白，换行，属性值的前后必须加上双引号或者单引号。
2，CSS会区分英文字母的大小写。
3，CSS的注释符号是/**/。
4，样式规则可以合并。

h1,h2,h3,p{color:blue}

2.链接HTML文件与CSS样式表单

2.1在<head>元素里面嵌入样式表单

<!doctype html>
<html><head><meta charset="utf-8"><title>新网页1</title><style>body {color:white; background:purple}</style></head><body><h1>欢迎光临！</h1></body>
</html>

2.2使用HTML元素的style属性指定样式表单

<!doctype html>
<html><head><meta charset="utf-8"><title>新网页1</title> </head> <body style="color:white; background:purple"><h1>欢迎光临！</h1></body>
</html>

2.3将外部的样式表单导入HTML文件

<!doctype html>
<html><head><meta charset="utf-8"><title>新网页1</title><style>@import url("body.css");</style>    </head><body><h1>欢迎光临！</h1></body>
</html>

//body.css
body {color:white; background:purple}

2.4将外部的样式表单链接至HTML文件

<!doctype html>
<html><head><meta charset="utf-8"><title>新网页1</title><link rel="stylesheet" href="body.css" type="text/css"> </head><body><h1>欢迎光临！</h1></body>
</html>

3.选择器的类型

3.1类型选择器

针对HTML中的元素

h1{font-family："标楷体"；font-size：30px；color：blue；
}

3.2后裔选择器
针对HTML元素的子元素

//<h1>元素的<i>元素
h1  i{color:blue}

3.3万用选择器
针对所有元素

*{padding:0;margin:0}

3.4类选择器
针对隶属于某个指定类的HTML元素，即class

.heading{font-family："华康黑粗体";font-size:30px;color:maroon
}

//指定类，同时限制HTML元素的类型
p.heading{font-family："华康黑粗体";font-size:30px;color:maroon
}

//利用<div>和<span>元素套用样式规则
<!doctype html>
<html><head><meta charset="utf-8"><title>蝶恋花</title><style>.content {font-family:标楷体; font-size:25px; color:olive}.note {color:red}      </style></head><body> <div class="content"><p>庭院深深深几许？杨柳堆烟，帘幕无重数。玉勒雕鞍游冶处，楼高不见章台路。雨横风狂三月暮，门掩黄昏，无计留春住。泪眼问花花不语，乱红飞过秋千去。</p>注释1：<span class="note"> “章台路” </span>意指歌妓聚居之所。<br>注释2：<span class="note"> “冶游生春露” </span>意指春游。</div></body>
</html>

3.5ID选择器
针对符合指定ID的HTML元素

<!doctype html>
<html><head><meta charset="utf-8"><title>新网页1</title><style>#button1 {font-size:30px; color:red}#button2 {font-size:30px; color:green}      </style></head><body> <h1>意见调查单</h1><form><input type="submit" value="提交" id="button1"><input type="reset" value="重新输入" id="button2"></form></body>
</html>

3.6属性选择器
针对有指定某个属性的元素

<!doctype html>
<html><head><meta charset="utf-8"><title>新网页1</title><style>[class*="apple"] {color:blue}</style></head> <body> <ul><li class="apple">苹果牛奶</li><li class="apple-banana">香蕉苹果牛奶</li><li class="grape apple banana">特调牛奶</li><li class="kiwifruit apple">特调果汁</li></ul></body>
</html>

3.7伪类选择器

<!doctype html>
<html><head><meta charset="utf-8"><title>伪类</title><style>a:link {color:black} /*套用到尚未浏览的超链接*/a:visited {color:green}/*套用到已经浏览的超链接*/a:hover {color:blue}/*套用到鼠标指针所指到但尚未点选的元素*/a:focus {color:red}/*套用到获取焦点的元素*/a:active {color:yellow}/*套用到所点选的元素*/    </style></head><body> <ul><li><a href="novel1.html">射雕英雄传</a></li><li><a href="novel2.html">神雕侠侣</a></li><li><a href="novel3.html">倚天屠龙记</a></li><li><a href="novel4.html">碧血剑</a></li></ul> </body>
</html>

4.常用的CSS属性

字体属性；文本属性；颜色属性；背景属性；框线属性；
4.1字体属性

body{font-family：华康细圆体，微软正黑体；font-size：30px；font-style：oblique；//粗体font-variant：small-caps；//小号英文字母font-weight：400；//字体的粗细，400相当于normalfont-height：2；//两倍行高font-height：30pxfont：normal small-caps 120%/120% "新细明体";
}

4.2文本属性

p{text-indent：20px;//首行缩进20像素text-align:center;//文本居中text-decoration：underline;//下划线，overline：顶线，line-through：删除线letter-spacing：3px;//字母间距word-spacing：3px;//文字间距，单词与单词之间text-transform：normal;//默认不转换
}

4.3颜色属性

h1{color:red;color:rgb(100%,0%,0%);color:rgb(256,0,0);color:#ff0000;color:rgba(255,0,0,0.5);//0.5为透明度
}

4.4背景属性

body{background-color:red;background-image:url(a.jpg);background-repeat:Repeat;//图片不够大时，重复填充background-attachment:scroll;//或者ixed，图片是否跟随网页内容移动background-position：right bottom;//水平方向为靠右，垂直方向为靠下。}

4.5框线属性

#image{border-style:solid;//实线框线border-color:red;//边框线的颜色border-width:thin;//边框线的粗细}
<img src="flower.jpg" id="image">

p{border:thick solid blue;
}