CSS-2（元素显示+背景）

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.背景总结