css第二天

最新推荐文章于 2024-05-29 15:45:18 发布

你眼里有一条星河照耀着我

最新推荐文章于 2024-05-29 15:45:18 发布

阅读量47

点赞数

分类专栏：笔记文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_51986661/article/details/126334900

版权

笔记专栏收录该内容

26 篇文章 8 订阅

订阅专栏

CSS第二天

选择器进阶

1.后代选择器

作用：选择所有的后代标签，儿子，孙子，重孙子…
写法空格

      .header a {
        font-size: 14px;
      }

    <div class="header">
      <a href="#">导航栏</a>
      <a href="#">导航栏</a>
      <a href="#">导航栏</a>
      <a href="#">导航栏</a>
      <a href="#">导航栏</a>
      <a href="#">导航栏</a>
    </div>

2.子代选择器(亲儿子选择器)

作用：选择亲儿子标签。

写法：>

css:

.box>span {
  color: red;
}

html:

<div class="box">
  <span>儿子</span>
  <span>儿子</span>
  <span>儿子</span>
  <span>儿子</span>
  <p>
    <span>孙子</span>
    <span>孙子</span>
    <span>孙子</span>
    <span>孙子</span>
  </p>
</div>

3.并集选择器

作用：选中多组标签设置相同的样式
写法：逗号
```
em,
i {
    font-style: normal;
}
```

4.交集选择器

作用：既选中是某个标签又选中对应的类

写法：连着写 div.box

/* 交集选择器  既是又是 */
p.one {
    color: red;
}

<div class="one">我是div</div>
<p class="one">我是段落</p>
<p class="one">我也是</p>
<p>我也是段落</p>

伪类

作用：鼠标悬停状态
写法 :hover

背景

背景色

background-color (bgc/bc)

半透明盒子的写法：

.box {
    width: 200px;
    height: 200px;
    /* background-color: pink; */
    /* transparent 透明的  默认的  */
    /* background-color: transparent; */
    /* 半透明的写法 */
    background-color: rgba(0, 0, 0, .1);
    /* alpha  的取值范围是  0~1  */
}

背景图

background-image: url() (bgi)

/* 背景不要忘了加 url */
background-image: url(./images/logo-mi2.png);

注意：语法格式，一定要写 url （）

背景图平铺 background-repeat

background-repeat (bgr)

取值	效果
repeat	(默认值) 水平和垂直都平铺
no-repeat	不平铺
repeat-x	沿着水平方向（x轴）平铺
repeat-y	沿着垂直方向（y轴）平铺

/* 背景不平铺 */
background-repeat: no-repeat;
/* background-repeat: repeat-x; */
/* background-repeat: repeat-y; */

背景位置

background-position (bgp)

1.可以使用方位名词

默认的是左上角对齐
如果只写一个角，则另一个值是默认是center

方位名词两个值没有顺序，left cneter 和 cneter left 等价的。

/* 背景位置 */
/* background-position: 0 0;  x  y  */
/* 方位名词  left  right center */
/* top 上  center 中 bottom */
/* background-position: left center; */
background-position: center left;
/* background-position: right bottom; */
/* background-position: center center; */
/* 如果只写一个值，则另外一个值默认是 center */
/* background-position: left; */
/* background-position: top; */
/* background-position: center; */

2.可以写精确单位

注意：

他们是没有顺序的，但是我们提倡按照这个顺序写。背景色背景图背景图平铺背景图位置
他们中间用空格隔开

 background: rgba(255, 0, 255, .1) url(./images/11.png) no-repeat 400px center;

插入图片和背景图片

什么时候时候插入图片，什么时候使用背景图片。

插入图片

比如广告图片，比如产品类（手机、平板等等）的图片这些都用插入图片。因为经常更换，img 更换方便
背景图片

超大的背景图片，作为背景显示比如 1920宽，超小的装饰类的图片，都可以使用背景。

logo 经常使用背景来做。

移动位置

插入图片只能通过内外边距，或者定位来移动。

但是，背景图片非常灵活，通过 background-position 来移动

三. 显示模式

根据标签不同的特点，我们可以把标签分成不同的种类。主要分为：块级元素、行内元素、行内块元素

块元素（block）

特点
- 独占一行
- 设置宽高生效
- 宽度默认是父级的100%

转换写法 : display: block

 div {
     width: 300px;
     height: 100px;
     background-color: pink;
     /* display 显示 */
     /* block 块 */
     text-align: center;
     /* 可以让块级元素水平居中 */
     margin: 0 auto;
}