web前端开发网页--css样式的使用

1、css层叠性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css层叠性</title>
		<style type="text/css">
			p{
				font-size: 12px;
				font-family: "微软雅黑";
			}
			.special{
				font-size: 24px;
			}
			#one{
				color: red;
			}
		</style>
	</head>
	<body>
		<p class="special" id="one">知识改变命运</p>
		<p>知识改变命运</p>
		<p>知识改变命运</p>
	</body>
</html>

2、css优先性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css优先性</title>
		<style type="text/css">
			p{
				color: green;
			}
			.blue{
				color: blue;
			}
			#p1{
				color: red;
			}
		</style>
	</head>
	<body>
		<p id="p1" class="blue">我显示什么颜色呢？</p>
	</body>
</html>

3、ID选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ID选择器</title>
		<style type="text/css">
			#p1{
				color: red;
				font-size:18px;
			}
			#p2{
				color:green;
				font-size:24px;
			}
		</style>
	</head>
	<body>
		<p id="p1">有梦想谁都了不起</p>
		<p id="p2">有勇气就会有奇迹</p>
	</body>
</html>

4、text-overflow属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>text-overflow属性</title>
		<style type="text/css">
			p{
				width: 400px;   /*设置元素宽度*/
				height: 100px;   /*设置元素高度*/
				border: 1px solid #000;/*设置元素边框*/
				white-space: nowrap;/*设置元素文本不能换行*/
				overflow: hidden;/*将溢出内容隐藏*/
				text-overflow: ellipsis;/*用省略标记表示溢出文本*/
			}
		</style>
	</head>
	<body>
		<p>我如果爱你——绝不像攀援的凌霄花，借你的高枝炫耀自己；我如果爱你——绝不学痴情的鸟儿，
			为绿茵重复单调的歌曲</p>
	</body>
</html>

5、text-shadow属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>text-shadow属性</title>
		<style type="text/css">
			p{
				font-family: "微软雅黑";
				font-size: 24px;
			}
			.yy1{
				text-shadow: 3px 3px 3px #666;/*给文字添加阴影，阴影在文字的右下方*/
			}
			.yy2{
				text-shadow:-3px -3px 3px #666;/*给文字添加阴影，阴影在文字的左上方*/
			}
		</style>
	</head>
	<body>
		<p class="yy1">昨夜星辰昨夜雨，画楼西畔桂堂东。</p>
		<p class="yy2">身无彩凤双飞翼，心有灵犀一点通。</p>
	</body>
</html>

6、并集选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>并集选择器</title>
		<style type="text/css">
			h1,h2,p{
				font-size: 24px;
				color:blue;
			}
		</style>
	</head>
	<body>
		<h1>这是一级标题</h1>
		<h2>这是二级标题</h2>
		<p>这是段落文本</p>
		<p>这是段落文本</p>
		<p>这是段落文本</p>
	</body>
</html>

7、服务器字体

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			@font-face{
				font-family: FZJZJW;  /*由开发者定义的服务器字体名称*/
				src: url(font/FZJZJW.TTF); /*字体文件的来源*/   
			}
			p{
				font-family: FZJZJW;        /*设置字体为服务器字体*/
				font-size: 24px;
			}
		</style>
	</head>
	<body>
		<p>如果你曾歌颂黎明，那么也请你拥抱黑暗。</p>
	</body>
</html>

8、后代选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>后代选择器</title>
		<style type="text/css">
			p strong{               /*后代选择器*/
				font-size: 24px;
				color: red;
			}
			strong{
				color: blue;
			}
		</style>
	</head>
	<body>
		<p>这是段落文本。段落文本包含<strong>红色的文字</strong></p>
		<strong>这是其他文本</strong>
	</body>
</html>

