CSS基础语法

news/2024/5/20 5:08:15

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;

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


http://www.mrgr.cn/p/08242115

相关文章

Angular创建项目

Angular创建项目

Angular创建项目 文章目录 Angular创建项目1. 创建项目1.1 直接安装1.2 跳过npm i安装 2. 运行程序 1. 创建项目 ng new 项目名称 1.1 直接安装 ng new angulardemo --同时会安装依赖包&#xff0c;执行的命令就是npm i 1.2 跳过npm i安装 ng new angulardemo --skip-inst…
阅读更多...
dotnet 8 版本与银河麒麟V10和UOS系统的 glibc 兼容性

dotnet 8 版本与银河麒麟V10和UOS系统的 glibc 兼容性

刚刚好 dotnet 8 的 glibc 版本足够旧，可以运行本文记录于 2024.04.26 如果你阅读本文时间距离本文记录时间过远，可能本文记录的信息已失效 dotnet 根据 dotnet 的 supported-os 文档记录，当前的 dotnet 8 是 8.0.4 版本，官方说明是支持 Debian 11 及以上版本 实际测试可以…
阅读更多...
从零入门区块链和比特币（第一期）

从零入门区块链和比特币（第一期）

欢迎来到我的区块链与比特币入门指南&#xff01;如果你对区块链和比特币感兴趣&#xff0c;但不知道从何开始&#xff0c;那么你来对地方了。本博客将为你提供一个简明扼要的介绍&#xff0c;帮助你了解这个领域的基础知识&#xff0c;并引导你进一步探索这个激动人心的领域。…
阅读更多...
U盘格式转换GPT格式转回DOS

U盘格式转换GPT格式转回DOS

当前格式 fdisk /dev/sdb# 在 fdisk 提示符下&#xff0c;输入以下命令删除分区&#xff1a; d # 选择要删除的分区编号&#xff08;如 1、2 等&#xff09; w开始转换 [rootnode-24 ~]# fdisk /dev/sdbWelcome to fdisk (util-linux 2.37.4). Changes will remain in memory o…
阅读更多...
RabbitMQ发布确认和消息回退(6)

RabbitMQ发布确认和消息回退(6)

概念 发布确认原理 生产者将信道设置成 confirm 模式&#xff0c;一旦信道进入 confirm 模式&#xff0c;所有在该信道上面发布的消息都将会被指派一个唯一的 ID(从 1 开始)&#xff0c;一旦消息被投递到所有匹配的队列之后&#xff0c;broker就会发送一个确认给生产者(包含消…
阅读更多...
第一个大型汽车ITU-T车载语音通话质量实验室投入使用

第一个大型汽车ITU-T车载语音通话质量实验室投入使用

中国汽车行业蓬勃发展&#xff0c;尤其是新能源汽车风起云涌&#xff0c;无论是国内还是海外需求旺盛的趋势下&#xff0c;除乘用车等紧凑型车外&#xff0c;中型汽车如MPV、小巴、小型物流车&#xff0c;大型汽车如重卡、泥头车等亦加入了手机互联、智驾的科技行列&#xff0c…
阅读更多...
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 支持突发…
阅读更多...
四：物联网ARM开发

四：物联网ARM开发

一&#xff1a;ARM体系结构概述 1&#xff1a;控制外设led灯还有一些按键这些就要用到gpio&#xff0c;采集传感器的数据需要adc进行转化数据格式&#xff0c;特殊的外设和传感器是通过特殊的协议接口去进行连接的比如一些轴传感器和主控器的连接是通过spi&#xff0c;IIC 控制…
阅读更多...
深入解析YOLOv2

深入解析YOLOv2

深入解析YOLOv2 引言 目标检测是计算机视觉中的一个核心问题&#xff0c;它旨在识别图像中所有感兴趣的目标&#xff0c;并给出它们的类别和位置。近年来&#xff0c;随着深度学习技术的发展&#xff0c;目标检测领域取得了巨大的进步。YOLO&#xff08;You Only Look Once&a…
阅读更多...
maven-idea新建和导入项目

maven-idea新建和导入项目

全局配置 新建项目 需要新建的文件夹 src/testsrc/test/javasrc/main/java 注&#xff1a;1、新建Java-class&#xff0c;输入.com.hello.hellomaven 2、快捷键psvm显示 public static void main(String[] args) {.... } package com.hello;public class hellomaven {publ…
阅读更多...
Pytorch 的实际应用 学习笔记

Pytorch 的实际应用 学习笔记

