JavaWeb7——CSS 的使用

最新推荐文章于 2023-07-07 21:28:43 发布

姜满月

最新推荐文章于 2023-07-07 21:28:43 发布

阅读量1k

点赞数 1

分类专栏： trush 文章标签： css

本文链接：https://blog.csdn.net/qq_51184516/article/details/123614402

版权

本文详细介绍了CSS的概念、用法和常用选择器，包括ID选择器、类选择器、标签选择器以及后代选择器。同时，探讨了CSS的属性应用，如font、list-style、text、margins、color、background和border等，是学习和提升CSS技能的实用教程。

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

1. CSS 的概念

层叠样式表

- 定义
1. CSS 是 Cascading Style Sheets 的英文缩写，即层叠样式表。
2. 它是一组格式设置规则。
3. CSS 语言也是一种标记语言，不需要编译，直接由浏览器执行。
4. CSS 大小写不敏感。
5. CSS 是由 W3C 的 CSS 工作组创建和维护的。

- 作用
可用于控制 Web 页面，用于布局和美化网页。

CSS 优点

- 更多排版和页面布局设置
- 样式和结构分离
- 样式可以保存
- 文档更小
- 可保持 Web 文档的一致性，以方便网站维护

CSS 入门示例

法一：通过 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>CSS 入门示例</title>
    <style type="text/css">
        h1 {
    
            font-size: 12pt;
            color: red;
        }
    </style>
</head>

<body>
    <h1 style="font-size: 9pt; color:purple;">CSS 层叠样式表</h1>
    <h1>CSS 层叠样式表</h1>
    <h1>CSS 层叠样式表</h1>
</body>

</html>

法二：通过 CSS 链接

css文件

h1 {
   
    font-size: 12pt;
    color: red;
}

html文件

<!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>CSS 入门示例</title>
    <link rel="stylesheet" href="./mystyle.css">
</head>

<body>
    <h1</