css样式

「已注销」

已于 2023-05-17 16:59:28 修改

阅读量54

点赞数

分类专栏： python 文章标签： css html 前端

于 2023-05-16 22:47:31 首次发布

本文链接：https://blog.csdn.net/cs445579253/article/details/130712696

版权

python 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

### 3.2 CSS应用方式



#### 1. 在标签上

```html
<img src="..." style="height:100px" />

<div style="color:red;">中国联通</div>
```



#### 2. 在head标签中写style标签（*）

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color:red;
        }
    </style>
</head>
<body>

<h1 class='c1'>用户登录</h1>
<h1 class='c1'>用户登录</h1>
<h1 class='c1'>用户登录</h1>
<h1 class='c1'>用户登录</h1>
    
</body>
</html>

```



#### 3.写到文件中（*）

```css
.c1{
    height:100px;
}

.c2{
    color:red;
}
```

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="common.css" />
</head>
<body>

<h1 class='c1'>用户登录</h1>
<h1 class='c2'>用户登录</h1>
<h1 class='c2'>用户登录</h1>
<h1 class='c1'>用户登录</h1>
    
</body>
</html>
```

三种选择器：

ID选择器 #

类选择器 .

标签选择器

### 3.3 选择器

- ID选择器

  ```css
  #c1{
      
  }
  
  <div id='c1'></div>
  ```

- 类选择器（最多）

  ```css
  .c1{
      
  }
  
  <div clss='c1'></div>
  ```

- 标签选择器

  ```css
  div{
      
  }
  
  <div>xxx</div>

属性选择器：


  ```css
  input[type='text']{
  	border: 1px solid red;
  }
  .v1[xx="456"]{
  	color: gold;
  }
  ```

  ```html
  <input type="text">
  <input type="password">
  
  <div class="v1" xx="123">s</div>
  <div class="v1" xx="456">f</div>
  <div class="v1" xx="999">a</div>

后代选择器：

后代选择器

  ```css
  .yy li{       # 子子孙孙都包括
      color: pink;
  }
  .yy > a{       # 只包括儿子
      color: dodgerblue;
  }
  ```

  ```html
  <div class="yy">
      <a>百度</a>
      <div>
          <a>谷歌</a>
      </div>
      <ul>
          <li>美国</li>
          <li>日本</li>
          <li>韩国</li>
      </ul>
  </div>
  ```

多个样式&覆盖问题：

关于多个样式 & 覆盖的问题：

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: red;  # 如果加上一个  ！important表示很重要，不能被覆盖
            border: 1px solid red;
        }
        .c2{      # 如果有相同内容，那么下面的会把上面的覆盖掉
            font-size: 28px;
            color: green;
        }
    </style>
</head>
<body>
    <div class="c1 c2">中国联通</div>
</body>
</html>

样式：

### 3.4 样式

#### 1. 高度和宽度

```css
.c1{
    height: 300px;
    width: 500px;
}
```

注意事项：

- 宽度，支持百分比。
- 行内标签：默认无效
- 块级标签：默认有效（霸道，右侧区域空白，也不给你占用）



#### 2. 块级和行内标签

- 块级
- 行内
- css样式：标签 -> `display:inline-block`



示例：行内&块级特性

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            display: inline-block;  #表示既有行内标签的性质，也有块级标签的性质

            height: 100px;
            width: 300px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <span class="c1">中国</span>

    <span class="c1">联通</span>

    <span class="c1">联通</span>

    <span class="c1">联通</span>
</body>
</html>
```



示例：块级和行内标签的设置

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
    <div style="display: inline;">中国</div>   # 块级切换为行内
    <span style="display: block;">联通</span>
</body>
</html>
```



注意：块级 + 块级&行内。



#### 3.字体设置

- 颜色
- 大小
- 加粗
- 字体格式

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: #00FF7F;
            font-size: 58px;
            font-weight: 600;
            font-family: Microsoft Yahei;
        }
    </style>
</head>
<body>
    <div class="c1">中国联通</div>
    <div>中国移动</div>
</body>
</html>
```



#### 4.文字对齐方式

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 59px;
            width: 300px;
            border: 1px solid red;

            text-align: center; /* 水平方向居中 */
            line-height: 59px; /* 垂直方向居中 */
        }
    </style>
</head>
<body>
    <div class="c1">郭智</div>
</body>
</html>
```

浮动：

#### 5.浮动

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <span>左边</span>
        <span style="float: right">右边</span>
    </div>
</body>
</html>
```



div默认块级标签（霸道），如果浮动起来，就不一样了。就会需要多少占多少

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item{
            float: left;
            width: 280px;
            height: 170px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>
```