一. 模型的下载 weights为false时则为没有提前经过训练的模型&#xff0c;为true时则经过了提前训练 vgg16_false torchvision.models.vgg16(weightsFalse) vgg16_true torchvision.models.vgg16(weightsTrue) 打印 二. 模型的修改 &#xff08;1&#xff09;添加操作 …
阅读更多...
【机器学习】集成学习：强化机器学习模型与创新能的利器

【机器学习】集成学习：强化机器学习模型与创新能的利器

集成学习&#xff1a;强化机器学习模型预测性能的利器 一、集成学习的核心思想二、常用集成学习方法Bagging方法Boosting方法Stacking方法 三、集成学习代表模型与实现四、总结与展望 在大数据时代的浪潮下&#xff0c;机器学习模型的应用越来越广泛&#xff0c;而集成学习作为…
阅读更多...
AJAX——黑马头条-数据管理平台项目

AJAX——黑马头条-数据管理平台项目

1.项目介绍 功能&#xff1a; 登录和权限判断查看文章内容列表&#xff08;筛选&#xff0c;分页&#xff09;编辑文章&#xff08;数据回显&#xff09;删除文章发布文章&#xff08;图片上传&#xff0c;富文本编辑器&#xff09; 2.项目准备 技术&#xff1a; 基于Bootst…
阅读更多...
读天才与算法：人脑与AI的数学思维笔记11_算法如何思考

读天才与算法：人脑与AI的数学思维笔记11_算法如何思考

读天才与算法：人脑与AI的数学思维笔记11_算法如何思考1. 创造力 1.1. 创建一种算法，其首要任务是放弃已知的所有艺术风格，然后判断由算法自己所产生的艺术品是否具有与所有艺术风格都截然不同的特性，即真正独树一帜的艺术风格 1.2. 抗性模型同样适用于人类创造力代码的引导…
阅读更多...
考研数学｜张宇《1000题》正常用多久刷完?

考研数学｜张宇《1000题》正常用多久刷完?

考研数学1000题的刷题时间因人而异&#xff0c;主要取决于以下几个因素。 首先是个人基础&#xff0c;如果你的数学基础较好&#xff0c;对考研数学的知识点已经比较熟悉&#xff0c;刷题速度可能会更快。 其次是每天投入时间&#xff1a;你每天能够投入多少时间来刷题也会影…
阅读更多...
Hadoop伪分布式平台搭建

Hadoop伪分布式平台搭建

搭建Hadoop伪分布式环境是在单台机器上模拟完整的Hadoop分布式系统&#xff0c;使得所有的Hadoop守护进程&#xff08;如NameNode、DataNode、ResourceManager、NodeManager等&#xff09;都在同一台机器上运行。这样可以在一台机器上体验Hadoop的分布式特性&#xff0c;适合学…
阅读更多...
python使用opencv对图像的基本操作(2)

python使用opencv对图像的基本操作(2)

13.对多个像素点进行操作&#xff0c;使用数组切片方式访问 img[i,:] img[j,:] #将第j行的数值赋值给第i行 img[-2,:]或img[-2] #倒数第二行 img[:,-1] #最后一列 img[50:100,50:100] #50-100行&#xff0c;50-100列&#xff08;不包括第100行和第100列&#xff09; img[:100…
阅读更多...
防盗链在nginx中如何配置，简单演示403forbidden的效果

防盗链在nginx中如何配置，简单演示403forbidden的效果

一、使用场景&#xff1a; 资源被其他网站无端盗用 服务器压力无端增加 二、实现方法 1.valid_referers指令可以检测被访问资源从哪个地址来 2.通过referer头字段判断 3.若为空&#xff0c;报403错误 nginx的准备工作&#xff1a; 可以看 虚拟机中使用LNMP模拟跨域并结合…
阅读更多...
北京车展“第一枪”：长安汽车发布全球首款量产可变新汽车

北京车展“第一枪”：长安汽车发布全球首款量产可变新汽车

4月25日&#xff0c;万众瞩目的2024北京国际汽车展览会在中国国际展览中心如期而至。作为中国乃至全球汽车行业的盛宴&#xff0c;本次车展也吸引了无数业内人士的高度关注。 此次北京车展以“新时代 新汽车”为主题&#xff0c;汇聚了1500余家主流车企及零部件制造商&#xff…
阅读更多...
数据结构-二叉树-堆（二）

数据结构-二叉树-堆（二）

一、建堆的时间复杂度问题 1、除了向上调整建堆&#xff0c;我们还可以向下调整建堆。不能在根上直接开始向下调整。这里的条件就是左右子树必须都是大堆或者小堆。我们可以倒着往前走&#xff0c;可以从最后一个叶子开始调整。但是从叶子开始调整没有意义。所以我们可以从倒数…
阅读更多...
推荐文章

Copyright @ 2022~2023