CSS
1、CSS简介
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
样式表定义如何显示 HTML 元素
样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。
2、CSS语法
CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。
选择器通常是您需要改变样式的HTML元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值，属性和值被冒号分开。
CSS声明总是以分号（；）结束，声明组以大括号{}括起来。
CSS注释：以“/*”开始，以“*/”结束：
/*这是注释*/
3、CSS Id和Class
如果你要在HTML元素中设置CSS样式，你需要在元素中设置“id"和”class"选择器。
id选择器可以为标有特定ID的HTML元素指定特定的样式；HTML元素以ID属性来设置ID选择器，CSS中ID选择器以“#”来定义：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>
<style>
#para1
{text-align:center;color:red;}
</style>
</head> <body> /*这是注释*/ <h1 id="para1">ddddddffff</h1> </body> </html>
*ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> .center { text-align:center; } </style> </head> <body> <h1 class="center">标题居中</h1> <p class="center">段落居中。</p> </body> </html>
你也可以指定特定的HTML元素使用class。
在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> p.center { text-align:center; } </style> </head> <body> <h1 class="center">这个标题不受影响</h1> <p class="center">这个段落居中对齐。</p> </body> </html>
*类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
4、CSS创建
当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。
插入样式表的方法有三种:
- 外部样式表(External style sheet)
- 内部样式表(Internal style sheet)
- 内联样式(Inline style)
外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。
内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:
<head> <style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head>
内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
一般情况下，优先级如下：
内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
<head> <!-- 外部样式 style.css --> <link rel="stylesheet" type="text/css" href="style.css"/> <!-- 设置：h3{color:blue;} --> <style type="text/css"> /* 内部样式 */ h3{color:green;} </style> </head> <body> <h3>测试！</h3> </body>
5、CSS背景
CSS 背景属性用于定义HTML元素的背景。
CSS 属性定义背景效果:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
background-color 属性定义了元素的背景颜色.
页面的背景颜色使用在body的选择器中:
body {background-color:#b0c4de;}
CSS中，颜色值通常以以下方式定义:
- 十六进制 - 如："#ff0000"
- RGB - 如："rgb(255,0,0)"
- 颜色名称 - 如："red"
background-image 属性描述了元素的背景图像.
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.
body {background-image:url('paper.gif');}
默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。
一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调
如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:
body { background-image:url('gradient2.png'); background-repeat:repeat-x; }
如果你不想让图像平铺，你可以使用 background-repeat 属性:
body { background-image:url('img_tree.png'); background-repeat:no-repeat; }
为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。
可以利用 background-position 属性改变图像在背景中的位置:
body { background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:right top; }
以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。
为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.
背景颜色的简写属性为 "background":
body {background:#ffffff url('img_tree.png') no-repeat right top;}
当使用简写属性时，属性值的顺序为：:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
CSS 背景属性
| Property | 描述 |
|---|---|
| background | 简写属性，作用是将背景属性设置在一个声明中。 |
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 |
| background-color | 设置元素的背景颜色。 |
| background-image | 把图像设置为背景。 |
| background-position | 设置背景图像的起始位置。 |
| background-repeat | 设置背景图像是否及如何重复。 |
6、CSS文本格式
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：
- 十六进制值 - 如: ＃FF0000
- 一个RGB值 - 如: RGB(255,0,0)
- 颜色的名称 - 如: red
一个网页的背景颜色是指在主体内的选择：
body {color:red;} h1 {color:#00ff00;} h2 {color:rgb(255,0,0);}
**对于W3C标准的CSS：如果你定义了颜色属性，你还必须定义背景色属性。
文本的对齐方式
文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐.
当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。
h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;}
text-decoration 属性用来设置或删除文本的装饰。
从设计的角度看 text-decoration属性主要是用来删除链接的下划线：
a {text-decoration:none;}
也可以这样装饰文字：
h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;}
文本转换：文本转换属性是用来指定在一个文本中的大写和小写字母。可用于所有字句变成大写或小写字母，或每个单词的首字母大写。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p.uppercase{text-transform:uppercase;} p.lowercase{text-transform:lowercase;} p.capitalize{text-transform:capitalize;} </style> </head> <body> <p>有日夜有幻想，无法等待！</p> <p class="uppercase">i love you</p> <p class="lowercase">i love you to</p> <p class="capitalize">this is some text</p> </body> </html>
I LOVE YOU
i love you do to
This Is Some Text
文本缩进：text-indent:10px
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p.indent{text-indent:50px;} </style> </head> <body> <p class="indent">有日夜有幻想，无法等待！那可爱面容挽手说梦话象昨天你共我！</p> </body> </html>
指定字符之间的空间：letter-spacing:2px
指定行间距：line-height:70%
指定文本书写方向：direction:tr1;
指定单词之间的空白空间：word-spacing:30px
指定使文字不自动换行不环绕显示：wite-apace:nowrap;
指定图像对齐方式：vertical-align:text-top; verticcal-align:text-bottom;
指定文本添加阴影：text-shadow:2px 2px #FF0000;
所有CSS文本属性：
属性 描述
color 设置文本颜色
direction 设置文本方向。
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi 设置或返回文本是否被重写
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距
7、CSS字体
CSS字体属性定义字体，加粗，大小，文字样式。
在CSS中，有两种类型的字体体系名称：
通用字体体系-拥有相似外观的字体体系组合（'serif'或'monospace'）
特定字体体系-一个特定的字体体系（'times'或'courier'）
字体体系：font-family属性设置文本的字体体系。font-family属性应该设置几个字体名称作为一种“后备”机制，如果浏览器不支持第一种字体，他将会尝试下一种字体。
如果字体体系的名称超过一个字，它必须用引号，多个字体体系是用一个逗号分隔指明：
p{font-family:"Times New Roman", Times, serif;}
字体样式：主要是用于指定斜体文字的字体样式属性，正常、斜体、倾斜的文字。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p.aa{font-style:normal;} p.bb{font-style:italic;} p.cc{font-style:oblique;} </style> </head> <body> <p class="aa">正常字体</p> <p class="bb">斜体字体</p> <p class="cc">倾斜字体</p> </body> </html>
字体大小：
font-size属性设置文本的大小。
能否管理文字的大小，在网页设计中是非常重要的，但是，不能通过调整字体大小是段落看上去像标题，或者是标题看上去像段落，必须使用正确的HTML标签。
字体大小的值可以是绝对或相对的大小。
绝对大小：
设置一个指定大小的文本
不允许用户在所有浏览器中改变文本大小
确定了输出的物理尺寸时绝对大小很有用
相对大小：
相对于周围的元素来设置大小
允许用户在浏览器中改变文字大小
如果不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）
设置字体大小像素：
设置文字的大小与像素，让您完全控制文字大小：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p.aa{font-style:normal;font-size:40px;} p.bb{font-style:italic;font-size:30px;} p.cc{font-style:oblique;font-size:10px;} </style> </head> <body> <p class="aa">正常字体</p> <p class="bb">斜体字体</p> <p class="cc">倾斜字体</p> </body> </html>
用em来设置字体大小：
为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。
em的尺寸单位由W3C建议。
1em和当前字体大小相等。在浏览器中默认的文字大小是16px。
因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
使用百分比和em组合：
在所有浏览器的解决方案中，设置<body>元素的默认字体大小的是百分比：
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
设置字体加粗：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p.normal{font-weight:normal;} p.lighter{font-weight:lighter;} p.bold{font-weight:bold;} p.thicker{font-weight:900;} </style> </head> <body> <p class="normal">正常</p> <p class="lighter">减淡</p> <p class="bold">加粗</p> <p class="thicker">加粗</p> </body> </html>
设置字体转变：font-variant:small-caps;
简写声明字体属性：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p.normal{ font:15px arial,sans-serif; } p.lighter{ font:italic bold 12px/30px Georgia,serif; } </style> </head> <body> <p class="normal">this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.</p> <p class="lighter">this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.</p> </body> </html>
所有CSS字体属性：
Property 描述
font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 指定字体的粗细。
8、CSS 链接
不同的链接可以有不同的样式。
链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
特别的链接，可以有不同的样式，这取决于他们是什么状态。
这四个链接状态是：
- a:link - 正常，未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
当设置为若干链路状态的样式，也有一些顺序规则：
- a:hover 必须跟在 a:link 和 a:visited后面
- a:active 必须跟在 a:hover后面
常用的链接样式：
根据上述链接的颜色变化的例子，看它是在什么状态。
让我们通过一些其他常见的方式转到链接样式：
text-decoration 属性主要用于删除链接中的下划线：
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
背景颜色属性指定链接背景色：
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
9、CSS列表
CSS列表属性作用如下：
- 设置不同的列表项标记为有序列表
- 设置不同的列表项标记为无序列表
- 设置列表项标记为图像
在HTML中，有两种类型的列表：
无序列表-列表项标记用特殊图形（如小黑点、小方框）
有序列表-列表项的标记有数字或字母
使用CSS可以列出进一步的样式，并可用 图像作列表项标记。
list-style-type属性指定列表标记的类型：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ul.a{list-style-type:circle;} ul.b{list-style-type:square;} ol.c{list-style-type:upper-roman;} ol.d{list-style-type:lower-alpha;} </style> </head> <body> <p>无序列表</p> <ul class="a"> <li>one</li> <li>two</li> <li>three</li> </ul> <ul class="b"> <li>four</li> <li>five</li> <li>six</li> </ul> <p>有序列表</p> <ol class="c"> <li>seven</li> <li>eight</li> <li>nine</li> </ol> <ol class="d"> <li>ten</li> <li>coffe</li> <li>cat</li> </ol> </body> </html>
要指定列表项标记的图像，使用列表样式图像属性
ul
{
list-style-image: url('sqpurple.gif');
}
浏览器兼容性图像 标记：
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
- ul:
- 设置列表样式类型为没有删除列表项标记
- 设置填充和边距0px（浏览器兼容性）
- ul中所有li:
- 设置图像的URL，并设置它只显示一次（无重复）
- 您需要的定位图像位置（左0px和上下5px）
- 用padding-left属性把文本置于列表中
在单个属性中可以指定所有的列表属性，这就是所谓的简写属性。
可以按顺序设置如下属性：
list-style-type
list-style-position
list-style-image
所有不同的列表项标记：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> ul.a {list-style-type:circle;} ul.b {list-style-type:disc;} ul.c {list-style-type:square;} ol.d {list-style-type:armenian;} ol.e {list-style-type:cjk-ideographic;} ol.f {list-style-type:decimal;} ol.g {list-style-type:decimal-leading-zero;} ol.h {list-style-type:georgian;} ol.i {list-style-type:hebrew;} ol.j {list-style-type:hiragana;} ol.k {list-style-type:hiragana-iroha;} ol.l {list-style-type:katakana;} ol.m {list-style-type:katakana-iroha;} ol.n {list-style-type:lower-alpha;} ol.o {list-style-type:lower-greek;} ol.p {list-style-type:lower-latin;} ol.q {list-style-type:lower-roman;} ol.r {list-style-type:upper-alpha;} ol.s {list-style-type:upper-latin;} ol.t {list-style-type:upper-roman;} ol.u {list-style-type:none;} ol.v {list-style-type:inherit;} </style> </head> <body> <ul class="a"> <li>Circle type</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="b"> <li>Disc type</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="c"> <li>Square type</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ol class="d"> <li>Armenian type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="e"> <li>Cjk-ideographic type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="f"> <li>Decimal type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="g"> <li>Decimal-leading-zero type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="h"> <li>Georgian type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="i"> <li>Hebrew type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="j"> <li>Hiragana type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="k"> <li>Hiragana-iroha type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="l"> <li>Katakana type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="m"> <li>Katakana-iroha type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="n"> <li>Lower-alpha type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="o"> <li>Lower-greek type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="p"> <li>Lower-latin type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="q"> <li>Lower-roman type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="r"> <li>Upper-alpha type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="s"> <li>Upper-latin type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="t"> <li>Upper-roman type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="u"> <li>None type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="v"> <li>inherit type</li> <li>Tea</li> <li>Coca Cola</li> </ol> </body> </html>
所有的CSS列表属性：
| 属性 | 描述 |
|---|---|
| list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中 |
| list-style-image | 将图象设置为列表项标志。 |
| list-style-position | 设置列表中列表项标志的位置。 |
| list-style-type | 设置列表项标志的类型。 |
10、CSS表格
指定CSS表格边框，使用border属性。
下面的例子指定了一个表格的Th和TD元素的黑色边框：
可以使用border-collapse属性显示一个表的当个边框。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> table{ border-collapse:collapse; } table,th,td { border:1px solid black; } </style> </head> <body> <table> <tr> <th>firstname</th> <th>lastname</th> </tr> <tr> <th>baobao</th> <th>zhizhi</th> </tr> </table> </body> </html>
使用width和height属性定义表格的宽度和高度：
table
{
width:100%;
}
th
{
height:50px;
}
表格中的文本对齐和垂直对齐属性，text-align属性设置水平对齐方式，想左（left），右（right），或中心（center）
td
{
text-align:right;
text-align:left;
text-align:center;
}
垂直对齐属性设置，如顶部，底部或中间：
td
{
vertical-align:top;
vertical-align:middle;
vertical-align:bottom;
}
设置边框颜色，th元素的文本和背景颜色：
table, td, th
{
border:1px solid black;
}
th
{
background-color:green;
color:white;
}
完整表格设置属性：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> #customers { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; width:100%; border-collapse:collapse; } #customers td, #customers th { font-size:1em; border:1px solid #98bf21; padding:3px 7px 2px 7px; } #customers th { font-size:1.1em; text-align:left; padding-top:5px; padding-bottom:4px; background-color:#A7C942; color:#ffffff; } #customers tr.alt td { color:#000000; background-color:#EAF2D3; } </style> </head> <body> <table id="customers"> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr class="alt"> <td>Berglunds snabbköp</td> <td>Christina Berglund</td> <td>Sweden</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr class="alt"> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr class="alt"> <td>Königlich Essen</td> <td>Philip Cramer</td> <td>Germany</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr class="alt"> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> <tr> <td>North/South</td> <td>Simon Crowther</td> <td>UK</td> </tr> <tr class="alt"> <td>Paris spécialités</td> <td>Marie Bertrand</td> <td>France</td> </tr> </table> </body> </html>
