大漠驼铃

置身浩瀚的沙漠,方向最为重要,希望此blog能向大漠驼铃一样,给我方向和指引。
Java,Php,Shell,Python,服务器运维,大数据,SEO, 网站开发、运维,云服务技术支持,IM服务供应商, FreeSwitch搭建,技术支持等. 技术讨论QQ群:428622099
随笔 - 238, 文章 - 3, 评论 - 117, 引用 - 0
数据加载中……

CSS 学习之一 选择符

选择符就是一系列的模式,只要页面上有完全匹配这个模式的元素存在,样式就会自动应用到该元素上。比如P,h1等就是一个简单的元素。

Css语法:
一个简单的选择符包含一个通用的选择符或是一个类型选择符,它的后面跟有0个或者多个id选择符、属性选择符或者伪类,三者顺序可以任意。

一个选择符可以由一个或者多个简单的选择符构成,中间用连接符相隔。

连接符可以是(空白,大于号> 加号+)

基本的选择符:

1 通用的选择符
*{
background-color
:red;
}

* .title
{
border
:1px solid;
}

.title
{

border
:1px solid;
}
类型选择符:(一般为html元素的名称)
h1{
font-size
:9em;
color
:#999FFF;
}

p
{
margin
:0;
border
:2px solid;
}
组选择:

h1{
font-size
:10px;
color
:#999;
}

h2
{
font-size
:10px;
color
:#999;
}

p#title
{
font-size
:10px;
color
:#999;
}

#hutitle
{
font-size
:10px;
color
:#999;
}

上面的可以用以下组选择符来代替(中间用(,)来区分)

h1,h2,p#title,#hutitle
{
font-size
:10px;
color
:#999;
}

id(#) 和 class(.) 选择符

1 id 选择符
id 是唯一的,可以唯一的标识一个元素。
<h1 id="h1Title">开学通知</h1>
<id="pContent">请同学们先到教务处来报道</p>
<h1 id="h2Title">开课通知</h1>
<id="p2Content">好好学习Css</h2>

h1#h1title{
color
:white;
background-color
:silver;
}
p#pContent
{
color
:yellor;
background-color
:maroon;
}



只改变特定的元素。

class 选择符

class属性不要求唯一而id属性要求唯一,多个元素可以共享一个class的值,而且多个元素可以设置多个class的值.

<h1 id="h1Title" class="h1Title">开学通知</h1>
<id="pContent" class="pContent">请同学们先到教务处来报道</p>
<h1 id="h2Title" class="h2Title">开课通知</h1>
<id="p2Content" class="pContent">好好学习Css</h2>
<p >每天学习一章节,早点把css学会</h2>

h1.h1Title{
color
:white;
background-color
:silver;
}
p.pContent
{
color
:yellor;
background-color
:maroon;
}

h1.h2Title
{
color
:red;
}




多重class
id 属性是唯一的,class属性是多对多的关系,同一个class也可赋给多个元素,一个html可以有多个相同的class。
<href="class1 class2" href="/">链接</a>

a.class1{
font-size
:12px;
}
a.class2
{
color
:red;
}

上面这种css会对所有属于class1或者class2的a元素进行作用,而如果只对同时对class1 class2的a元素有作用只能是下面的方式
a.class1.class2{
color
:red;
}
或者

a.class2.class1
{
color
:red;
}

是选择class还是选择id?

如果是给任意数量、任意类型的元素指定class属性,而一个id属性值只能赋值给唯一的元素。




posted on 2010-03-10 17:23 草原上的骆驼 阅读(176) 评论(0)  编辑  收藏 所属分类: CSS


只有注册用户登录后才能发表评论。


网站导航: