10.css3简介及其简单用法

最新推荐文章于 2022-07-28 11:41:24 发布

Keeling1720

最新推荐文章于 2022-07-28 11:41:24 发布

阅读量131

点赞数

分类专栏： HTML5+CSS

本文链接：https://blog.csdn.net/weixin_44741023/article/details/113784932

版权

HTML5+CSS 专栏收录该内容

41 篇文章 5 订阅

订阅专栏

    css
        - 层叠样式表
        - 网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式
            而最终我们能够看到的只是网页最上边的一层
        - 总之一句话，css是用来设置网页中元素的样式

    使用css来修改元素的样式共有三种方式：
    第一种方式（内联样式，行内样式）：（不常用，太繁琐）
        - 在标签内部通过style来设置元素的样式
        注意：开发时，绝对不要使用内联样式
    第二种方式
        - 将样式编写到head中的style标签中
    第三种方式(最佳用法)
        - 可以将css样式编写到一个外部的css文件中
            然后通过link标签来引入外部的css文件
        - 想使用改样式的网页都可以d对其进行引用
          使样式可以在不同页面之间进行复用
        - 将样式编写到外部的css文件中，可以使用到浏览器的缓存机制
            从而加快网页的加载速度，提高用户的体验

下边，我们用代码来解释说明：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3简介及其简单用法</title>
</head>
<body>
    <!--
        第一种方式
        color设置颜色为红色
        font-size设置字体大小为30像素
        各个属性之间通过空格隔开
        各属性值与类型用冒号‘:’隔开
        各属性结尾加分号‘;’
    -->
	<p style="color: red; font-size: 30px;">越努力越幸运</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3简介及其简单用法</title>
    <!--
        第二种方式(内部样式)
            通过css的选择器来选中元素并为其设置样式
            可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用
          - 问题：
            只能对一个网页起作用，不能跨页面使用
    -->
    <!--这里的p，指的是所有的p，也就是段落，采用颜色为红色，大小为30像素-->
	<style>
        p{
            color: red;
            font-size: 30px;
        }
    </style>
</head>
<body>
	<!--第二种方式-->
    <p>少壮不努力，老大徒伤悲</p>
    <p>花有重开日，人无再少年</p>
    <h1>
        这个还是原来的样子
    </h1>
</body>
</html>

第三种方式比较常用，需要先新建一个css文件(为了方便，我叫他001.css)，代码如下：

p{
    color: blue;
    font-size: 50px;
}

然后再编写html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3简介及其简单用法</title>
    <!--引入css文件-->
    <link rel="stylesheet" href="001.css">
</head>
<body>
    <!--
        第三种方式(最佳用法)
            - 可以将css样式编写到一个外部的css文件中
                然后通过link标签来引入外部的css文件
            - 想使用改样式的网页都可以d对其进行引用
              使样式可以在不同页面之间进行复用
            - 将样式编写到外部的css文件中，可以使用到浏览器的缓存机制
                从而加快网页的加载速度，提高用户的体验
    -->
	<p>学而不思则罔，思而不学则殆</p>
</body>
</html>

Keeling1720

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
10.css3简介及其简单用法

css - 层叠样式表 - 网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式而最终我们能够看到的只是网页最上边的一层 - 总之一句话，css是用来设置网页中元素的样式使用css来修改元素的样式共有三种方式：第一种方式（内联样式，行内样式）：（不常用，太繁琐） - 在标签内部通过style来设置元素的样式注意：开发时，绝对不要使用内联样式第...
复制链接

扫一扫