CSS2_yabse什么颜色-CSDN博客

本文链接：https://blog.csdn.net/m0_46978034/article/details/105621025

1.CSS复合器选择

1.1后代选择器（重点）
后代选择器又称为包含选择器
后代：父亲，儿子，孙子

<标签1>
   <标签2>
      <标签3></标签3>
   </标签2>
</标签1>

标签1是父标签，标签2是标签1的儿子，标签3是标签1的孙子。
所以标签2，3都是标签1的后代标签。
案例如下

    <style>
        /* 后代选择器 选择 子孙后代 记住每个关系之间用空格隔开 */
      div p strong {
          color: red;
      }
    </style>
</head>
<body>
    <div>
        <p>
        <strong>快乐</strong>
        <strong>快乐</strong>
        <strong>快乐</strong>
       </p>
    </div>
</body>
</html>

1.2子元素选择器
这里的子元素指的是亲儿子不包含孙子重孙子之类的
用>符号表示
案例如下：

  div>strong {
          /* 符合> 自选亲儿子元素 */
          color: pink;
      }
    </style>
</head>
<body>
    <div>
        <strong>开心</strong>
        <strong>开心</strong>
        <strong>开心</strong>
    </div>

1.3交集选择器
交集选择器由俩个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。
其中第一个为标签选择器，第二个为class选择器（中间不能有空格）
案例如下

 /* 交集选择器 即是P标签  又是.red类选择器的关系中间不能隔开 */
      p.red{
          color: red ;
      }
    </style>
</head>
<body>
    <p class="red">红色</p>
    <p class="red">红色</p>
    <p class="red">红色</p>
    <div class="red">红色</div>
    <div class="red">红色</div>
    <div class="red">红色</div>

1.4并集选择器（重点）
并集选择器通常用于集体声明，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为和的意思。
案例如下

  <style>
    p,span,.hongse {
        color: red;
    }
    </style>
</head>
<body>
    <p>红色</p>
    <p>红色</p>
    <p>红色</p>
    <span>红色</span>
    <span>红色</span>
    <span>红色</span>
    <div class="hongse">红色</div>

1.5 兄弟选择器
语法：兄+ 第或者兄~ 第
兄 + di 是选择下一个兄弟元素
兄 ~ 弟是选择后边所以兄弟元素
案例如下

    <style>
        p+span {
            color: red;
        }
        
        p~span {
            color: pink;
        }
    </style>
</head>

<body>
    <p>我是p元素</p>
    <span>我是span元素</span>
</body>

1.6 a伪链接选择器（重点）
用于向某些选择器添加的效果。比如给链接添加特殊效果，比如可以选择一个或者n个元素
代码如下

a:link 为访问的链接
a:visited   以访问的链接
a:hover 鼠标移动到链接上的颜色
a:active 按下鼠标别松开的颜色

案例如下

 <title>伪链接选择器</title>
    <style>
          a:link {
              /* 为访问过之前链接的状态，正常状态 */
        color: #333;
        text-decoration: none;
    }
    a:visited {
        /* 已经访问过的链接 我们点击过的 */
        color:orange
    }
    a:hover {
        /* 鼠标经过链接时候的状态 */
        color: red;
    }
    a:active {
        /* 当我们点击的时候（按下鼠标，别松开的时候） */
        color: green;
    }
    </style>
</head>
<body>
<a href="http://www.xiaomi.com">小米</a>
</body>

注意
因为a链接具有默认样式，所以在实际工作中都要给链接单独指定样式
在实际开发中，我们很少写全四个状态，一般我们写法如下：

 <style>
    .nav a {
        /* 实际工作中都要给链接单独指定样式 */
        color: #333;
        text-decoration: none;
    }
    .nav a:hover {
        /* 鼠标放到.nav里面的链接才会变色 */
        color: grey;
    }
    </style>
</head>
<body>
    <div class="nav">
      <a href="#">手机</a>
    </div>
</body>
</html>

2.标签显示模式（重点）

2.1 什么是标签的显示模式？
标签以什么方式进行显示，比如div自己占一行，比如span一行可以放很多个

2.2块级元素（block-level）
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

块级元素的特点

（1）比较霸道，自己独占一行

（2）高度，宽度、外边距以及内边距都可以控制。

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

（4）是一个容器及盒子，里面可以放行内或者块级元素。

注意：
只有文字才能组成段落因此 p 里面不能放块级元素，特别是 p 不能放div
同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
案例如下

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
   <div>块级元素</div>
   <div>块级元素</div>
   <!-- p里面不能包含div 段落 p h dt 里面尽量不要放块元素 -->
   <p>
       <div>123</div>
   </p>

2.3 行内元素（inline-level）
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。有的地方也成内联元素

行内元素的特点：

（1）相邻行内元素在一行上，一行可以显示多个。

（2）高、宽直接设置是无效的。

（3）默认宽度就是它本身内容的宽度。

（4）行内元素只能容纳文本或则其他行内元素
注意

链接里面不能在放链接
特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全。

2.4行内块元素（inline-block）
在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素

行内块元素的特点：

（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。

2.5标签显示模式转换display

块转行内：display：inline；
行内转块：display：block；
块、行内元素转换为内行块：display：inline-block;

案例如下

    <style>
        span {
            /* 把行内元素转换为块级元素 */
         display: block;
           width: 200px;
            height: 200px;
            background-color: pink;
        }
        div {
            /* 把块级元素转换为行内元素 */
            display: inline;
            width: 200px;
            height: 200px;
            background-color: springgreen;
        }
        a {
            /* 转换为行内块元素 */
            display: inline-block;
            width: 80px;
            height: 80px;
            background-color: red;
        }
    </style>
