css基础属性和选择器

1.背景属性

backeground-color:背景颜色

background-image:设定背景图片，需要设置图片的URL地址

background-repeat:图片复制选项

repeat:在水平和垂直两个方向上进行复制

no-repeat:不复制

repeat-x：在水平方向上复制

repeat-y：在垂直方向上复制

也可以将这一组属性值封装到一个属性background中，书写顺序是：

背景色 background-color

背景图片 background-image

重复方式 background-repeat

位置 background-position表达更加简洁

2.尺寸属性

height   width

max-width:最大宽度

max-height：最大高度

min-width：最小宽度

min-height：最小高度

3.显示相关属性

隐藏元素的方法：visibility：hidden，仅仅隐藏内容，该元素所占位置依然存在；

display：none，不仅隐藏内容，且不占位置

display可以设置元素的显示模式

inline：将块级元素以内联元素形式显示，此时width和height属性无效，其空间取决于元素的内容。

inline-block：将块级元素以内联元素形式显示，同时兼备块级元素的某些特征，比如可以使用width和height设置所占位置大小

也可以将内联元素以块级元素形式来显示，即display：block

4.盒子模型

margin：外边距

margin-top，margin-right，margin-bottom，marginleft

使用方式： margin：30px 表示上下左右外边距都是30px；margin-left：30px 分别设置上下左右外边距；margin：10px 20px 30px 40px分别设置上下左右四个边距为10px 20px 30px 40px

padding：内边距

padding-top，padding-right，padding-bottom，padding-left

和margin有一样的用法。

border：边框

Word中设置边框的操作也可以使用更优化的书写方式

border:5px dashed blue;

outline：轮廓线，用法同border

5.定位

定位方式有：static，fixed，relative，absolute

static 静态定位（默认）

无定位，元素正常出现在流中，不受left，right，top，bottom影响

relative：相对定位

absolute：绝对定位

6.选择器：指的是选择施加样式目标的方式

（1）元素选择器：用标签名作为选择器，选中所有相应的元素

（2）id选择器：

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义

是根据id来选择元素，其样式定义形式为：

#idname{

……

}

（3）类选择器：

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示。

根据class属性来选择元素，其样式定义形式为：

.className{

……

}

i:根据有无某属性来选择

ii:根据属性的值来选择

title~=’div’：选中属性值包含指定完整单词的元素

title^=’div’：选中title属性值以’div’开头的元素

title$=’div’:选中title属性值以’div’结尾的元素

title*=’div’:选中title属性值包含’div’的元素