css3整理（一）

font-weight

属性值	描述
normal	默认值
bold	加粗
100-900	400=normal；700=bold；注意这个数字后边不能跟单位

font-style

属性值	作用
normal	默认值
italic	浏览器显示斜体的样式

注意：我们平时很少给文字加斜体，反而要把em元素和i元素的斜体改为正常

字体的复合属性

font: font-style font-weight font-size/line-height font-family

font: italic 700 16px 'Microsoft yahei' ;

文本缩进

div{
    text-indent: 10px;
}
p{
    text-indent: 2em;
}

em是一个相对单位，就是当前元素的一个文字的大小；

行间距

p{
    line-height:26px;
}

 Element语法：vscode支持

·选择直接后代 '>'，而不是所有的后代

.nav>a{
    color:red;
}

 并集选择器 ','

div,
p{
    color:red
}

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，例如给链接添加特殊效果，或者选择第一个，第n个元素。:hover :first-child

链接伪类选择器

a:link  /*选择所有的未被访问的链接*/

a:visit /*选择所有的已被访问的链接*/

a:hover /*选择鼠标指针位于其上的链接*/

a:active /*选择活动链接（鼠标按下未弹起的链接）*/

为了确保生效，请按照LVHA的顺序声明

/*平时最最常用的方法*/
a{
    color:#333;
    text-decoration:none;
}

a:hover{
    color:#369;
    text-decoration:underline;
}

:focus伪类选择器用于选择获取焦点的表单元素

焦点就是光标，一般情况下input类表单元素才能获取

input:focus{
    background-color:yellow
}

块元素

h1-h6,p div ,ul,li,ol等，其中div标签是最典型的块元素

特点：

1、比较霸道，自己独占一行；

2、高度、宽度、外边距以及内边距都可以控制；

3、宽度默认是容器（父级宽度）的100%；

4、是一个容器盒子，里面可以放行内或者块元素；

注意：文字类的元素不能使用块级元素，p标签主要用于存放文字，不能存放块级元素div，同理，h1-h6也不能存放块级元素；

行内元素

<em> 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。

<i> 标签和基于内容的样式标签 <em> 类似。它告诉浏览器将包含其中的文本以斜体字（italic）或者倾斜（oblique）字体显示。如果这种斜体字对该浏览器不可用的话，可以使用高亮、反白或加下划线等样式。

<del>二十</del> ：删除线

<ins>十二</ins>：下划线

 行内块元素

元素显示模式的转换

特殊情况下，我们需要元素模式的转换。简单理解：一个模式的元素需要另外一种模式的特性，比如想要增加链接<a>的触发范围；

转换为块元素：display:block;

转换为行内元素：display:inline;

转换为行内块：display:inline-block; 

小工具snipaste截图使用

 垂直居中：文字的行高=盒子的高度；

关于背景

 

 

 缩写：

背景图像滚动

background-attachment: scroll|fixed

scroll:背景图像随内容滚动

fixed：背景图像固定

背景图像半透明

background:rgba(0,0,0,0.3)

最后一个参数是alpha的透明度，取值范围在0-1之间 0看不见，1纯黑色；

css优先级问题

选择器	选择器权重
继承或者是*	0，0，0，0
元素选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式 style	1，0，0，0
! important	无穷大

关于继承的权重问题：

        如果该元素没有被选中，不管父元素权重有多高，子元素得到的权重都是0；

也就是说与父元素相同的属性继承没有用，主要看子元素的定义；

关于盒子模型

盒子模型本质上就是一个盒子，封装周围的HTML元素，包括边框、外边距、内边距、实际内容；

/*定义没有顺序*/
borde:1px solid red;

还有border-top等；

合并相邻的边框：border-collapse:collapse;

内边距

值	意义
padding:5px;	1一个值，代表上下左右都有5像素的内边距
padding:5px 10px;	2个值，代表上下内边距是5px，左右内边距是10px
padding:5px 10px 20px	3个值，代表上内边距是5像素，左右内监局是10像素，下内边距20像素
padding:5px 10px 20px 30px	4个值，代表上、右、下，左的内边距

当我们给盒子指定了padding之后，发生了两件事情：

1、内容和边距有了距离，添加了内边距；

2、padding内边距实际上影响了盒子的大小；也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

根据是否有高度或是宽度，判断是否用margin还是用padding；因为padding会撑大盒子模型；

盒子阴影

css3中新增了盒子阴影，可以使用box-shadow属性为盒子添加阴影

box-shadow:h-shadow v-shadow blur spread color inset;

h-shadow：必需。水平阴影的位置，允许负值；

v-shadow：必需。垂直阴影的位置。允许负值；

blur：可选。模糊距离；

spread：可选。阴影的尺寸；

color：可选。阴影的颜色

inset：可选。将外部阴影改为内部阴影。默认就是外部阴影，但是外部阴影outset不能写；

阴影盒子不占空间，不会影响其他盒子排列。

文字阴影

text-shadow:h-shadow v-shadow blur color;

h-shadow：必需。水平阴影的位置。允许负值。

v-shadow：必需。垂直阴影的位置。允许负值。

blur：可选。模糊的距离。

color：可选。阴影的颜色。