如果你让标签浮动起来之后，就会脱离文档流。不会将父级标签撑起来

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item {
            float: left;
            width: 280px;
            height: 170px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div style="background-color: dodgerblue">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div style="clear: both;"></div>   #将浮动的拽回来，这样就会将父级标签撑起来
    </div>
    <div>你哦啊呀</div>
</body>
</html>
```

内边距：

#### 6.内边距

内边距，我自己的内部设置一点距离。内边距会增加《div》的大小

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            border: 1px solid red;
            height: 200px;
            width: 200px;

            padding-top: 20px;
            padding-left: 20px;
            padding-right: 20px;
            padding-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div style="background-color: gold;">听妈妈的话</div>
        <div>
            小朋友你是否下水道发
        </div>
    </div>
</body>
</html>
```

外边距：

### 7.外边距

外边距，我与别人加点距离。

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="height: 200px;background-color: dodgerblue;"></div>
<div style="background-color: red;height: 100px;margin-top: 20px;"></div>
</body>
</html>
```

实例：

### 案例：小米商场

![image-20211119180301990](assets/image-20211119180301990.png)

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;   #去除边距
        }

        .header {
            background: #333;
        }

        .container {
            width: 1226px;
            margin: 0 auto;
        }

        .header .menu {
            float: left;
            color: white;
        }

        .header .account {
            float: right;
            color: white;
        }

        .header a {
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            font-size: 12px;
            margin-right: 10px;
        }
    </style>
</head>
<body>

<div class="header">
    <div class="container">
        <div class="menu">
            <a>小米商城</a>
            <a>MIUI</a>
            <a>云服务</a>
            <a>有品</a>
            <a>开放平台</a>
        </div>
        <div class="account">
            <a>登录</a>
            <a>注册</a>
            <a>消息通知</a>
        </div>
        <div style="clear: both"></div>  #当使用到浮动时，必须添加
    </div>
</div>

</body>
</html>
```





## 总结

- body标签，默认有一个边距，造成页面四边都有白色间隙，如何去除呢？

  ```html
  body{
  	margin: 0;
  }
  ```

- 内容居中

  - 文本居中，文本会在这个区域中居中。

    ```html
    <div style="width: 200px; text-align: center;">武沛齐</div>
    ```

  - 区域居中，自己要有宽度 + `margin-left:auto;margin-right:auto`

    ```html
    .container{
        width: 980px;
        margin: 0 auto;
    }
    
    <div class="container">
    	adfasdf
    </div>
    ```

- 父亲没有高度或没有宽度，被孩子支撑起来。

小米顶部模仿案例：

小结：

#### 小结

- a标签是行内标签，行内标签的高度、内外边距，默认无效。

- 垂直方向居中

  - 本文 + line-height
  - 图片 + 边距

- a标签默认有下划线。

- 鼠标放上去之后hover

  ```css
  .c1:hover{
      ...
  }
  a:hover{
      
  }

案例代码：

### 1.3 案例：顶部菜单 + 二级菜单

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }

        .container {
            width: 1226px;
            margin: 0 auto;
        }


        .header {
            background: #333;
        }


        .header .menu {
            float: left;
            color: white;
        }

        .header .account {
            float: right;
            color: white;
        }

        .header a {
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            font-size: 12px;
            margin-right: 10px;

            text-decoration: none;
        }
        .header a:hover{   #鼠标放到相应位置后会改变颜色
            color: white;
        }

        .sub-header {
            height: 100px;
        }

        .sub-header .ht {
            height: 100px;
        }

        .sub-header .logo {
            width: 234px;
            float: left;

        }

        .sub-header .logo a {
            margin-top: 22px;
            display: inline-block
        }

        .sub-header .logo a img {
            height: 56px;
            width: 56px;
        }

        .sub-header .menu-list {
            float: left;

            line-height: 100px;
        }

        .sub-header .menu-list a {
            display: inline-block;
            padding: 0 10px;
            color: #333;
            font-size: 16px;
            text-decoration: none;  #去除超链接下面的横线
        }

        .sub-header .menu-list a:hover {
            color: #ff6700;
        }

        .sub-header .search {
            float: right;
        }
    </style>
</head>
<body>

<div class="header">
    <div class="container">
        <div class="menu">
            <a href="https://www.mi.com/">小米商城</a>
            <a href="https://www.mi.com/">MIUI</a>
            <a href="https://www.mi.com/">云服务</a>
            <a href="https://www.mi.com/">有品</a>
            <a href="https://www.mi.com/">开放平台</a>
        </div>
        <div class="account">
            <a href="https://www.mi.com/">登录</a>
            <a href="https://www.mi.com/">注册</a>
            <a href="https://www.mi.com/">消息通知</a>
        </div>
        <div style="clear: both"></div>
    </div>
</div>

<div class="sub-header">
    <div class="container">
        <div class="ht logo">
            <!-- a，行内标签；默认设置高度、边距无效。 -> 块级 & 行内+块级 -->
            <a href="https://www.mi.com/">
                <img src="images/logo-mi2.png" alt="">
            </a>

        </div>
        <div class="ht menu-list">
            <a href="https://www.mi.com/">Xiaomi手机</a>
            <a href="https://www.mi.com/">Redmi红米</a>
            <a href="https://www.mi.com/">电视</a>
            <a href="https://www.mi.com/">笔记本</a>
            <a href="https://www.mi.com/">平板</a>
        </div>
        <div class="ht search"></div>
        <div class="clear:both;"></div>
    </div>
</div>


</body>
</html>

v- 设置透明度

opacity:0.5; /* 0 ~ 1 */

hover运用：

### 2.1 hover（伪类）

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            color: red;
            font-size: 18px;
        }

        .c1:hover {
            color: green;
            font-size: 50px;
        }

        .c2 {
            height: 300px;
            width: 500px;
            border: 3px solid red;
        }

        .c2:hover {
            border: 3px solid green;
        }

        .download {
            display: none;   # 将内容隐藏起来
        }

        .app:hover .download {   # hover也可以改变内部指定标签的显示样式
            display: block;
        }
        .app:hover .title{
            color: red;
        }
    </style>
</head>
<body>
<div class="c1">联通</div>
<div class="c2">广西</div>

<div class="app">
    <div class="title">下载APP</div>
    <div class="download">
        <img src="images/qcode.png" alt="">
    </div>
</div>

</body>
</html>

after：

### 2.2 after（伪类）

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1:after{
            content: "大帅哥";   #相当于在后面加上内容
        }
    </style>
</head>
<body>
    <div class="c1">吴阳军</div>
    <div class="c1">梁吉宁</div>
</body>
</html>
```



很重要的应用：

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .clearfix:after{   #有清除浮动的功能，一般都叫clearfix这个名字
            content: "";
            display: block;
            clear: both;
        }
        .item{
            float: left;
        }

    </style>
</head>
<body>
    <div class="clearfix">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>
```

postion：

fixed：固定在窗口的某个位置

#### 1. fixed

固定在窗口的某个位置。



##### 案例：返回顶部

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .back{
            position: fixed;
            width: 60px;
            height: 60px;
            border: 1px solid red;

            right: 10px;
            bottom: 50px;
        }
    </style>
</head>
<body>

<div style="height: 1000px;background-color: #5f5750"></div>

<div class="back"></div>


</body>
</html>
```



##### 案例：对话框

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }

        .dialog {
            position: fixed;
            height: 300px;
            width: 500px;
            background-color: white;

            left: 0;
            right: 0;
            margin: 0 auto;

            top: 200px;

            z-index: 1000;  #有多个fixed页面。设置页面的优先级，数值高的在上面。
        }

        .mask {
            background-color: black;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            opacity: 0.7;
            z-index: 999;
        }
    </style>
