web前端-CSS引入方式

news/2024/9/28 13:35:06 标签: 前端, css

一、内部样式表

内部样式表(内嵌样式表)是写到html页面内部,是将所有的 CSS 代码抽取出来,单独放到一个<styie>标签中。

注意:
① <style>标签理论上可以放在 HTML文档的任何地方,但一般会放在文档的<head>标签中

② 通过此种方式,可以方便控制当前整个页面中的元素样式设置

③ 代码结构清晰,但是并没有实现结构与样式完全分离

④ 使用内部样式表设定CSS,通常也被称为嵌入式引入,这种方式是我们练习时常用的方式

二、行内样式表

行内样式表(内联样式表)是在元素标签内部的style属性中设定CSS 样式。适合于修改简单样式

注意:

① style 其实就是标签的属性

② 在双引号中间,写法要符合CSS规范

③ 可以控制当前的标签设置样式

④ 由于书写繁琐,并且没有体现出结构与样式相分离的思想,所以不推荐大量使用,只有对当前元素添加简单样式的时候,可以考虑使用

⑤ 使用行内样式表设定CSS,通常也被称为行内式引入

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="color: green;">十个勤天,做大做强</div>
</body>
</html>

三、外部样式表

实际开发都是外部样式表,适合于样式比较多的情况.核心是:样式单独写到CSS 文件中,之后把CSS文件引入到 HTML页面中使用

引入外部样式表分为两步:
1.新建一个后缀名为 .css 的样式文件,把所有 CSS 代码都放入此文件中。

2.在 HTML页面中,使用<link>标签引入这个文件。

使用外部样式表设定CSS,通常也被称为外链式或链接式引入,这种方式是开发中常用的方式

例如:

<!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="D:\JavaWeb\HTML\css\style.css">
</head>
<body>
    <div>十个勤天,做大做强</div>
</body>
</html>
css">div {
    color: green;
    font-size: 66px;
    font-style: italic;
}

四、总结


http://www.niftyadmin.cn/n/5681189.html

相关文章

【JavaEE初阶】深入理解wait和notify以及线程饿死的解决

前言&#xff1a; &#x1f308;上期博客&#xff1a;【JavaEE初阶】深入解析死锁的产生和避免以及内存不可见问题-CSDN博客 &#x1f525;感兴趣的小伙伴看一看小编主页&#xff1a;【JavaEE初阶】深入解析死锁的产生和避免以及内存不可见问题-CSDN博客 ⭐️小编会在后端开…

Reactor 反应堆模式

Reactor 反应堆模式 1、概念 Reactor&#xff08;反应堆&#xff09;模式是一种事件驱动的设计模式&#xff0c;通常用于处理高并发的I/O操作&#xff0c;尤其是在服务器或网络编程中。它基于事件多路复用机制&#xff0c;使得单个线程能够同时管理大量并发连接&#xff0c;而…

el-table给列加单位,表头加样式,加斑马纹

<el-table ref"table" class"dataTable" :data"detailList" :header-cell-style"tableHeaderColor" :row-class-name"tableRowClassName" highlight-current-row><el-table-column label"序号" al…

git 基本原理

文章内容来源于视频 举个案例&#xff0c;家族里面有一本记载祖传秘籍的菊花宝典&#xff0c;这本菊花宝典的正本存储在家族祠堂里面&#xff0c;每一个家庭从正本复制一本存在自己家中&#xff0c;称为副本。这个过程称为clone 一个家庭需要再菊花宝典中添加技能&#xff0c…

Django 配置邮箱服务,实现发送信息到指定邮箱

一、这里以qq邮箱为例&#xff0c;打开qq邮箱的SMTP服务 二、django项目目录设置setting.py 文件 setting.py 添加如下内容&#xff1a; # 发送邮件相关配置 EMAIL_BACKEND django.core.mail.backends.smtp.EmailBackend EMAIL_USE_TLS True EMAIL_HOST smtp.qq.com EMAIL…

Vue 技术入门 day1 模版语法、数据绑定、事件处理、计算属性与监视、class和style绑定、条件渲染v-if/v-show、列表渲染v-for

目录 1.Vue 核心 1.1. Vue 简介 1.1.1 介绍与描述 1.1.2 Vue 的特点 1.2 模板语法 1.2.1 模板的分类 1.2.2 插值语法 1.2.3 指令语法 1.2.4 实例 1.3 数据绑定 1.3.1 单向数据绑定 1.3.2 双向数据绑定 1.3.3 MVVM 模型 1.3.4 data与el的2种写法 1.3.5 实例 1.3.…

HTML基础用法介绍一

VS code 如何快速生成HTML骨架注释是什么&#xff1f;为什么要写注释&#xff1f;注释的标签是什么&#xff1f;标题标签段落标签换行标签与水平线标签 (都是单标签&#xff09;文本格式化标签图片标签超链接标签音频标签视频标签 &#x1f698;正片开始 VS code 如何快速生成…

Paddlets时间序列集成模型回测实战:MLPRegressor、NHiTSModel与RNNBlockRegressor

好的,我们继续深入理解代码的每个部分。以下是每个主要模块的详细解释: 1. 导入模块和库 import json import os import glob import pandas as pd from tqdm import tqdm from paddlets.datasets import TSDataset from paddlets.transform import StandardScaler from pa…