前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >一、前端基础-css-css的引入方式

一、前端基础-css-css的引入方式

原创
作者头像
堕落飞鸟
发布2022-02-11 08:45:31
5570
发布2022-02-11 08:45:31
举报
文章被收录于专栏:飞鸟的专栏
代码语言:javascript
复制
<!-- CSS 概述
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一
-->
代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 在head中定义CSS样式 -->
    <style type="text/css">
        div{
            color: red;
            background-color: cadetblue;
        }
    </style>

    <!-- 在head中通过链接引用CSS样式 -->
    <link type="text/css" rel="stylesheet" href="css示例连接式引入.css">
</head>
<body>

<!-- CSS引入方式
    1、行内式:行内式是在标签的style属性中设定CSS样式,这种方法没有体现CSS的优势,不推荐使用。
    2、嵌入式:嵌入式是将CSS的样式集中写在网页的head标签中style属性中。
    3、链接式:链接式是将CSS的样式写入一个单独的css文件,在网页的head中进行链接引用,推荐。
    注:示例都是修改的单一标签样式(会影响所有同名标签),实际上可以根据标签的id属性来设置样式,详见选择器。
-->

<!-- 行内式 -->
<p style="color: aqua;background-color: darkslategray">CSS引入方式示例1、行内式</p>

<!-- 嵌入式 -->
<div>CSS引入方式示例2、嵌入式</div>

<!-- 连接式 -->
<h1>CSS引入方式示例3、连接式</h1>

</body>
</html>

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档