CSS基本用法
1.CSS基本语法
选择器{
属性1:属性值1;
属性2:属性值2;
……
}
选择器表示样式的名称;属性是设置元素的格式,如字体、颜色、字号等。
2.CSS的三种基本选择器
在CSS中,选择器分为基本选择器和复合选择器。基本选择器包括HTML标记选择器、class选择器和ID选择器。
2.1HTML标记选择器
语法:
HTML{
属性1:属性值1;
属性2:属性值2;
……
}
例如:设置div选择器大小为300px x 300px.
div{
width:300px;
height:300px;
}
2.2 class选择器
class选择器也称为类选择器
2.2.1 class选择器定义语法
类选择器定义语法:
.classname{
属性1:属性值1;
属性2:属性值2;
……
}
例如:设置类选择器first的样式为,边框为1px黑色的实线,文字颜色为红色。
.first{
border:1px solid black;
color:red;
}
2.2.2 class选择器应用语句
<html 标记 class = "classname"></html>
例如:在div标签和p标签中均应用first类选择器,此时div标签和p标签拥有frist中定义的属性,边框为1px黑色的实现,文字颜色为红色。
<div class="first"></div>
<p class="first"></div>
class选择器的特点: 当修改了类选择器之后,只有应用此类选择器的标记样式发生改变。
2.3 ID选择器
ID选择器名称是以英文#开始,选择器定义之后需要使用id属性应用样式。
2.3.1 选择器定义
语法:
#IDname{
属性1:属性值1;
属性2:属性值2;
……
}
例如:设置ID选择器title,文字大小是14px,粗体显示。
#title{
font-size:14px;
font-weight:bold;
}
2.2.2 定义ID选择器应用
选择器应用语法:
<html 标记 id = "IDname"></html>
例如:在div标签中均应用ID类选择器,此时div标签拥有frist中定义的属性,文字大小是14px,粗体显示。
<div id="title"></div>
ID选择器的特点: 在网页中定义了ID选择器式之中,只有应用这个ID选择器的标记样式发生改变。与class选择器不同的是,ID选择器在网页中只能应用一次。
*特殊用法
内嵌声明
p span{
font-size:14px;
font-weight:bold;
}
集体声明
h1,p{
font-size:14px;
font-weight:bold;
}
通用声明(全局声明)
*{
font-size:14px;
font-weight:bold;
}
3. CSS样式表的4种引入方法
使用CSS控制网页格式的方法有行内样式、内嵌式、链接式、导入式等方式。
3.1 行内样式
通过style属性定义在HTML标记内部的样式称为行内样式,行内样式只能影响该标签内的对象,无法影响另一个标签内对象样式。
语法:
<html 标签 style="属性1:属性值1;属性2:属性值2;……"
例如:
<p style=" borser:1px solid black;color:red">
注意: 行内样式可以应用< body >标记的所有子标记,包括< body >b标记在内,但不能用在< head >< title >< meta >等标记中。
3.2 内嵌式
用< style >标记设置样式的方法称为内嵌式样式。
语法:
<style type="text/css">
选择器{
属性1:属性值1;
属性2:属性值2;
……
}
</style>
说明:
- < style >标记用来声明样式;
- type属性表示CSS的MIME编码;
- 选择器可以是2节中介绍的三种选择器。
例如,定义一个内嵌式标记选择器:
<style type="text/css">
div{
width:300px;
height:300px;
}
</style>
3.3 链接式
链接式是指引用外部独立的CSS文件。定义了外部样式之后,网站中的所有网页都可以引用此样式。
语法:
<link href="cssurl.css" rel="stylesheet" type="text/css">
说明:
- href表示外部样式表文件的路径;
- rel表示浏览器引用的是CSS文件;
- type属性表示CSS的MIME编码。
一个外部的样式表文件可以应用于多个网页,当改变外部样式表文件时,所有的页面样式都将随之改变。
3.4 导入式
与< link >标记类似,使用@import可以导入外部的样式,但是@import只能在< style >标记中使用,而且必须放在其他CSS样式之前。
语法:
<style type = " text/css"
@import url(外部样式url);
</style>
说明:使用导入式样式注意,引用外部样式语句结束一定要写分号。