CSS简介
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></style>由多个样式规则构成;
一个样式规则由“选择器”和“格式声明语句”构成,如:h1就是选择器,{}中的语句就是格式定义;
选择器就是要定义样式的HTML元素(标记);
格式声明语句放在{}中,{}中由多个格式声明语句构成;比如:color:red;
格式语句由“属性名称”和“属性值”构成,属性名称和属性值间用冒号隔开,每个格式语句必须以分号结束;
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>