web前端css基本内容

web前端css

当我们用html的语法给内容规划布局样式时,可能会出现许多个相似的内容需要运用同一种样式,复制粘贴太麻烦而且如果后期要改动的话比如把许多个地方从红色改成蓝色,就需要一个一个改了,这时候就需要引入css来操作了

把需要添加的属性放在style标签中就好了

行内样式表:
<!--px 像素单位行内样式表:直接写在标签中
-->
<p style="color: red;font-size: 20px;font-weight: bold;">末日铁拳</p>
内嵌样式表:
<style>p{font-size:16px;color:red;}
</style>
外部样式表:
<link href="css/index.css" rel="stylesheet">

用来连接外部css,然后在外部css中改样式

外部css:

p{color: red;font-size: 50px;
}

选择器:

根据不同选择器类型给不同类型的内容更改样式

标签选择器:

p{color:red;font-size:20px;
}

id选择器:

#title{color:red;font-size:20px;
}

类选择器:

.p1{color:blueviolet;
}
.p2{color:blue;
}

通配选择器 选中所有的标签

*{font-family: 楷体;color: red;font-size: 30px;
}

选择器组合 可以为多个选择器定义相同的样式表

#title,.p1,.p2,h1{font-family: 楷体;}
字体的各种属性:
				color:red;font-size: 20px;	/*字大小*/font-family: 楷体;	/*全部字体格式*/font-weight: 900;	/*字体加重*/font-style: italic;	/*字体,斜体*/text-align: right;	/*靠右对齐   align:对齐*/text-decoration: line-through;	/*删除线*/text-decoration: underline;		/*下划线*/line-height: 20px;		/*行高*/letter-spacing: 30px;	/*字符间距*/word-spacing: 40px;		/*单词间距*/text-indent: 2em;	/*首行缩进 em相当于当前文档中一个字符的大小*/

如果想要去除超链接的下划线可以:

a{text-decoration: none;
}
背景图片:
			p{color: red;background-color: aliceblue;	/*背景颜色*/width: 800px;height: 600px;background-image: url(./img/图片.png);	/*背景图片*/background-repeat: no-repeat;	/*控制背景图片是否重复*/background-position: center center;		/*背景位置*/background-size: 400px 400px;	/*背景尺寸*/}
列表:

如果有两个列表,想把列表的内容样式进行修改,只改一个列表的话,把两个列表的li分别加上class名再进行修改很麻烦,直接给ul加上class名然后对u1,u2进行修改:

			.u1 li{text-align: center;color: red;list-style-type: none;	/*去除默认的图标*/list-style-image:url(./img/wemeet%20image_20240302144312961.png) ;		/*指定一个图片当图标*/list-style-position: inside;	/*图标位置*//* 直接用list-style把三种属性都可以写上 */list-style: none url(图片.png) inside; }<ul class="u1"><li>列表</li><li>列表</li><li>列表</li><li>列表</li></ul><ul class="u2"><li>列表</li><li>列表</li><li>列表</li><li>列表</li></ul>
伪类:

