JavaWeb：（三）CSS

最新推荐文章于 2024-10-02 15:35:50 发布

程序员aDing

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量81

点赞数

分类专栏： Java后端开发技术栈文章标签： css html css3

原文链接：https://heavy_code_industry.gitee.io/code_heavy_industry/pro001-javaweb/lecture/chapter02/verse06.html

版权

Java后端开发技术栈专栏收录该内容

61 篇文章 3 订阅

订阅专栏

本文介绍了设置CSS样式的三种方法：HTML标签内、head标签内及外部CSS文件。详细讲解了CSS代码语法，包括选择器和声明的组成。接着阐述了三种选择器——标签选择器、id选择器和类选择器的用法，通过实例展示了它们在HTML元素中的应用。

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

3.1 设置CSS样式的三种方式

3.1.1 在HTML标签内设置

仅对当前标签有效

<div style="border: 1px solid black;width: 100px; height: 100px;">&nbsp;</div>

3.1.2 在head标签内设置

对当前页面有效

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .one {
            border: 1px solid black;
            width: 100px;
            height: 100px;
            background-color: lightgreen;
            margin-top: 5px;
        }
    </style>
</head>
<body>

    <div style="border: 1px solid black;width: 100px; height: 100px;">&nbsp;</div>

    <div class="one">&nbsp;</div>
    <div class="one">&nbsp;</div>
    <div class="one">&nbsp;</div>

</body>

3.1.3 引入外部CSS样式文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J1vF0Ozc-1654801430414)(../AppData/Roaming/Typora/typora-user-images/image-20220610030030663.png)]

编辑CSS文件

.two {
    border: 1px solid black;
    width: 100px;
    height: 100px;
    background-color: yellow;
    margin-top: 5px;
}

引入外部CSS文件

在需要使用这个CSS文件的HTML页面的head标签内加入：

<link rel="stylesheet" type="text/css" href="/aaa/pro01-HTML/style/example.css" />

于是下面HTML代码的显示效果是：

    <div class="two">&nbsp;</div>
    <div class="two">&nbsp;</div>
    <div class="two">&nbsp;</div>

3.2 CSS代码语法

CSS样式由选择器和声明组成，而声明又由属性和值组成。
属性和值之间用冒号隔开。
多条声明之间用分号隔开。
使用/* … */声明注释。

./images

3.3 CSS选择器

3.3.1 标签选择器

HTML代码：

<p>Hello, this is a p tag.</p>
<p>Hello, this is a p tag.</p>
<p>Hello, this is a p tag.</p>
<p>Hello, this is a p tag.</p>
<p>Hello, this is a p tag.</p>

CSS代码：

        p {
            color: blue;
            font-weight: bold;
        }

3.3.2 id选择器

HTML代码：

    <p>Hello, this is a p tag.</p>
    <p>Hello, this is a p tag.</p>
    <p id="special">Hello, this is a p tag.</p>
    <p>Hello, this is a p tag.</p>
    <p>Hello, this is a p tag.</p>

CSS代码：

        #special {
            font-size: 20px;
            background-color: aqua;
        }

3.3.3 类选择器

HTML代码：

    <div class="one">&nbsp;</div>
    <div class="one">&nbsp;</div>
    <div class="one">&nbsp;</div>

CSS代码：

        .one {
            border: 1px solid black;
            width: 100px;
            height: 100px;
            background-color: lightgreen;
            margin-top: 5px;
        }