XMLday05

选择器组

通过多个选择器。组合起来锁定一个或多个元素。

（被选择的元素，需要满足选择器组中的所有选择器）

格式：

元素名称选择器选择器1选择器2…选择器n{

样式列表；

}

例如：选择所有class值为class1的div元素

div.class1{

}

选择器列表

将一组样式，给定到多个选择器的结果

（被选择的元素，只需要满足选择器列表中的任意一个选择器）

格式：

选择器1，选择器2，…，选择器n{

样式列表；

}

例如：设置div和p元素的文字颜色为绿色：

div,p{

color:#0f0;

}

派生选择器

子选择器

格式：

选择器1>选择器2{

}

作用：从选择器1的结果元素中，选择匹配选择器2的子元素.

例如:选择所有div中的子标签p

div>p{}

例如：选择id为content元素的子元素div

#content>div{}

后代选择器

格式：选择器1 选择器2{

}

作用：从选择器1中的结果元素中，选择匹配选择器2的后代元素

例如：选择所有div中的后代标签p

div p{

}

例如：选择id为content元素的后代元素div

#content div{

}

更多选择器在jQuery技术时进行扩展

常用样式

背景样式

-背景颜色

​ background-color:颜色值

-背景图片

​ background-image:url(“图片地址1”)，url(“图片地址2”)，url(“图片地址n”)

-背景图片控制 -平铺

​ background-repeat:

​ 取值：

					- 默认平铺：repeat;
					- 仅横向平铺：repeat-x;
					- 仅纵向平铺：repeat-y;
					- 不平铺：no-repeat;

-背景图片控制 ：-缩放

​ background-size:宽度% 高度%；

-背景图片控制：-滑动

​ background-attchement:

​ -scroll:默认图片跟随内容滑动

​ -fixed:固定不滑动

-背景图片控制：-定位

​ background-position：x偏移值 y偏移值；

文字样式

-字体大小

​ font-size:长度+单位；

-字体颜色

​ color：颜色值；

-文字位置：

​ text-align:left/center/right;

-文字加粗：

​ font-weight：bold;

-文字线

​ text-decoration：

​ 取值：

​ -underline：下划线

​ -overline：上划线

​ -line-through：删除线

-文字斜体

​ font-style:oblique;

-文本行高：

​ line-height：长度+单位；

-文字阴影

​ text-shadow:横向偏移 垂直偏移 【阴影模糊距离】 阴影颜色；

-字体设置

​ font-family：字体名称

安装字体@font-face{

font-family:“自定义名称”；

src:url(“字体文件路径”);

}

盒模型

边框样式：

格式一： 一次性指定四个方向边框的宽度 样式 颜色值；

​ border:宽度 样式 颜色值；

格式二：单独指定某一个方向的边框 宽度 样式 颜色值；

​ 左：border-left:宽度 样式 颜色值；

​ 上：border-top:宽度 样式 颜色值；

​ 右：border-right:宽度 样式 颜色值；

​ 下：border-bottom:宽度 样式 颜色值；

边框的样式值：

​ -实线：solid；

​ -虚线边框：dashed;

​ -点组成边框：dotteds;

边框圆角

格式一. 一次指定四个角的圆角宽度值

​ border-radius：长度+单位

格式二：单独指定每一个角的圆角宽度值

​ 上左角 border-top-left-radius:宽度+单位；

​ 上右角 border-top-right-radius:宽度+单位；

​ 下右角 border-bottom-right-radius:宽度+单位；

​ 下左角 border-bottom-left-radius:宽度+单位；

边框阴影

格式：

box-shadow:x偏移 y偏移 【阴影模糊大小】阴影大小 阴影颜色；

处理溢出边框的内容

格式：

overflow：

​ -visible:溢出的内容显示，默认值

​ -hidden:溢出的内容隐藏

​ -scroll:添加横向，纵向滚动条

​ -auto：当内容溢出时，才添加滚动条

表格的双框线边框问题

border-collapse:collapse;

内边距padding

指的是元素的内容与元素的边框的距离

格式一：

一次指定四个方向的内边距

padding:长度+单位；