css引入方式
CSS 引入方式
行内式
直接写在标签(元素)内,通过标签属性 style 引入------工作中不用
<div style="color:red;">行内式</div>
div 标签 style 标签属性名 "color:red;" 标签属性值
内嵌式
将 CSS 代码放在 style 元素内,在通过 CSS 选择器来选择 HTML 元素,把 CSS 样式添加给这个元素
- style 元素一般都会放在 head 元素内,在 title 标题的后面
<style>
div {
color: red;
}
</style>
<div>内嵌式</div>
外链式
将 CSS 代码单独放在一个 CSS 文件中,在通过 link 标签进行引入
- link 标签一般放在 head 元素内,放在 title 标题的后面
- 在项目中经常使用
<link rel="stylesheet" href="CSS.css" type="text/css" /> link 标签
rel="stylesheet" 样式表,不可缺少 href="" CSS文件地址、路径 type="text/css" 类型
可以不写,建议写全
导入式
'import' "CSS 文件地址"; 都是引入一个单独的 CSS 文件
- @import 放在 style 元素内
- @import 既不是标签,也不是 CSS 样式,是一条声明语句
- @import
<style>
@import 'CSS.css';
</style>
外链式和导入式的区别(3 条)
- 加载顺序: 外链式:同步加载 HTML 结构和 CSS 样式 导入式:先加载 HTML 结构,加载完成后再加载 CSS 样式
- 引入方式: 外链式:使用 link 标签引入 导入式:@import 不是标签也不是 CSS 样式,只是一条声明语句
- 当使用 javascript 控制 DOM 去改变 css 样式的时候,只能使用 link 标签,因为 import 是不能被 DOM 控制的。
link 和@import 虽然都是引入外部的 css 文件,区别 link 是 html 标签,@import 完全是 css 提供的方式,要写在 css 文件或者 style 标签中。 他们的加载顺序也是有区别的,当一个页面被加载的时候,link 引用的 css 文件会被同时加载,而@import 引入的 css 文件会等页面全部下载完后再加载。 当使用 javascript 控制 DOM 去改变 css 样式的时候,只能使用 link 标签,因为 import 是不能被 DOM 控制的。
CSS 选择器
语法:CSS 选择器{CSS 样式(CSS 属性名:CSS 属性值;)}
CSS 属性名和属性值之间用冒号":"隔开,用分号";"结束 ![Alt text]
CSS 选择器的分类
1、标签选择器
直接把 HTML 标签当做选择器来用 权重:1
标签选择器会选择 HTML 标签中所有的相同的标签
<style>
(匹配所有的div标签) div {
color: red;
}
</style>
<div>div1</div>
<span>区分行内小模块</span>
<p>段落</p>
<div>div2</div>
2、类选择器
将 HTML 元素后面添加一个 class 标签属性,利用标签属性值当做选择器来用,在标签属性值前面加一个点"." 权重:10
标签属性值(类名)可以重复使用 标签属性值(类名)客户以有多个,标签属性值(类名)之间用空格隔开 标签属性值:不能是数字,不能以数字开头,不能是中文
<style>
/*类选择器*/
.div1 {
color: yellow;
}
.title {
color: green;
}
</style>
<div class="div1">div1</div>
<p class="div1 title">段落</p>
3、id 选择器
将 HTML 元素后面添加一个 class 标签属性,利用标签属性值当做选择器来用,在标签属性值前面加一个点"#" 权重:100
id 选择器具有唯一性,不能重名 id 选择器是配合 JS 来使用的
<style>
#div2 {
color: red;
}
</style>
<div class="div1" id="div2">div标签</div>
<p id="div2">错误的 id唯一</p>
4、通配符选择器
匹配了所有的 HTML 元素 语法:{CSS 属性名:CSS 属性值} 权重:0<<1
在项目中,通配符选择器不用。它匹配了所有的 HTML 标签,比较消耗性能。
<style>
* {
margin: 0;
padding: 0;
}
</style>
5、后代选择器(派生选择器)
在一个根元素(大盒子)的范围内,查找它的后代元素 语法:祖辈选择器 后代元素{} 权重:所有选择器权重相加之和
后代选择器之间用空格隔开
.box ol li a span{ color:blue; }
6、分组选择器
将同一份 CSS 样式分别给了不同的 HTML 元素,并给这个元素添加 CSS 样式 语法:选择器 1,选择器 2,选择器 3{CSS 样式} 权重:独立计算的,不会叠加
h2,div,p{ color:red; }
7、标签属性选择器
利用标签属性名和标签属性值来当做选择器来使用。选择 HTML 元素 语法:[标签属性名]{CSS 样式} [标签属性名=标签属性值]{CSS 样式} 权重:10
如果遇到 HTML 元素中带有 class 标签属性时,一般都用类选择器来选择 HTML 元素,不会使用标签属性选择器
[class]{ color: red; } [class=div1]{ color: green; } [title]{ color: gray; }
[title=div2]{ color: pink; }
<div class="div1" title="div2">div元素</div>
8、交集选择器
两种选择器同属一个元素时,可以用交集选择器来准确选择 HTML 元素 权重:所有选择器相加之和
交集选择器的组成:标签选择器和类选择器、标签选择器和标签属性选择器、标签选择器和 id 选择器、类选择器和标签属性选择器
div.div1{ color: red; } div[title]{ color: green; } .div1[title]{ color:
deeppink; }
<div class="div1" title="div2">div元素</div>
9、子级选择器
存在于包含关系的元素选择,通过父级来选择子级 语法:父级选择器>子级选择器{CSS 样式} 权重:所有选择器权重之和
<style>
ol > li > a > span {
color: red;
}
</style>
<div class="box">
<ol>
<li>
<a href="">
<span> span1元素 </span>
</a>
</li>
</ol>
<ul>
<li>
<a href="">
<span>span2元素</span>
</a>
</li>
</ul>
</div>
10、伪类选择器
给 HTML 元素添加某种状态,例如:鼠标经过时的状态,鼠标点击时的状态、鼠标点击后的状态 权重:10(一般不会计算)
伪类选择器在项目中常用的状态是a:hover{}鼠标经过时的状态
a:link { } //默认的状态---被高版本浏览器废弃 a:hover { }
//鼠标经过时的状态----常用 a:active { } //鼠标点击时的状态 a:visited { }
//鼠标点击后的状态
11、伪元素---after
通过 CSS 代码向指定的元素内添加假的(HTML 中不存在)的内容
:before 在指定元素所有内容的前面;11、伪元素---afterCSS 代码向指定的元素内添加假的(HTML11、伪元素---afterCSS 代码向指定的元素内添加假的(HTML11、伪元素---afterCSS 代码向指定的元素内添加假的(HTML11、伪元素---afterCSS 代码向指定的元素内添加假的(HTML11、伪元素---afterCSS 代码向指定的元素内添加假的(HTML :affter 在指定元素所有内容分的后面
用伪元素需要保证两个前提: 1、必须带有; display:block 这个 CSS 属性 2、必须带有 content="";属性,content 内容可以为空。
伪元素经常常用的是:after这个属性 :after一般在清除浮动带来的影响中使用
<style>
.box:before {
display: block; /*块级元素*/
content: '我是哥哥';
}
.box:after {
display: block;
content: '我是弟弟';
}
</style>