CSS,样式选择器

标签: css 选择 | 发表时间:2012-12-02 13:41 | 作者:小Kiss
出处:http://www.cnblogs.com/

CSS,样式选择器

一、CSS

CSS(层叠样式表)使用来美化页面用的,CSS主要有元素内连,页面嵌入和外部引用三种使用方式;

1.元素内联,直接将样式写入元素的style属性中,适用于样式没有可复用性的场合。

<body>
<input type="text" Readonly="readonly" style="background-color:#FF00FF"/>
</body>

2.页面嵌入,在head头部进行嵌入

<head>
<style type="text/css">
input{border-color:Yellow;color:Red;}
</style>
</head>

结果:表示页面中所有的input都采用指定的样式。适用于样式复用,减小页面的面积

3.外部引用,首先建立CSS文件,将要要写的CSS样式添加到该文件中。在head头部进行引用。适用于多页面共享CSS。

CSS文件,文件名为S1.css

textarea{background:Yellow}

对上面的CSS文件进行引用;

<head>
<link type="text/css" rel="Stylesheet" href="S1.css"/>
</head>

 

二、样式选择器

  对于非元素内联的样式需要定义样式选择器,通俗的说就是这个样式适合哪些元素,样式选择器有:标签选择器,class选择器,id选择器,关联选择器,组合选择器,伪选择器

1.标签选择器

对于指定标签采用统一的标签;

<head>
<style type="text/css">
input{border-color:Yellow;color:Red}
</style>
</head>

2.class选择器

以定义一个命名的样式,然后在用它的时候设定元素的class属性为样式,还可以同时设定多个class,名称之间加空格。

<head>
<style type="text/css">
.warning{background:Yellow}
.highlight{font-size:xx-large;cursor:help;}
</style>
</head>

其中.waringhe .highlight是给元素定义了名称,这个名称不作用于任何元素,除非引用它。

对该样式进行引用;

<body>
<table><tr><td class="highlight">aaa</td>
<td class="warning">bbb</td>
<td class="warning highlight">ccc</td>
</tr>
</table>
</body>

标签+class选择器:
class选择器也可以针对不同的标签,实现同样的样式名对于不同标签有不同的形式,只要在前面加上标签名称即可。

<head> 
  <style type="text/css">    
input.accountno{text-align:right;color:Red}
    label.accountno{font-style:italic;}  
</style>
</head>

3.id选择器:为指定的id的元素设定样式。代码如下:

<head>
<style type="text/css">
#UserName{font-size:xx-large;}
</style>
</head>

在body中对该样式进行使用:

<body>
<input id="UserName" type="text" value="aaa"/>
</body>

id叫做UserName的元素的样式是{font-size:xx-large;}

4、更多选择器
(1)、关联选择器(必须是相互关联之下的样式才可以有变化)

  代码如下:

<head>
<style type="text/css">
p strong{background-color:Yellow;}
</style>
</head>

上面代码的意思就是p标签和strong标签相关的内容使用的样式(也就是表示p标签中的strong标签内的内容使用的样式)

<body>
<strong>aaaaaaa</strong>
<p><strong>bbbbbbb</strong></p>
</body>

我们看到上面的代码中仅有<strong>标签的字体没有任何变化,而<p><strong>中的字体可以使用上面的css样式
(2)、组合选择器:同时为多个标签设定同一个样式;

<head>
<style type="text/css">

H1,H2,input{background-color:Green;}
</style>
<head>

上面的代码是将h1,h2,input的样式都设置成为{background-color:Green},当我们使用这三个标签的时候有同样的样式显现;

代码如下:

<body>
<h1>aaaa</h1>
<input type="text" value="text"/>
</body>

(3)、伪选择器:为标签的不同状态设定不同的样式:如:A:visited 超链接点击过的样式;A:active超链接被选中的样式;A:link:超链接已被访问时的状态

A:hover:鼠标移到超链接时的样式

现在我们来用这些样式给超链接设置样式;把这些样式放在CSS文件中,因为这些样式都是基本固定的只要你使用超链接的时候就把这些样式引入即可;

代码如下:

A:visited
{
text-decoration:none
}
A:active
{
text-decoration:none
}
A:link
{
text-decoration:none
}
A:hover
{
text-decoration:underline
}

在html页面中对该样式进行引用即可;

<head>
<link type="text/css" rel="Stylsheet" href="link.css">
</head>

下面我们来创建连超链接:

