最新CSS、bootstrap详解PPT教学讲义ppt课件
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
p {text-align:center; color:red;}
在书写的时候可以每行只描述一个属性，以便使样式定义的可读性更强。
p{ text-align: center; color: black; font-family: arial; ｝
选择器的分组
可以对选择器进行分组，这样，被分组的选择器就可以分享相同的 声明，用逗号将需要分组的选择器分开。
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>
和 id 一样，class 也可被用作后代选择器： .fancy td { color: #f60; background: #666; }
类名为fancy的更大的元素内部的表格单元都会以灰色背景显示橙色文字。
元素也可以基于它们的类而被选择： td.fancy { color: #f60; background: #666; } 在上面的例子中，类名为fancy的表格单元将是带有灰色背景的橙色。你可
注意：一个值的id属性只能在每个HTML文档中出现一次。
id选择器和后代选择器
id选择器常常用于建立后代选择器。
#sidebar p { font-style: italic; text-align: right; margin-top: 10px; }
上面的样式只会应用于出现在id是sidebar的元素内的段落。这个元素很可能是 div 或者是表格单元，即使被标注为sidebar的元素只能在文档中出现一次，这 个id选择器作为后代选择器也可以被使用很多次。
以将类fancy分配给任何一个表格元素任意多的次数。那些以 fancy 标注的单 元格都会是带有灰色背景的橙色。那些没有被分配名为fancy的类的单元格不会 受这条规则的影响。当然，任何其他被标注为fancy的元素也不会这条规则的影 响。
5 属性选择器
对带有指定属性的 HTML 元素设置样式。 属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：
body {color: blue}
如果值为若干单词，则要给值加引号：
p {font-family: "sans serif";}
如果要定义不止一个声明，则需要用分号将每个声明分开。最后一条规则 是不需要加分号的，但是一般在每条声明的末尾都会加上分号，包括最后一条 规则。这么做的好处是尽可能的减少出错的可能性。
li b { font-style: italic; font-weight: normal; }
Hale Waihona Puke 2 子选择器与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子 元素的元素。 如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子 元素，请使用子元素选择器。
CSS 语法由三部分构成：选择器、属性和值：
selector {property: value}
选择器 (selector) 通常是你希望定义的HTML元素或标签，属性 (property) 是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由 花括号包围，这样就组成了一个完整的样式声明（declaration）,例如：
li + li {font-weight:bold;}
<div> <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol>
4 类选择器
在 CSS 中，类选择器以一个点号显示：
.center {text-align: center}
因此，所有拥有 center 类的HTML元素均为居中。
<h1 class="center"> This heading will be centeraligned </h1>
<p class="center"> This paragraph will also be center-aligned. </p>
input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; }
6 相邻兄弟选择器
可选择紧接在另一元素后的元素，且二者有相同父元素。
3 id选择器
id 选择器可以为标有特定id的HTML元素指定特定的样式。id 选择器以 “#” 来定义。下面的两个id选择器，第一个可以定义元素的颜色为红色，第二个定 义元素的颜色为绿色：
#red {color:red;} #green {color:green;}
<p id="red">这个段落是红色。</p> <font id=“green”>这句文本是绿色。</font>
CSS、bootstrap详解 PPT
CSS层叠样式表
CSS的全称是Cascading Style Sheet，中文翻译为“层 叠样式表”。实用CSS可以改变HTML的基本特性，从而控 制传统网页上的元素，如精确的空白、段落缩进、文本 的外观和链接的状态等等。这样，你就可以实现对网页元 素的格式控制。 CSS不仅允许你指定单个网页的外观， 还可以被用来为网站提供一致的界面。
h1,h2,h2,h3,h5,h6 { color: green; }
在上面的例子中，对所有的标题标签进行了分组。所有的标题元素 都是绿色的。
选择器的类型
1 后代选择器
通过依据元素在其位置的上下文关系来定义样式，在 CSS中，通过 这种方式来应用规则的选择器被称为派生选择器 。这样可以利用元素 的上下文关系来应用或者避免某项规则。
在书写的时候可以每行只描述一个属性，以便使样式定义的可读性更强。
p{ text-align: center; color: black; font-family: arial; ｝
选择器的分组
可以对选择器进行分组，这样，被分组的选择器就可以分享相同的 声明，用逗号将需要分组的选择器分开。
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>
和 id 一样，class 也可被用作后代选择器： .fancy td { color: #f60; background: #666; }
类名为fancy的更大的元素内部的表格单元都会以灰色背景显示橙色文字。
元素也可以基于它们的类而被选择： td.fancy { color: #f60; background: #666; } 在上面的例子中，类名为fancy的表格单元将是带有灰色背景的橙色。你可
注意：一个值的id属性只能在每个HTML文档中出现一次。
id选择器和后代选择器
id选择器常常用于建立后代选择器。
#sidebar p { font-style: italic; text-align: right; margin-top: 10px; }
上面的样式只会应用于出现在id是sidebar的元素内的段落。这个元素很可能是 div 或者是表格单元，即使被标注为sidebar的元素只能在文档中出现一次，这 个id选择器作为后代选择器也可以被使用很多次。
以将类fancy分配给任何一个表格元素任意多的次数。那些以 fancy 标注的单 元格都会是带有灰色背景的橙色。那些没有被分配名为fancy的类的单元格不会 受这条规则的影响。当然，任何其他被标注为fancy的元素也不会这条规则的影 响。
5 属性选择器
对带有指定属性的 HTML 元素设置样式。 属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：
body {color: blue}
如果值为若干单词，则要给值加引号：
p {font-family: "sans serif";}
如果要定义不止一个声明，则需要用分号将每个声明分开。最后一条规则 是不需要加分号的，但是一般在每条声明的末尾都会加上分号，包括最后一条 规则。这么做的好处是尽可能的减少出错的可能性。
li b { font-style: italic; font-weight: normal; }
Hale Waihona Puke 2 子选择器与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子 元素的元素。 如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子 元素，请使用子元素选择器。
CSS 语法由三部分构成：选择器、属性和值：
selector {property: value}
选择器 (selector) 通常是你希望定义的HTML元素或标签，属性 (property) 是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由 花括号包围，这样就组成了一个完整的样式声明（declaration）,例如：
li + li {font-weight:bold;}
<div> <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol>
4 类选择器
在 CSS 中，类选择器以一个点号显示：
.center {text-align: center}
因此，所有拥有 center 类的HTML元素均为居中。
<h1 class="center"> This heading will be centeraligned </h1>
<p class="center"> This paragraph will also be center-aligned. </p>
input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; }
6 相邻兄弟选择器
可选择紧接在另一元素后的元素，且二者有相同父元素。
3 id选择器
id 选择器可以为标有特定id的HTML元素指定特定的样式。id 选择器以 “#” 来定义。下面的两个id选择器，第一个可以定义元素的颜色为红色，第二个定 义元素的颜色为绿色：
#red {color:red;} #green {color:green;}
<p id="red">这个段落是红色。</p> <font id=“green”>这句文本是绿色。</font>
CSS、bootstrap详解 PPT
CSS层叠样式表
CSS的全称是Cascading Style Sheet，中文翻译为“层 叠样式表”。实用CSS可以改变HTML的基本特性，从而控 制传统网页上的元素，如精确的空白、段落缩进、文本 的外观和链接的状态等等。这样，你就可以实现对网页元 素的格式控制。 CSS不仅允许你指定单个网页的外观， 还可以被用来为网站提供一致的界面。
h1,h2,h2,h3,h5,h6 { color: green; }
在上面的例子中，对所有的标题标签进行了分组。所有的标题元素 都是绿色的。
选择器的类型
1 后代选择器
通过依据元素在其位置的上下文关系来定义样式，在 CSS中，通过 这种方式来应用规则的选择器被称为派生选择器 。这样可以利用元素 的上下文关系来应用或者避免某项规则。