css基础

最新推荐文章于 2024-09-05 10:06:52 发布

月亮1打烊了

最新推荐文章于 2024-09-05 10:06:52 发布

阅读量50

点赞数 1

文章标签： css 前端 html

本文链接：https://blog.csdn.net/Xyh9375/article/details/131712110

版权

本文介绍了CSS的基本语法，包括外联式、内联式和行内样式的应用。接着详细讲解了CSS的选择器，如通配符选择器、标签选择器、类选择器、ID选择器，以及群组、子代、后代、兄弟等复杂选择器的使用。此外，还提到了伪类选择器在设计交互效果中的作用。

摘要由CSDN通过智能技术生成

一丶css基本语法

外联式

<link rel="stylesheet" href="">

内联式

在head标签中写一个style标签

<!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>
    <style>
        p{
            background-color: aqua;
        }
    </style>
</head>
<body>
    <p>段落标签</p>
</body>
</html>

行内引入

 <p style="background-color: aqua;color: blue;font-size: 50px;">段落标签</p>

二丶css基本样式

1.width 宽
2.height 高
3.background-color 背景颜色
4.list-style: none; 清除li默认样式

三丶css选择器

**1. *号：通配符选择器**

 *{
        background-color: aqua;
    }

2.标签选择器

p{
        background-color: aqua;
      }

3.类选择器

 <style>
      .la{
        background-color: aqua;color: blue;font-size: 40px;
      }
    </style>
</head>
<body>
    <p class="la">段落标签</p>
</body>

4.id选择器

<style>
      #la{
        background-color: aqua;color: blue;font-size: 40px;
      }
    </style>
</head>
<body>
    <p id="la">段落标签</p>
</body>

5.群组选择器

 /* 群组选择器 */
        .div1,.div2,.div3{
            /* 高100px */
            height: 100px;
            /* 颜色 */
            background-color: green;
        }
        .div1{
            /* 宽150px */
            width: 150px;
            /* 颜色 */
            background-color: aqua;
        }
        .div2{
            /* 宽250px */
            width: 250px;
            /* 颜色 */
            background-color: blue;
        }
        .div3{
            /* 宽350px */
            width: 350px;
            /* 颜色 */
            background-color: pink;
        }

6.子代选择器

.ulBig > li{
            /* 去掉基础样式 */
            list-style: none;
            /* 设置字体大小为30px */
            font-size: 30px;
            color: aqua;
        }

7.后代选择器

.uiBig li{
            /* 去掉基础样式 */
            list-style: none;
            background-color: aquamarine;
        }

8.兄弟选择器

 .li4{
            /* 颜色 */
            color: red;
        }

9.相邻兄弟选择器

.li4+li{
            /* 颜色 */
            color: orange;
        }

10.通用兄弟选择器

 .li4~li{
            /* 颜色 */
            color: yellow;
        }

兄弟选择器相邻兄弟 + 只修改她下面的相邻的选择器
兄弟选择器通用兄弟 ~ 修改他后面所有选择器

11.伪类选择器

 .li4:hover{
            /* 颜色 */
            color: rgb(45, 24, 235);
            /* 鼠标变手 */
            cursor: pointer;
        }

全局选择器（*） < 类选择器 < 属性选择器 < 伪类 < ID 选择器 < 内联样式 < !important