CSS第一篇(引入CSS样式的方法,及CSS的作用介绍)

最新推荐文章于 2023-03-04 12:47:42 发布

江湖与天涯

最新推荐文章于 2023-03-04 12:47:42 发布

阅读量188

点赞数

分类专栏： CSS学习笔记

本文链接：https://blog.csdn.net/qq_41538952/article/details/105034113

版权

CSS学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

CSS的作用(目的)

之前学习的HTML仅限于页面结构呈现,虽然它可以进行页面布局和样式设置,但是较为麻烦,而CSS就是应用于页面布局和样式调整,所以又叫层叠样式表.

引入CSS样式的几种方法
第一种:内联样式(将样式通过一个style属性添加至HTML标签中)
语法如下

<body>
    <h1 style="color: red; font-size: 18px;">锄禾日当午</h1>
</body>

第二种:内部样式表(在head标签中新建一个style标签,然后经过选择器选择相关目标元素)
语法如下:

<!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>
        #second,#thirth,#fourth{
            color: blue;
        }
    </style>
</head>
<body>
    <!-- 第一种方法:内联式 -->
    <h1 style="color: red; font-size: 18px;">锄禾日当午</h1><br>
    <h2 id="second">汗滴禾下土</h2>
    <h2 id="thirth">谁知盘中餐</h2>
    <h2 id="fourth">粒粒皆辛苦</h2>

</body>
</html>

第三种方法(外链式,从外部引入CSS文件)
作用:

①实现结构与样式分离

②实现CSS样式共享

语法如下:

<!-- link标签是单标签,其中href属性值为css文件的路径(必须的) -->
<head>
      <link rel="stylesheet" href="css文件路径">
</head>

综合案例如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 第三种方法:外链式 -->
    <link rel="stylesheet" href="CSS样式方法.css">
    <!-- 第二种方法:内部式 -->
    <style>
        #second,#thirth,#fourth{
            color: blue;
        }
    </style>
</head>
<body>
    <!-- 第一种方法:内联式 -->
    <h1 style="color: red; font-size: 18px;">锄禾日当午</h1><br>
    <h2 id="second">汗滴禾下土</h2>
    <h2 id="thirth">谁知盘中餐</h2>
    <h2 id="fourth">粒粒皆辛苦</h2>



    <h1 id="out">小公司都是傻屌,毫无制度可言,大家找工作要谨慎</h1>
    <!-- <h3>小公司都是傻屌,毫无制度可言,大家找工作要谨慎</h3> -->
</body>
</html>

江湖与天涯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS第一篇(引入CSS样式的方法,及CSS的作用介绍)

CSS的作用(目的) 之前学习的HTML仅限于页面结构呈现,虽然它可以进行页面布局和样式设置,但是较为麻烦,而CSS就是应用于页面布局和样式调整,所以又叫层叠样式表. 引入CSS样式的几种方法第一种:内联样式(将样式通过一个style属性添加至HTML标签中) 语法如下 <body> <h1 style="color: red; ...
复制链接

扫一扫