1.Emment语法
快速生成HTML语法
快速生成CSS样式语法
快速生成:tac——text-align:center; ti2em——text-indent:2em; w100px——width:100px; h300px——height:200px; lh26px——line-height:26px; tdn——text-decoration:none;
快速格式化代码
2.复合选择器
后代选择器
一级一级往下缩小范围,从而能够找到目的对象,父类中包括子类、孙类;可以用标签选择器,在出现多个相同的类时,可以用类选择器进行区分
子选择器
只选择离它最近的,用>隔开;如下列示例中,只有第一个a链接才会有颜色
并集选择器
大杂烩,所有样式相同的对象都可以放到一起,中间用英文的,隔开,最后一个不用要逗号
链接伪类选择器
就是对链接不同状态下进行不同样式的设置 LVHA
a:link对未点击链接前链接样式的设置; a:visited对点击过的链接的样式设置; a:hover当鼠标移动到链接上时样式的设置; a:active当鼠标点击链接时样式的设置
:focus伪类选择器
当光标移动到链接时才会有效果,只针对表单元素
3.CSS的元素显示模式
块元素
注意文字类的元素内不能使用块级元素,<p></p>内不能放块级元素
行内元素
一行可以显示多;高宽直接设置是无效的,会按照原始的来;行内元素只能容纳文本或其他行内元素。个链接里面不能再放链接
行内块元素
显示模式的转换
snipaste工具的使用
单行文字垂直居中
让height=line-height,从而把文字居中
4.背景颜色
背景颜色
back-ground来定义想要的颜色
背景图片
小logo或者装饰性的图片或者是超大的图片
background-image:none/url(); 注意url一定不能省略
背景平铺
background-repeat:repeat(平铺) no-repeat(不平铺) repeat-x(沿x轴平铺) repeat-y(沿y轴平铺)也可以添加背景颜色background-color,但是平铺的图片会盖住背景颜色
背景图片位置
背景图片位置可以使用方位名词和精确单位
background-position
参数为方位名词
如果是两个方位名词,两个词的位置顺序没有要求
如果只指定了一个方位名词,另一个省略,则第二个值默认居中对齐
参数为精确单位
一定严格按照第一个是x轴的值,第二个是y轴的值
如果只指定一个值,那么另一个值默认垂直居中
一般用于x轴有固定值,而y轴垂直居中
参数为混合单位
一般用于水平居中center,而y轴有固定值
背景固定
background-attachment: scroll / fixed
背景属性的复合写法
background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
background: transparent(color) url(image.jpg) repeat-y fixed top;
背景颜色半透明
background: rgba(0,0,0,0.3) 红 绿 蓝 最后一个为alpha透明度,取值范围在0-1之间
可以把透明度如0.3写为.3
5.背景总结