CSS(层叠样式)
由网景公司在年发布,取代了html专门用来渲染页面的样式,文件以.css结尾严重区分大小写毫无容错性
css的第一个宗旨是将页面的结构和样式解耦
引入css的三种方式
内嵌式
直接将css代码书写head标签内
style:专门用来放置css代码进入此标签内语法改变为css语法
type:MIME数据类型,此数据类型囊括了数十种后缀名,专门用来提示浏览器按照何种语法解析
因为在h5技术中css和js已经被包含在h5技术序列中则此处可以省略
这种引入方式初步的将结构和样式解耦但是解耦不彻底代码重用性不高
外联式
引入一个外部独立的css文件到本页面
rel:表示引入的是一个样式表
type:MIME可以省略
href:表示独立css文件的引入路径这种引入方式彻底将结构和样式解耦代码重用性较高
内行式
直接将css代码书写在标签内这种方式将结构和样式再次耦合在一起
严重违背了css结构和样式解耦的原则
多种引入方式出现冲突时优先级问题
行内式内嵌式和外联式谁放在后面会覆盖之前出现冲突的样式
选择器(selector)
在页面中使用简练的代码快速选择元素
标记选择器
tagName{
直接使用标签名作为选择元素的依据,非常引起误操作
}
类别选择器
.className{
直接使用.类名选择元素
}
id选择器
#idName{
直接使用#id名作为元素的依据
}
css层叠特性
基本选择器出现冲突时优先级问题
id选择器类别选择器标记选择器与顺序无关
这里如果添加上内行式,则以内行式为准
在css中一般id选择器的属性值尽量在全文中唯一
class没有这个限制,css并没有这个语法限制,但是一般页面在使用css后肯定会使用js
js中存在以下方法
document.getElementById(idName)
根据id属性值拿取唯一一个元素
如果出现id属性名重复的情况则有可能出现错误隐患
交集选择器
tagNeme.className{}
tagName#idName{}
由一个标记后面紧跟一个类别或者id则必须满足其中两个条件才可以正确选取
并集选择器
sel1,sel2,sel3,selN{}
多个基本或者复合选择器用逗号隔开只要满足其中任意一个就可以成功选取
css继承特性
在没有任何冲突的情况下,css中子元素会完全继承父元素的所有css渲染样式效果
后代选择器
sel1sel2sel3selN{}
根据左祖右后代的原则用空格隔开具有家族关系的元素可以精确选取具有特定祖先关系的子元素
全局选择器
*{}
页面元素类型
css中将元素分成了多种类型,比较典型的以下几种
1)块元素(block)
eg:divph1~h6ulliimg*
以上元素都是块元素块元素自带换行一行只能书写一个设置对齐方式有效设置盒子模型有效
2)内联元素(inline)
eg:labelspanaimg*
内元素没有换行一行可以存在多个从左向右排列设置对齐方式和盒子模型等参数一律无效
img(inline-block)内联快元素
本身属于内联元素但是具备块元素的所有特征
3)空元素(empty)
一般不嵌套内容由一个元素表示特定的结构或者样式
brmetahr都属于空元素
盒子模型
在css中所有的元素都具有四个边框,类似一个个的盒子摆放在页面上通过border属性可以将元素的边框显示出来
border:边框类型边框粗细边框颜色;
类型
solid表示单实线
double双实线
dotted点状线
四个参数表示四个方位
margin:上右下左
三个参数
上(右左)下
两个参数
(上下)(右左)
一个参数
(上右下左)
浮动
ul{
list-style-type:none;
}
重新排列元素的顺序
left从左往右
right从右向左
float:left;
margin-right:20px;
margin-top:80px;
定位
相对定位
根据元素原先所在位置的左上角进行定位定位之后元素依然保持原先的类型原先的位置依然被占用
绝对定位
容易盖住下面的元素
根据距离元素最近的定位过的父元素的左上角进行定位定位之后的元素不再占用一行
原先的位置会被别的元素占用如果没有定位过的父元素则根据body定位