CSS、bootstrap详解PPT.ppt

5 属性选择器 对带有指定属性的 HTML 元素设置样式。 属性选择器在为不带有 class 或 id 的表单设置样式时特别有用： input[type=text] { width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; } 6 相邻兄弟选择器 可选择紧接在另一元素后的元素，且二者有相同父元素。 li + li {font-weight:bold;} div ul liList item 1/li liList item 2/li liList item 3/li /ul ol liList item 1/li liList item 2/li liList item 3/li /ol /div 7 伪类 (Pseudo-classes) CSS 伪类用于向某些选择器添加特殊的效果。 8 伪元素 CSS 伪元素用于向某些选择器设置特殊效果。 创建CSS样式表的方法有三种： 1 外部样式表 当样式需要应用于很多页面时，外部样式表将是理想的选择。Web页面使用 link 标签链接到样式表文件。link 标签写在文档的头部（head）： head link rel=stylesheet type=text/css href=style.css / /head 如何创建 CSS 外部样式表可以在任何文本编辑器进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。 hr { color: sienna } p { margin-left: 20px } body{ background-image:url(images/back40.gif) } 2 内部样式表 当单个文档需要特殊的样式时，就应该使用内部样式表。内部样式表是使用 style 标签写在头部： head style type=text/css 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 This is a paragraph /p 1、继承 CSS的某些样式是具有继承性的，继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。 可以继承的类： CSS的继承、层叠和特殊性 文本相关属性 列表相关属性 2、特殊性 有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?我们来看一下面的代码： p{color:red;} .first{color:green;} p class=first文本文本文本/p p和.first都匹配到了p这个标签上，那么会显示哪种颜色呢？green是正确的颜色，那么为什么呢？是因为浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。 权值的规则： 标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。 3、层叠 我们来思考一个问题：如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办？好，这一小节中的层叠帮你解决这个问题。 层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。 所以前面的css样式优先级就不难理解了： 内联样式表（标签内部） 嵌入样式表（当前文件中） 外部样式表（外部文件中）。 4、重要性 我们在做网页代码的时，有些特殊的情况需要为某些