css是一种层叠样式表语言,它的作用是修饰HTML页面中某些元素的样式。css依赖HTML
在HTML页面中嵌套使用css的三种方式:
1、在标签内部使用style属性来设置元素的css样式,这种方式称为内联定义方式。
语法格式:
<标签 style=“样式名:样式值;样式名:样式值;......”></标签>
2、在head标签中使用style块,这种方式称为样式块方式
语法格式:
<head>
<style type="text/css">
选择器{
样式名:样式值;
样式名:样式值;
......
}
</style>
</head>
选择器:
id选择器:
语法格式:
#id{
样式名:样式值;
样式名:样式值;
......
}
标签选择器:
语法格式:
标签名(div、text等等){
样式名:样式值;
样式名:样式值;
......
}
标签选择器作用范围比id选择器要广,在html中只要是和标签名一样的标签都会使用这个样式
类选择器:
语法格式:
.类名{
样式名:样式值;
样式名:样式值;
......
}
类class是每个标签都有的属性,类名相同的标签就认为是同一类。如果两个不同的标签要使用相同的样式,使用id选择器较为麻烦、使用标签选择器不能实现,这时候就可以使用类选择器,只需要把这两个标签的类名改为相同的再写到类选择器中,就可以实现对两个不同的标签使用相同的样式
一个标签的类名可以有多个,这样就可以实现不同的样式
3、链入外部样式表文件,这种方式最常用,将样式写到一个独立的xxx.css文件中,在需要的网页上直接引入css文件,样式就引入了。这种方式容易进行修改维护
语法格式:
<link type="text/css" rel="stylesheet" href="css文件的路径"/>
单独创建一个css文件,在其中可以写多种选择器,然后在html<head>标签中按照语法格式引用即可
比如实现一个超链接没有下划线(默认是有下划线的)
<a href="https://www.baidu.com" id="baidu">百度</a>
在css文件中
#baidu{
text-decoration: none;
}
在<head>标签中引用,就可以得到一个没有下划线的超链接