</head>
<body>


<div style="height: 1000px">asdfasdfasd</div>


<div class="mask"></div>
<div class="dialog"></div>


</body>
</html>
```

relative和absolute一般联合使用，一个相对于另一个。

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .c1{
            height: 300px;
            width: 500px;
            border: 1px solid red;
            margin: 100px;

            position: relative;
        }
        .c1 .c2{
            height: 59px;
            width: 59px;
            background-color: #00FF7F;

            position: absolute;
            right: 20px;
            bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="c1">

        <div class="c2"></div>

    </div>
</body>
</html>
```

border和背景色：

### 2.4 border

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .c1{
            height: 300px;
            width: 500px;
            border: 1px solid red;
            border-left: 3px solid #00FF7F;
            margin: 100px;
        }

    </style>
</head>
<body>
    <div class="c1"></div>
</body>
</html>
```

透明色：

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .c1{
            height: 50px;
            width: 500px;
            margin: 100px;
            background-color: #5f5750;
            border-left: 2px solid transparent;
        }

        .c1:hover{
            border-left: 2px solid red;
        }

    </style>
</head>
<body>
    <div class="c1">菜单</div>
</body>
</html>
```

### 2.5 背景色

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .c1{
            height: 50px;
            width: 500px;
            margin: 100px;
            background-color: #5f5750;
        }


    </style>
</head>
<body>
    <div class="c1">菜单</div>
</body>
</html>
```