CSS的简介
CSS:cascading style sheet :层叠样式表。
做什么用:
设置网页的显示效果(设置样式)。
可以解决html代码对样式定义的重复,
提高了后期样式代码的可维护性,
增强了网页的显示效果功能。
CSS将网页显示的效果和内容分离。(耦合性)
HTML只需要把文本内容封装起来,不用属性,用CSS的代码来控制显示效果。
如果开发了多套CSS的代码,都不用修改HTML的代码。
CSS和HTML的结合(重点)
第一种结合方式——在html标签上提供style属性
在html的标签上,提供了一个(属性),style=”CSS的代码”
第二种结合方式——在html文件中提供style标签
在HTML的文件,提供了一个标签
<style type="text/css">CSS的代码</style>
这个标签放在<head></head>的中间
注:如果某个div标签已经用第一种方式定义过了,则会按照第一种方式显示,按层叠来理解。
第三种结合方式——引入外部css文件
引入CSS的文件,定义一个css文件
后缀名 .css
格式: @import url("CSS文件的地址");
属性必须要写<style></style>内部。大写和小写都没有问题。
css格式的注释符号:/* */
第四种结合方式——引入外部文件,通过link标签
写在<head></head>中间, 不要放在<style>中间(经常使用)
rel:代表当前和引入文件之间的关系:一般为stylesheet
type:切换到css引擎
href:引入CSS文件的地址
CSS的优先级和规范(重点)
一般情况:从上到下,由外到内,优先级是从低到高的。
特殊情况下:标签名选择器 < 类选择器 < ID选择器 < style属性
规范
选择器名称 { 属性名:属性值;属性名:属性值;……}
属性 与 属性 之间用 分号 隔开
属性 与 属性值 之间用 冒号 连接
如果一个属性有多个值的话,那么多个值用 空格 隔开。
CSS的选择器(重点)
作用:告诉CSS的代码作用在哪个标签上。
基本选择器
标签名选择器
div{} span{}
类选择器 :一般给css使用
在HTML的标签上,提供了属性 class,定位到div的标签(美工经常使用的方式)
写法: .class的名称 (eg: .hehe{CSS的代码})
设置不同的标签,具有相同的样式
带html div标签情况
不带html标签的情况
ID选择器:一般给js使用
在HTML的标签上,提供的属性 设置样式
写法: #id的名称 (eg: #haha{CSS的代码})
一般情况下:不同的模块设置不同的ID,若id相同,默认取第一个。
扩展选择器
关联选择器:标签可以嵌套,标签与标签之间的关系。
写法: 中间用空格隔开 ;例子(div font{CSS的代码})
组合选择器:对多个不同的选择器进行相同的样式
写法:在多个不同的选择器之间用 , 隔开
伪元素选择器: 定义好的一些选择器,用就ok。
格式:标签名:伪元素。类名 标签名。类名:伪元素。都可以。
如果使用超链接伪元素选择器:使用顺序: L V H A
L:link 超链接未点击状态。 text-decoration: none;
V:visited 被访问后的状态。
H:hover 光标移到超链接上的状态(未点击)。
A:active 点击超链接时的状态。
first-line 段落的第一行文本。
first-letter 段落中的第一个字母。
focus 具有焦点的元素。
input:FOCUS {
background-color: gray;
}
/* 未访问 */
a:LINK {
text-decoration: none;
color: blue;
}
/* 访问完成 */
a:VISITED {
color: yellow;
font-size: 20px;
}
/* 悬停 */
a:HOVER {
color: red;
font-size: 25px;
}
/* 点击状态 */
a:ACTIVE {
color: green;
font-size: 35px;
}