CSS基础语法
-
CSS全称cascading style sheets,层叠式样式表,是一种用来表现HTML的文件样式的计算机语言。
-
作用:静态地修饰网页,并且可以配合各种脚本语言动态地对网页各元素进行格式化
-
CSS的组成
-
层叠式
css中贯穿始终的加载特性
- 层叠性
- 继承性
-
样式
定义如何显示HTML元素
- 文字文本
- 背景
- 盒模型
- 浮动
- 定位
- 其他
-
CSS语法
CSS规则
-
CSS规则由两个主要的部分构成:选择器,以及一条或多条生命
p{ //选择器 width:300px; //属性名:属性值 fount-size:14px }
-
书写位置
css的代码根据书写位置不同分为四种书写方式:内联式、内嵌式、外联式、导入式
-
内联式
-
内联式,也叫做行内式
-
书写位置:在HTML标签之上的style属性中书写css样式
-
所有的css样式属性总体组成标签的style属性的属性值
<div style="width:100px;height:100px"></div>
-
缺点:
- 内联式必须写在标签上,没有完全脱离HTML标签
- css样式代码让标签结构繁重,不利于HTML结构的解读
- 一个内联式的css代码,只能给标签使用,如果多个标签样式相同,需要书写多次,无法复用,增加代码量。
- 因此,工作中很少使用内联式编写css代码
-
-
内嵌式
- 书写位置:在HTML文件中,head标签内部有一个style标签。style标签写在title标签后面,所有的css代码写在style标签内部
- style标签有一个标签属性叫做type,属性是“text/css”
- 优点:
- 实现了结构和样式的初步分离
- 多个标签可以利用一段代码设置相同的样式,节省代码量
- 缺点:
- 结构和样式没有完全分离,代码依旧写在HTML文件内部
- css样式只能给一个HTML文件使用,不能被多个HTML文件同时利用
- 在HTML中如果css代码太多,会造成文件头重脚轻
-
外联式
-
外联式css,也叫做外联式css、外部css
-
书写位置:在一个单独的扩展名为.css的文件中。
-
书写方法:通过选择器选择标签,添加对应的样式
-
注意:在.css文件中书写时,不与要在添加sytle标签
-
外联式引用:
-
外联式样式必须引入到HTML文件中,才能正常进行加载
-
引入方式:在HTML中的head标签内部使用link标签进行引入
-
link标签属性:
属性名 属性值 说明 rel “stylesheet” 表示引入的外部文件于HTML之间的关系,样式表 href css文件路径 超文本引用 type “text/css” 加载时按照纯文本形式的css代码加载,HTML5中可以省略不写
-
-
外联式优点:
- 实现HTML和CSS完全分离
- 多个HTML文件可以共用一个CSS文件,便于提取公共css,减少代码量
- 可以实现改变一个CSS样式,多个HTML文件同时变化,减少工作量
- 一个HTML文件可以引入多个css文件,可以实现同一个页面中css代码分层
-
-
导入式
-
书写位置:在内嵌式样式表style标签内部,或者在外联式样式表内部,导入其他的外部的.css文件
-
导入方式:@import url(路径)语句进行引入
<style> @import url(css/index.css) </style>
-
缺点:
- 导入式样式表的作用与外联式样式表基本相同
- 但是由于导入式在浏览器中加载时,会在HTML结构加载完毕后再进行编译,如果网速较慢时,会出现页面没有样式的效果,导致用户的体验感不好
-
-
常用样式
-
颜色color
-
rgb模式:三色原理红、绿、蓝
-
每个颜色取值范围是0-255,一共256个数值。
-
书写方法: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模式的一种或简写
-
0—>00 255—>ff
-
书写方式:是用#开头,后面连续写红、绿、蓝三个颜色的十六进制的两位数值
红色 #ff0000 绿色 #00ff00 蓝色 #0000ff 黑色 #ffffff 灰色 #808080
-
-
字体font-family
- 可以设置多个属性值,但浏览器只会选择一个加载,按照书写顺序进行,直到找到支持的字体
-
字号font-size
-
相对长度单位 说明 px 像素值最常使用的单位 em 倍数,继承祖先元素设置的字号倍数 % 百分比,继承自祖先元素设置的字号的百分比 绝对长度单位 说明 in 英寸 cm 厘米 mm 毫米 pt 点
-
-
选择器(css2.1版本)
-
基础选择器:标签选择器、id选择器、类选择器、通配符选择器
-
高级选择器:后代选择器、交集选择器、并集选择器
id选择器:
- 书写方式:#id属性值
- 选择范围:只能选中一个标签
- 命名规则:必须以字母开头,后面可以跟字母、数字、下划线、横线,严格区分大小写,每个id值必须是唯一的,不能与其他的id同名
class类选择器:
- 书写方式:.class属性值
- 选择范围:可以选中多个标签
- 命名规则:必须以字母开头,后面可以跟字母、数字、下划线、横线,严格区分大小写
- 特点:
- 可以多个选择器选中一个标签
- 也可以一个选择器选中多个标签
-
实际工作中,通常使用类选择器设置样式(CSS),id设置行为(JS)
-
通配符选择器*
- 通过一个特殊符号选择页面内所有的标签
- 书写方式:*
- 选择范围:包含html标签在内的所有标签
- 特点和应用
- 优点:实现全选,简化书写
- 缺点:选择效率低,导致浏览器多做无用功
- 注意:实际上线的网站不允许使用*去除默认的内外边距
- 不过普通的案例,代码量较少时,为了节省书写,可以使用通配符
-
后代选择器
- 嵌套关系
- 也叫包含选择器
- 书写方式:用空格表示后代
- 后代关系不一定是父子,所有满足条件的后代都会被选中
-
交集选择器
-
一个标签上满足所有的基础选择器的需求去选择标签
-
书写方式:基础选择器进行连续书写,如果有标签选择器必须写在开头
-
选择范围:满足所有基础选择器需求的标签,如果有一个条件不满足也不能被选中。
p.classs.demo{ color:red; }
//后代交集选择器复合使用 .box p.div{ //p.box1.demo=p.demo默认选中最后一个 color:pink; }
-
-
并集选择器
p,.box,#id{ color:pink; }
-
层叠选择器
-
第一步:比较多个选择器的权重,权重高的层叠权重低
-
基础选择器的权重:根据选择范围,范围越大权重越小,*<标签选择器<类选择器<id选择器
-
高级权重选择器比较:依次比较高级选择器的id的个数,类的个数,标签的个数,如果前边能够比较出大小就不必再比较后面了,如果前面个数相同就往后比较直到比较出大小
-
比较顺序:id的个数,类的个数,标签的个数
-
第二步:如果选择器权重都相同,需要比较css中代码书写的顺序,后写的层叠掉先写的
-