100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 精通CSS高级Web标准解决方案(第2版)学习笔记

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

时间:2022-01-04 04:50:45

相关推荐

精通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 及更低的版本不支持属性选择器。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。