在信息系统基础SSD1中，通过使用 CSS 来提升工作效率！会学到如何使用 CSS 同时控制多重网页的样式和布局。
为了防止大家在SSD1考试中被和谐，特整理W3School中最关键的HTML知识，供大家参考学习，祝大家期末考试愉快！
版权归本文作者与W3School所有，感谢W3School的对HTML普及的大力支持！
CSS 简介
CSS 概述
CSS 指层叠样式表 (Cascading Style Sheets)。
样式定义如何显示 HTML 元素，而它通常存储在样式表中。把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题，在这里外部样式表可以极大提高工作效率。多个样式定义可层叠为一。
层叠次序
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。1.浏览器缺省设置；2.外部样式表；3.内部样式表（位于 <head> 标签内部）；4.内联样式（在 HTML 元素内部）。
创建一个CSS以横扫HTML（夸张了）
外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。
每个页面使用 <link> 标签链接到样式表。<link>标签在（文档的）头部：
如：
<head>
<link rel="stylesheet"type="text/css" href="mystyle.css" />
</head>
内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表。
如：
<head>
<styletype="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
如：
<pstyle="color: sienna; margin-left: 20px">
This is a paragraph
</p>
CSS 普通语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector{declaration1; declaration2; ... declarationN }
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。属性（property）是希望设置的样式属性（styleattribute）。每个属性有一个值。属性和值被冒号分开。
如：h1 {color:red;font-size:14px;}
大多数有经验的设计师会在每条声明的末尾都加上分号，这么做的好处是，当你从现有的规则中增减声明时，会尽可能地减少出错的可能性。
选择器的分组
你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。
如：h1,h2,h3,h4,h5,h6 {color:green;}
继承
根据 CSS，子元素从父元素继承属性。
子元素将继承最高级元素（如对 body进行了css样式定义）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul,li, dl, dt,和 dd）。不需要另外的规则，所有body 的子元素都应该显示对body定义的css，子元素的子元素也一样。
CSS 基本选择器简介
（***表示极为重要，**表示重要，*表示一般）
（***）派生选择器
派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。
举个栗子（就普通的板栗就OK）
比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：
listrong {
font-style: italic;
font-weight: normal;
}
应用如下：
<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>
（*）后代选择器
后代选择器（descendant selector）又称为包含选择器。后代选择器可以选择作为某元素后代的元素。
我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。
举个栗子
比方说，你希望只对 h1 元素中的 em 元素应用样式，可以这样写：
h1 em {color:red;}
上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中：
<h1>This is a<em>important</em> heading</h1>
<p>This is a<em>important</em> paragraph.</p>
（*）子元素选择器
如果不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。
举个栗子
比方说，你希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：
h1 > strong {color:red;}
这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：
<h1>This is<strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really<strong>very</strong></em> important.</h1>
*后代选择器与子元素选择器异同：有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的，但子元素选择器不可以这样。
后代选择器可以选择作为某元素后代的元素。与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素。
（*）相邻兄弟选择器
相邻兄弟选择器（Adjacent siblingselector）可选择紧接在另一元素后的元素，且二者有相同父元素。
举个栗子
比方说，你要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
h1 + p {margin-top:50px;}
这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
（***）ID选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。
在现代布局中，id 选择器常常用于建立派生选择器。
举个栗子（还是那种普通的板栗）
下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：
#red {color:red;}
#green {color:green;}
下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
注意：id 属性只能在每个 HTML 文档中出现一次。即使被标注ID元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次。
（**）类选择器
举个栗子（对方不解释并向你扔了两个带刺的栗子）
栗1：
在 CSS 中，类选择器以一个点号显示：
.center {text-align: center}
在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。
栗2：
在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。
<h1class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also becenter-aligned.
</p>
注意：类名的第一个字符不能使用数字！
（**）属性选择器
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用。
属性选择器可以同时对属性和值进行选择。
举个栗子：
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
<input type="text"name="Name" value="SunJiazheng" size="20">
CSS样式简介Ⅰ部分（框架与定位相关参见Ⅲ部分的Ⅱ）
（如果实在看不下去，选重点看看就OK）
（***表示极为重要，**表示重要，*表示一般，-表示感觉没啥用但保留，其余删了）
（***）CSS背景属性
（***）Background-color:设置元素的背景颜色
属性值：
Color_name:颜色名称的背景颜色(比如：red)；Hex_number:十六进制的背景颜色(比如：#FF0000)；Rgb_number:rgb代码的背景颜色(比如：rgb(255,0,0))；Transparent:默认。背景颜色为透明。
（***）Background-image:设置元素的背景图像
属性值：
url(URL):指定图像的路径；none:默认值，不显示背景图像。
（*）Background-attachment:设置背景图像是否固定或者随着页面的其余部分滚动
属性值：
Scroll:默认值。背景图像会随着页面其余部分的滚动而移动；Fixed：当页面的其余部分滚动时，背景图片不会移动。
（*）Background-repeat：设置是否如何重复背景图像
属性值：
Repeat：默认。背景图像将在垂直方向和水平方向重复
Repeat-x：背景图像将在水平方向重复
Repeat-y：背景图像将在垂直方向重复
No-repeat：背景图像将仅显示一次
（*）Background-position：设置背景图像的起始位置。
属性值：
Top left/top center/topright/center left/center center/center right/bottom left/bottom center/bottomright:如果仅规定一个关键词，那么第二个值将是center。默认值：0% 0%。
X% y%：第一个值是水平位置，第二个值是垂直位置，左上角是0% 0%。右下角是100% 100%，如果仅规定了一个值，另一个值是50%。
Xpos ypos：第一个值是水平位置，第二个值是垂直位置。左上角是0 0.单位是像素(0px 0px)或其他任何CSS单位。如果仅规定一个值，另一个值将是50%，可以混合使用%和position值。
（*）Background-size：设置背景图像的尺寸 CSS3
属性值：
Length：设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置auto
Percentage：以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置auto.
Cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
Contain：把图像扩展值最大尺寸，以使其宽度和高度完全适应内容区域。
（*）Background-origin：设置background-position属性相对于什么位置来定位 CSS3
属性值：
Padding-box：背景图像相对于内边距框来定位
Border-box：背景图像相对于边框盒来定位
Content-box：背景图像相对于内容框来定位
（-）Background-clip：设置背景的绘制区域 CSS3
属性值：
Padding-box：背景图像相对于内边距框来定位
Border-box：背景图像相对于边框盒来定位
Content-box：背景图像相对于内容框来定位
（-）Background：简写属性，在一个声明中设置所有的背景属性。（不建议这么搞事情）
例如：background: #00FF00url(bgimage.gif) no-repeat fixed top;
CSS字体属性
（***）Font-family:设置文本的字体系列
属性值：设置某个元素的字体，如：宋体，仿宋等。
（***）Font-size:设置文本的字体尺寸
（**）Font-style:设置文本的字体样式
属性值：
Normal：默认值。浏览器显示一个标准的字体样式。
Italic：浏览器会显示一个斜体的字体样式
Oblique：浏览器会显示一个倾斜的字体样式
（***）CSS文本属性
（***）Color:设置文本的颜色
属性值：同背景颜色。
（**）Direction：设置文本的方向/书写方向
属性值：Ltr：默认。文本方向从左到右；Rtl：文本方向从右到左。
（-）Letter-spacing：增加或减少字符之间的空白(字符间距)
属性值：
Normal：默认值。设置字符之间没有额外的空白(相对于值为0)。
Length：定义字符之间的固定空间(允许使用负值)。
（*）Line-height:设置行高
属性值：
Normal：默认值。设置合理的行间距；Number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距；Length：设置固定的行间距；%：基于当前字体尺寸的百分比行间距。
（*）Text-align：设置文本的水平对齐方式
属性值
Left:把文本排列到左边。默认值，由浏览器决定；Right：把文本排列到右边；Center：把文本排列到中间；Justify：实现两端对齐文本效果。
（-）Text-decoration：设置添加到文本的装饰效果
属性值：
None:默认值。定义标准的文本；Underline:设置文本下的一条线；Overline：设置文本上的一条线；Line-through：设置穿过文本下的一条线；Blink：设置闪烁文本。
（-）Text-indent：设置文本块中首行文本的缩进
属性值：
Length：设置固定的缩进。默认为0
百分比值%：设置基于父元素宽度的百分比的缩进。
（-）Text-transform：设置文本的大小写
属性值：
None：默认值。定义带有小写字母和大写字母的标准文本；Capitalize：文本中的每个单词以大写字母开头；Uppercase：定义仅有大写字母；Lowercase：定义仅有小写字母。
（*）Text-shadow：向文本设置阴影。IE不支持。CSS3
属性值：
H-shadow：必需。水平阴影的位置。V-shadow：必需。垂直阴影的位置。Blur：可选。模糊的距离Color：可选。阴影的颜色。
（-）CSS表格属性
（*）Border-collapse：是否合并表格边框
属性值：
Separate：默认值。边框会被分开。不会忽略border-spacing和empty-cells属性
Collapse：如果可能，边框会合并一个单一的边框。会忽略border-spacing和empty-cells属性
（**）Border-spacing：设置相邻单元格的边框间的距离（仅用于边框分离）
注意：该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中，第一个水平间距，第二个是垂直间距。除非border-collapse被设置为separate。否则将忽略这个属性。
属性值：
Length length：设置相邻单元格的边框之间的距离。使用px，cm等单位，不允许负值。如果定义一个length参数，那么定义的是水平和垂直间距。如果定义两个length参数，则一个是水平，一个是垂直。
（***）CSS尺寸属性(Dimension)
（**）Height:设置元素高度
该属性定义元素内容区的高度，在内容区域外可以增加内边距、边框和外边距，行内非替换元素会忽略该属性。
属性值：
Auto：默认值。浏览器会计算出实际的高度；Length：使用px、cm等单位定义高度；百分比：基于包含它的块级对象的百分比高度。
（**）Width：设置元素的宽度
该属性和height属性一样，可在内容区域外面增加内边距、边框和外边距
属性值：同元素高度属性。
（*）Max-height:设置元素的最大高度
（*）Max-width：设置元素的最大宽度
（*）Min-height：设置元素的最小高度
（*）Min-width：设置元素的最小宽度
（**）CSS列表属性
（***）List-style-type：设置列表向标记的符号。
属性值：None：无标记；Disc：默认。标记是实心圆；Circle：标记为空心圆；Square：标记为实心方块；Decimal：标记是数字；Decimal-leading-zero：以0开头的数字标记(如：01,02,03)。
（**）List-style-image：使用图像来替换列表项的标记。
该属性指定作为一个有序或无序列表项标志的图像。图像相对于列表项内容的放置位置通常使用list-style-type属性控制。
属性值：URL：图像的路径；None：默认值。无图像被显示。
（*）List-style-position：设置在何处放置列表项标记
属性值：Inside：列表项标记放置在文本以内，且环绕文本根据标记对齐；Outside：默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外。且环绕文本不根据标记对齐。
（-）List-style:简写属性在一个声明中设置所有的列表属性（不建议这么搞事情）
该属性是一个简写属性，涵盖了所有其他列表样式属性。一般按照如下顺序排列属性值：
List-style-type list-style-positionlist-style-image
第二部分到此结束
飞鸽EASY工作室 中南大学工作站出品（数方软件）
因编辑仓促，可能存在一些不严谨的错误，若发现请联系本文作者孙家正QQ1257477940
648
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
