首页 > 代码库 > 学习css简单内容

学习css简单内容

Css的class,ID和上下文选择符

Class选择符。

Class选择符用来配置某一类css规则,将其应用到网页中一个或多个区域。配置一类样式时,要将选择符配置成类名。在类名前加(.)。类名必须以字母开头,可包含字母,连字符和下划线。类名不能出现空格。

下面以future为类名,配置文本字体颜色为红色。

.future{color:#FF0000;}

ID选择符

用id选择符想网页中单个区域应用独特的css规则。Class选择符可在网页上多次应用。而id选择符在每个网页中只能应用一次。为某个id配置样式说的时候,要在id前面加#。Id名称可以是字母,数字,下划线和连字符。Id名称也不能包含空格。

以下代码在样式表中配置名为content的id:

#content{color:#333333;}

使用id属性,即id=content,便可将id为content的样式应用于你希望的元素。以下代码将id为content的样式应用于一个<div>标记:

<div id=”content”>只是一个例子</div>

后代选择符。

用后代选择符在容器(父)元素的上下文配置一个元素。允许为网页的定制区域配置css,同时减少class和id的数量。先列出容器选择符,在配置样式选择符。例如将content中的段落配置成绿色文本:

#content p {color:#green; }

 

附:

body{

background-image:url("6.png");

 

background-position:left;

background-repeat:no-repeat;

 

background-color:#99FFCC;

color:#FFFF00;

}

div{

border:2px;

background-color:#CCCCCC;

font-size:50px;

font-family:sans-serif;

}

 

#content

{

color:#333333;

}

#content p {color:#FFFFFF;}

 

.future

{color:#FFFF00;

}

 

p{

text-indent:2em;

text-transform:

text-shadow:5px 5px 2px #FFFF00;

}

 

body{

background-color:#3FFFFF;

color:#1eee10;

}

h1{

background-color:#191970;

color:#E6E6E6;

}

 

h2{

background-color:#789456;

color:#6A6A7A;

}

nav{background-color:#gge2e2;

}

footer{

width:50px;

height:20px;

color:red;

background-color:#787878;

}

 

p{

background-image:url("6.png");

 

background-position:center;

background-repeat:no-repeat;

font-family:monospace;

font-size:40px;

padding-left:40px;

color:#FFF999;

}

ul{

list-style-image:url(13.jpg);

li{

background-color:red;

}

 

 

 

 

 

Css解密

学习css简单内容