本文详细介绍了CSS（层叠样式表）的基础知识，包括内联、内部和外部样式表的使用，以及选择器、语法、颜色值、文本、背景、列表、表格、链接、定位等属性和技巧。通过实例展示了CSS如何设置元素样式，实现网页布局和美化。
1、CSS 简述
CSS指层叠样式表（Cascading Style Sheets）
可分为3种：
1、内联样式（在HTML元素内部）
2、内部样式表（在<head>标签内部）
3、外部样式表（存放另一个文件，在html种调用）
2、CSS 语法
CSS规则有2个主要部分组成：选择器和一条或多条声明，如下
selector {declaration:declaration2;declaration3;...declarationN}
选择器 {声明1;声明2;...声明N}
示例：h1 {color:red; font-size:14px;font-family: "sans serif"}
其中h1是选择器，color属性，red是对应的值（只取了一组）
注意点：
1、颜色值有多种写法如：
p { color: #ff0000; }
p { color: red; }
p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); } 用的较少
2、如果值为若干单词，则要给值加引号
3、如果有多个声明，应当每行写一个，如下：
p {
text-align: center;
color: black;
font-family: arial;
}
3、选择器分组
当我们需要设置多个选择器的声明相同时，可以分为一组从而分享共同的声明
如下：
h1,h2,h3,h4,h5,h6 {
color: green;
}
4、id选择器
id选择器以“#”来定义
#red {color:red;} 元素颜色为红色
#green {color:green;} 元素颜色为绿色
html代码执行后：
<p id="red">这个段落是红色。</p> #文字为红色
<p id="green">这个段落是绿色。</p> #文字为绿色
5、CSS类选择器
类选择器以一个点号显示，如下：
.center {text-align: center} #居中对齐
html代码调用：
<h1 class="center">
This heading will be center-aligned #文字居中对齐
</h1>
<p class="center">
This paragraph will also be center-aligned。 #文字居中对齐
</p>
6、CSS属性选择器
对带有指定属性的 HTML 元素设置样式。
1、属性选择器，如下：会为带有title属性的所有元素设置样式
[title]
{
color:red;
}
html代码调用：
<h2 title="world">Hello world</h2> #文字会显示设置属性颜色:红色
2、属性和值选择器，如下会为title=“hello”的所有元素设置样式
[title=“hello”]
{
color: red;
}
html代码调用：
<h2 title="hello">Hello world</h2> #只有调用title=“hello”的文字才会会显示设置属性颜色:红色
<h2 title="hello">Hello world</h2> #title不等于“hello” 文字不会显示红色
3、属性和值选择器-多个值，如下会为包含指定值的title属性的所有元素设置样式
[title~=hello] { color:red; } #调用的title属性值中包含hello 就设置样式
html代码调用：
<h2 title="hello world">Hello world</h2> #属性值包含hello，会设置样式
<p title="student hello">Hello W3School students!</h1> #属性值包含hello，会设置样式
4、设置表单样式：属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}
html代码调用：
<input type="text" name="Name" value="Bill" size="20"> #设置样式
<input type="text" name="Name" value="Gates" size="20"> #设置样式
<input type="button" value="Example Button"> #设置样式
7、CSS选择器参考
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。
8、CSS背景：background
background-color:设置元素背景色。如：p {background-color: red} 设置p标签的背景色为红色
background-image:把图像放入背景。如：body {background-image: url(/image1.jpg)} 设置body 背景图片为image.jpg
backgroud-repeat:背景图像重复(水平方向或垂直方向平铺)如：
body
{
background-image: url(/image1.jpg);
background-repeat: repeat-y; #垂直方向平铺（repeat-x 水平平铺，no-repeat 不平铺）
}
backgroud-position:改变图像在背景中的位置（top:上部，bottom:下部，left:左边，right:右边，center:居中）
当然也可以是像素值，比如100px 50px表示从元素内边区左上角向下100px，向右50px；
也可以是百分比,比如：66% 33%表示把一个图像放在水平方向 2/3、垂直方向 1/3 处
body
{
background-image:url('/image1.jpg');
background-repeat:no-repeat;
background-position:50px 100px; #或者用百分比
}
backgroud-attachment:fixed 这个属性可以保持图像一直在视图中，防止因滚动消失
9、CSS背景属性
background 简写属性，作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。
10、CSS文本
text-indent:设置文本的缩进；如：p {text-indent:5em} 表示段落首行缩进5em（1em等于当前字体尺寸）
text-align:水平对齐
left：左对齐
right：右对齐
center：居中对齐
justify：两端对齐
word-spacing：在原标准上改变字（单词）之间的标准间隔（也就是字间距）
letter-spacing：改变字符或字母之间的间隔
text-transform:处理文本的大小写
none：不做任何改动
uppercase：原文本转换为大写
lowercase：原文本转换为小写
captilize：原文每个单词首字母大写
text-decoration：文本装饰
none：一般默认外观
underline：有下划线
overline：上划线
line-through:类似删除线
blink：文字闪烁
white-sapce：处理空白符
值 空白符 换行符 自动换行
pre-line 合并 保留 允许
normal 合并 忽略 允许
nowrap 合并 忽略 不允许
pre 保留 保留 不允许
pre-wrap 保留 保留 允许
11、CSS文本属性
属性 描述
color 设置文本颜色
direction 设置文本方向。
line-height 设置行高。
letter-spacing 设置字符间距。
text-align 对齐元素中的文本。
text-decoration 向文本添加修饰。
text-indent 缩进元素中文本的首行。
text-shadow 设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。
text-transform 控制元素中的字母。
unicode-bidi 设置文本方向。
white-space 设置元素中空白的处理方式。
word-spacing 设置字间距。
12、CSS字体
font-family:指定字体。如；body {font-family: sans-serif;}
font-style：字体风格
normal:文本正常显示 如：p.normal {font-style:normal;}
italic：文本斜体显示 如：p.italic {font-style:italic;}
oblique：文本倾斜显示 如：p.oblique {font-style:oblique;}
font-size：字体大小
在所有浏览器中均有效的方案是为 body 元素（父元素）以百分比设置默认的 font-size 值：
body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}
13、CSS字体属性
属性 描述
font 简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family 设置字体系列。
font-size 设置字体的尺寸。
font-size-adjust 当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）
font-stretch 对字体进行水平拉伸。（CSS2.1 已删除该属性。）
font-style 设置字体风格。
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 设置字体的粗细。
14、CSS链接
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
15、CSS列表
列表类型:list-style-type 如：ul {list-style-type : square}把无序列表中的列表项标志设置为方块。
列表项图像：list-style-image 如：ul li {list-style-image : url(xxx.gif)}只需要简单地使用一个 url() 值，就可以使用图像作为标志
列表标志位置：list-style-position 如：li {list-style: inside} 标志位在内容之内
16、CSS列表属性
属性 描述
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。
17、CSS表格
如需在 CSS 中设置表格边框，请使用 border 属性。如下表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。
table, th, td
{
border: 1px solid blue;
}
折叠边框：border-collapse 将表格边框折叠为单一边框,如下就可以使得表格显示单边框
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
表格的宽度和高度，如下将表格宽度设置为 100%（浏览器窗口），同时将 th 元素的高度设置为 50px：
table
{
width:100%;
}
th
{
height:50px;
}
18、CSS 表格属性
属性 描述
border-collapse 设置是否把表格边框合并为单一的边框。
border-spacing 设置分隔单元格边框的距离。
caption-side 设置表格标题的位置。
empty-cells 设置是否显示表格中的空单元格。
table-layout 设置显示单元、行和列的算法。
19、CSS轮廓
属性 描述 CSS版本
outline 在一个声明中设置所有的轮廓属性。 2
outline-color 设置轮廓的颜色。 2
outline-style 设置轮廓的样式。 2
outline-width 设置轮廓的宽度。 2
20、CSS内边距
属性 描述
padding 简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom 设置元素的下内边距。
padding-left 设置元素的左内边距。
padding-right 设置元素的右内边距。
padding-top 设置元素的上内边距。
21、CSS边框
属性 描述
border 简写属性，用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。
22、CSS外边距属性
属性 描述
margin 简写属性。在一个声明中设置所有外边距属性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。
23、CSS定位属性
属性 描述
position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow 设置当元素的内容溢出其区域时发生的事情。
clip 设置元素的形状。元素被剪入这个形状之中，然后显示出来。
vertical-align 设置元素的垂直对齐方式。
z-index 设置元素的堆叠顺序。
392
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
