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’的元素