第六次任务总结

复合选择器

• 后代选择器、子元素选择器

选择元素或元素组的子孙后代
写法1：父级 子级{属性：属性值…}选择子孙后代；
写法2：父级>子级{属性：属性值…}选择亲儿子；

• 交集选择器（.）

两个都包含的
写法：选择器.选择器{属性：属性值…}

• 并集选择器（，）

通常用于集体声明
写法：选择器，选择器，选择器{属性：属性值…}

• 伪类选择器

链接伪类选择器
a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标移动到链接上
a:active 选定的链接
写的时候顺序尽量不要颠倒，按照lvha的顺序，否则可能会引起错误

 /* 未访问过 */
         a:link{
             color:#333;
             text-decoration: none;
         }
         /* 已访问过 */
         a:visited{
             color: orange;
         }
         /* 鼠标经过链接时候的状态 */
         a:hover{
             color: red;
         }
         /* 点击鼠标，没松开的时候状态 */
         a:active{
             color: green;
         }

标签显示模式

标签显示模式
        标签的三种显示模式
        块级元素：常见元素<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>等，其中<div>标签是最典型的块元素
        行内元素：常见元素<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等，其中<span>最为典型。
        行内块元素：常见<img />,<input />,<td>,可以可以对它们设置宽高和对齐属性，
        三种显示模式的特点及区别
        块级元素的特点：
        1.自己独占一行
        2.高度，宽度，外边距以及内边距都可以控制
        3.宽度默认是容器（父级宽度）的100%
        4.是一个容器及盒子，里面可以放行内或块级元素
        注意：只有文字才可以组成段落所以p不能放div标签
        同理<h1>~<h6><dt>,他们都是文字类块级标签，里面不能放其他块级元素
        行内元素的特点：
        1.相邻行内元素在一行上，一行可以显示多个。
        2.高，宽直接设置是无效的。
        3.默认宽度就是它本身内容的宽度。
        4.行内元素只能容纳文本或则其他行内元素。
        注意：链接里面不能再放链接
        特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全。
        行内块元素的特点：
        1.和相邻行内元素（行内块）在一行上，但是之间会有空白缝隙，一行可以显示多个
        2.默认宽度就是它本身内容的宽度
        3.高度，行高，外边距以及内边距都可以控制。
        理解和实现三种显示模式的相互转化
        display
        块转行内：display：inline；
        行内转块：display：block；
        块，行内元素转换为行内块：display：inline-block；

        span{
             display: block;
             width: 100px;
             height: 100px;
             background-color:pink;
         }
         div {
             display: inline;
             width: 200px;
             height: 200px;
             background-color:purple;
         }
         a{
             /* 转换为行内块元素 */
             display: inline-block;
             width: 80px;
             height: 25px;
             background-color: orange;
         }

行高

   行高与高度的关系
   单行文本垂直居中
   行高等于高度垂直居中

background
background：属性的值书写没有要求，为了可读性
一般为

background：背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
background-color background-image background-repeat background-attachment background-position

.bg{
            width: 800px;
            height: 500px;
            background-color:pink;
            /* 背景图片 注意：1.必须加url 2.url 里面的地址不要加引号 */
            background-image: url(...);
            /* 背景图片不平铺 */
            background-repeat: no-repeat;
            /* x轴5平铺和y轴平铺 */
            /* background-repeat: repeat-x;
            background-repeat: repeat-y; 
            右上角*/
            /* background-position: center center; */
            background-position: left center;
            /* 
            position
            注意：必须先要指定background-image属性
            position后面是x坐标和y坐标，可以使用方位名词或者精确单位。
            如果只指定一个方位名词，另一个值默认居中，为50%。
            如果只指定一个数值，那该数值用于x坐标，另一个默认是y坐标，默认居中。
            如果指定两个值，两个值都是方位名词，则两个值前后顺序无关。比如left top和top left效果一样
            如果指定两个值，精确单位和方位名词混合使用，则第一个值是x坐标，第二个是y坐标。
            实际工作用的最多的，就是背景图片居中对齐了，
             */
        }

背景半透明

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

background: rgba(红，绿，蓝，透明度（0~1）);

注意背景半透明是指盒子背景半透明，盒子里面的内容不受影响

背景总结
css三大特性

1. css层叠性

指多种css样式的叠加
原则：样式冲突，遵循的原则就是就近原则。那个样式离着结构近，就执行那个样式
如果样式(单个)不冲突是不会叠加。

         div{
             font-size: 30px;
             color: red;
         }
         div{
             color: pink;
         }
         /*运行结果为font-size: 30px; color : pink;*/

2. css继承性

字标签会继承父标签的某些样式，如文本颜色和字号。
想要设置一个可继承的属性，只需将它应用于父元素即可。
注意：恰当地使用继承可以简化代码，降低css样式的复杂性
子元素可以继承父元素的样式（text- ，font-，line-这些元素开头的可以继承，以及color属性）。

3. css优先级

经常出现在两个或者更多规则应用在同一元素上
如果选择器相同，则执行层叠性
如果选择器不同，就会出现优先级的问题

权重计算公式
！important

div{
		color: pink !important;
	}

盒子模型

盒子模型由元素内容，边框（border），内边距（padding），和外边距（margin）组成。

border

属性：宽度||边框类型||颜色
width||style||color
三种常用边框属性值：实线的 solid 虚线的 dashed 点线的 dotted

div{
   	border-width: 5px;
  	border-style: solid;
  	border-style: dashed;
  	border-style: dotted;
  	border-color: pink;
  	}

边框的综合性写法

边框粗细 边框样式 边框颜色

border: 5px dotted pink;
border: none;
border-bottom: 1px solid pink;

内边距

padding 简写 复合写法
padding: 20px; 上下左右 都是 20 内边距 
padding: 10px 20px; 上下 10 左右 20 内边距
padding: 10px 20px 30px;上10 左右 20 下 30 内边距 
padding: 10px 20px 30px 40px;上 10 右 20 下 30 左 40 顺时针 内边距