CSS学习(2)
css学习(2)
emmet语法
emmet语法可以通过缩写的形式来提高html/css的编写速度
- 生成标签:输入标签名按下tab键
- 生成多个相同标签:如div*3
- 生成父子级关系:如ul>li
- 生成兄弟级关系:如div+p
- 生成带有类名或id名字的标签:标签名称.demo或#two按下tab键就可以了
- 生成div类名有序:用自增符号$
- 标签生成中带有默认文字:{}
- css中的属性都可以首字母缩写
css的元素显示模式
元素的显示就是元素(标签)以什么方式进行显示,比如div自己占一行,比如一行可以放多个span。
html元素一般分为块元素和行内元素两种类型。
块元素
h1~h6,p,div,ul,ol,li等为最常见的块元素,特点为:
- 独占一行
- 高度,宽度,外距和内距都可以控制
- 宽度默认为父级的100%
- 是一个容器及盒子,内部可以是块元素或者行内元素(文字类的元素内不能使用块级元素)
行内元素(内联元素)
a,strong,b,em,span等为最常见的行内元素,特点为:
- 一行内可以有多个行内元素
- 宽度和高度直接设置是无效的
- 默认宽度是本身内容的宽度
- 行内元素只能容纳文本或其他行内元素(a里面不能再放a元素,a中可以包含块级元素)
行内块元素
img,input,td等为最常见的行内块元素,特点为:
- 一行内可以有多个行内块元素,两个行内块元素中间会有空白的缝隙
- 高度,宽度,外距和内距都可以控制
- 默认宽度是本身内容的宽度
元素显示模式转换
行内元素转换为块级元素
display:block
a { width: 150px; height: 50px; background: pink; display: block; }
块级元素转换为行内元素
display:inline
div { width: 300px; height: 100px; background-color: #fff; display: inline; }
转换为行内块
display:inline-block
css的背景
背景颜色
background-color:颜色(默认:transparent(透明的)
背景图片
背景图片在背景颜色的上层。
background-image:url()(默认:none)
背景平铺
background-repect:no-repect(不平铺)默认:repect(平铺)repeat-x(沿着x轴平铺)repeat-y(沿着y轴平铺)
背景图片位置
background-position:x y;
x和y为方位名词
left,right,top,down,center前后两个值与顺序无关,如果只指定一个,则另一个默认为居中对齐。
x和y为精确单位
x和y分别为离左侧和离上侧的距离,如果只指定了一个值,那该值必定是x坐标,另一个值为center。
背景图像固定
background-attachment:默认:scroll(滚动)fixed(固定)
设置背景图像是否固定或者随着页面其余部分滚动
背景复合写法
background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
背景色半透明
background:rgba(0,0,0,alpha),alpha为0-1之间,0为全透明,1为不透明
css的三大特性
层叠性、继承性、优先级。
层叠性
按顺序覆盖重复的样式。
div { color: red; font-size: 12px } div { color: pink; } /* 12px,粉色 */ <div>层叠性</div>
继承性
父亲标签的的某些样式(text-,font-,line-,color等元素)可以被子标签继承。
行高的继承
一般使用当前文字大小的几倍的写法,当前文字的大小的几倍。
div { font: 14px/1.5; }
优先级
- 选择器相同,则执行层叠性
- 选择器不同,根据选择器权重执行(通配/继承0,0,0,0<元素选择器0,0,0,1<类选择器/伪类选择器0,0,1,0<id选择器0,1,0,0<行内样式style=“”1,0,0,0<!important)
注意a链接有一个默认的颜色,会顶掉继承下来的颜色。
复合选择器会有权重叠加的问题,复合选择器会把权重累加
上一篇: 4.运算符
推荐阅读