CSS基础语法

CSS

标签选择器

内嵌式改变标签样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
        <!-- 属于标签选择器 -->
		<style>
			p{
				font - size: 16px;
				color: red;
			}
		</style>
	</head>
	<body>
		<p>
			nihao
		</p>
		
	</body>
</html>

外嵌式

.css文件

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

.html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 导入外部样式表  使用link标签关联两个文件-->
		<link href = "css/index.css" rel = "stylesheet"/>s
	</head>
	<body>
		<p>
			nihao
		</p>
		
	</body>
</html>

id选择器

**在标签中使用 id = [id名称] 命名,在< style>< /style>中对[id名称]进行修饰.语法

  • #id_name{

}

类选择器

在标签中使用 class = [class名称],在< style>< /style>中对[id名称]进行修饰

  • 语法

    .class_name{

}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 导入外部样式表 -->
		<!-- <link href = "css/index.css" rel = "stylesheet"/> -->
		
		<style>
			/* 标签选择器 */
			p{
				font - size: 16px;
				color: red;
			}
			/* id选择器 */
			#id1{
				font - size: 16px;
				color: red;
			}
			/* 类选择器 */
            
			.p1{
				color: blue;
			}
			/* 选择器优先级   id > 类 > 标签选择器*/
			/* 通配选择器  可以选中所有的标签 */
			*{
				font-family:楷体;
			}
			#id2,.p2{
				color: yellow;
			}
			
		</style>
		
	</head>
	<body>
		<p id = "id1">
			nihao
		</p>
		<p class = "p1">
			你好
		</p>
		<p id = "id2">
			666
		</p>
		<p class = "p2">
			777
		</p>
		
	</body>
</html>

id选择器与类选择器的区别

  • ID 选择器的是以井号 # 开头来定义的。而类选择器是以点 . 来定义的。
  • ID 选择器在 HTML 中是可以通过 id 属性来使用。而类选择器是通过 class 属性来使用的。
  • 同一个页面中一个ID选择器只能在中出现一次，是唯一的。而类选择器可以在多次出现，所以ID选择器的针对性更强。

后代选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Nine Percent</title>
		<style>
			.b1{
				background-image: url("img/cxk.png");
			}
			/* 后代选择器 */
			.u1 li{
				list-style-type: none;
				list-style-image: url("img/basketball.png");
				list-style-position: inside;
				color: blue;
				font-size: 200px;
				font-family: 方正舒体;
			}
			.li1{
				
			}
		</style>
	</head>
	<body class = "b1">
		<ul class = "u1">
			<li class = "li1">蔡徐坤</li>
			<li>陈立农</li>
			<li>范丞丞</li>
			<li>黄明昊</li>
			<li>林彦俊</li>
			<li>朱正廷</li>
			<li>王子异</li>
			<li>王琳凯</li>
			<li>尤长靖</li>
			<li>Nine Percent</li>
		</ul>
	</body>
</html>

文本修饰

  • color : 字体颜色
  • font-size: 字体像素大小 (px)
  • font-family:字体
  • font-weight:700;
  • font-style:italic(斜体)
  • text-decoration: line-through; 删除线
  • ~ : underline; 下滑线
  • line-height:文字行高(px)
  • letter-spacing: 字符的宽度(px)
  • word-spacing:单词之间的宽度(px)
  • text-indent: 文段的缩进(px/em)(em:表示当前一个文字的大小)
  • text-align: left; /* 添加此行以设置文本左对齐 */

背景修饰

  • background-image:url(“图片;链接”);背景图片
  • background-color:背景颜色
  • background-repeat:背景重复 no-repeat(不重复)
  • background-size:背景尺寸(px,px)
  • background-position: 背景位置

列表修饰

  • color:颜色
  • list-style-type: none(无序列号);
  • list-style-imag:url(“图片链接”);
  • list-style-position:inside(图片位置);
    • 以上都可以简写为list-style: [];

​

CSS 伪类

  • **[标签] : hover{}**鼠标放在[标签]的事件

要实现当鼠标悬停在.lead_text元素上时改变.floor元素的颜色，

​ 您可以使用CSS中的兄弟选择器（sibling selector）。通过这种方式，您可以选择.lead_text元素的兄弟元素（即.floor元素），并在.lead_text元素悬停时应用新的样式。

以下是如何修改您提供的CSS代码来实现这一效果：

.floor {
    width: 100px;
    height: 44px;
    background-color: white;
    position: absolute;
    top: 0px;
    z-index: 0;
}