CSS伪类专门用来表示标签的一种的特殊的状态,当我们需要为处在这些特殊状 态的标签设置样式时,就可以使用伪类 。

			/*鼠标移到标签上时,自动切换到样式表*/a:hover{color:green;text-decoration: underline;}p:hover{color: blue;background-color: #008000;}/* 当鼠标点击标签时,自动切换到样式表*/a:active{color: aqua;}input:active{background-color: #FF0000;}/* 向拥有鼠标焦点的标签(输入框)	添加样式 */i1:focus{background-color: aqua;}
透明度:
img{opacity: 1;	/*设置标签透明度 0完全透明 1完全不透明*/
}

标签:

块级标签:

无论内容多少,都会独占一行,一般用来进行网页布局
可以设置宽高width height
例如


    1. 等。

行级标签:

只占自身大小,不会占一行
设置宽高无效
主要用来对文字修饰
例如、、等。

行块级标签:

不占一行,可以设置宽高
例如 等

display:
		<!-- 设置块级标签为行级标签--><p style="display: inline;">艾兴瓦尔德</p><!--设置行级标签为块级标签--><b style="display: block;">里阿尔托</b><!--设置标签隐藏--><img src="图片" style="display: none;" >
div&span:

p h1这些标签虽然是块级标签,但是它们都有默认样式,会影响网页布局使用
div标签是一个块级标签,没有任何的附加样式,用来进行网页布局,给什么属性就变成什么样子
span和div同理但是是一个行级标签

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

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

相关文章

java-使用jacob删除指定文件夹的邮件

总结见文章最后,具体代码如下: ActiveXComponent outlook = new ActiveXComponent("Outlook.Application");Dispatch myNamespace = Dispatch.call(outlook, "GetNamespace", "MAPI").toDispatch();//指定搜索特定的文件Dispatch allFolders =…

我耀学IT—day05-Bootstrap下拉菜单与导航

一、Bootstrap5 下拉菜单 下拉菜单是可切换的&#xff0c;是以列表格式显示链接的上下文菜单。 例&#xff1a; <div class"dropdown"><button type"button" class"btn btn-primary dropdown-toggle" data-bs-toggle"dropdown&…

U盘弹出提示“该设备正在使用中”:原因与解决方案

在日常使用U盘时&#xff0c;我们可能会遇到一个问题&#xff1a;当尝试安全弹出U盘时&#xff0c;系统提示“该设备正在使用中”。这种情况可能会让用户感到困惑&#xff0c;担心数据是否安全或是否会导致U盘损坏。本文旨在探讨这一现象背后的原因&#xff0c;并提供相应的解决…

【前端素材】推荐优质后台管理系统网页Stisla平台模板(附源码)

一、需求分析 1、系统定义 后台管理系统是一种用于管理和控制网站、应用程序或系统的管理界面。它通常被设计用来让网站或应用程序的管理员或运营人员管理内容、用户、数据以及其他相关功能。后台管理系统是一种用于管理网站、应用程序或系统的工具&#xff0c;通常由管理员使…

铅冶炼作业VR虚拟现实互动培训平台降低实操风险

在钢铁工业中&#xff0c;焦炉作业是一个关键的环节&#xff0c;也是一项技术要求高、操作复杂的任务。传统焦炉作业的培训通常需要在实际的焦炉上进行&#xff0c;这不仅对学员的身体素质和心理素质提出了较高的要求&#xff0c;而且也存在一定的安全风险。基于VR虚拟现实制作…

React富文本编辑器开发(三)

现在我们的编辑器显示的内容很单一&#xff0c;这自然不是我们的目标&#xff0c;让呈现的内容多元化是我们的追求。这就需要让编辑器能够接收多元素的定义。从初始数据的定义我们可以推断数据的格式远不止一种&#xff0c;那么其它类型的数据如何定义及呈现的呢&#xff0c;我…

基于单片机的AGV机器人设计的设计要求

基于单片机的AGV机器人设计的设计要求 1. 引言 本设计要求旨在设计一种基于单片机的自动导航车&#xff08;AGV&#xff09;机器人。AGV机器人可以在工厂、仓库等场景中进行自动导航、物料搬运等任务。本设计要求包括机器人的硬件设计要求和软件设计要求两个方面。 2. 硬件设…

(Aliyun AI ACP 02)阿里云人工智能产品体系

文章目录 阿里云人工智能工程师ACP认证考试知识点辅助阅读&#xff08;Aliyun AI ACP 02&#xff09;阿里云人工智能产品体系引言阿里云AI产品总体架构基础设施层&#xff1a;平台层&#xff1a;算法与模型层&#xff1a;应用层&#xff1a;组成部分详述&#xff1a;PAI产品家族…

手把手教你免费用Flashduty做消息通知

为什么需要消息通知&#xff1f; 如果有重要的情况发生&#xff0c;希望能通过各种媒介通知我们。可以举几个例子&#xff1a; 家里燃气费没有了&#xff0c;希望能有短信或者app通知api频繁500报错&#xff0c;希望及时感知&#xff0c;及时修复公司网站是https自签名证书&a…

白话大模型① :AI分析能做什么?在实际落地中会碰到什么问题?

白话大模型系列共六篇文章&#xff0c;将通俗易懂的解读大模型相关的专业术语。本文为第一篇&#xff1a;AI分析能做什么&#xff1f;在实际落地中会碰到什么问题&#xff1f; 作者&#xff1a;星环科技 人工智能产品部 我们使用一个简单的应用实例来解析人工智能分析都在做什…

若依框架使用mars3d的环境配置,地球构建

因项目需要&#xff0c;原本使用过的cesium依赖&#xff0c;现在想使用火星科技mars3d的一些功能&#xff0c;所以需要引入mars3d依赖&#xff0c;整个过程非常的坎坷&#xff0c;以至于我都不知道到底是哪些部分是标准的。。。先把我认为对的记录一下&#xff1a; 1.vue.conf…

[渗透教程]-200-网络安全基本概念

文章目录 1.0专业术语1.1资产1.2网络安全 (cyber security)1.3 网络空间 (cyberspace)1.4安全的属性1.5 安全策略1.6 威胁模型1.7 威胁模型1.8 DREAD模型1.9 OCTAVE模型1.10 国内的安全2.安全策略(Security Policy)3.安全机制(Security Mechanism)4. 安全防护模型

sqlserver保存微信Emoji表情

首先将数据库字段&#xff0c;设置类型为 nvarchar(200)一个emoji表情&#xff0c;占4字节就可以了&#xff0c;web前端展示不用改任何东西&#xff0c;直接提交数据保存&#xff1b;回显也会没有问题&#xff0c;C#代码不用做任何处理&#xff1b; 不哭不闹要睡觉&#x1f31…

【机器学习300问】24、模型评估的常见方法有哪些?

一、为什么要对模型进行评估&#xff1f; 对机器学习和神经网络的模型进行评估是至关重要的&#xff0c;原因如下&#xff1a; 得知模型的泛化能力 模型评估的主要目的是了解模型在未见过的数据上的表现&#xff0c;即其泛化能力。这是因为模型的性能在训练数据上可能会过拟合…

构建大语言模型的四个主要阶段

大规模语言模型的发展历程虽然只有短短不到五年的时间&#xff0c;但是发展速度相当惊人&#xff0c;国内外有超过百种大模型相继发布。中国人民大学赵鑫教授团队在文献按照时间线给出 2019 年至 2023 年比较有影响力并且模型参数量超过 100 亿的大规模语言模型。大规模语言模型…

LangFlow——一款可轻松实验和原型化 LangChain流水线的AI项目

LangFlow——一款可轻松实验和原型化 LangChain流水线的AI项目。 前言 在人工智能兴起的当下&#xff0c;AI正在重塑着很多行业。今天介绍的是一款近期登上github热门的一款可轻松实验和原型化 LangChain[1] 流水线的AI项目—LangFlow。 Flowise——通过拖放界面构建定制的LLM…

MCTP Control Protocol

MCTP control message用于在MCTP通信的协议中&#xff0c;来设置和初始化MCTP通信。 本文基于 SMBus/I2C 来实现 MCTP Control Protocol&#xff0c;SMBus/I2C 包格式如下&#xff1a; Management Component Transport Protocol (MCTP) SMBus/I2C Transport Binding Specific…

Flask学习笔记

不论POST请求还是GET请求都支持在 URL 中添加变量&#xff0c;可以选择性的加上一个转换器&#xff0c;为变量指定数据类型。 history_alarm.route(/test/<int:post_id>, methods[POST]) def test(post_id):print(f"参数类型为&#xff1a;{type(post_id)}")i…

VUE3中的组件传值

一、父传子(props) 在子组件中可以使用defineProps接收父组件向子组件的传值 父组件fatherPage.vue&#xff1a; <template><div class"father"><button click"a a 1">按钮</button><childPage :a"a" /><…

clickhouse的多路径存储策略

存储策略 clickhouse从19.15开始&#xff0c;MergeTree实现了自定义存储策略的功能&#xff1a; JBOD策略&#xff1a;这种策略适合服务器挂多磁盘但没做raid的场景。JBOD是一种轮询策略&#xff0c;每次执行INSERT或者MERGE&#xff0c;所以产生的新分区会轮询写入各个磁盘。…