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;
}
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！