css入门 | 磊磊の小窝

`Css`

优先级

内嵌样式优先级是最高的，后面外联和行内看定义时候的就近原则

补充：

块级元素：要分段的

行内元素：不要分段的

选择器（重点）

1.基本选择器

标签选择器

选了之后，所有这个标签就是统一的样式，太死了

<style>
    标签{
        ;
        ;
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

  - 

- 类选择器

  - 可跨，方便

  - ```css
    <style>
        .类名{
            ;
            ;
            ;
        }
    </style>

id选择器

id只能有一个，有点局限

<style>
    #id名{
        ;
        ;
        ;
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

- 优先级

  - id标签>class标签>标签选择
  - 不遵循就近原则

#### 2.层次选择器

- 后代选择器：在某个元素的后面  这一代的后面所有

  - ```css
    /*后代选择器*/
    body 标签名{
      	;
        ;
    }

子选择器：在这个元素的后面但是只有后面一代

/* 子代选择器 */
body>标签名{
  ;
}
1
2
3
4
5
6
7
8

- 相邻兄弟选择器（我自己叫向下兄弟选择器）选择这一代的下一个，不能隔着东西

  - ```css
    .类名 +下面的一个标签{
              ;
    		  ;
    }

通用选择器：这个类的下面的所有这个标签(和相邻兄弟选择器一样对下不对上，但是是对多个，但也不能隔着)

.类名~下面的标签{
    ;
    ;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

  - <img src="C:\Users\Leilei\AppData\Roaming\Typora\typora-user-images\image-20220626193650275.png" alt="image-20220626193650275" style="zoom:25%;" />

#### 3.结构伪类选择器

- `标签：` 的形式，用来过滤一些条件。简单就是带冒号的啦

- ```css
  ul li:first-child {
      /* 选择ul标签下的li标签中第一给元素 */
      background-color: blue;
  }
  ul li:last-child{
      /* 选择ul标签下的li标签中最后一个元素 */
      color: red;
  }
  body p:first-child {
      /*body 下p标签的第一个元素*/
      color: red;
  }
  p:nth-of-type(x){
      /*p的上级标签下面选择p标签的第x个*/
      background-color: red;
  }

4.属性选择器

=绝对等于
*= 包含
^= 以这个符号开头
$= 以这个符号结尾

1 2	a[herf^=http]/选择a标签中的herf属性开头是http/ /标签[属性/id/class 表达式]/

样式美化

1.字体样式

/*
font-fami1y:字体
font-size:字体大小
font-weight:字体粗细
co1or:字体颜色 
*/
body{
font-family:"Aria1 Black",楷体;
color:#a13d30;
}
h1{
    font-size: 50px;
}
.p1{
font-weight:bolder;
}
1
2
3
4
5
6
7
8
9
10

#### 2.文本样式

- ```css
  /* 颜色 color rgb rgba
  文本对齐的方式 text-align=center
  首行缩进 text-indent:2em;
  行高 line-height
  装饰 text-decoration->删除a标签的下划线
  文本图片水平对齐 vertical-align:middle */

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!--/* 颜色 color rgb rgba
        文本对齐的方式 text-align=center
        首行缩进 text-indent:2em;
        行高 line-height
        装饰 text-decoration->删除a标签的下划线
        文本图片水平对齐 vertical-align:middle */ -->
    <style>
      p {
        color: brown;
        text-align: center;
        text-indent: 2em;
        line-height: 2em;
      }
      a {
        text-decoration: none;
      }
      .p1 {
        color: blue;
      }
    </style>
  </head>
  <body>
    <p>
      我本来是个atom忠实粉丝,
      但是atom使用window10自带输入法在书写汉字时总是会出现首字母缺失的情况,
      查了好久没法解决, 直接放弃了atom, 转而使用Vs code书写markdown, 但是使用Vs
      code时发现在左侧导航栏配置新建文件和文件夹没有快捷方式, 于是就想配置一个,
      但是在百度上搜了好长时间, 却总是解决不了KeyBoard Shortcuts上面的when 属性,
      最终访问的 Vs code 官方文档 解决的.
    </p>
    <a href="7.html">123</a>
    <p class="p1">1223</p>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

#### 3.超链接伪类

- ```css
  /*超连接伪类，还有阴影*/
  a {
      text-decoration: none;
      color: black;
  }
  /* 鼠标悬浮颜色,也只要记住这个 */
  a:hover {
      color: orange;
      font-size: 30px;
  }

4.阴影效果

/* text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径 */
p {
    text-shadow: #3cc7f5 10px -10px 2px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

### 盒子模型

- 所谓**盒子模型**就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都是由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。

- <img src="C:\Users\Leilei\AppData\Roaming\Typora\typora-user-images\image-20220629152341967.png" alt="image-20220629152341967" style="zoom:25%;" />

- >margin:外边距
  >padding:内边距
  >border:边框

  - ```css
    .box {
      width: 200px;
      height: 100px;
      padding: 20px;
      box-sizing: border-box;
      background-color: blue;
    }
    <div class="box">盒子模型</div>
    /*这时候，就可以发现盒子的所占据的宽度为200px*/

盒子的大小=外边距+内边距+边框+内容