css简要介绍


CSS全名:(Cascading Style Sheets,层叠样式表、样式表),我们可以根据需要来修改某一个或者某一类HTML元素的样式。

XHTML是结构标记:哪些地方是段落,哪些地方是项目符号,哪些地方是图片等

CSS是表现、格式:这个段落文本颜色、大小、对齐方式、边框、背景颜色等。


以前作网站是用以下方式来:

<p><font color=“#ff0000” size=“7” face=“黑体”>北京传智播客教育培训中心</font></p>

现在我们要将结构和表现分离

<style  type=“text/css”>
p{
Color:#FF0000;
Font-size:24px;
Font-family: 黑体;
Background-color:#f0f0f0;
Border:1px dashed #000000;
Letter-spacing:10px;
}
</style>
<p>北京传智播客教育培训中心</p>

CSS语法格式:

<style type="text/css">

p(选择器){

        Color(属性名称):#FF0000(值);

        Font-size(属性名称):24px(值);

            }

</style>

一个格式表<style></style>由多个样式规则构成;

一个格式规则由“选择器”和“格式声明语句”构成,如:p就是选择器,{}中的语句就是格式定义;

选择器就是要定义样式的HTML元素(标记);

格式声明语句放在{}中,{}中由多个格式声明语句构成;比如:color:#FF0000;

格式语句由“属性名称”和“属性值”构成,属性名称和属性值间用冒号隔开,每个格式语句必须以分号结束。


CSS选择器:给哪一个HTML标记加样式

一、基本选择器

(1)通用选择器(*)

格式:*{font-size:24px;}

说明:通用选择器(*),将匹配所有的HTML标记。

注意:通用选择器(*),IE6不支持,建议尽量少用。

(2)标签选择器,对应于所学的HTML标记

