CSS基础及选择器
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS基础及选择器相关的知识,希望对你有一定的参考价值。
CSS 概述
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 html 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。
选择器的分组
你可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。
相邻兄弟选择器使用了加号(+),即相邻兄弟结合符(Adjacent sibling combinator)。
锚伪类选择器
在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态, 未被访问状态,和鼠标悬停状态。
a:link
{color: #FF0000} /* 未访问的链接 */
a:visited
{color: #00FF00} /* 已访问的链接 */
a:hover
{color: #FF00FF} /* 鼠标移动到链接上 */
a:active
{color: #0000FF} /* 选定的链接 */
id 选择器
id 选择器以 "#" 来定义。
下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色:
#red
{color:red;}#green
{color:green;}
下面的 HTML 代码中,id 属性为 red 的 p 元素显示为红色,而 id 属性为 green 的 p 元素显示为绿色。
<p id="red"
>这个段落是红色。</p><p id="green"
>这个段落是绿色。</p>
注意:id 属性只能在每个 HTML 文档中出现一次。
类选择器
在 CSS 中,类选择器以一个点号显示;
和 id 一样,class 也可被用作派生选择器
以上是关于CSS基础及选择器的主要内容,如果未能解决你的问题,请参考以下文章