一、CSS规则:
在CSS样式表中包括3部分内容:选择符、属性和属性值。语法格式如下:
选择符{属性1:属性值1;
属性2:属性值2;}
eg:<style>
h2{//选择器
font-family:宋体;//font-family:属性。宋体:属性值。
}
</style>
CSS选择器:
1、标记选择器
HTML页面是由很多标记组成的,而CSS标记选择器就是声明页面中那些标记采用哪些CSS样式。
例如:a选择器就是用于声明页面中所有有<a>标记的样式风格。
<style>
a{
font-family:9px;
color:#F93;
}
</style>
2、类别选择器
使用标记选择器很快捷,但是会有一定局限性,如果声明标记选择器,那么页面中的所有该标记就都会发生相应变化。
如果页面中有两个<h2>,想要使每个<h2>标记显示的效果都不一样,这时就需要引入类别选择器。
类别选择器名称由用户自己定义,并以“.”号开头,要应用类别选择器,只需使用class属性来声明即可。
eg:
<style>
.one{ //定义类名为one的类别选择器
font-family:宋体; //设置字体
font-size:24px; //设置字体大小
color:red; //设置字体颜色
}
.two{ //定义类名为two的类别选择器
font-family:宋体; //设置字体
font-size:16px; //设置字体大小
color:red; //设置字体颜色
}
</style>
</head>
<body>
<h2 class="one">应用了选择器one</h2>
<p>正文1</p>
<h2 class="two">应用了选择器two<h2>
<p>正文内容2</p>
</body>
3、id选择器
id选择器是通过HTML页面中的id属性来选择增添样式,与类别选择器基本相同,但由于HTML页面中不能
包含两个相同的id标记,因此定义的id选择器也只能被使用一次。
命名id选择器要以“#”号开始,后加HTML标记中的id属性值。
eg:<style>
#first{
font-size:19px;
}
</style>
<body>
<p id ="first">ID选择器</p>
</body>
二、在页面中包含CSS
在页面中包含CSS有3种方式:
1、行内样式
2、内嵌样式
3、链接式
行内样式很直接,但是太繁琐;内嵌样式使用广泛,而且内嵌样式表更加便于维护;链接式是最常用 的一种引用样式表的方式。将CSS样式定义在一个单独的文件中,然后在HTML页面中通过<link>标记引 用,是一种最为有效的使用css样式的方式。
eg:
①创建名称为css的样式表,在表中定义页面 中<h1>、<h2>、<h3>、<p>标记的样式代码如下:
h1,h2,h3{
color:#6CFw;
font-family:"Trebuchet MS",ARIAL,Helvetica;
}
p{
color:#F)Cs;
font-weight:200;
font-size:24px;
}
②在页面中通过<link>标记将样式表引入到页面中,此时css样式表将自行加载到页面中。
<title>通过链接形式引入样式表</title>
<link href="css.css">
</head>
<body>
<h2>页面文字一</h2>
<p>页面文字二</p>
</body>
CSS3也引入了一些新特性,可自行了解。