【HTML基础-4】CSS样式详解

最新推荐文章于 2024-06-18 06:47:56 发布

像风一样9

最新推荐文章于 2024-06-18 06:47:56 发布

阅读量2.2k

点赞数 2

分类专栏： # 入门04：web安全之语言基础文章标签： HTML CSS样式

本文链接：https://blog.csdn.net/m0_64378913/article/details/123738311

版权

入门04：web安全之语言基础专栏收录该内容

21 篇文章 20 订阅

订阅专栏

1 CSS样式概述

定义： CSS是Cascading Style Sheets的简称，中文名称为层叠样式表、级联样式表或样式表。
作用：实现内容与样式相分离，提高代码的可重用性和可维护性。
CSS样式：①元素内容的颜色color；元素内容的背景色background-color；③字体大小font-size等等。

CSS与HTML：

对比关系：HTML好比好比定义了一个文章的内容，而CSS就是定义这些内容的样式。
使用原则：尽可能使用CSS属性取代HTML属性，即提倡HTML与CSS分离。

2 CSS与HTML的三种组合方式

2.1 内联样式

形式：把样式表写在标签内部，作为标签的 style 属性的属性值出现。
适用性：当特殊的样式需要应用到个别元素时，就可以使用内联样式。
示例：

<html>
    <head>
        <meta charset="utf-8">  
    <title>
    testCSS1
    </title>
    </head>

    <body>
        <h1>格言 </h1>
    <div style="background-color:#000000;color: #ffffff;">没有对比</div>,<br/>
    <span style="color:red;font-size:30px;background-color: yellow;">就没有伤害</span>
    </body>
</html>

运行结果如下：
在这里插入图片描述

tips:
颜色除了用英文表示外，还可以采用RGBB编码X X X（X为0~255）。例如，白色为255 255 255（用16进制表示，为#ffffff）。；黑色为0 0 0。其中颜色越浅，数字越大。

2.2 内部样式表

形式：把样式表写在head中，通过选择器为不同标签指定样式。
选择器：有很多种，比较常用的有三种：①元素/标签选择器②类选择器、③ID选择器。这三种选择器优先级依次增大。
适用性：当单个文件需要特别样式时，就可以使用内部样式表。
示例：注意CSS的注释语句和HTML不一样。

<html>
    <head>
        <meta charset="utf-8">  
    <title>
    testCSS2
    </title>
    <style type="text/css"> 
        /*定义元素选择器*/
    span {background-color: pink;}
    	/*定义类选择器*/
    .shanghai{color: black;background-color: red;font-size: 20px;}
    	/*定义ID选择器*/
    #db{color: white;background-color:green;font-size: 20px;}
    </style>
    </head>

    <body>
        <h1>格言 </h1>
        <span >没有<span id="db">对比</span>,</span>
        <span >就没有<span class="shanghai">伤害</span></span>
    </body>
</html>

运行结果如下：

在这里插入图片描述

2.3 外部引用

形式：将样式表单独存放，后缀名为.css，在head中指定外部样式表。
适用性：当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
示例：

<!--首页-->
<html>
    <head>
        <meta charset="utf-8">  
    <title>
    testCSS2
    </title>
    <link rel="stylesheet" type="text/css" href="./myCSS.css">
    <!--链接样式表-->
    </head>

    <body>
        <h1>格言 </h1>
        <span >没有<span id="db">对比</span>,</span>
        <span >就没有<span class="shanghai">伤害</span></span>
    </body>
</html>

<!--myCSS.css-->
    /*定义元素选择器*/
    span {background-color: pink;}
    	/*定义类选择器*/
    .shanghai{color: black;background-color: red;font-size: 20px;}
    	/*定义ID选择器*/
    #db{color: white;background-color:green;font-size: 20px;}

运行结果如下：

在这里插入图片描述

3 总结

（1）理解HTML与CSS各自的功能及配合原则；
（2）掌握HTML与CSS的三种组合方式。

参考文章

[1] 《CSS菜鸟教程》
[2] 《【HTML基础】CSS样式表》

像风一样9

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
【HTML基础-4】CSS样式详解

目录1 CSS样式概述2 CSS与HTML的三种组合方式2.1 内联样式2.2 内部样式表2.3 外部引用3 总结参考文章1 CSS样式概述定义： CSS是Cascading Style Sheets的简称，中文名称为层叠样式表、级联样式表或样式表。作用：实现内容与样式相分离，提高代码的可重用性和可维护性。CSS样式：①元素内容的颜色color；元素内容的背景色background-color；③字体大小font-size等等。CSS与HTML：对比关系：HTML好比好比定义了一个文章
复制链接

扫一扫

专栏目录