css基础知识
四种书写方式
内联式、内嵌式、外联式、导入式
内联式
- 内联式,也被习惯叫做行内式.
- 书写位置:在html标签之上的style属性中书写css样式.
- 所有的css样式属性总体组成标签的style属性的属性值
<div stylt="width:100px;height:100px;"></div>
内嵌式
- 书写位置：在html文件中，<heed>标签内部有一个<style>标签。<style>标签书写在<title>标签后面，所有css代码书写在<style>标签内部
- <style>标签有一个标签属性叫做type，属性值为"text/css"
外联式
- 外联式css，也可以叫外链式css、外部css。
- 书写位置：在一个单独的扩展名为.css的文件中。
- 书写语法：内部代码与内嵌式样式表中<style>标签内部的代码一样的。需要通过选择器去选中标签，添加对应的样式
外联式引用
- 外联式样式表必须引入到HTML文件中，才能正常进行加载
- 引入方式：在HTML中的<head>标签内部使用<link>标签进行引入。
<link>标签属性
- rel：stylesheet，表示引入的外部文件与HTML之间的关系，样式表
- href：css文件路径，hypertext reference，超文本引用
- type：text/css，表示加载时代码按照纯文本形式的css代码加载。HTML5中可以省略type不写
导入式
- 书写位置：在内嵌式样式表<style>标签内部，或者在外联式样式表内部，导入其他的外部的.css文件
- 导入方式：利用一条@import url（路径）语句进行引入。
<style>@import url(01.css);h1{color:red;}</style>
- 导入式问题
- 导入式样式表的作用与外联式样式表基本相同。
- 但是由于导入式在浏览器中加载时，会在HTML结构加载完毕后在进行编译，如果网速较慢时，会导致网页出现没有css样式的效果，给用户的体验不好。
常用属性-color
rgb模式
- rgb模式：是根据红绿蓝三原色进行混合而成的颜色模式。
- 每个原色的取值范围是0-255，一共256个数值。三原色共能混合成1677多万种原色。
- 书写方法：rgb(红,绿,蓝)
- 常用颜色的rgb色值
- 红色 rgb(255,0,0)
- 绿色 rgb(0,255,0)
- 蓝色 rgb(0,0,255)
- 黑色 rgb(0,0,0)
- 白色 rgb(255,255,255)
- 灰色 rgb(128,128,128)
- 常用颜色的rgb色值
十六进制模式
- 十六进制模式：是rgb模式的一种简化写法，使用十六进制的数字字符去替换十进制的0-255的数字。
- 十六进制：逢十六进一，每个数位上只能出现0-9，a-f之间的字符。
- 书写为颜色值时，红、绿、蓝每个色值都要使用两位数的十六进制进行替换
常用属性-font-family
- font-family可以设置多个字体名称，在实际加载时只会选择一种加载，选择的依据是按书写顺序进行，如果浏览器不支持第一个字体，则会尝试下一个，知道找到第一个支持的字体
- 浏览器中加载的字体是用户机器中自带的，如果用户的电脑中没有设置字体则加载失败，需要查找下一个，因此，必须在最后设置一个所有极其都具备的通用字体作为后路。
- 中文字体中一般带有英文可以加载的字体效果，为了避免对英文字的字体影响，建议将英文字体写在属性值最前面。
常用属性-font-size
单位
- 相对长度单位
- px:像素值，最常使用的单位
- em:倍数，继承自祖先元素设置的字号的倍数
- %:百分比，继承自祖先元素设置的字号的百分比
- 绝对长度单位
- in：英寸
- cm：厘米
- mm：毫米
- pt：点
默认加载字号像素-16px
实际应用中，网页中最小设置字号必须是12px，如果低于12px会出现兼容问题。现在网页中普遍使用14px+。尽量使用12px、14px、16px等偶数的数字字号，ie6等老式浏览器支持奇数会有bug。
css样式属性-盒子实体化三属性
- width:px单位的数值，定义元素占有宽度
- height:px单位的数值，定义元素占有高度
- backg-color:颜色名、颜色值，定义元素的背景颜色
继承性
- 如果一个标签没有设置过一些样式，它的某个祖先级曾经设置过，在浏览器中该标签也加载了这些样式，这些样式都是从祖先级继承而来，这种现象就是继承性
- 能够被继承的样式是所有的文字相关样式属性，其他属性都不能被继承
层叠性
- 思考问题
同一个标签可以被多个选择器选中，如果选择器后面设置了相同的样式属性，标签最终该加载哪个？或者，在继承性中，如果多个祖先都设置了相同的文字样式，后代中该继承哪个祖先级的？ - 解决方法：就是使用层叠性去解决冲突。多个选择器在进行对比过程中，最终只有一个属性会成功加载，它会层叠、覆盖掉其他的属性。
- 判断最终胜出的属性是谁，需要依赖判断优先级。
- 判断方法
*第一种选中目标标签- 第一步：比较多个选择器权重，权重高的层叠权重低。
- 基础选择器的权重：根据选择范围，范围越大权重越小，*<标签选择器<类选择器<id选择器。
- 高级选择器权重比较方法：依次比较组成高级选择器的id的个数，类的个数，标签的个数，如果前面能够比较出大小就不在比较后面，如果前面相等就往后比较，直到比出大小。
- 比较顺序：（id个数，类的个数，标签的个数）
- 第二步：如果选择器权重都相同，需要比较css中代码的书写顺序，后写的层叠先写的
- 第二种选中目标标签的祖先级
- 如果选择器选中的是祖先元素，文字的样式可以被继承
- 第一步：比较就近原则，比较选择器中的祖先级在HTML结构中距离目标标签的远近，近的层叠远的
- 第二步：如果选中的祖先级距离目标一样近（同一个祖先级），比较选择器权重，权重大的层叠小的
- 第三步：如果距离一样近，权重也相同，最后比较css中的书写顺序，后面的层叠前面的
- 第三种遇到!important关键字
- 如果在比较选择器权重的过程中，遇见一个!important关键字，可以将某条css样式属性的权重提升到最大
- 书写位置：在某个css属性的属性值后面空格加!important
- 注意
- 就近原则中，不需要比较选择器的权重，所有important会失效
- important不能提升选择器的权重，只能提升某条属性的权重到最大
- 第四种行内式权重
- 行内式样式与内嵌式或者外联式样式比较权重时，行内式的权重最高
- 但是，与!important关键字相比权重要低
效- important不能提升选择器的权重，只能提升某条属性的权重到最大
1622
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
