目录
1.CSS的引用
a.内联样式(不推荐)
这种样式是把对页面各元素的样式设置直接写在网页主体内部,作为HTML标记的属性
嵌入样式:
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
<!-- 选择器1{样式属性1:取值;样式属性2:取值;....}
选择器2{样式属性1:取值;样式属性2:取值;....}
选择器3{样式属性1:取值;样式属性2:取值;....}
选择器4{样式属性1:取值;样式属性2:取值;....} -->
</style>
</head>
b.外部样式(推荐)
这种方式是将外部的独立的样式表文件引入到HTML文件中,样式表文件就是CSS文件,拓展名为.css。(注意一定要写<link></link>标签让外部样式链接起来)
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/style.css">
</head>
rel="stylesheet"属性用来声明在HTML文件中使用外部样式表。
href="css/style.css"属性用来知名改文件的类型是样式表类型
c.导入样式(不推荐)
导入样式与外部样式比较相似,只是引入方式的不同。采用导入方式引入的样式表,在HTML文件初始化,会被全部导入到HTML文件内,作为文件的一部分,从加载速度来说会稍稍慢,但宽带足够大,用户不会察觉出来。
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
@import url("外部样式表文件地址");
</style>
</head>
import语句后面的;是不能省略的。
2.CSS选择器和声明
(1)标签选择器
网页里面的图片列表段落都是很多HTML标签或标签对组成的,直接给标签设置样式的类型就是标签选择器。
HTML代码:
<body>
<a href="#">点此链接1</a>
<p>
<a href="#">点此链接2</a>
</p>
</body>
CSS代码:
a{
color: #f00;
font: 16px;
}
当用这种方式设置的a标签的样式,会使整个HTML页面中的所有超链接的样式都发生了相应的变化。
若页面内该标签是唯一的,可以使用该标签选择器声明样式;若不是唯一的标签,有希望有不同样式效果,则需要结合其他的声明方式
(2)类选择器【class选择器】
可以应用于网页中的某一种元素,而不只是应用于某一个元素(比较推荐大部分样式都用这个选择器)
HTML代码:
1.类可以使用多次
<body>
<div class="top section"></div>
</body>
2.同一个标签可以使用多类
<body>
<div class="top section"></div>
<div class="top class2"></div>
</body>
CSS代码: 类名之前要加" . "
.top{
color: #f00;
font-size: 16px;
}
如果标签有冲突以css中后来为大;如果无法避免样式冲突,则使用多个标签在css代码中包含两个标签。
(3)id选择器
id选择器也是可以用来定义某一类相同的样式,但是与class不同的是,在同一个HTML文件中,id名不能重复。所以通常是使用id选择器来定义一个特定的css规则。
HTML代码:
<body>
<div id="menu"></div>
</body>
CSS代码:
#menu{
color: #f00;
font-size: 16px;
}
(4)分类选择器
当多个选择器声明的样式完全相同时,可以将他们统一进行声明,个选择器之间使用英文" , "隔开,来提高代码效率。
HTML代码:
<body>
<div id="menu"></div>
<div class="style"></div>
</body>
CSS代码:
#menu,.style{
color: #f00;
font-size: 16px;
}
(5)包含选择器【父子选择器】
需要为一个容器里面的元素设置样式时,需要使用包含选择器。语法为:父选择器 子选择器{属性1:属性值;属性2:属性值;},父选择器和子选择器之间用空格隔开。
HTML代码:
<body>
<div id="menu"></div>
<div class="style">
<div class="red">1111111111</div>
</div>
</body>
CSS代码:
.style .red{
color: #f00;
font-size: 16px;
}
注意包含选择器是包含孙标签的,如果要不包含孙标签,应该使用父子关系:.class1>.class2{}父子关系标签之间用大于符号链接。
(6)通配符选择器
通配符选择器是一种特殊类型的选择器,他用*来表示选择器的名称,可以定义多有的网页元素显示格式。一般是用于统一浏览器设置。
*{
margin: 0;
padding: 0;
}
通常用于去掉标签自带的margin和padding值具体盒子模型会详细讲解。
(7)相邻关系
相邻关系仅控制之后紧邻的标签样式,通常标签用加号链接。
.style+.style2{
color: #f00;
font-size: 16px;
}
(8)兄弟关系
无论是否相邻控制后面所有同级的标签,通常标签用波浪~链接。
.style~.style2{
color: #f00;
font-size: 16px;
}
注意,相邻关系和兄弟关系都是平级关系。