css全称cascaading style sheets
- 层叠样式表，是用来表现HTML文件样式的计算机语言。
- 作用：静态修饰网页，并且可以配合各种脚本语言动态的对网页各元素进行格式化。
前端三层技术
- html -> 结构层 -> 从语义的角度搭建网页结构
- css -> 样式层 -> 从美观的角度描述页面样式
- JavaScript -> 行为层 -> 从交互的角度描述页面的行为
css的组成
-
层叠式:css中贯穿始终的加载特性样式
- 层叠性
- 继承性
-
定义如何显示HTML元素
- 文字文本
- 背景
- 盒模型
- 浮动
- 定位
- 其他
css语法
css书写位置(4个)
- css规则
-
内联式(行内式)
- 书写位置: 在HTML标签的style属性中书写css样式。
- 内联式缺点
- 没有完全脱离HTML标签
- css样式让标签结构繁重，不利于HTML结构的解读
- 一个内联式的css代码只能给一个标签用，复用性差；多个相同时，会增加代码量，影响加载速度。
-
内嵌式
- 书写位置：<head>标签内部写<style>标签,<style>标签写在<title>标签后面
-
内嵌式优点
- 实现了结构与样式的初步分离(css只负责样式，html负责结构)
- 多个标签可利用一段代码设置相同的样式，节省代码量。
-
内嵌式缺点
- 结构和样式并没有完全分离，代码仍然写在HTML文件头部
- css只能给一个HTML文件使用，不能被多个HTML文件同时利用。
- 在HTML中如果css代码太多，会造成文件头重脚轻。
-
外联式(外链式、外部css)
-
书写位置：单独的扩展名为.css文件中
-
外链式引用：<head>标签内部使用<link>标签进行引入
- <link>标签属性
-
外联式优点
- 实现了HTML和css完全分离
- 多个HTML文件可共用一个css，便于提取公共css，减少代码量。
- 可以实现一个css变化，多个HTML页面同时变化，减少工作量
- 一个HTML文件可以引入多个css文件，可以实现同一个页面中css代码分层。
-
-
导入式
- 书写位置
- 在内嵌式样式表<style>标签内部
- 在外联式样式表内部，导入其他的外部的.css文件
- 导入方式：@import url(路径)语句进行引用
- 导入式问题
- 导入式和外联式作用基本相同
- 但是导入式在浏览器中加载时，会在HTML结构加载完毕后再进行编译，网速比较慢的时候，会导致网页出现没有css样式的效果，给用户的体验不好。
- 实际工作中，较少用导入式，推荐使用外联式样式表。
- 书写位置
-
总结
- 小型案例：内嵌式css
- 实际工作、大型网站项目：外联式css
css样式规则
- 以内嵌式样式表为例
- css样式的属性，属性名和属性值的键值对写法为k:v;。
- 注意事项
- 分号必要性：每条属性后面的分号必须写，如果不写，会导致后面所有的代码加载错误。
- css中所有属性与属性之间对空格、换行、缩进不敏感。
css注释语法
- 语法格式：
/*中间部分为注释内容*/
vs code快捷键：ctrl+/
css语法
-
css样式格式
- 展示格式：开发过程使用，代码可读性强，便于调错。
- 紧凑格式：上传服务器时使用，减少不必要的空白字符，压缩文件大小，利于传输。
css常用样式
文字三属性
-
颜色color
- 属性名k: 属性值(颜色名、颜色值)
- 颜色名常用英文
+ 更多的颜色可以通过W3school查询手册
- 颜色值
-
rgb模式
- 书写方法：rgb(红,绿,蓝)
- 每个原色的取值范围:0~255,一共256个数值。
-
十六进制
- 是rgb的一种简化写法
- 十六进制：逢十六进一，每个数位上只能出现0
9,af之间的字符。 - 书写方式：使用#开头，后面连续书写红、绿、蓝三个颜色的十六进制的两位数值。
- 简写：如果红、绿、蓝三个原色的色值每一个都是由重叠的数字组成可以将重叠的数字简化成一个进行书写。
红色：f00 绿色：0f0 蓝色：00f 注：类似#808080是不能进行简化的
-
- 属性名k: 属性值(颜色名、颜色值)
-
字体font-family
-
属性名K(font-family) : V(字体名称);
-
属性值：字体名称必须包裹在一对引号中，属性值可以有多个，多个值之间用逗号隔开。
-
常用字体
- 中文字体 宋体 SimSun 微软雅黑 Microsoft Yahei
- 英文字体 Arial consolas
如果不设置字体，不同的浏览器有自己默认字体显示。
-
注意事项
-
font-family可以设置多个字体名称，在实际加载时只会选择一个加载，按书写顺序进行。如果浏览器不支持第一个字体，则会尝试下一个，直到找到第一个支持的字体。
-
浏览器中加载的字体是用户机器中自带的，如果用户的电脑中没有设置的字体则加载失败，需要查找下一个。因此，必须在最后设置一个所有机器都具备的通用字体。
-
中文字体中一般带有英文可以加载的字体效果，为了避免对英文字的字体影响，建议将英文字体写在属性值的最前面。
-
-
-
字号font-size
-
属性名K(font-size): 属性值v;
-
属性值使用相对长度单位，也可以使用绝对长度单位。推荐使用相对长度单位。
-
单位
-
注意事项
- 如果HTML中不设置字号，不同浏览器有自己默认的加载字号，比如：chrome、IE,默认显示字号为16px.
- 不同的浏览器也有自己最小加载显示字号，如果设置的字号低于最小字号，都以最小字号加载,0除外。chrome浏览器最小加载字号8px，IE浏览器最小记载字号1px.
-
实际应用
- 网页中最小字号必须是12px,如果低于12px会出现兼容问题。现在网页中普遍使用14px+.
- 尽量使用12、14、16等偶数数字字号，IE老版本支持奇数会有bug。
-
盒子实体化三属性
-
width
- 属性值: px单位的数值
- 说明：元素占有的宽度
-
height
- 属性值：px单位的数值
- 说明：元素占有的高度
-
background-color
- 属性值：颜色名、颜色值
- 说明：元素的背景颜色
css选择器(css2.1版本的7种选择器)
-
基础选择器
- 标签选择器
- 选择范围：选中的是HTML文件中所有的同名标签
- 优点：可以选中所有的同名标签，设置所有同名标签的公共样式。
- 缺点：只能实现全选，不能对局部的标签添加特殊样式。
- 标签选择器
-
id选择器 + id命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写。 + 缺点：id选择器只能实现单选，不能帮我们完成多选的功能。
-
类选择器 + 选择范围：是页面中所有class属性值相同的标签。 + class命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写。class属性值可以与其他的class相同。 + 特点： 1. 多个不同的标签，不区分标签类型，只要class属性值相同，都可被同一个类选择器选中。 2. 一个标签的class属性可以有多个属性值，值之间用空格分隔，每个属性值组成的选择器，都可以选中这个标签，每一个选择器后面的样式都会添加给同一个标签。 3. 特殊应用 + 原子类：在css中提前设置一些类名，每个类选择器后面只添加一条css样式属性，这些属性会在页面中常被使用，后期可以不需要多次书写属性，只要将对应的类名添加给需要的标签即可。
4. 优点
+ 通过一个类选择器进行多选，选中多个标签，添加公共样式。
+ 一个标签可以被多个类选择器选中，可以将所有样式进行分离，分别提取公共样式和单独样式，节省代码量。
4. 总结
+ 实际工作中，使用规律：类上样式(css)、id上行为(JavaScript) -
通配符选择器
-
书写方式：*
-
选择范围：包含<html>标签在内的所有标签
-
特点
- 优点：可以实现全选，简化书写
- 缺点：通配符选择效率低，设置的部分公共样式不是所有标签都需要添加，如果使用通配符选择，会让不需要的标签也加载一次样式，导致浏览器多做无用的工作。
-
应用
- 实际上线的网站不允许使用*去清楚默认内外边距。
- 普通案例，代码量较少，为了节省书写，可以使用通配符。
-
-
高级选择器
- 后代选择器
- 含义：通过标签之间的嵌套关系(族谱关系)去选择元素，基本组成部分就是基础选择器。
- 书写方式：空格表示后代。基础选择器中间使用空格分隔，空格前面的选择器选中的标签必须是后面选择器选中标签的祖先级。
- 注意：后代关系不一定只能是父子关系
- 优点：减少class属性的定义使用，选择效率更高
- 后代选择器
-
交集选择器
- 书写方式：基础选择器进行连续书写，如果有标签选择器参与交集，必须书写在开头。
- 选择范围：选择的是满足所有基础选择器需求的标签，如果一个条件不满足不能被选中。
- 比较常见的是标签与类的交集。
- 交集选择器的更多写法
- 交集选择器可以进行类名的连续交集，需要满足更多的条件才能选中标签。
- IE6不支持类名连续交集写法。(会默认执行最后一个选择)
- 交集选择器可以作为其他高级选择器的组成部分。
-
并集选择器 * 含义：多次书写相同的样式属性对代码造成浪费，可以将前面六种选择器进行并集书写，相当于一种简化写法。 * 书写方式：将多个选择器中间逗号进行分隔，最后一个后面不能加逗号 * 用途 1. 如果多个标签具有公共样式，但是不能用一个选择器选中，可以使用并集写法。 2. 可以使用标签选择器的并集写法，进行默认样式的清除，替换通配符的功能。
css层叠式
-
继承性
- 能够被继承的样式是所有的文字属性，其他的属性都不能继承。
- 浏览器控制面板
- 应用 继承性是一个很好的性质，可以将页面中出现最多的文字样式设置给一个较大的祖先级标签，比如<body>，后期所有的后代标签都可以从它那里继承。
-
层叠性
- 定义：多个选择器在进行对比的过程中，最终只有一个属性会加载成功，它会层叠、覆盖掉其他的属性。
- 判断方法
核心：判断选择器是否选中目标标签
-
选中目标标签 第一步：比较选择器权重，权重高的层叠权重低的。 第二步：权重一样，比较css中代码书写顺序，后写的层叠先写的。
-
选中目标标签的祖先级 第一步：比较就近原则，HTML中距离目标近的层叠远的 第二步：如果距离相同（选中同一个祖先级），比较选择器权重，权重大的层叠权重小的。 第三步：如果权重相同，比较css书写顺序，后面的层叠前面的。
-
!important
- 在比较权重过程中，!important可以提升某条属性的权重到最大。
- 注意事项
- 就近原则比较时无效。
- important不能提升选择器的权重，只能提升某条属性的权重到最大。
- 书写位置：在某个css属性的属性值后面空格加!important
-
行内式：行内式权重高于其他选择器，但是低于important
-
-
基础选择器的权重：根据选择范围，范围越大权重越小，* < 标签选择器 < 类选择器 < id选择器
-
高级选择器权重比较方法：依次比较组成高级选择器的id个数，类的个数，标签的个数，如果前面能够比较出大小就不再比较后面。 比较顺序：(id个数、类的个数、标签个数)
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！