.lead_text:hover + .floor {
    background-color: red;
}

在上面的代码中，使用了兄弟选择器+来选择.lead_text元素的紧邻兄弟元素.floor。当鼠标悬停在.lead_text元素上时，会选择紧邻的.floor元素，并将其背景颜色设置为红色。

通过应用上述CSS样式，您可以实现当鼠标悬停在.lead_text元素上时改变.floor元素的背景颜色的效果。您可以根据需要调整颜色和其他样式。

  • **[标签] : active{}**鼠标点击发生事件

  • [标签] : focus{} 想拥有鼠标点击的标签(输入框)添加样式

块级标签

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

行级标签

行级标签:只占自身大小,不会占一行,设置宽高无效

行级块

不占一行,可以设置长宽高

display.

盒模型

  • 内容区(content)
  • 内边距(padding)
  • 边框(border)
  • 外边框(margin)
  • 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

文档流

  • 文档流指的是文档中的标签在排列时所占用的位置。 将窗体自上而下分 成一行行 ，并在每行中按从左至右的顺序排放标签，即为文档流。

  • 在文档流`中标签默认会紧贴到上一个标签的右边，如果右边不 足以放下标签，标签则会另起一行，在新的一行中继 续从左至右摆放。

  • 这样一来每一个块标签都会另起一行，那么我们如果想在文档 流中进行 布局就会变得比较麻烦

比如:每个块元素都会另起一行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.nav_box{
				width: 600px;
				margin: 0px auto;
			}
			.nav{
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<div class = "nav_box">
			<div class = "nav">网站首页</div>
			<div class = "nav">产品案例</div>
			<div class = "nav">公司介绍</div>
			<div class = "nav">联系我们</div>
		</div>
	</body>
</html>

image-20240309144520413

为了解决这种问题,我们可以使用css的浮动属性

浮动

float

transform

CSS的transform属性允许你对元素进行2D或3D转换。它包含了一系列函数，如旋转、缩放、倾斜和移动，可以用来改变元素的形状和位置。

2D转换函数

  1. translate()：移动元素。
css复制代码

transform: translate(50px, 100px);
  1. scale()：缩放元素。
css复制代码

transform: scale(2, 0.5); /* 宽放大2倍，高缩小到一半 */
  1. rotate()：旋转元素。
css复制代码

transform: rotate(45deg); /* 旋转45度 */
  1. skew()：倾斜元素。
css复制代码

transform: skew(30deg, 20deg); /* X轴倾斜30度，Y轴倾斜20度 */
  1. matrix()：定义一个2D转换，使用六个值的矩阵。

3D转换函数

  1. translate3d()：在3D空间中移动元素。
css复制代码

transform: translate3d(50px, 100px, 200px);
  1. scale3d()：在3D空间中缩放元素。
css复制代码

transform: scale3d(2, 0.5, 1);
  1. rotate3d()：在3D空间中旋转元素。
css复制代码

transform: rotate3d(1, 0, 0, 45deg); /* 绕X轴旋转45度 */
  1. rotateX()**，rotateY()，rotateZ()：分别绕X轴、Y轴和Z轴旋转元素。
css复制代码

transform: rotateX(45deg);
  1. perspective()：为3D转换元素定义透视视图。
  2. matrix3d()：定义一个3D转换，使用16个值的4x4矩阵。

用法

你可以将多个转换函数结合使用，只需用空格分隔即可。例如：

css复制代码

transform: translate(50px, 100px) rotate(45deg) scale(2);

在上面的例子中，元素首先会移动，然后旋转，最后缩放。

注意：转换的顺序很重要，因为它们是按照你指定的顺序连续应用的。例如，先旋转后移动与先移动后旋转的效果是不同的。

另外，transform-origin属性可以用来改变转换的原点。默认的原点是元素的中心（50% 50%）。例如：

css复制代码

transform-origin: top left;

这将把转换的原点设置为元素的左上角。

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

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

相关文章

Git学习路线

Git学习路线

1.看书 把这本书看懂就可以了&#xff1b;这个是比较专业的一本书&#xff1b;比较系统&#xff1b;没有书的可以私信我 2.理解Git多个分区和多个分支 多个分区包括&#xff1a;工作区、暂存区、本地仓、本地的远端仓信息、远端仓 多个分区的状态 分支及其变化 3.记住常用命令…
阅读更多...
国产麒麟系统下打包electron+vue项目（AppImage、deb）

国产麒麟系统下打包electron+vue项目（AppImage、deb）

需要用到的一些依赖包、安装包以及更详细的打包方法word以及麒麟官网给出的文档都已放网盘&#xff0c;链接在文章最后&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&a…
阅读更多...
与 Apollo 共创生态：Apollo 七周年大会给带来的震撼

与 Apollo 共创生态：Apollo 七周年大会给带来的震撼

文章目录 一、七年蛰伏&#xff0c;Apollo 迎来“智变”时刻二、Apollo 企业生态计划与开放平台2.1 Apollo X 企业自动驾驶解决方案2.2 Apollo 开放平台携手伙伴共创生态 三、个人感悟 一、七年蛰伏&#xff0c;Apollo 迎来“智变”时刻 让我们把时间倒回到 2013 年&#xff0…
阅读更多...
Java设计模式 _创建型模式_原型模式(Cloneable)

Java设计模式 _创建型模式_原型模式(Cloneable)

一、原型模式 1、原型模式&#xff08;Prototype Pattern&#xff09;是用于创建重复的对象&#xff0c;同时又能保证性能比较好。一般对付出较大代价获取到的实体对象进行克隆操作&#xff0c;可以提升性能。 2、实现思路&#xff1a; &#xff08;1&#xff09;、需要克隆的…
阅读更多...
微服务之分布式理论概述

微服务之分布式理论概述

一、分布式技术相关的理论 CAP理论 CAP定理(CAP theorem)&#xff0c;⼜被称作布鲁尔定理(Eric Brewer)&#xff0c;1998年第⼀次提出. 最初提出是指分布式数据存储不可能同时提供以下三种保证中的两种以上: (1) ⼀致性(Consistency): 每次读取收到的信息都是最新的; (2) …
阅读更多...
【STM32F407+CUBEMX+FreeRTOS+lwIP之TCP记录】

【STM32F407+CUBEMX+FreeRTOS+lwIP之TCP记录】

STM32F407CUBEMXFreeRTOSlwIP之TCP记录 注意TCP client(socket)示例 TCP_server(socket)效果 注意 如果连接失败&#xff0c;建议关一下代理软件。 配置方面可以参考一下上一篇UDP的文章 STM32F407CUBEMXFreeRTOSlwIP之UDP记录 TCP client(socket) #define LWIP_DEMO_PORT 8…
阅读更多...
【介绍下如何使用CocoaPods】

【介绍下如何使用CocoaPods】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…
阅读更多...
chrome浏览器安装elasticsearch的head可视化插件

chrome浏览器安装elasticsearch的head可视化插件

head插件简介 elasticsearch-head被称为是弹性搜索集群的web前端&#xff0c;head插件主要是用来和elastic Cluster交互的Web前端 head插件历史 elasticsearch-head插件在0.x-2.x版本的时候是集成在elasticsearch内的&#xff0c;由elasticsearch的bin/elasticsearch-plugin…
阅读更多...
ChatGPT/GLM API使用

ChatGPT/GLM API使用

模型幻觉问题 在自然语言处理领域&#xff0c;幻觉&#xff08;Hallucination&#xff09;被定义为生成的内容与提供的源内容无关或不忠实&#xff0c;具体而言&#xff0c;是一种虚假的感知&#xff0c;但在表面上却似乎是真实的。产生背景 检索增强生成&#xff08;RAG&…
阅读更多...
LT9611UXC双端口 MIPI DSI/CSI 转 HDMI2.0，带音频

LT9611UXC双端口 MIPI DSI/CSI 转 HDMI2.0，带音频

1. 说明 LT9611UXC 是一款高性能 MIPI DSI/CSI 至 HDMI2.0 转换器。MIPI DSI/CSI 输入具有可配置的单端口或双端口&#xff0c;具有 1 个高速时钟通道和 1~4 个高速数据通道&#xff0c;工作速率最高为 2Gbps/通道&#xff0c;可支持高达 16Gbps 的总带宽。 LT9611UXC 支持突发…
阅读更多...
MemFire解决方案-物联网数据平台解决方案

MemFire解决方案-物联网数据平台解决方案

方案背景 随着各种通讯、传感技术发展&#xff0c;数据通讯成本的急剧下降&#xff0c;数以万亿计的智能设备&#xff08;智能手环、智能电表、智能手机、各种传感器设备等&#xff09;接入网络&#xff0c;并源源不断的产生海量的实时数据。这些海量数据的价值挖掘&#xff0…
阅读更多...
美国言语听力学会（ASHA）关于非处方 （OTC） 助听器的媒体声明（翻译稿）

美国言语听力学会（ASHA）关于非处方 （OTC） 助听器的媒体声明（翻译稿）

美国国会于 2021 年 4 月 13 日批准美国听力学会积极提供建议&#xff0c;并一直积极参与制定FDA关于非处方助听器销售的拟议法规。根据2017年通过的立法授权。学院积极参与帮助塑造授权立法&#xff0c;并就即将出台的条例分享了建议。 根据美国卫生与公众服务部NIH / NIDCD的…
阅读更多...
软件工程的介绍

软件工程的介绍

软件工程 这一章的内容其实还是蛮多的，大概一共有10个章节，分别是下面的一些内容，但是呢，这一章的内容其实是比较偏向文科类的，也就是说，记忆的内容其实占有很大的篇幅，在该考试科目当中呢，其实也是主要影响上午题部分的选择题的考察，基本的分值呢，在10分左右，分值占…
阅读更多...
采购数据分析驾驶舱分享，照着它抄作业

采购数据分析驾驶舱分享，照着它抄作业

今天我们来看一张采购管理驾驶舱。这是一张充分运用了多种数据可视化图表、智能分析功能&#xff0c;从物料和供应商的角度全面分析采购情况的BI数据可视化报表&#xff0c;主要分为三个部分&#xff0c;接下来就分部分来了解一下。 第一部分&#xff1a;关键指标计算及颜色预…
阅读更多...
【linux高性能服务器编程】项目实战——仿QQ聊天程序源码剖析

【linux高性能服务器编程】项目实战——仿QQ聊天程序源码剖析

hello &#xff01;大家好呀&#xff01; 欢迎大家来到我的Linux高性能服务器编程系列之项目实战——仿QQ聊天程序源码剖析&#xff0c;在这篇文章中&#xff0c;你将会学习到如何利用Linux网络编程技术来实现一个简单的聊天程序&#xff0c;并且我会给出源码进行剖析&#xff…
阅读更多...
goroutinue和channel

goroutinue和channel

goroutinue和channel 需求传统方式实现goroutinue进程和线程说明并发和并行go协程和go主线程MPG设置Go运行的cpu数 channel(管道)-看个需求使用互斥锁、写锁channel 实现 使用select可以解决从管道取数据的阻塞问题&#xff08;无需手动关闭channel了&#xff09;goroutinue中使…
阅读更多...
【网络原理】TCP协议的连接管理机制（三次握手和四次挥手）

【网络原理】TCP协议的连接管理机制（三次握手和四次挥手）

系列文章目录 【网络通信基础】网络中的常见基本概念 【网络编程】网络编程中的基本概念及Java实现UDP、TCP客户端服务器程序&#xff08;万字博文&#xff09; 【网络原理】UDP协议的报文结构 及 校验和字段的错误检测机制&#xff08;CRC算法、MD5算法&#xff09; 【网络…
阅读更多...
SkyWalking 自定义Span并接入告警

SkyWalking 自定义Span并接入告警

图容易被CSDN吞掉&#xff0c;我在掘金也发了&#xff1a;https://juejin.cn/post/7361821913398837248 我就是这么膨胀 最近在做 OpenAI API 套壳&#xff0c;当我使用 okhttp-sse 这个库进行流式内容转发的时候&#xff0c;我发现有些回调方法 SkyWalking 不能抓取到。这就…
阅读更多...
JS面试题汇总（十）

JS面试题汇总（十）

JavaScript 的数据对象有那些属性值&#xff1f; writable&#xff1a;这个属性的值是否可以改。 configurable&#xff1a;这个属性的配置是否可以删除&#xff0c;修改。 enumerable&#xff1a;这个属性是否能在 for…in 循环中遍历出来或在 Object. keys 中列举出来。 …
阅读更多...
小程序评分/关键词/UV优化助力小程序登顶

小程序评分/关键词/UV优化助力小程序登顶

随着小程序市场的日益繁荣&#xff0c;小程序搜索排名优化成为了众多开发者关注的焦点。小程序搜索排名被很多因素影响着&#xff0c;关键词、评分还有uv&#xff08;授权&#xff09;等。在本文小柚和各位老板分享如何有效优化小程序搜索排名的经验。 一、关键词策略 关键词是…
阅读更多...
最新文章

Copyright @ 2022~2023