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}