码迷,mamicode.com
首页 > Web开发 > 详细

CSS基础及选择器

时间:2016-03-28 01:53:33      阅读:242      评论:0      收藏:0      [点我收藏+]

标签:

   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 的 HTML 元素指定特定的样式。

   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基础及选择器

标签:

原文地址:http://www.cnblogs.com/Other/p/5327510.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!