css层叠样式表
css可以定义HTML 页面显示的效果。比如：字体的大小，图片的宽高，版面的布局等等
样式 ： 给HTML 标签添加需要显示的效果
层叠 ：使用不同的添加方式，给同一个HTML 标签添加样式，最后所有的样式都叠加到一起，共同作用域该标签。
注意：css 样式选择器严格区分大小写。属性和属性值不区分大小写。
css 样式引入规则
样式引入优先级 ：行内样式 > 内部样式 > 外部样式
1、行内样式表
格式：在HTML 标签内，通过标签的style 属性，来定义css 样式
示例：
1 <p style="color:red; margin-left:20px"> 这是行内样式</p>
缺点：HTML 展示结构，css 显示效果没有分离，可读性差，只在当前标签中有效。
2、内部样式表
格式：将css 代码集中写在html 文档的头部<head>标签体中，并使用<style> 标签定义
在<style>标签中，通过选择器，选择标签，设置样式。
示例：
1 <head> 2 <style type="test/css"> 3 .name{ 4 color:read; 5 margin-lift: 20px 6 } 7 </style> 8 </head> 9 <body> 10 <p class=name> 这是行内标签示例 </p> 11 </body>
优点：在当前页面所有同名的标签都可以使用
缺点：只对当前html 页面有效，不能充分发挥css 代码的重用性
3、外部样式表
格式：外部样式又称链入式，是将所有的样式放在一个或多个以 .css 为扩展名的外部样式表中。
在HTML 页面的<head> 标签中，通过<link> 标签将外部样式表的文件引入到HTML 文档中
1 <!-- 方式三：外部样式 2 rel=“stylesheet” ： 固定值，当前文件和引入文件的关系。 3 rel是relationship的缩写 ， stylesheet是样式表 4 type="text/css" ： 固定值，浏览器解析方式 5 href ： 表示css 文件位置。 6 7 --> 8 <head> 9 <link rel="stylesheet" type="text/css" href="css/mystyle.css" /> 10 </head>
选择器
要想将css 样式应用于特定的html 标签，首先需要找到该标签。而在css 中，将这一任务的样式规则被称为选择器。
1、元素选择器（标签选择器）
元素选择器，在W3C中，又称类型选择器。通过元素定位，为该元素设置样式
格式：元素名{属性1：属性值1；属性2：属性值2}
示例：
1 <head> 2 <style type="test/css"> 3 p{ 4 color:read; 5 font-size : 10px 6 } 7 </style> 8 </head> 9 <body> 10 <p> 这是行内标签示例 </p> 11 </body>
优点：所有的html 标签名都可以作为选择器。能快速为页面中同一类型的标签设置统一样式
缺点：不能设计差异化样式
2、id 选择器
id 选择器，在HTML 标签中，添加一个id 属性，根据id 名进行选择，设置要添加的样式
格式：#id名{属性1：属性值1；属性2：属性值2}
示例：
1 <head> 2 <style type="test/css"> 3 #p1{ 4 color:read; 5 font-size : 10px 6} 7 </style> 8 </head> 9 <body> 10 <p id="p1"> 这是行内标签示例 </p> 11 </body>
注意：大多数HTML元素都可以定义id属性，即使在页面中有多个标签使用相同的id 值，也不会报错，但是会影响到JavaScript的页面效果
优点：可以为单独，或相同的id设置相同的样式
3、类选择器
类选择器，即在HTML 标签中添加一个class 属性，根据class 属性进行选择，设置css 样式
格式：. class的属性值{属性1：属性值1；属性2：属性值2}
示例：
1 <head> 2 <style type="test/css"> 3 .c1{ 4 color:read; 5 font-size : 10px 6 } 7 </style> 8 </head> 9 <body> 10 <p id="p1" class=“c1”> 这是行内标签示例 </p> 11 </body>
优点：可以为单独，或相同的class 设置相同的样式
4、属性选择器
属性选择器，通过标签的属性与属性值定位，设置css样式
格式：标签名[标签属性=“标签名”]{属性1：属性值1；属性2：属性值2}
示例：
1 <head> 2 <style type="test/css"> 3 input[type="text"]{ 4 badkground-color:read; 5 font-size : 10px; 6 } 7 input[type="password"]{ 8 badkground-color:yellow; 9 font-size : 10px; 10 } 11 </style> 12 </head> 13 <body> 14 <input type="text"> 15 <input type="password"> 16 </body>
5、后代选择器
后代选择器也称包含选择器，一个标签中包含另一个标签，使用父类和子类标签名定位，设置样式
格式：父类标签名 子类标签名{属性：属性值；属性2：属性值2}
示例：
1 <head> 2 <style type="test/css"> 3 p em{ 4 color:read; 5 font-size : 10px 6 } 7 </style> 8 </head> 9 <body> 10 <p> 父标签 <em>子标签</em> </p> 11 </body>
注意：有关后代选择器有一个容易被忽视的方面，即两个元素之间的层次间隔可以是无限的
例如：
/* ul em 将会选择标记中的的所有的em 元素*/ <head> <style type="test/css"> ul em{ color:red; } </style> </head> <body> <ul> <li>List item 1 <ol> <li>List item 1-1</li> <li>List item 1-2</li> <li>List item 1-3 <ol> <li>List item 1-3-1</li> <li>List item <em>1-3-2</em></li> <li>List item 1-3-3</li> </ol> </li> <li>List item 1-4</li> </ol> </li> <li>List item <em>2</em></li> <li>List item 3</li> </ul> </body>
6、伪类选择器
在支持css的浏览器中，链接（超链接）的不同状态都可以以不同的方式显示
这些状态包括 ： 已被访问状态，未被访问状态，鼠标悬停状态，鼠标按住的状态
格式：
<head> <style type="text/css"> a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 鼠标按住的链接 */ </style> </head> <body> <a> 超链接示例 </a> </body> /* 超链接和class 属性同用示例 */ <head> <style type="text/css"> a.one:link {color: #FF0000} /* 未访问的链接 */ a.one:visited {color: #00FF00} /* 已访问的链接 */ a.one:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a.one:active {color: #0000FF} /* 鼠标按住的链接 */ </style> </head> <body> <a class="one"> 超链接示例 </a> </body>
css 常用样式
1、背景：background-color
1 p {background-color: gray;}
2、字体：
font-size 设置字体大小
1 p {background-color: gray;font-size:60px;}
font-weight 设置字体粗细
font-style 设置字体风格
3、内边距：padding
1 h1 {padding: 10px 0.25em 2ex 20%;} /*顺序： 上，右，下，左*/ 2 3 /*也可以单独设置某一内边框的值*/ 4 h1 { 5 padding-top: 10px; /* 上 */ 6 padding-right: 0.25em; /* 右 */ 7 padding-bottom: 2ex; /* 下 */ 8 padding-left: 20%; /* 左 百分比数值 */ 9 }
4、外边距：margin
auto 自动居中，用来设置左右外边距
1 h1 {margin : 10px 0px 15px 5px;} /*顺序： 上，右，下，左*/ 2 3 /*单独设置某一外边框的值*/ 4 h2 { 5 margin-top: 20px; /* 上 */ 6 margin-right: 30px; /* 右 */ 7 margin-bottom: 30px; /* 下 */ 8 margin-left: 20px; /* 左 */ 9 }
5、边框
1 /* 同时设置边框的，宽度，样式，颜色 */ 2 #divcss5{border:1px solid #00F} 3 4 /* 单独设置边框的样式 */ 5 /* border-top-style //上 6 border-right-style //右 7 border-bottom-style //下 8 border-left-style //左 */ 9 /* 注意：单边属性要放在简写属性之后。因为如果把单边属性放在 border-style 之前，简写属性的值就会覆盖单边值 none。 */ 10 p {border-style: solid; border-left-style: none;} 11 12 /*设置边框的宽度 border-width*/ 13 p {border-style: solid; border-width:15px;} 14 /* 设置单边宽度 */ 15 p {border-width: 15px 5px 15px 5px;} 16 p { 17 border-style: solid; 18 border-top-width: 15px; //上 19 border-right-width: 5px; //右 20 border-bottom-width: 15px; //下 21 border-left-width: 5px; //左 22 } 23 24 /*设置边框的颜色 border-color*/ 25 p { 26 border-style: solid; 27 border-color: blue red; 28 } 29 /* border-top-color 30 border-right-color 31 border-bottom-color 32 border-left-color */ 33 /* 要为 h1 元素指定实线黑色边框，而右边框为实线红色，可以这样指定： */ 34 h1 { 35 border-style: solid; 36 border-color: black; 37 border-right-color: red; 38 }
边框样式值如下：
none : 无边框。与任何指定的border-width值无关
hidden : 隐藏边框。IE不支持
dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线（常用）
dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线（常用）
solid : 实线边框（常用）
double : 双线边框。两条单线与其间隔的和等于指定的border-width值
groove : 根据border-color的值画3D凹槽
ridge : 根据border-color的值画菱形边框
inset : 根据border-color的值画3D凹边
outset : 根据border-color的值画3D凸边
块级标签与行内标签
在HTML 标签中，被分为了不同的类型，一般分为块级元素与行内元素
块级元素： 以区域块方式出现，每个块标签独自占据一整行或多整行，
常见的块级元素有：<div> 、 <h1> 、 <p> 、 <ul> 、 <ol> 等
行内元素： 不必在新的一行开始，同时也不强迫其他元素在新的一行展示
常见的行内元素有： <span> 、 <a> 等
块级，行级相互转换 ： 需要使用display进行转换
/*选择器{display:属性值}*/ 属性值： inline：此元素将显示为行内元素（行内元素默认的display属性值） block：此元素将显为块元素（块元素默认的display属性值） none：此元素将被隐藏，不显示，也不占用页面空间。