CSS层叠样式表
整理ppt
1
CSS层叠样式表
CSS的全称是Cascading Style Sheet，中文翻译为“层
叠样式表”。实用CSS可以改变HTML的基本特性，从而控
制传统网页上的元素，如精确的空白、段落缩进、文本
的外观和链接的状态等等。这样，你就可以实现对网页元
素的格式控制。 CSS不仅允许你指定单个网页的外观，
还可以被用来为网站提供一致的界面。
整理ppt
2
CSS样式通常保存在外部的 .css 文件中。通过仅仅
编辑一个简单的 CSS 文档，外部样式表使你有能力同时
改变站点中所有页面的布局和外观。这样，创建的文档
内容和文档的显示外观就有着明显的相互独立。
当然，CSS样式也可以以<style>标签的形式写在网页
文件的<head>标签中，或是直接将CSS语句书写在某个元
素标签的属性部分。
整理ppt
3
当同一个 HTML 元素被不止一个样式定义时，会使用
哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个
新的虚拟样式表中，它们产生作用的优先级别为如下顺
序：
内联样式（在 HTML 元素内部）
内部样式表（位于 <head> 标签内部）
外部样式表（以CSS文件独立存在）
整理ppt
4
CSS 语法由三部分构成：选择器、属性和值：
selector {property: value}
选择器 (selector) 通常是你希望定义的HTML元素或标签，属性 (property)是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）,例如：
body {color: blue}
如果值为若干单词，则要给值加引号：
p {font-family: "sans serif";}
整理ppt
5
如果要定义不止一个声明，则需要用分号将每个声明分开。最后一条规则是不需要加分号的，但是一般在每条声明的末尾都会加上分号，包括最后一条规则。这么做的好处是尽可能的减少出错的可能性。
p {text-align:center; color:red;}
在书写的时候可以每行只描述一个属性，以便使样式定义的可读性更强。
p {
text-align: center;
color: black;
font-family: arial;
｝
整理ppt
6
选择器的分组
可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明，用逗号将需要分组的选择器分开。
h1,h2,h2,h3,h5,h6 {
color: green;
}
在上面的例子中，对所有的标题标签进行了分组。所有的标题元素都是绿色的。
整理ppt
7
选择器的类型
1 后代选择器
通过依据元素在其位置的上下文关系来定义样式，在 CSS中，通过这种方式来应用规则的选择器被称为派生选择器 。这样可以利用元素的上下文关系来应用或者避免某项规则。
li b {
font-style: italic;
font-weight: normal;
}
整理ppt
8
2 子选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器。
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>
整理ppt
9
3 id选择器
id 选择器可以为标有特定id的HTML元素指定特定的样式。id 选择器以 “#” 来定义。下面的两个id选择器
css、bootstrap详解 来自淘豆网m.daumloan.com转载请标明出处.
