CSS概述
CSS全称 cascading style sheets 层叠样式表 是一种用来表现HTML的文件样式的计算机语言
作用：静态地修饰页面 并且可以配合各种脚本语言动态地对网页个元素进行格式化
层叠式
CSS中贯穿始终的加载特性
层叠性
继承性
样式
定义如何显示HTML元素
文字文本
背景
盒模型
浮动
定位
其它
CSS基本语法
–我们的CSS应该写在哪？
CSS规则由两个主要的部分构成:选择器 以及一条或多条声明
CSS的代码根据书写位置不同分为四种书写方式：内联式 内嵌式 外联式 导入式
外联式
外联式css也可以叫做外链式css、外部css
书写位置：在一个单独文件名为.css文件中
书写语法：内部代码与内嵌式样式表中<style>标签内部的代码一样的 需要通过选择器去选中标签 添加样式
注意：在.css文件中书写时 不需要再加<style>标签
<link rel=”stylesheet” href=”style.css”>
rel 是关系relation的简写 表示引入外部文件与HTML之间的关系
href 文件路径 超文本引用hypertext reference
type 表示加载时代码按照什么形式加载 H5中一般省略
优点：
实现了HTML和css的完全分离
多个HTML文件可以共用一个css文件
可以实现一个css变化 多个HTML样式同时变化 减少工作量
一个HTML文件可以引入多个css文件 可以实现同一个页面中css代码分层
内嵌式
书写位置：在HTML文件中 <head>标签内部有一个<style>标签
<style>标签书写在<title>标签后面 所有css代码书写在<style>标签内部
<style>标签有一个标签属性叫做type 属性值是 text/css 现在一般省略
优点
实现了结构和样式的分离 css只负责样式 HTML负责结构
多个标签可以利用一段代码设置相同的样式 节省代码量
缺点
结构和样式并没有完全分离 代码依旧书写在HTML文件的<style>标签内部
css样式只能给一个HTML文件使用 不能被多个HTML文件同时利用
在HTML中如果css代码太多会造成文件头重脚轻
<head><title></title><style type=”text/css”></style></head>
内联式
也被习惯叫做行内式
书写位置：在html标签之上的style属性中书写CSS样式
所有的CSS样式属性总体组成标签的style属性的属性值
<p style=”color: black;”>我是一个段落标签</p>
缺点
内联式必须写在标签上 没有完全脱离HTML标签
CSS样式代码让标签结构繁重 不利于html结构的解读
一个内联式的css代码 只能给一个标签使用 如果多个标签有相同的样式 同样的css代码需要写很多次 增加代码量
所以在真正实际工作中写css代码不会使用内联式(行内式)
导入式
书写位置：在内嵌式样式表<style>标签内部 或者在外联式样式表内部 导入其它的外部的.css文件
导入方式:利用一条@import url(路径)语句进行引入
<style> @import url(style.css); </style>
导入式样式表的作用与外联式样式基本相同
但是由于导入式在浏览器中加载时 会在HTML结构加载完毕后再进行编译 如果网速比较慢时 会导致网页出现没有css样式的效果 给用户的体验不好
实际工作中很少用导入式样式表
CSS样式语法规则
CSS属性与属性之间对空格、换行、缩进不敏感
p { color: slateblue; font-size: 30px; }
CSS规则由两个主要的部分构成:选择器 以及一条或多条声明
CSS样式属性 属性名和属性值的键值对写法为 k:v
展开格式：开发过程使用 代码可读性强 便于调错
div { width: 200px; height: 200px; background-color: #fff; margin: 20px; }
紧凑格式：上传服务器时使用 减少不必要的空格 压缩文件大小 利于传输
div{width:200px;height:200px;background-color:#fff;margin:20px;}
CSS文件可以全用小写 也可以全用大写 推荐使用小写
常用样式
p { /* 文字的颜色 */ color: slateblue; /* 文字的大小 */ /* 谷歌浏览器最小字体像素是8像素 */ /* IE浏览器最小显示字号是1像素 */ /* 一般浏览器默认字号是16px */ /* 为了兼容 请不要设置低于12px的字号 网页普遍使用14px字号 */ font-size: 20px; /* 文字的字体 */ /* 浏览器从左到右寻找字体 找到能识别的字体为止 */ /* 一般英文写在前面 因为中文字体会带有英文字体 */ font-family: ‘Courier New’, Courier, monospace, “宋体”; /* 颜色值写法分为rgb写法和十六进制写法 */ color: rgb(255,255,255); /* 通过红绿蓝三原色进行混合而成的颜色模式 */ /* 每个原色取值范围0~255 一共256个树枝 三个原色共能混合成1677万多种颜色 */ /* 十六进制颜色 */ /* rgb模式的化简写法 */ color: #f2122f; /* 十六进制简写 */ color: #f2f; /* 等价于 */ color: #ff22ff; }
CSS盒子实体化三属性
div { /* 定义元素占有宽度 */ width: 200px; /* 定义元素占有高度 */ height: 200px; /* 定义元素的背景色 */ background-color: pink; }
CSS选择器
基础选择器：
标签选择器 id选择器 类选择器 通配符选择器
高级选择器：
后代选择器 交集选择器 并集选择器
一般在id上添加JS行为 在类上添加CSS样式
原子类：
在CSS中提到设置一些花名，每个类选择器后面只添加一条css样式属性，这些属性会在页面中常被使用，后期可以不需要多次书写属性 只要将对应的类名添加给需要的标签即可
important 在比较选择器权重的过程中 important 可以提升某条属性的权重到最大 > 在就近原则比较时无效
行内式 行内式权重高于所有其它选择器 但是低于important
内联样式—-权值为1000。ID选择器—-权值为0100。类，伪类、属性选择器—-权值为0010。标签选择器、伪元素选择器—-权值为0001。通配符、子选择器、相邻选择器—-权值为0000。继承的样式没有权值
span { color: teal !important;/* 只是将该条属性权重提升到最大 无法影响选择器权重 */ color: wheat; font-size: 18px; }
CSS概念层叠式包含继承性和层叠性
继承性
.box1 { width: 400px; text-align: center; background-color: pink; color: white; font-size: 16px; } /* p标签继承了它的父元素的样式 */ <div class=”box1″> <p>这是box1的内部段落</p> <p>这是box1的内部段落</p> <p>这是box1的内部段落</p> <p>这是box1的内部段落</p> <p>这是box1的内部段落</p> </div>
层叠性
主要是选择性的优先级
选中目标标签 比较选择器权重 权重高的层叠权重低 > 权重一样 比较css代码顺序 后写的层叠先写的
选中目标标签的祖先及 比较就近原则 HTML结构中距离目标标签近的层叠远的 > 如果距离相同 比较选择器权重权重大的层叠权重小的 > 如果权重相同 比较css书写顺序 后面的层叠前面的
好了，关于CSS的分享知识到这里就高一小段了，因为今天放假所以文章较长，不过还是感谢大家能看到这里。
