css的简介
casscading style sheet 层叠式样式表,简称css
层叠:通过css的属性等把页面层叠起来
样式:设置页面每一块样式
表:页面排版
css的书写方式
方式一:行内式,在标签中直接书写
优点:肯定不会选错标签
缺点:代码冗余,且修改不方便
方式二:一个页面中内介入的,称为内接式
书写在head里的style的标签
优点;修改方便,直观
缺点:关联性太强,如果写错变量名,可能会酿成大祸
方式三:外接式
导入方式:利用link标签导入
优点:协同开发,不同类型的代码份文件存放
缺点:文件出问题或者丢了,页面就塌了
css基本选择器
基本选择器中的标签选择器
通过标签名就可以直接选择到标签,页面中所有的符合选择条件的标签都会被选择
id选择器:通过#号找到id,id不能以数字开头,因为id是唯一的
类选择器:通过类名,类名可以重复,类一般指的是同一群相同属性的统称
通配符选择器:用*号操作所有的标签,使用场景:删除边框
css的高级选择器
后代选择器
子代选择器
弟弟选择器
毗邻选择器
组合选择器
伪类选择器
a标签的四个形态:爱恨准则LoVe HAte
伪元素选择器
注意:伪元素选择器.仅仅适用于块级标签
属性选择器
css的优先级
标签选择器层级一致的时候,从上往下,以下边的为主
类的选择器的优先级大于标签选择器
通过id找到的具有唯一性,优先级最高
行内样式的设置优先级最高
继承的样式优先级最低的
权重
css的层叠性
如果选中了标签了,数权重(数选择器的数量),权重越大的优先级越高
权重一样大的,以后面的为准
继承来的权重为0,跟选中的标签的权重没有可比性
同是继承来的属性,'就近原则'(描述与选中标签越近的)
同是继承来的属性,描述的一样近,在数权重
css的盒模型
盒模型概述
边:边界
内边距:解决内部矛盾
外边:解决外部矛盾
css的padding
padding属于盒子内部的,padding增加盒子也随之增加,padding的值不可以为负值
盒子的边框border
border-style:solid,double,dotted,dashed
border-设置像素,如果用于画图,把盒子的自身宽度给弄掉
border-color:命名颜色,设置
盒子的外边框margin
不改变盒子的大小
解决外部矛盾
两个盒子都具有margin的时候,他俩的外部间距取两者之间的最大值
可以设置为负值
四条边也可以分开设置
浮动的现象
脱离标准文档流
文字围绕效果
设置浮动后,行内标签可以设置宽高
浮动的盒子遮住了标准的盒子
清除浮动
官方推荐
overflow:hidden;通过这个操作就可以实现清除浮动
overflow:
visble:默认是它,溢出
hidden:溢出之后隐藏,不占位
scroll:出来一个滚轮,溢出来之后,滚轮才可以滑动
auto:不溢出没有滚轮,溢出之后滚轮才出现