CSS基础学习--4 创建式样

news2024/11/17 5:45:02

一、插入样式表的几种方法?

  1. 外部样式表
  2. 内部样式表
  3. 内联样式

二、外部样式表

使用前提:当样式需要应用于很多页面时,外部样式表将是理想的选择。

在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在(文档的)头部(head)中

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

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

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

下面是一个样式表文件的例子:

p {
	color: #ff0000;
	font-size: 30px;
	font-weight: 600;
}

h1 {
	background-color: aqua;
	color: #ff0000;
}

body {
	background-color: aqua;
}

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS基础学习</title>

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

	</head>
	<body>

		<p>这是一个段落。</p>
		<p class="para">这是一个段落1111。</p>
		<p class="para">这是一个段落2222。</p>

	</body>
</html>

效果图:

 三、内部样式表

        当单个文档需要特殊的样式时,就应该使用内部样式表。

        你可以使用 <style> 标签在文档头部定义内部样式表,就像这样:

<style>
			.para {
				color: red;
				font-family: 'Courier New', Courier, monospace;
				font-size: 30px;
			}
		</style>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS基础学习</title>

		<style>
			.para {
				color: red;
				font-family: 'Courier New', Courier, monospace;
				font-size: 30px;
			}
		</style>

	</head>
	<body>

		<p>这是一个段落。</p>
		<p>这是一个段落1111。</p>
		<p class="para">这是一个段落2222。</p>

	</body>
</html>

效果图:

 四、内联样式

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

要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。

示例:

内联样式示例代码

<p style="color: red; font-size: 30px; font-weight: 600;">这是一个段落, 样式。</p>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS基础学习</title>

	</head>
	<body>

		<p>这是一个段落。</p>
		<p style="color: red; font-size: 30px; font-weight: 600;">这是一个段落, 样式。</p>

	</body>
</html>

效果图:

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

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

相关文章

Ognl使用总结

目录 一、简介二、快速入门三、详细使用3.0 Ognl操作3.1 基本数据类型3.2 对象类型3.3 List集合3.4 Set集合3.5 Map集合3.6 数组3.7 静态调用3.8 算术运算3.9 逻辑运算3.10 同时执行多个表达式3.11 位运算 一、简介 OGNL&#xff08;Object-Graph Navigation Language的简称&a…

开始使用chat-gpt4

目录 一、说明 二、安装步骤 三、测试效果咋样 &#xff08;1&#xff09;写代码能力 &#xff08;2&#xff09;回答问题能力 &#xff08;3&#xff09;写作能力 一、说明 参考&#xff08;非常感谢这位博主的分享&#xff09;&#xff1a;http://t.csdn.cn/qypw9 注意&…

FTP服务器项目

文章目录 1. 项目简介2. FTP协议和用到指令说明2.1 FTP协议详解2.2 指令说明 3. FTP项目的类图分析3.1 UML3.2 工厂类XFtpFactoryXFtpFactory.hXFtpFactory.cpp 2.2 XFtpTaskXFtpTask.hXFtpTask.cpp 2.3 XFtpServerCMDXFtpServerCMD.hXFtpServerCMD.cpp 4. 运行演示FileZilla的…

数字逻辑期末必刷卷(基础卷)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 &#x1f4a1;一、填空题&#xff08;每空1分&#xff0c;共20分&#xff09;&#x1f4a1;二、单项选择题&#xff08;每小题2分&#xff0c;共20分&#xff09;&a…

第七章 Linux实际操作——组管理和权限管理

第七章 Linux实际操作——组管理和权限管理 7.1 Linux组基本介绍7.2 文件、目录 所有者7.2.1 查看文件的所有者7.2.2 修改文件所有者 7.3 组的创建7.3.1 基本指令7.3.2 应用实例 7.4 文件、目录所在组7.4.1 查看文件、目录所在组7.4.2 修改文件、目录所在组 7.5 其他组7.6 权限…

观澜南林輋旧改回迁房--周边巨量旧改,未来区政府核心商圈。

项目亮点 观澜福城街道办旧改最集中的区域&#xff0c;且地铁4号的茜坑站就在门口&#xff01;未来一区域成为龙华区政府的中心地段。本项目拆迁约10万&#xff0c;主打高端商业综合体&#xff0c;项目规划27班九年一贯性学校&#xff0c;约4万多平用于建设公共设施、绿地。 …

ROS学习——通信机制(服务通信)

2.2.3 服务通信自定义srv调用A(C) Autolabor-ROS机器人入门课程《ROS理论与实践》零基础教程 068服务通信(C)3_客户端优化_Chapter2-ROS通信机制_哔哩哔哩_bilibili 一、理论模型 服务通信也是ROS中一种极其常用的通信模式&#xff0c;服务通信是基于请求响应模式的&#xf…

【Java|多线程与高并发】volatile关键字和内存可见性问题

文章目录 1.前言2. 编译器优化带来的内存可见性问题3. 使用volatile保证内存可见性5.volatile不能保证原子性以JMM的角度看待volatile总结 1.前言 synchronized和volatile都是Java多线程中很重要的关键字&#xff0c;但它们的作用和使用场景有所不同。 synchronized关键字可以…