格式:h1{color:#FF0000;}

举例: h2{color:#FF0000;}

p{font-size:14px;line-height:150%;color:#9900CC;}

li{color:#0000ff;text-decoration:underline;cursor:pointer;}

(3)类样式:就是给一类HTML元素添加样式,类样式以“.”开头。(使用最多的样式)

可以同时给多个HTML元素增加class属性,class属性的值可以一样。

<div class=“news”>Welcome to Guangzhou</div>

<p  class=“news”>这是一个段落</p>

<style  type=“text/css”>

.news{ color:#FF0000; font-size:24px; }

</style>

(4)id选择器:给标记特定id属性的HTML元素添加样式,id选择器必须以“#”开头。(使用最少的样式)

HTML元素的id属性的值,必须唯一。

Id属性就相当于身份证号一样,不能重复;

HTML元素的id属性,一般是给JS使用;

<div  id=“box”></div>

<style  type=“text/css”>

#box{color:#FF0000;}

</style>


二、组合选择器

1)多元素选择器:E,F,G,H{color:#FF0000;}

       说明:同时给E元素、F元素、G元素、H元素增加样式,多个元素间用逗号隔开

       body,div,ul,li,ol,dt,dd,p,form,a{margin:0px; padding:0px; }

       div.box,div#header,form{color:#FF0000; }

       div.box含义:class=box”的<div>元素;

       div#header含义:id=header”的<div>元素;

2)后代元素选择器

       格式:E F{color:#FF0000;}

       说明:E元素的所有后代F元素,增加样式,中间用空格隔开

       .news li{width:400px;border:1px solid#006600;}

 

3)子元素选择器

       格式:E > F{color:#FF0000}

       说明:匹配E元素的子元素F,增加样式

       举例:.news >.title{background-color:#FFCC66;}


三、伪类选择器:一般是给超级链接<a>增加CSS样式

一个链接有四种状态:正常状态(:link)、放上状态(:hover)、激活状态(:active)、访问过的状态(:visited)

(1)全局链接样式的设置

a:link,a:visited{color:#0000FF;text-decoration:none;}

a:hover{color:#990000;text-decoration:underline;}

2)局部链接样式的设置:给一类链接加样式

<a class="a1" href="#">福州:女子闹市候车时被划伤脸 凶手很快消失(图)</a>

a.a1:link,a.a1:visited{color:#009900;font-weight:bold;font-size:18px;}

a.a1:hover{ color:#FF00FF;border:1px solid #996600;}


1.CSS尺寸属性

Width:指定元素的宽度,单位是 px或%

Height:指定元素的高度,单位是px或%

注意:任何HTML元素,都可以看成一个“盒子”,都具有width、height、padding(内边距)、margin(外边距)、border、backgroun(背景)。  比如:<b><i><font><span><div><table>等


2.CSS文本属性

Color:文本颜色,取值:英文单词、10进制、16进制;

text-align:文本的水平对齐,取值:left  center  right

text-decoration:文本修饰线,取值:none、underline、overline、line-through

text-indent:首行缩进,text-indent:36px;

letter-spacing:字间距

line-height:行高,line-height:150%;   line-height:24px;


3.CSS字体属性

font-family:设置字体

font-weight:粗细,取值:bold,相当于<b>

font-style:斜体,取值:italic,相当于<i>

font-size:文字大小

font:简写的形式,各个属性值间用空格隔开

body{ font-size:24px; font-family:黑体; font-weight:bold; font-style:italic; }

body{ font:bold italic 24px 黑体; }


4.CSS列表属性

list-style-type:列表的类型,取值:none、disc、circle、square

list-style-image:列表的图片,list-style-image:url(images/li01.gif);

list-style-position:符号的位置,取值:outside(外)、inside(内)

list-style:简写形式时,  各个属性值间用空格隔开

.li01{ list-style-type:none;list-style-image:url(images/li01.gif);list-style-position:outside; }

.li01{ list-style:url(images/li01.gif) disc outside;}

实现:单行文本在一个“容器”中垂直居中,使用的原理是,height和line-height值一样,就可以实现。

  


例子:

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css列表练习</title>
<style type="text/css">
.news{
width:600px;
border:1px solid #cccccc;
margin:20px auto;
padding:0px;
}
.news h2{margin:0px;padding:0px;font-family:黑体;}
.news ul li{
line-height:28px;
height:28px;
list-style-type:none;
font-size:14px;
list-style-position:inside;
list-style-image:url(li01.jpg)
}
a:link,a:visited{color:#0000ff;text-decoration:none;}
a:hover{color:#ffbb00;text-decoration:underline;}
a.a1:link,a.a1:visited{color:#ff0000;font-size:18px;}
a.a1:hover{color:#ff00ff;border:1px solid #bbbbbb;}
</style>
</head>
<body>
<div class="news">
<h2>频道推荐</h2>
<ul>
<li><a href="#">万科在唐山已经转不动了</a></li>
<li><a class="a1" href="#">网上流传的一份万科执行副总裁毛大庆在内部沙龙的讲话</a></li>
<li><a href="#">尽管万科对外回应称</a></li>
<li><a class="a1" href="#">近三年一直处于滞涨状态</a></li>
<li><a href="#">万科在唐山已经转不动了</a></li>
<li><a class="a1" href="#">网上流传的一份万科执行副总裁毛大庆在内部沙龙的讲话</a></li>
<li><a href="#">尽管万科对外回应称</a></li>
<li><a class="a1" href="#">近三年一直处于滞涨状态</a></li>
<li><a href="#">近三年一直处于滞涨状态</a></li>
<li><a class="a1" href="#">万科在唐山已经转不动了</a></li>
<li><a href="#">网上流传的一份万科执行副总裁毛大庆在内部沙龙的讲话</a></li>
<li><a class="a1" href="#">尽管万科对外回应称</a></li>
<li><a href="#">近三年一直处于滞涨状态</a></li>
<li><a class="a1" href="#">近三年一直处于滞涨状态</a></li>
<li><a href="#">万科在唐山已经转不动了</a></li>
<li><a class="a1" href="#">网上流传的一份万科执行副总裁毛大庆在内部沙龙的讲话</a></li>
<li><a href="#">尽管万科对外回应称</a></li>
<li><a class="a1" href="#">近三年一直处于滞涨状态</a></li>
</ul>
</div>
</body>
</html>