CSS使用方法

瞳眬

已于 2024-07-13 20:41:40 修改

阅读量821

点赞数 20

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

于 2024-07-13 11:07:17 首次发布

本文链接：https://blog.csdn.net/2301_79614134/article/details/140394975

版权

前端开发专栏收录该内容

12 篇文章 0 订阅

订阅专栏

CSS使用方法

一、定义
二、引入方式
三、选择器

一、定义

层叠样式表（Cascading Style Sheets，缩写为CSS），是一种样式表语言,用来描述HTML文档的呈现（美化内容）

二、引入方式

（一）内联样式

例：

<div style="width:100px;height:100px;background-color:blue"></div>

运行结果：

（二）内部样式表

例：

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            font-size: 50px;
            color: red;
        }
        /* 设置字体为50像素，颜色为红色 */
    </style>
</head>
<body>
    <p>页面内容</p>
</body>
</html>

运行结果：

（三）外部样式表

例：
HTML文件

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="URL">
    <!-- URL是css文件路径 -->
</head>
<body>
    <p>外部样式表</p>
</body>
</html>

CSS文件

p {
    font-size: 50px;
    color: red;
}
/* 设置字体为50像素，颜色为红色 */

运行结果：

三、选择器

（一）标签选择器

例：

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: red;
        }
        /* 设置字体颜色为红色 */
    </style>
</head>
<body>
    <p>标签选择器</p>
</body>
</html>

运行结果：

（二）类选择器

例：

<!DOCTYPE html>
<html>
<head>
    <style>
        .blue {
            color: blue;
        }
        /* 设置字体颜色为蓝色 */
    </style>
</head>
<body>
    <p class="blue">类选择器</p>
</body>
</html>

运行结果：

（三）ID选择器

例：

<!DOCTYPE html>
<html>
<head>
    <style>
        #green {
            color: green;
            ;
        }
        /* 设置字体颜色为绿色 */
    </style>
</head>
<body>
    <p id="green">ID选择器</p>
</body>
</html>

运行结果：

（四）通配符选择器

例：

<!DOCTYPE html>
<html>
<head>
    <style>
        * {
            color: red;
            ;
        }
        /* 设置所以字体颜色为红色 */
    </style>
</head>
<body>
    <p>通配符选择器1</p>
    <div>通配符选择器2</div>
    <h2>通配符选择器3</h2>
</body>
</html>

运行结果：

（五）属性选择器

例：

<!DOCTYPE html>
<html>
<head>
    <style>
        input[type="text"] {
            color: red;
        }
    </style>
</head>
<body>
    <input type="text" value="我是一个文本输入框">
</body>
</html>

运行结果：

（六）后代选择器

例：

<!DOCTYPE html>
<html>
<head>
    <style>
        div p {
            color: red;
        }
        /* 设置字体颜色为红色 */
    </style>
</head>
<body>
    <div>
        <p>后代选择器</p>
    </div>
</body>
</html>

运行结果：

（七）子代选择器

例：

<!DOCTYPE html>
<html>
<head>
    <style>
        div > p {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>子代选择器1</p>
        <h1>
            <p>子代选择器2</p>
        </h1>
    </div>
</body>
</html>

运行结果：

（八）并集选择器

例：

<!DOCTYPE html>
<html>
<head>
    <style>
        div,
        p {
            color: red;
        }
    </style>
</head>
<body>
    <div>并集选择器1</div>
    <p>并集选择器2</p>
</body>
</html>

运行结果：

（九）交集选择器

例：

<!DOCTYPE html>
<html>
<head>
    <style>
        p.red {
            color: red;
        }
    </style>
</head>
<body>
    <p class="red">交集选择器1</p>
    <p>交集选择器2</p>
</body>
</html>

运行结果：

注意
交集选择器中，如果有标签选择器一定要放在前面

（十）伪类选择器

link（访问前）
visited（访问后）
hover（鼠标悬停时）
active（鼠标点击时）

例：

<!DOCTYPE html>
<html>
<head>
    <style>
    	/* 鼠标悬停时触发 */
        a:hover {
            color: red;
        }
    </style>
</head>
<body>
    <a>伪类选择器</a>
</body>
</html>