目录
一、CSS引入方式
01内部样式(学习使用)
将css代码写于style标签中
02外部样式(开发使用)
css代码写于单独的css文件中(.css)并与html标签中使用link标签引入
03行内样式 (配合javaScript使用)
css代码写于标签 的style属性值里
二、基础选择器
01标签选择器
以html中的标签作为选择符
用于改变某个元素的默认样式时或者统一文档某个元素的显示效果
语法:标签{属性:属性值;}
02类选择器
语法:.class名字{属性:属性值;}
Class属性值注意点
1、不能纯数字或中划线开头
2、 类名可重复,一个类选择器可同时选中多个标签
3、一个标签可有多个类名,中间用空格隔开
![](https://i-blog.csdnimg.cn/blog_migrate/e407cdc4e2aeab8f7da8cc9ec024e709.png)
03id选择器
语法:# id名字{属性:属性值;}
注意点:
1、其类似身份证,具有唯一性
2、一个标签仅一个id属性值
3、一个id选择器只能选中一个标签
04通配符选择器
语法:* {属性:属性值;}
作用:将页面中所有标签一起更改样式
05后代选择器
语法:选择器1 选择器2 { .... }
06子代选择器
语法:选择器1 > 选择器2 { .... }
注意点:其选中的仅为子代
07并集选择器
语法:选择器1 ,选择器2 { ... }
08交集选择器
语法:选择器1选择器2 { .... }
注意点:两种选择器中若含标签选择器则需放最前面
09hover伪类选择器
语法:选择器 :hover { ... }
10结构伪类选择器
注意点
- n为0,1,2,3,4.....
- 通过n可组成常见公式
三、emmet语法
四、字体和文本样式
01字体
大小
语法:font-size:(单位 :px)google默认大小为16px
粗细
语法:font-weight :normal(400) bold(700)(属性值取100~900的整百数)
样式
语法:font-style:normal / italic(倾斜)
类型
语法:font-family
常见取值:具体字体,具体字体,.....,文字系列
具体字体:黑体,宋体.....
字体系列:san-serif、serif、monospace等
连写
语法:font:style weight size family
02文本样式
缩进
语法:text-indent
单位:px / em(1em默认一个字大小)
文本水平对齐方式
语法:text-align(设置父元素)
属性值:
- left(左对齐)
- center(居中)
- right(右对齐)
文本修饰
语法:text:decoration
属性值:
- underline(下划线)
- line-through(删除线)
- overline(上划线)
- none(无装饰线)——常用于清除a标签的下划线
行高
语法:line-height
取值:px / 倍数(当前标签font-size的倍数)
应用:line-height:父元素的高度(让单行文本水平居中)
line-heigh:1(可取消上下间距)
连写
语法:font:style weight size/line-height family
注意:覆盖问题
五、背景相关属性
颜色
语法:background-color(bgc)
其默认值为透明
常用取值:
- 关键词,如红色
- rgb表示法——rgb(0,0,0)三个数字分别代表红绿蓝占比,取值为0~255
- rgba表示法——rgba(0,0,0,0)第四个值表示透明度(0~1),0为透明
- 十六进制表示法——#000000(六个数字两两分别表示红绿蓝占比且需用十六机制数表示),若每两个数字均相同可简写,例#ffaabb可简写为#fab
图片
语法:background-image:url('图片的路径')(bgi)
平铺
语法:background-repeat(bgr)
属性值:
- repeat(默认值),即水平垂直方向均平铺
- no-repeat,即不平铺
- repeat-x,即沿水平方向平铺
- repeat-y,即沿垂直方向平铺
位置
语法:background-position:水平位置 垂直位置;(bgp)
属性值:(两种表达可混用)
- 数字+px(以盒子左上角为原点建系)
- 方位名词。水平:left、center、right。垂直:top、center、bottom
连写
语法:background:color image repeat position
注意:可按需求省略,但要注意覆盖
六、元素显示模式
块级元素
语法:display:block
特点:独占一行且能设置宽高,例div,p,h
行内元素
语法:display:inline
特点:一行可显示多个但不能设置宽高,例a,span
行内块元素
语法:display:inline-block
特点:一行可显示多个且能设置宽高,例input,textarea
特例:img标签有其特点,但chrome调试工具中显示其为inline
七、CSS三大特性
继承性
常见可继承的元素
color、font-style、font-weight、font-size、font-family、text-align、text-indent、text-height(可通过chrome调试工具判断,暗色为不能继承,亮色为可以继承)
继承失效
若浏览器有默认样式,则优先显示默认样式
特例:
- a标签的color
- h系列标签的font-size
- div的噶偶的不能继承,但是宽度有类似继承的效果(但也不是继承)
优先级
继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
注:!important写与属性值后,分号前,其不能提升继承的优先级
权重叠加计算方式:(0,0,0,0)
即分别判断行内样式、id选择器、类选择器、标签选择器个数
从左至右,若分出大小就结束判断
层叠性
判断方式:
- 不同样式。共同作用
- 相同样式,覆盖
样式冲突时,仅当选择器优先级相同时,才能通过层叠性判断
八、盒子模型
盒子实际大小为内容、边框、内边距的和
内容(content)
边框(border)
连写:border: 粗细 样式 颜色(快捷键:bd + Tab)
单方向设置: border-方位名词
内边距(padding)
记忆规则:从上开始,顺时针赋值,若未设置,则其内边距与其对面的值相同
外边距(margin)
即盒与盒之间的距离
属性值与内边距的属性值相同
应用:移动盒子
注意点:
- 垂直布局的块级元素,上下margin合并取最大值。解决方案:尽量避免,即仅给其中一个设置margin
- 互相嵌套的块级元素,与父元素上边紧贴的子元素的margin-top会导致父元素一起下移。解决方案(原理:使父元素上边不紧贴着子元素):a、给父元素设置border-top/padding-top。b、给父元素设置overflow:hidden。c、转换成行内块元素。d、设置浮动
注意点
行内元素垂直方向上的padding和margin无效
九、伪元素
概念:由css模拟出的标签效果,默认为行内元素
注意:伪元素必须设置conten属性才可以生效(content:' ';)
十、浮动
浮动
语法:float
属性值:left(左浮动)和right(右浮动)
特点:
清除浮动
清除浮动即清除其影响
方法:
- 直接设置父元素高度
- 在父元素内容的最后添加一个块级元素并给其设置clear:both(额外标签法)
- 用伪元素替代额外标签(单伪元素清除法),后者可隐藏content中的内容
4.双伪元素清除法
5.给父元素设置overflow:hidden