1:概述
•层叠样式表
•标记语言
•命名规范:一般命名为style.css或css.css
2:语法
2.1基础
选择器 +声明(属性:值)
CSS声明总是以分号(;)结束,声明组以大括号({})括起来:
例:p {color:red;text-align:center;}
2.2选择器
2.2.1类型选择符
类型选择符就是以DOM作为选择符,即选择某个HTML标签为对象。
格式:
E
{
/*CSS代码*/
}
例:
div{
border:3px double#f00; /*边框为3px红色双线*/
680px;
}
2.2.2class选择符
class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。
在 CSS 中,类选择器以一个点"."号显示:
在以下的例子中,所有拥有 center 类的 HTML 元素均为居中。
<h3 class=”center”>这个标题居中</h3>
<h2 class=”center”>这个标题也居中</h3>
.center {
text-align:center;
}
2.2.3id选择符
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
CSS 中 id 选择器以 "#" 来定义。
例:
<h2 id=”para1”>这个标题居中变红</h2>
#para1
{
text-align:center;
color:red;
}
2.2.4span选择符
span没有结构的意义,纯粹是应用样式
<span id=”xx”> xxx</span> 或 <span class=”xx”>xxx</span>
2.2.5div选择符
div是一个块级标签,可以包含段落、标题、表格等。
格式同上。
2.2.6通配符选择符
通配符是一种特殊的选择符,用于定义页面所有元素的样式。
格式:*{CSS代码}
例:
{ /*将页面中所有元素的外边距和内边距设置为0*/
margin:0px;
Padding:0px;
}
2.2.7
此外还有包含选择符、属性选择符、伪类选择符等之后再说。
3:插入样式表的方式
3.1 外部样式表:
在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在(文档的)头部:
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
文件不能包含任何的 html 标签。
3.2 内部样式表:
使用<style> 标签在文档头部定义内部样式表
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
3.3 内联样式(慎用)
在相关的标签内使用样式(style)属性:
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
多重样式优先级:内联>内部>外部
4:div+css
待补充