CSS的简单介绍

椅子哥

于 2024-08-21 18:26:46 发布

阅读量219

点赞数 2

文章标签： css 前端 javaee java

本文链接：https://blog.csdn.net/Lotus_zyz/article/details/141394554

版权

1.什么是CSS

CSS(层叠样式表)，用于控制页面的样式，简单地来说，CSS就是用来美化页面的一种语言。

2.基本语法规范

CSS的基本语法规范：CSS选择器+{1或多条声明}

其中CSS选择器决定找谁(针对哪个元素进行修改)，声明决定干什么(具体如何修改)，声明的属性是键值对

 <style>
        p {/* 针对所有p标签元素 */
            color: blue; /* 设置字体颜色 */
            font-size: 20px; /* 设置字体大小 */
        }
    </style>

3.CSS常见的选择器

3.1 标签选择器

标签选择器仅针对标签这个元素，常见的标签例如图片标签img，无语义标签div和span等等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            color:red;
        }
    </style>
</head>
<body>
    <div>hello</div>
    <div>world</div>
</body>
</html>

3.2 类选择器

类选择器通过针对指定类名的元素进行修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 通过 .+类名 构成类选择器 */
        .font {
            color:blue;
        }
    </style>
</head>
<body>
    <!-- 通过class来定义类名属性 -->
    <div class="font">hello</div>
    <div class="font">world</div>
</body>
</html>

3.3 ID选择器

ID选择器通过针对指定ID的元素进行修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 通过 #+id 构成ID选择器 */
        #div1 {
            color:blue;
        }
    </style>
</head>
<body>
    <div id="div1">hello</div>
    <div id="div2">world</div>
</body>
</html>

3.4 通配符选择器

通配符选择器针对页面上所有元素进行修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            color: blue;
        }
    </style>
</head>
<body>
    <div>hello</div>
    <div>world</div>
</body>
</html>

3.5 复合选择器

复合选择器可以由多个单选择器组成，单选择器可以是上述的标签选择器，类选择器等等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 指定修改xx元素中的xx(可以有多层，例如ul li p{...}) */
        /* 复合选择器有两种不同形式，一种是elem1 elem2(elem2可以是elem1的子或孙元素)
           另一种是elem1>elem2(elem2必须是elem1的子元素) */
        div p {
            color:blue;
        }
    </style>
</head>
<body>
    <div><p>helloworld</p></div>
</body>
</html>

4.常见CSS

color：设置字体颜色

font-size：设置字体大小

border：边框

width/height：设置宽度和高度

padding：内边距，设置内容和边框之间的距离

注：只有块级元素可以设置宽高(width/height)，块级元素独占一行，行级元素不独占一行，常见的块级元素有h1-h6，p，div等，常见的行级元素有a，span等，可以通过display: block将行级元素转换为块级元素

 <style>
        div {
            color: red;
            font-size: 32px;
            border: 5px black solid;
            width: 500px;
            height: 300px;
            margin: 5px;
            padding: 5px;
        }
    </style>