CSS：
CSS实例学习：http://www.runoob.com/css/css-examples.html
基本实例：
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
CSS声明总是以分号(;)结束，声明组以大括号({})括起来:
p {color:red;text-align:center;}
CSS注释以 "/*" 开始, 以 "*/" 结束
/*这是个注释*/
p
{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}
CSS有两种选择器：ID选择器跟class选择器
CSS 类选择器详解：http://www.w3school.com.cn/css/css_selector_class.asp
CSS id 选择器：
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
以下的样式规则应用于元素属性 id="para1":
实例
#para1
{
text-align:center;
color:red;
}
CSS class选择器：
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
实例
.center {text-align:center;}
CSS创建样式表：
插入样式表的方法有三种:
1.外部样式表(External style sheet)
2.内部样式表(Internal style sheet)
3.内联样式(Inline style)
1.外部样式表：
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
2.内部样式表：
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
3.内联样式：
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（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>
注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。
CSS 属性定义背景效果:
background-color：设置元素的背景颜色。如 body {background-color:#b0c4de;}
background-image： 把图像设置为背景。如 body {background-image:url('paper.gif');}
background-repeat：设置背景图像是否及如何重复。如
background-attachment：背景图像是否固定或者随着页面的其余部分滚动。如
background-position：设置背景图像的起始位置。如
CSS 背景图像：
实例
body {background-image:url('paper.gif');}
背景图像 - 水平或垂直平铺（水平方向平铺 ：repeat-x 垂直方向平铺：repeat-y）
如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:
实例
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
背景- 简写属性:
实例 : body {background:#ffffff url('img_tree.png') no-repeat right top;}
CSS 文本格式：
文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐.
当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。
实例
h1 {text-align:center;} ：文本位置居中
p.date {text-align:right;} ： 文本位置在右边
p.main {text-align:justify;} ：每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）
p {text-indent:50px;}：将段落的第一行缩进 50 像素：
text-shadow：2px 2px #FF0000;设置红色阴影
文本修饰
a {text-decoration:none;}：text-decoration 属性用来设置或删除文本的装饰。从设计的角度看 text-decoration属性主要是用来删除链接的下划线。
h1 {text-decoration:overline;}： 在文本上方添加横线
h2 {text-decoration:line-through;}：将文本划掉
h3 {text-decoration:underline;}：在文本下方添加横线
文本转换
文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母，或每个单词的首字母大写。
p.uppercase {text-transform:uppercase;}：将文本全部变成大写字母
p.lowercase {text-transform:lowercase;}：将文本全部变成小写字母
p.capitalize {text-transform:capitalize;}：将文本首字母大写
CSS 字体：
在CSS中，有两种类型的字体系列名称：
1.通用字体系列 - 拥有相似外观的字体系统组合（如 "Serif" 或 "Monospace"）
2.特定字体系列 - 一个特定的字体系列（如 "Times" 或 "Courier"）
font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。
注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。多个字体系列是用一个逗号分隔指明：
p{font-family:"Times New Roman", Times, serif;}
p.normal {font-style:normal;} ：正常 - 正常显示文本
p.italic {font-style:italic;} ：斜体 - 以斜体字显示的文字
p.oblique {font-style:oblique;} ：倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）
字体大小：
font-size 属性设置文本的大小。h1 {font-size:40px;}
用em来设置字体大小：
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 */
CSS 链接：
链接样式：
1.a:link - 正常，未访问过的链接
2.a:visited - 用户已访问过的链接
3.a:hover - 当用户鼠标放在链接上时
4.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后面
文本修饰：
a:link {text-decoration:none;} ：未访问无下划线
a:visited {text-decoration:none;} ：访问后无下划线
a:hover {text-decoration:underline;} ：鼠标移动至链接上有下划线
a:active {text-decoration:underline;} ：鼠标点击时有下划线
背景颜色：
a:link {background-color:#000000;} :未访问是黑色
a:visited {background-color:#FF0000;} ：访问后是红色
a:hover {background-color:#00008B;} ：鼠标移动至链接上是蓝色
a:active {background-color:#00FF00;} ：鼠标点击时是绿色
CSS创建链接框：http://www.runoob.com/try/try.php?filename=trycss_link_advanced
CSS列表：
在HTML中，有两种类型的列表：
无序列表 - 列表项标记用特殊图形（如小黑点（circle）、小方框（square）等）
有序列表 - 列表项的标记有数字或字母（如大小写罗马数字、大小写英文字母、数字）
实例：
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;}
none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。
decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek 小写希腊字母(alpha, beta, gamma, 等。)
lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
hebrew 传统的希伯来编号方式
armenian 传统的亚美尼亚编号方式
georgian 传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic 简单的表意数字
hiragana 标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana 标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha 标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha 标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）
作为列表项标记的图像：
实例：
ul
{
list-style-image: url('sqpurple.gif');
}
简写实例：
ul
{
list-style:square url("sqpurple.gif");
}
可以按顺序设置如下属性：
list-style-type
list-style-position (有关说明，请参见下面的CSS属性表)
list-style-image
如果上述值丢失一个，其余仍在指定的顺序，就没关系。
如果你想在所有的浏览器放置同样的形象标志，就应使用浏览器兼容性解决方案，过程如下：
浏览器兼容性解决方案
同样在所有的浏览器，下面的例子会显示的图像标记：
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属性把文本置于列表中
所有不同的列表项标记：http://www.runoob.com/try/try.php?filename=trycss_list-style-type_all
CSS 表格：
表格边框：指定CSS表格边框，使用border属性。
下面的例子指定了一个表格的Th和TD元素的黑色边框：
table, th, td
{
border: 1px solid black;
}
为了显示一个表的单个边框，使用 border-collapse属性。
CSS border-collapse 属性取值:
| 值 | 描述 |
|---|---|
| separate | 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。 |
| collapse | 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 |
| inherit | 规定应该从父元素继承 border-collapse 属性的值。 |
边框合并：border-collapse: collapse
折叠边框：
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：
实例：
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
表格宽度和高度：
实例：
table
{
width:100%;
}
th
{
height:50px;
}
表格文字对齐：
text-align属性设置水平对齐方式，向左，右，或中心：
实例
td
{
text-align:right;
}
垂直对齐属性设置垂直对齐，比如顶部，底部或中间：
实例
td
{
height:50px;
vertical-align:bottom;
}
vertical-align:bottom ：底部垂直对齐
vertical-align:top :顶部垂直对齐
vertical-align:middle ：中间垂直对齐
表格填充：
如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性：
实例
td
{
padding:15px;
}
表格颜色：
下面的例子指定边框的颜色，和th元素的文本和背景颜色：
实例
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
CSS完整表格制作：http://www.runoob.com/try/try.php?filename=trycss_table_fancy
<!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 red;
padding:3px 7px 2px 7px;
}
#customers th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:blue;
color:#ffffff;
}
#customers tr.alt td
{
color:#000000;
background-color:yellow;
}
</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>效果图：
扫一扫
333
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
