目录
引入方式
入门那里已经记录过行间引入,但是基本上不用,因为项目需要统一性。
-
内部引入方式
-
它与行间引入的区别是它是通过<style>标签而不是属性。
一般添加到<head>里面。
补充。CSS的注释是/**/。
内部引入有CSS的样式规范:
选择符{属性1: 值1......}
比如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.T{
width: 100px;
height: 100px;
background-color: rgb(133, 119, 119);
}
</style>
</head>
<body>
<div class="T">
<p>内部引入样式,晚饭吃什么</p>
</div>
</body>
</html>
效果:
需要配合选择符,后面选择符详解
外部引入方式
1、链接式
创建一个.css的文件,然后在<head>里面通过:
<link href="相对路径或者绝对路径" rel="stylesheet" type="text/css"/>
rel是定义当前文档和被链接文档之间的关系,type是定义被链接文件的类型。
-
2、导入式,不咋用。
选择符详解
id选择符
一个页面只能用一次,但是我写了多次也阔以,可能现在放宽了要求
---------
class选择符
和id选择符最大的不一样是,可以使用多次
---------
tag选择符
直接用标签的名字放在{}前面
比如p{。。。。}
-----------
通配选择符
*{},全部标签使用
---------
分组选择符
div.p,h1{}
---------
包含选择符
ul li{}
---------
伪类选择符
链接点击前,点击时,点击后的显示。
未访问:a:link{},只能用在a上面
鼠标划过:p:hover{}
鼠标按下:p:active{}
访问过后:a:visited{},只能在a上面用
样式的继承
越往外的标签拥有的样式,里面的标签也显示,但是有些样式继承不了,比如边框什么的。
样式的优先级
1、相同的样式,比如一个类,后面的高
2、内部样式和外部样式,后面写入的高
3、单一样式:style行间 > id选择符 > class选择符 > tag选择符 > 默认继承
4、!important提成最高优先级,不常用
5、分组选择符和单一选择符,后面写入的高
6、包含优先级,“约分法”,闲得写这么混乱