夜灵的Html笔记Day06——群组、后代、伪类选择器，尺寸、边框、倒角、阴影、盒子模型
类名不可以数字开头
$,￥,%,@,#
可以包-,_
am:
4.id选择器
语法：#value{
样式声明
....
}
特点：使用元素所附带的id属性值进行样式的声明定义
eg:
<any id="名称1"></any>
5.群组选择器
定义一组选择器的公共样式
选择之间用逗号隔开
eg:
div,p,a,.news,div.bg_box,#d1{
样式声明
.....
}
6.后代选择器
依托于后代关系匹配页面的元素
后代：
一级或者多余一级的父子关系
语法：
选择器1 选择器2 ...{
样式声明
....
}
7.伪类选择器
语法：
:伪类名称{}
选择器:伪类名称{}
**:链接伪类
:link 匹配尚未访问的超级链接
:visited 匹配访问过的超级链接
**:动态伪类
:hover 匹配鼠标悬念在元素上时的状态
:active ...被**的状态
:focus ...元素获取焦点的状态
练习：
新建div,p,hn,span,a,img用id,群组，后代选择器分别给他们背景，
文本颜色，字体大小，边框，看下有什么区别
新建特殊符号标签，用伪类练习字体颜色，背景颜色
，新建div,p块元素，用伪类练习字体颜色，背景颜色，
看下有什么区别？
1.尺寸与边框
1.css单位
1.尺寸单位
%:相对单位 20% 50% 100%
px:像素, 文字大小
in:英寸 -->2.54cm
pt:磅（文字大小） -->1/72 in
cm:厘米
mm:毫米
em:1em
rem
2.颜色单位（颜色的取值）
1.颜色的英文单词
red,blue,black,yellow,green,pink,gray,purple,brown(棕色)...
2.rgb(r,g,b)
r:0-255
g:0-255
b:0-255
eg:
rgb(25,89,200)
3.rgb(r%,g%,b%)
4.#rrggbb
组成：0-9或a-f组成
#000000 黑色
#ffffff白色
#11ffaa
5.#rgb 是上面的缩写
#000000-->#000
#ffffff-->#fff
#11ffaa-->#1fa
eg:
#33acbb
2.尺寸属性
用于设置元素的宽度和高度
默认尺寸：
块级元素：
宽度：占父元素的100%
高度：自适应
行内元素：
宽度：自适应
高度：自适应
width: 宽度
height：高度
取值：
数值,数字 （以px为单位的)
百分比 %
**：
哪些元素的尺寸允许修改？
1.块级元素的尺寸允许修改
2.非块级元素中，
本身存在width和height属性的元素(img,table)允许修改，
但是不具备width和height属性的行内元素
（span,a,b,i）是不允许修改的
3.边框
作用：就是围绕在元素内容和内边距外的线条
1.边框属性
1.简写方式
语法：
border:width style color;
width:边框的宽度（边框的粗细）
style:边框的样式（实线，虚线）
取值：solid:实线
dotted:虚线
dashed:虚线
color:边框的颜色
取值：合法的颜色值 transparent透明色
2.单边设置
语法：
border-方向：width style color;
方向取值：
left:左
right:右
top:上
bottom:下
3.单属性定义
语法：
border-属性:值;
属性：
width
style
color
eg:
border-width:3px ;
border-style:solid;
4.单边单属性定义
语法：
border-方向-属性：值；
border-left-color:左边框的颜色
4.边框倒角
倒角：将元素的直角倒成圆角
语法：border-radius:值;
取值：
具体数值 px
百分比 % (设置圆形时使用)
2.单角设置
border-top-right-radius:右上角
border-top-left-radius:左上角
border-bottom-left-radius:左下角
border-bottom-right-raidus:右下角
5.边框阴影
语法：
属性：box-shadow
是由多个值组成的值列表，用空格分隔
值：
box-shadow:h-shadow v-shadow blur spread color inset;
h-shadow:（必须值）阴影水平方向的偏移 值为正向右偏，值为负向左偏
v-shadow:（必须值）阴影垂直方向的偏移，值为正向下偏，值为负向上
blur:（可选值）阴影模糊距离
spread:（可选值）阴影的尺寸
color:（可选值）阴影颜色
inset:（可选值）将默认的外阴影改为内阴影
练习：
设置一个圆的发光效果
6.框模型
1.什么是框模型？
定义了元素框的内边距和外边距的方式
box model又称盒子模型
内边距：padding
内容区域与边框之间的空白间距
外边距：margin
围绕在元素边框外的空白间距（元素与元素之间的间距,元素和body区域）
**:
增加边框的内边距和外边距元素内容区域大小不会改变，
但是，元素的总体占地大小会发生变化(变大）
2.框模型的计算方式：
实际宽度=width+左右内边距+左右边框+左右外边距;
实际高度=height+上下内边距+上下边框+上下外边距;
3.内边距
语法：
padding
取值：
以px为单位的值
%百分比
auto 自动（控制块级元素在水平方向居中对齐）
数量：
padding:value; 四个方向
padding:v1 v2; 上下，左右
padding:v1 v2 v3; 上，左右，下 padding:5px 20px 30px;
padding:v1 v2 v3 v4; 上右下左(顺时针)
单边设置：
padding-方向：值;
padding-top
padding-bottom
padding-left
padding-right
4.外边距
语法：
margin
取值：
以px为单位的值
%百分比
数量：
margin:value; 四个方向
margin:v1 v2; 上下，左右
margin:v1 v2 v3; 上，左右，下 padding:5px 20px 30px;
margin:v1 v2 v3 v4; 上右下左(顺时针)
单边设置：
margin-方向：值;
margin-top:px值
margin-bottom
margin-left
margin-right
**：同上
练习：新建两个div,要求他们之间的间距为50px,当鼠标放到第二个div上时，
其可视区域有放大的效果
1 渐变
grad
2 浮动
float
圆完成图：