CSS 创建

        当读到一个样式表时,浏览器会根据它来格式化 HTML 文档。


如何插入样式表

插入样式表的方法有三种:

  • 外部样式表(External style sheet)
  • 内部样式表(Internal style sheet)
  • 内联样式(Inline style)

外部样式表

        当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在(文档的)头部:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

        浏览器会从文件 mystyle.css 中读到样式声明,并根据它来格式文档。

        外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}

        不要在属性值与单位之间留有空格(如:"margin-left: 20 px" ),正确的写法是 "margin-left: 20px" 。


内部样式表

        当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表,就像这样:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式

        由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。

要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距:

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式

        如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。 

        例如,外部样式表拥有针对 h3 选择器的三个属性:

h3
{color:red;text-align:left;font-size:8pt;
}

而内部样式表拥有针对 h3 选择器的两个属性:

h3
{text-align:right;font-size:20pt;
}

        假如拥有内部样式表的这个页面同时与外部样式表链接,那么 h3 得到的样式是:

color:red;
text-align:right;
font-size:20pt;

        即颜色属性将被继承于外部样式表,而文字排列(text-alignment)和字体尺寸(font-size)会被内部样式表中的规则取代。


多重样式优先级

        样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中,在 HTML 页的头元素中,或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

        一般情况下,优先级如下:

        (内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式

style.css 文件样式代码如下:

h3 {color:blue;
}

实例

<head><!-- 外部样式 style.css --><link rel="stylesheet" type="text/css" href="style.css"/><!-- 设置:h3{color:blue;} --><style type="text/css">/* 内部样式 */h3{color:green;}</style>
</head>
<body><h3>显示绿色,是内部样式</h3>
</body>

注意:如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式,实例如下:

<head><!-- 设置:h3{color:blue;} --><style type="text/css">/* 内部样式 */h3{color:green;}</style><!-- 外部样式 style.css --><link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body><h3>显示蓝色,是外部样式</h3>
</body>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/94887.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

专题一:递归【递归、搜索、回溯】

什么是递归 函数自己调用自己的情况。 为什么要用递归 主问题->子问题 子问题->子问题 宏观看待递归 不要在意细节展开图&#xff0c;把函数当成一个黑盒&#xff0c;相信这个黑盒一定能完成任务。 如何写好递归 一、汉诺塔 class Solution { public:void dfs(vec…

react项目从webpack迁移到vite的解决方案

虽然webpack是前端工程编译工具的王者&#xff0c;但是最近vite牛逼吹的震天响&#xff0c;说什么开发/生产打包速度甩webpack 100条街。不管是不是事实&#xff0c;总得尝试一下吧。 于是说干就干&#xff0c;在网上找了很多资料&#xff0c;终于搞定了&#xff0c;以下就是r…

QT4.8.7安装详细教程

QT4.8.7安装详细教程&#xff08;MinGW 4.8.2和QTCreator4.2.0&#xff09; 1.下载及安装2.配置环境 此文是在下方链接博文的基础上&#xff0c;按自己的理解整理的https://blog.csdn.net/xiaowanzi199009/article/details/104119265 1.下载及安装 这三个文件&#xff0c;顺序是…

更直观地学习 Git 命令

theme: condensed-night-purple 前言 本文参考于 Learn Git Branching 这个有趣的 Git 学习网站。 在该网站&#xff0c;可以使用 show command 命令展示所有可用命令。 你也可以直接访问网站的sandbox&#xff0c;自由发挥。 本地篇 基础篇 git commit git commit将暂…

MySQL学习笔记23

逻辑备份&#xff1a; 1、回顾什么是逻辑备份&#xff1f; 逻辑备份就是把数据库、数据表或者数据进行导出&#xff0c;导出到一个文本文件中。 2、逻辑备份工具&#xff1a; mysqldump&#xff1a;提供全库级、数据库级别以及表级别的数据备份。 mysqldumpbinlog&#xff…

苹果签名有多少种类之TF签名(TestFlight签名)是什么?优势是什么?什么场合需要应用到?

&#xff08;一&#xff09;TestFlight 能够让您&#xff1a;邀请内部和外部的测试人员为应用程序提供反馈。 跟踪应用程序在测试过程中发现的 bug 和用户体验问题。 收集 Crash 报告&#xff0c;了解应用程序在真实设备上的运行状况。 要使用 TestFlight&#xff0c;您可以按照…

[Spring] Spring5——AOP 简介

目录 一、AOP 简介 1、什么是 AOP 二、AOP 底层原理 1、动态代理原理 2、基于接口的 JDK 动态代理 3、基于继承的 CGLib 动态代理 三、底层原理实现—— JDK 动态代理 1、使用 Proxy 类的方法创建代理对象 2、JDK 动态代理示例 四、AOP 操作术语 1、连接点 2、切入…

docker安装apisix全教程包含windows和linux

docker安装apisix 一、Windows安装1、首先需要安装docker和docker compose&#xff0c;如果直接安装docker desktop&#xff0c;会自动安装docker compose。2、重新启动电脑3、访问 Docker 的下载&#xff08;[https://www.docker.com/products/docker-desktop](https://www.do…

Java类型转换和类型提升

目录 一、类型转换 1.1 自动类型转换&#xff08;隐式&#xff09; 1.1.1 int 与 long 之间 1.1.2 float 与 double 之间 1.1.3 int 与 byte 之间 1.2 强制类型转换&#xff08;显示&#xff09; 1.2.1 int 与 long 之间 1.2.2 float 与 double 之间 1.2.3 int 与 d…

Docker01基础操作

目录 1、docker 发展历史 2、Docker 概述 2.1 容器 2.2 Docker与虚拟机的区别 2.3 容器在内核中支持2种重要技术 2.4 namespace的六项隔离 2.5 Docker核心概念 2.6 安装 Docker 2.7 Docker 镜像操作 2.8 Docker 容器操作 2.9 面试题 1、docker 发展历史 https://www.…

IO学习系列之使用多进程复制同一个文件内容

实例要求&#xff1a;使用多进程复制同一个文件内容&#xff1b;实例分析&#xff1a;1.创建一个父进程和一个子进程&#xff0c;设置光标在指定文件中的偏移量&#xff0c;实现对同一个文件的复制。2.比如&#xff1a;可以指定子进程复制文件内容的前一半&#xff0c;而父进程…

nvm 管理 node版本

下载地址 https://nvm.uihtm.com/download.html 基础命令 查看所有可安装的node版本 nvm list available 查看本地已经安装的所有版本&#xff1a; nvm list 安装指定的node版本 nvm install 14.18.1 使用指定node版本 nvm use 14.18.1 卸载指定node版本 nvm uninstall …

【网络编程】UDP数据报套接字编程和TCP流套接字编程

文章目录 1. 网络编程基础1.1 为什么需要网络编程&#xff1f;1.2 网络编程是什么&#xff1f;1.3 概念 2. Socket套接字3. UDP数据报套接字编程3.1 DatagramSocket API3.2 DatagramPacket API3.3 InetSocketAddress API 4. UDP构建服务端客户端&#xff08;一发一收&#xff0…

【Java-LangChain:使用 ChatGPT API 搭建系统-10】评估(下)-当不存在一个简单的正确答案时

第十章&#xff0c;评估&#xff08;下&#xff09;-当不存在一个简单的正确答案时 在上一章中&#xff0c;了解了如何评估 LLM 模型在 有明确正确答案 的情况下的输出&#xff0c;我们可以编写一个函数来判断 LLM 输出是否正确地分类并列出产品。 然而&#xff0c;如果 LLM …

文本分词排序

文本分词 在这个代码的基础上 把英语单词作为一类汉语&#xff0c;作为一类然后列出选项 1. 大小排序 2. 小大排序 3. 不排序打印保存代码 import jieba# 输入文本&#xff0c;让我陪你聊天吧~ lines [] print("请输入多行文本&#xff0c;以\"2333.3\"结束&am…

osg实现鼠标框选

目录 1. 需求的提出 2. 具体实现 2.1. 禁止场景跟随鼠标转动 2.2. 矩形框前置绘制 3. 附加说明 3.1. 颜色设置说明 3.2.矩形框显示和隐藏的另一种实现 1. 需求的提出 有时需要在屏幕通过按住键盘上的某个键如Ctrl键且按住鼠标左键&#xff0c;拖出一个矩形&#xff0c;实现框…

ValueError: check_hostname requires server_hostname

使用jupyter 下载js2py 异常 !pip install js2py ValueError: check_hostname requires server_hostname 一开始以为是数据源问题&#xff0c;切换阿里云 还是这个异常 结果发现是开魔法导致的&#xff0c;关闭魔法即可

Redisson集群管理工具、对Redis节点的操作

一、集群管理工具 Redisson集群管理工具提供了通过程序化的方式&#xff0c;像redis-trib.rb脚本一样方便地管理Redis集群的工具。 1、 创建集群 以下范例展示了如何创建三主三从的Redis集群。 ClusterNodes clusterNodes ClusterNodes.create() .master("127.0.0.1:…

怒刷LeetCode的第23天(Java版)

目录 第一题 题目来源 题目内容 解决方法 方法一&#xff1a;贪心算法 方法二&#xff1a;动态规划 方法三&#xff1a;回溯算法 方法四&#xff1a;并查集 第二题 题目来源 题目内容 解决方法 方法一&#xff1a;排序和遍历 方法二&#xff1a;扫描线算法 方法…

【Java-LangChain:使用 ChatGPT API 搭建系统-3】评估输入-分类

第三章 评估输入-分类 在本章中&#xff0c;我们将重点讨论评估输入任务&#xff0c;这对于确保系统的质量和安全性至关重要。 对于需要处理不同情况下的许多独立指令集的任务&#xff0c;首先对查询类型进行分类&#xff0c;并以此为基础确定要使用哪些指令&#xff0c;具有…