<body>
<a href="HTMLpage1.html">测试</a>
</body>

 

 

 

 

 

 

 

 

 

 

 

本文链接

相关 [css 选择] 推荐:

CSS,样式选择器

- - 博客园_首页
CSS(层叠样式表)使用来美化页面用的,CSS主要有元素内连,页面嵌入和外部引用三种使用方式;. 1.元素内联,直接将样式写入元素的style属性中,适用于样式没有可复用性的场合. 2.页面嵌入,在head头部进行嵌入. 结果:表示页面中所有的input都采用指定的样式. 适用于样式复用,减小页面的面积.

[译]XPath和CSS选择器

- - 博客园_首页
原文: http://ejohn.org/blog/xpath-css-selectors. 我认为将这两种选择器的写法做一个比较是很有价值的.. 所有P元素的第一个子元素. 从语法上看,我非常惊讶这两种选择器在某些情况下的相似性,尤其是'>'和'/'两者之间.虽然他们并不总是有着相同的功能(XPath中要取决于正在使用的轴),但通常情况下他们指的都是某个父元素的子元素.还有,空白符' '和'//'都意味着当前元素的所有后代元素.最后是星号'*',类似于通配符,表示所有元素,而不管是哪种标签名..

Css选择器命名规则

- ninickck - 前端观察
操作系统版本:Windows 7. 浏览器版本:IE6,IE7,IE8,Firefox 3.6.2,Safari 4.0.4,Chrome 5.0.356.2 dev. 受影响的浏览器:所有浏览器.. 经常讲到css选择器命名规则,其实不只是在团队合作基础上来讲这个,每个浏览器,IE产品,火狐,苹果,谷歌,都会因为命名不规范会产生不同样式...

编写高效的 CSS 选择器

- - 博客 - 伯乐在线
伯乐在线注:我们昨日在 @程 序员的那些事 微博上推荐了英文原文,感谢 @freestyle21 和 @沈涛-WEB工程师 的热情参与. 高效的CSS已经不是一个新的话题了,也不是我一个非得重拾的话题,但它却是我在Sky公司工作之时,所感兴趣的,关注已久的话题. 有很多人都忘记了,或在简单的说没有意识到,CSS在我们手中,既能很高效,也可以变得很低能.

网站CSS选择器性能讨论

- - 阿里巴巴(中国站)用户体验设计部博客
    CSS选择符由一些初始化参数组成,这些参数指明了要应用这个CSS规则的页面元素. 作为一个网站的前端开发工程师,应该避免编写一些常见的开销很大的CSS选择符模式,尽量编写高效的CSS选择符,从而加快页面的渲染速度,缩短页面呈现时间. 我们先来看一下safari和webkit的架构师David Hyatt的两段话:.

推荐三十款CSS样式选择器代码

- 小伟 - UED TEAM,用户体验设计,web前端开发
你也许已经掌握了id、class、后台选择器这些基本的css选择器. 下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题. 掌握了它们,才能真正领略css的巨大灵活性. 星状选择符会在页面上的每一个元素上起作用. web设计者经常用它将页面中所有元素的margin和padding设置为0.

30个最常用css选择器解析

- We_Get - 博客园-首页原创精华区
你也许已经掌握了id、class、后台选择器这些基本的css选择器. 下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题. 掌握了它们,才能真正领略css的巨大灵活性. 星状选择符会在页面上的每一个元素上起作用. web设计者经常用它将页面中所有元素的margin和padding设置为0.

小tip: CSS后代选择器可能的错误认识

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=2286. 一、关于类选择器的一个问题. 假设有下面一个面试题,CSS代码如下:. 问:第一行和第二行文字颜色分别是. 这个例子很简单,我估计基本上都能回答正确:DOM越深的类名权重越高,因此,第一行文字红色,第二行文字绿色第一行文字绿色,第二行文字红色.

10个你必须要知道的CSS选择器

- - Jackchen Design 1984
要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器. HTML页面中的元素就是通过CSS选择器进行控制的. 每一条css样式定义由两部分组成,形式如下: [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”. “选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素.

CSS > 选择器优先级与效率优化

- - SegmentFault 最新的文章
CSS选择器优先级与效率优化. 本文收集网上各处关于CSS选择器的文章总结,并自己归纳一篇. 在上面的选择器中,此外,经测试. 属性选择器 = 伪类选择器(应用最后一个). 伪类选择器 > 相邻选择器. 相邻选择器 = 子选择器 = 后代选择器(应用最后一个). 后代选择器 > 标签选择器. 同.