9、交集选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>交集选择器</title>
		<style type="text/css">
			p{
				color: red;
			}
			.special{
				color: green;
			}
			p.special{                /*交集选择器*/
				font-size:40px;
			}
		</style>
	</head>
	<body>
		<p>这是段落文本</p>
		<h2>这是二级标题</h2>
		<p class="special">这是段落文本</p>
		<h2 class="special">这是二级标题</h2>
	</body>
</html>

10、类选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>类选择器</title>
		<style type="text/css">
			.text{
				font-size: 16px;
				color:#00F;
				font-family: "微软雅黑";  /*设置字体*/
				font-weight: normal; /*设置文本不加粗*/
			}
		</style>
	</head>
	<body>
		<h2 class="text">这是二级标题</h2>
		<p class="text">这是段落标记</p>
		<p>这是段落文本</p>
	</body>
</html>

11、内部样式表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>内部样式表</title>
		<style type="text/css">
			h1{text-align: center;color:#F00;}
			p{font-size: 16px;color:#333;}
		</style>
	</head>
	<body>
		<h1 style="text-align: center;color:#F00">学院简介</h1>
		<p>学院是省人民政府批准设立、教育部备案的省属公办的全日志普通高中。学院秉持“以服务发展为宗旨
		、以促进就业为导向”的办学方针，遵循“以人为本，德技双馨，产教融合，服务社会，以建设有特色高水平
		的高职院校”为目标，建设了开放创新的强效模式，积累了优秀的教育资源，形成了良好的育人环境。学校
		的管理水平教育质量、办学特色得到社会各界的广泛肯定。</p>
	</body>
</html>

12、链接外部样式表

h1{
	text-align: center;
	color: #F00;
	}
p{
	font-size: 16px;
	color: #333;
	text-indent: 2em;
	}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>链接外部样式表</title>
		<link href="css/style.css" rel="stylesheet" type="text/css">
	</head>
	<body>
		<h1>学院简介</h1>
		<p>学院是省人民政府批准设立、教育部备案的省属公办的全日志普通高中。学院秉持“以服务发展为宗旨
		、以促进就业为导向”的办学方针，遵循“以人为本，德技双馨，产教融合，服务社会，以建设有特色高水平
		的高职院校”为目标，建设了开放创新的强效模式，积累了优秀的教育资源，形成了良好的育人环境。学校
		的管理水平教育质量、办学特色得到社会各界的广泛肯定。</p>
	</body>
</html>

13、行内样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>行内样式</title>
	</head>
	<body>
		<h1 style="text-align:center;color:#F00;">未来信息学院</h1>
	</body>
</html>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

idea 通过git撤销commit但未push的操作

idea 通过git撤销commit但未push的操作

1、undo commit 适用情况&#xff1a;代码修改完了&#xff0c;已经Commit了&#xff0c;但是还未push&#xff0c;然后发现还有地方需要修改不想提交本次记录了。这时可以进行Undo Commit&#xff0c;修改后再重新Commit。注意&#xff1a;如果已经进行了Push&#xff0c;线上…
阅读更多...
『VUE』30. 生命周期的介绍（详细图文注释）

『VUE』30. 生命周期的介绍（详细图文注释）

目录 生命周期生命周期的8阶段生命周期小例子总结 欢迎关注 『VUE』 专栏&#xff0c;持续更新中 欢迎关注 『VUE』 专栏&#xff0c;持续更新中 生命周期 每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤&#xff0c;比如设置好数据侦听&#xff0c;编译模板&#xf…
阅读更多...
远程jupyter lab的配置

远程jupyter lab的配置

打开虚拟环境 conda activate test 在环境下安装ipykernel软件包&#xff0c;这个软件包允许jupyter notebookl使用特定环境的python版本。 conda install ipykernel 将该环境添加到Jupyter Notebook中 python -m ipykernel install --user --nametest --display-name&quo…
阅读更多...
C指针之舞——指针探秘之旅

C指针之舞——指针探秘之旅

❤博客主页&#xff1a;折枝寄北-CSDN博客 ❤专栏内容&#xff1a;C语言学习专栏https://blog.csdn.net/2303_80170533/category_12794764.html?spm1001.2014.3001.5482 指针基础学习 在之前的博客文章中&#xff0c;简单总结了指针的基础概念 我们知道了指针的概念&#xf…
阅读更多...
MATLAB绘制克莱因瓶

MATLAB绘制克莱因瓶

MATLAB绘制克莱因瓶 clc;close all;clear all;warning off;% clear all rand(seed, 100); randn(seed, 100); format long g;% Parameters u_range linspace(0, 2*pi, 100); v_range linspace(0, pi, 50); [U, V] meshgrid(u_range, v_range);% Parametric equations for t…
阅读更多...
Spring Cloud微服务下如何配置I8n

Spring Cloud微服务下如何配置I8n

什么是I8n 国际化&#xff08;I18n&#xff09;指的是设计和开发产品的过程&#xff0c;使得它们能够适应多种语言和文化环境&#xff0c;而不需要进行大量的代码更改。这通常涉及到创建一个基础版本的产品&#xff0c;然后通过配置和资源文件来添加对不同语言和地区的支持。 这…
阅读更多...
将分割标签数据从JSON格式转换为YOLOv8的TXT格式

将分割标签数据从JSON格式转换为YOLOv8的TXT格式

AnyLabeling是一款突破性的开源图像标注工具。 一、主要功能与特点 融合传统标注工具优点&#xff1a;AnyLabeling结合了LabelImg和Labelme等传统标注软件的优点&#xff0c;提供了多边形、矩形、圆形、线条和点等多种标注形式&#xff0c;满足不同场景的需求。强大的AI自动标…
阅读更多...
【graphics】图形绘制 C++

【graphics】图形绘制 C++

众所周知&#xff0c;周知所众&#xff0c;图形绘制对于竞赛学僧毫无用处&#xff0c;所以这个文章&#xff0c;专门对相关人员教学&#xff08;成长中的码农、高中僧、大学僧&#xff09;。 他人经验教学参考https://blog.csdn.net/qq_46107892/article/details/133386358?o…
阅读更多...
Javaweb梳理17——HTMLCSS简介

Javaweb梳理17——HTMLCSS简介

Javaweb梳理17——HTML&CSS简介 17 HTML&CSS简介17.1 HTML介绍17.2 快速入门17.3 基础标签17.3 .1 标题标签17.3.2 hr标签17.3.3 字体标签17.3.4 换行17.3.8 案例17.3.9 图片、音频、视频标签17.3.10 超链接标签17.3.11 列表标签17.3.12 表格标签17.3.11 布局标签17.3.…
阅读更多...
637. 二叉树的层平均值【 力扣(LeetCode) 】

637. 二叉树的层平均值【 力扣(LeetCode) 】

文章目录 零、原题链接一、题目描述二、测试用例三、解题思路四、参考代码 零、原题链接 637. 二叉树的层平均值 一、题目描述 给定一个非空二叉树的根节点 root , 以数组的形式返回每一层节点的平均值。与实际答案相差 10-5 以内的答案可以被接受。 二、测试用例 示例 1&a…
阅读更多...
selenium元素定位---元素点击交互异常解决方法

selenium元素定位---元素点击交互异常解决方法

&#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 1、异常原因 在编写ui自动化时&#xff0c;执行报错元素无法点击&#xff1a;ElementClickInterceptedException 具体报错&#xff1a;selenium.common.exc…
阅读更多...
ARM64环境部署EFK8.15.3收集K8S集群容器日志

ARM64环境部署EFK8.15.3收集K8S集群容器日志

环境规划 主机IP系统部署方式ES版本CPU架构用户名密码192.168.1.225Ubuntu 22.04.4 LTSdockerelasticsearch:8.15.3ARM64elasticllodyi4TMmZD ES集群部署 创建持久化目录(所有节点) mkdir -p /data/es/{data,certs,logs,plugins} mkdir -p /data/es/certs/{ca,es01}服务器…
阅读更多...
搭建MC服务器

搭建MC服务器

局域网中玩MC&#xff0c;直接自己创建房间开启局域网就可以了。如果想开一个24小时不关机的服务器呢&#xff1f;其实最开始我是想在windows云服务器&#xff0c;图形化界面运行一个开启局域网即可。可能是云服务器上没有显卡&#xff0c;还是其他什么原因&#xff0c;游戏打开…
阅读更多...
数据结构-二叉搜索树（Java语言）

数据结构-二叉搜索树（Java语言）

目录 1.概念 2.查找search 3.插入insert ​编辑4.删除remove&#xff08;难点&#xff09; 5.性能分析 1.概念 二叉搜索树又称二叉排序树&#xff0c;它或者是一棵空树&#xff0c;或者是具有以下性质的二叉树 : 1.若它的左子树不为空&#xff0c;则左子树上所有节点的值都…
阅读更多...
时代变迁对传统机器人等方向课程的巨大撕裂

时代变迁对传统机器人等方向课程的巨大撕裂

2020年之后&#xff0c;全面转型新质课程规划&#xff0c;传统课程规划全部转为经验。 农耕-代表性生产关系-封建分配制度主要生产力-人力工业-代表性生产关系-资本分配制度工业分为机械时代&#xff0c;电气时代&#xff0c;信息时代&#xff1b;主要生产力-人力转为人脑&…
阅读更多...
【Pikachu】PHP反序列化RCE实战

【Pikachu】PHP反序列化RCE实战

痛是你活着的证明 1.PHP反序列化概述 在理解 PHP 中 serialize() 和 unserialize() 这两个函数的工作原理之前&#xff0c;我们需要先了解它们各自的功能及其潜在的安全隐患。接下来&#xff0c;我会对相关概念做更详细的扩展解释。 1. 序列化 serialize() 序列化&#xff…
阅读更多...
Stable Diffusion概要讲解

Stable Diffusion概要讲解

&#x1f33a;系列文章推荐&#x1f33a; 扩散模型系列文章正在持续的更新&#xff0c;更新节奏如下&#xff0c;先更新SD模型讲解&#xff0c;再更新相关的微调方法文章&#xff0c;敬请期待&#xff01;&#xff01;&#xff01;&#xff08;本文及其之前的文章均已更新&…
阅读更多...
免费开源！DBdoctor推出开源版系统诊断工具systool

免费开源！DBdoctor推出开源版系统诊断工具systool

​前言 在开发和运维过程中&#xff0c;经常会遇到难以定位的应用问题&#xff0c;我们通常需要借助Linux系统资源监控工具来辅助诊断。然而&#xff0c;系统的IO、网络、CPU使用率以及文件句柄等信息通常需要通过多个独立的命令工具来获取。在没有部署如Prometheus这样的综合…
阅读更多...
在openi平台 基于华为顶级深度计算平台 openmind 动手实践

在openi平台 基于华为顶级深度计算平台 openmind 动手实践

大家可能一直疑问&#xff0c;到底大模型在哪里有用。 本人从事的大模型有几个方向的业务。 基于生成式语言模型的海事航行警告结构化解析。 基于生成式语言模型的航空航行警告结构化解析。 基于生成式生物序列&#xff08;蛋白质、有机物、rna、dna、mrna&#xff09;的多模态…
阅读更多...
FPGA开发流程

FPGA开发流程

注&#xff1a;开发板&#xff1a;小梅哥的ACX720。本实验可直接运行在小梅哥的ACX720开发板上&#xff0c;后续的实验都可直接运行在小梅哥的ACX720上。 一、打开VIVADO并创建工程 1、双击VIVADO图标&#xff0c;打开vivado。 2、打开vivado界面打&#xff0c;点击有 Create …
阅读更多...
最新文章

Copyright @ 2022~2023