Linux之文件打包和解压缩

任务描述 有时&#xff0c;我们会在Linux系统中将多个文件打包成一个单独的文件&#xff0c;通过本关的学习&#xff0c;我们将学会如何在Linux系统中将多个文件/目录打包生成一个文件。 本关任务&#xff1a;使用tar命令完成文件和目录的打包操作。 相关知识 tar&#xff…

验证断言(立即断言并行断言)

目录 1.何为断言 2.断言的作用&#xff1a; 3.断言的种类 3.1立即断言 3.2并发断言 4.断言层次结构 4.1 sequence 序列 4.2 property 序列 5.sequence和property的异同 6.补充知识点&#xff08;assert/cover/assume&#xff09; 7.写在后边 1.何为断言 断言主要…

网络知识点之-FTP协议

FTP协议指文件传输协议&#xff08;File Transfer Protocol&#xff0c;FTP&#xff09;&#xff0c;是用于在网络上进行文件传输的一套标准协议&#xff0c;它工作在 OSI 模型的第七层&#xff0c; TCP 模型的第四层&#xff0c; 即应用层&#xff0c; 使用 TCP 传输而不是 UD…

第一节 初识C语言

第一节 初识C语言 目录 一&#xff0e; 什么是C语言二&#xff0e; 第一个C语言程序三&#xff0e; 数据类型四&#xff0e; 变量与常量五&#xff0e; 未完待续 本章重点&#xff1a; 什么是C语言第一个C语言程序数据类型变量、常量字符串转义字符注释选择语句循环语句函数数组…

【LeetCode】每日一题 -- 1171. 从链表中删去总和值为零的连续节点 -- Java Version

题目链接&#xff1a;https://leetcode.cn/problems/remove-zero-sum-consecutive-nodes-from-linked-list/ 1. 题解&#xff08;1171. 从链表中删去总和值为零的连续节点&#xff09; 2021年字节二面真题 1.1 暴力解法&#xff1a;穷举 时间复杂度 O(n2)&#xff0c;空间复杂…

Python系列之面向对象编程

目录 一、面向对象编程 1.1 面向对象三大特征 1.2 什么是对象 二、类(class)和实例(instance) 2.1 类的构成 2.2 创建类 2.3 创建实例对象和访问属性 2.4 Python内置类属性 2.5 类属性与方法 三、类的继承 3.1 方法重写 四、多态 一、面向对象编程 1.1 面向对象三大…

抖音短视频矩阵系统-源码-系统搭建

目录 1. 短视频AI智能创作 2. 托管式账号管理: 3. 数据分析 4. 智能营销获客 开发流程 抖音账号矩阵系统开发&#xff0c;抖音账号矩阵系统源码搭建&#xff0c;抖音账号技术系统源码部署 抖音矩阵系统专注于为短视频私域运营达人或企业提供一站式赋能服务平台。具体包括智…

小议CSDN周赛57期 - 凑数

本期周赛几乎忘记参加&#xff0c;在最后几分钟的时候上来看了看。那些选择判断一通乱选&#xff0c;填空题也已经被吐槽得差不多了&#xff0c;这里不多说&#xff0c;只说我对第一道编程题的看法&#xff08;吐槽&#xff09;。因为 C 站的机制是&#xff0c;即使它错了&…

彻底理解HTTPS加密原理

目录 1.为什么需要加密&#xff1f; 2.什么是对称加密&#xff1f; 3.什么是非对称加密&#xff1f; 4.非对称加密对称加密&#xff1f; 5.数字证书 6.数字签名 相信大家对于HTTP与HTTPS的区别都有了解&#xff0c;那么对于HTTPS的加密过程你是否知道呢&#xff1f; 对称…

单片机内存管理

单片机内存管理 1、随机存储器 RAM是随机存储器&#xff0c;读写速度快&#xff0c;但掉电以后数据会丢失。它分为SRAM(静态RAM)和DRAM(动态RAM)。SRAM无需刷新就可以保存数据&#xff1b;DRAM需要不断刷新才可以保存数据。在CPU内部的RAM&#xff0c;就叫内部RAM&#xff0c…

算法模板(3):搜索(4):高等图论

高等图论 有向图的强连通分量 相关概念 强连通分量&#xff1a;Strongly Connected Component (SCC).对于一个有向图顶点的子集 S S S&#xff0c;如果在 S S S 内任取两个顶点 u u u 和 v v v&#xff0c;都能找到一条 u u u 到 v v v 的路径&#xff0c;那么称 S S…

JVM零基础到高级实战之Java程序员不可不知的对象创建底层步骤细节

JVM零基础到高级实战之Java程序员不可不知的对象创建底层步骤细节 JVM零基础到高级实战之Java程序员不可不知的对象创建底层步骤细节 文章目录 JVM零基础到高级实战之Java程序员不可不知的对象创建底层步骤细节前言Java对象创建的流程步骤包括哪些&#xff1f;总结 前言 JVM零…