</head>
<body>
  <span>行内元素</span>
  <span>行内元素</span>
  <span>行内元素</span>

  <div>块级元素</div>
  <div>块级元素</div>
  <div>块级元素</div>

  <a href="#">新浪微博</a>
  <a href="#">新浪微博</a>
  <a href="#">新浪微博</a>

3.行高（line-height）

3.1 单行文本垂直居中
行高我们利用最多的一个地方是：可以让单行文本在盒子中垂直居中对齐。
文字的行高等于盒子的高度
行高=上距离+内容距离+下距离

如果行高等于高度文字会垂直居中
如果行高大于高度文字会偏下
如果行高小于高度文字会偏上

4.CSS背景（background）

4.1背景颜色
代码如下

background-color:颜色值；
默认的值是transparent 透明的

4.2背景图片（image）
代码如下

background-image：url（）

参数	作用
none	无背景图（默认的）
url	使用绝对或相对地址指定背景图片

案例如下

<style>
        div {
            width: 800px;
            height: 500px;
            background-color: pink;
            /* 背景图片1.必须加url2.url里面的地址里面不要添加引号 */
            background-image: url(imges/l.jpg);
        }
    </style>
</head>
<body>
    <div class="bg">
        123123
    </div>

4.3背景平铺（repeat）
代码如下

background-repeat：repeat；

参数
repeat	背景图像在纵向和横向上平铺（默认的）
no-repeat	背景图像不平铺
repeat-x	背景图像在横向平铺
repeat-y	背景图像在纵向平铺

4.4背景位置（position）重点
代码如下

background-position：

参数	值
length	百分数、由浮点数字单位标识符组成的长度值
position	top（上）center（中）bottom（下）left（左）right（右）

案例如下

 /* 右上 */
 background-position: right top;
 /* 左下 */
 background-position: bottom left;
 /* 那么第一个肯定是x50 第二个一定是y10 */
 background-position: 50px 10px;
 /* 以下说明下x10像素 y垂直居中的 */
 background-position: 10px ;

注意：

必须先指定background-image属性
position 后面是x坐标和y坐标。可以使用方位名词或者精确单位。
如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致
如果只指定了一个方位名词，另一个值默认居中对齐。
如果position 后面是精确坐标，那么第一个，肯定是 x 第二的一定是y
如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中如果指定的两个值是精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标
正值往里面走，负值往外面走

4.5背景附着
背景附着就是解释背景是滚动的还说固定的
代码如下

background-attachment：

参数	作用
scroll	背景图像是随对象内容滚动
fixed	背景图像固定（内容动）

4.6 背景简写

   /* background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 */
      background: #ccc url(nn.png) no-repeat fixed center top;

4.7背景透明
代码如下

     background: rgba(0,0,0,0.1);

案例

  /* 取值范围在0.1~0.3之间 */
     background: rgba(0,0,0,0.3);

4.8设置背景图片的大小

background-size：

size	可以是俩个值第一个是宽度第二个是高度会等比例缩放
contain	完整显示背景图片，可能会有位置没有图片
cover	使图片将元素填满，可能有部分图片从元素中溢出

5.CSS三大特性

5.1CSS层叠性
是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
案例如下

 <style>
 div {
  color: blue;
 }
 div {
     /* 使用的这个颜色 */
     color: brown;
 }
    </style>
</head>
<body>
    <div>CSS层叠性</div>
</body>
</html>

注意
1.样式冲突，遵循的原则是就近原则。那个样式离着结构近，就执行那个样式。
2.样式不冲突，就不会叠加。

5.2CSS继承性
子标签会继承父标签的样式，如文本颜色和文字号。
需要设置一个可继承的属性，只需要将它应用于父元素即可子元素同样继承了。

案例如下

div {
  color: blue;
 }
    </style>
</head>
<body>
    <div>
        <p>CSS继承性</p>
    </div>
</body>

注意

子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

5.3CSS优先级（重点）
定义CSS样式时，经常出现俩个或更多规则应用在同一元素上，此时

选择器相同，则执行层叠性
选择器不同，就会出现优先级的问题

（1）权重计算公式

选择器标签	0.0.0.0
继承或者*	0.0.0.1
每个类，伪类	0.0.1.0
每个ID	0.1.0.0
每个行内样式style=""	1.0.0.0
每个!important 重要的	无穷大（任意指定）

案例如下

 <style>
      div {
          /* 标签选择器权重（0.0.0.1） */
          color: brown!important;
      }
      .one {
          /* 类选择器权重（0.0.1.0） */
          color: burlywood;
      }
      /* id选择器权重（0.1.0.0） */
      #tete {
          color: chartreuse;
      }
      /* style=行内样式表权重（1.0.0.0） */
      /* !important 在样式属性的后面添加 权重最高 */
    </style>
</head>
<body>
<div class="one" id="tete" style="color: cyan;">权重</div>
</body>

（2）权重叠加
我们经常用交集选择器，后代选择器等，是有多个基础性选择器组合而成，那么此时，机会出现权重叠加
案例如下

div ul  li   ------> 0,0,0,3
.nav ul li   ------> 0,0,1,2
a:hover      -----—> 0,0,1,1
.nav a       ------> 0,0,1,1
.txtx.yabh   -----—> 0,0,2,0

(3)继承的权重是0
其实，我们修改样式，一定要看该标签有没有被选中。
1.如果选中了，那么以上面的公式来权重。谁大听谁的。
2.如果没有被选中，那么权重是0，因为继承的权重为0
案例如下

<style>
     .demo {
    /* 因为demo没有选择p标签 所以继承权重为0 */
   color: red;
     }
     .demo p {
   /* 选中了P标签才会继承权重 */
    color: tan;
     }
    </style>
</head>
<body>
<div class="demo">
    <p>继承的权重为0</p>
</div>
</body>