DIV+CSS网站布局教程(二)

原创 sunming812161 随笔 个人 209阅读 2017-12-19 14:51:08 举报

CSS 语法:

CSS 语法由三部分构成:选择器、属性和值:

body {
    color: blue;
}

选择器的分组:

h1, h2, h3, h4, h5, h6 {
    color: green;
}

CSS 派生选择器:

通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁。

比方说,你希望列表中的 span 元素文字变为红色,可以这样定义一个派生选择器:

li span {
    color: red;
} 

在上面的例子中,只有 li 元素中的 span 元素的样式为红色字,无需为 span 元素定义特别的 class 或 id,代码更加简洁。

CSS id选择器:

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。

示例:

#content {
    border: #000 1px solid;
    padding: 10px;
}

调用代码:<div id=“content”></div>

注意:id 属性只能在每个 HTML 文档中出现一次。
id 选择器和派生选择器

在现代布局中,id 选择器常常用于建立派生选择器:

#content p {
    font-size: 12px;
    line-height: 20px;
    text-indent: 2em;
}

上面的样式只会应用于出现在 id 是 content 的元素内的段落。

一个选择器,多种用法

即使被标注为 content 的元素只能在文档中出现一次,这个 id 选择器作为派生选择器也可以被使用很多次:

#content p {
    font-size: 12px;
    line-height: 20px;
}
#content h2 {
    font-size: 14px;
    font-weight: bold;
}
评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复