精通CSS高级Web标准解决方案(第2版)学习笔记

精通CSS
高级Web标准解决方案(第2版)
第一章
基础知识
一、设计代码格式
1、如果元素有恰当的含义,就应该尽量使用他们。
h1,h2
ul,ol和dl
strong和em
abbr,acronym和code
fieldset、legend和label
caption、thead、tbody和tfoot
用标记的好处:
1,搜索引擎可以识别出标题并予以重视。
2,屏幕阅读器的用户可以依靠标题进行页面导航。
3,有意义的标记可以简便的将元素调整为你所需要的样式。它在文档中添加结构并且创建一个底层框架。可以直接设置元素的样式,而不需要添加其他标识符,因此避免了不必要的代码膨胀。

第二章
为样式找到应用目标


2.1常用的选择器


类型选择器

类型选择器也就是我们所说的元素选择器
最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。
例如:
p{color:red;}
h1{ font-weight:bold;}

后代选择器
后代选择器(descendant selector)又称为包含选择器。
根据上下文选择元素
我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用。

举例来说,如果您希望只对 h1 元素中的 em 元素应用样式,可以这样写:
h1 em {color:red;}

ID 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。
下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色:
#red {color:red;}
#green {color:green;}

类 选择器
在 CSS 中,类选择器以一个点号显示:
.center {text-align: center}

子元素选择器
与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。
如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector)。

例如,如果您希望选择只作为 h1 元素子元素的 strong 元素,可以这样写:

h1 > strong {color:red;}这个规则会把第一个 h1 下面的 strong 元素变为红色,但是第二个 strong 不受影响:

<h1>This is <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

相邻同胞选择器

相邻同胞选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。

例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:

h1 + p {margin-top:50px;}这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。

属性选择器

对带有指定属性的 HTML 元素设置样式。
可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。

注释:Internet Explorer 7 (以及更高版本)在规定了 !DOCTYPE 的情况下支持属性选择器。IE6 及更低的版本不支持属性选择器。

你可能感兴趣的:(Web,css,休闲,CSS高级,标准解决方案)