CSS样式表
CSS概述
CSS（Cascading Style Sheets,层叠样式表），主要是美化HTML网页。
（一）样式表的分类
1.内联样式表
内联样式：<p style="color: red; margin-left: 20px">内联样式表</p>
例子：
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>无标题文档</title> 5 </head> 6 7 <body> 8 <p style="font-size:50px;color:red">蛋蛋的忧伤</p> 9 </body> 10 </html>
2.内嵌样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部（<head>...</head>之间）样式表。
例子：
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <style type="text/css"> 4 input 5 { 6 background-color:#FF0;font-size:45px; 7 8 } 9 m1{color:#00F} 10 </style> 11 </head> 12 13 <body> 14 <input type="text" name="" value="12345" /><br /><br /> 15 <m1>猫捉老鼠</m1> 16 </body> 17 </html>
3.外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。
例子：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style2.css" />
</head>
<body>
姓名：<input type="text" name="" value="12345" class="aa" /><br /><br />
<div>你是猪吗？</div><br /><br />
<div>年龄<input type="text" name="" value="abcde" class="bb" /></div>
</body>
</html>
</body>
</html>
@charset "utf-8"; /* CSS Document */ .aa{background-color:00FF00;font-size:14px;font-weight:bold;font-style:italic} .bb{border:none;border-bottom:1px solid blue;font-size:50px} #cc{border:none;border-bottom:1px solid red; font-size:100px} #dd{background:#FF0;text-indent:28px;line-height:21px} div,a1{background:#0F0;font-size:80px;margin:20px;padding:10px} div a2{background:#FF0;font-style:italic;font-size:45px}
（二）选择器
1.标签选择器
<style type="text/css"> input { background-color:#FF0;font-size:45px; } </style>
只对input标签起作用
2.class选择器
.ClassName ：.+Class类的名称；类名是区分大小写。
.aa{background-color:00FF00;font-size:14px;font-weight:bold;font-style:italic}
3.ID选择器
#id ：#+元素的id；id是区分大小写。
#cc{border:none;border-bottom:1px solid red; font-size:100px}
4.复合选择器
A.元素名称1,元素名称2,#id,.ClassName ：可以根据元素的名称、id、类名，使符合条件的元素共同拥有样式;各选择器条件要以分号(,)隔开。
div,a1{background:#0F0;font-size:80px;margin:20px;padding:10px}
B.父选择器 子选择器 ：满足父选择器下的子选择器条件；两者中间用空格隔开。
div a2{background:#FF0;font-style:italic;font-size:45px}
C。筛选选择器：在标签p中的class=".ee"的标签，执行以下样式。
p.ee{text-align:center;line-height:40;vertical-align:middle}