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;

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

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

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

相关文章

Docker从无到有

Docker从无到有

主要为windows下docker的安装与使用~ 初始Docker Docker理解 对于docker的加简介&#xff0c;我们可以官网获取它的概念&#xff0c;接下来就从什么是docker、为什么要使用docker以及它的作用来进行一个快速入门 前提&#xff1a;项目在发布时&#xff0c;不仅需要其jar包同…
阅读更多...
STM32自己从零开始实操01:原理图

STM32自己从零开始实操01:原理图

在听完老师关于 STM32 物联网项目的所有硬件课程之后&#xff0c;就是感觉自己云里雾里&#xff0c;明明课程都认真听完了&#xff0c;笔记也认真记录&#xff0c;但是就是感觉学到的知识还不是自己。 遂决定站在老师的肩膀上自己开始设计项目&#xff0c;将知识变成自己的&am…
阅读更多...
北斗引路，太阳为源，定位报警，保护渔业，安全护航！

北斗引路，太阳为源，定位报警，保护渔业，安全护航！

2022年1月&#xff0c;农业农村部发布《“十四五”全国渔业发展规划》明确提出&#xff0c;到2025年&#xff0c;渔业质量效益和竞争力明显增强&#xff0c;渔业基础设施和装备条件明显改善&#xff0c;渔业治理体系和治理能力现代化水平明显提高&#xff0c;实现产业更强、生态…
阅读更多...
记录wordpress网站搭建及当天被SEO优化收录

记录wordpress网站搭建及当天被SEO优化收录

网站是前不就前搭建的&#xff0c;但是一直没有做SEO优化&#xff0c;今天花了点时间做下优化。记录下&#xff0c;喜欢的朋友点赞收藏下。 1.wordpress后台下载插件Yoast SEO插件&#xff0c;setting中搜索XML sitemaps&#xff0c;点view the XML sitemap&#xff0c;暂时不…
阅读更多...
架构师系列- 消息中间件（12）-kafka基础

架构师系列- 消息中间件（12）-kafka基础

1、应用场景 1.1 kafka场景 Kafka最初是由LinkedIn公司采用Scala语言开发&#xff0c;基于ZooKeeper&#xff0c;现在已经捐献给了Apache基金会。目前Kafka已经定位为一个分布式流式处理平台&#xff0c;它以 高吞吐、可持久化、可水平扩展、支持流处理等多种特性而被广泛应用…
阅读更多...
又重新搭了个个人博客

又重新搭了个个人博客

哈喽大家好&#xff0c;我是咸鱼。 前段时间看到一个学弟写了篇用 Hexo 搭建博客的教程&#xff0c;心中沉寂已久的激情重新被点燃起来。&#xff08;以前搞过一个个人网站&#xff0c;但是因为种种原因最后不了了之&#xff09; 于是花了一天时间参考教程搭了个博客网站&…
阅读更多...
websocket爬虫

websocket爬虫

人群看板需求分析 先找到策略中心具体的数据。对应数据库中的数据 看看接口是否需要被逆向 点开消费者细分&#xff0c;可以找到人群包&#xff08;人群名称&#xff09; 点击查看透视 label字段分类: 在这里插入图片描述 预测年龄&#xff1a;tagTitle 苹果id&#x…
阅读更多...
Android Studio的button点击事件

Android Studio的button点击事件

xml添加onClick调用方法 public class MainActivity extends AppCompatActivity {// 创建系统时间的文本控件TextView systemTimeTextView;Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activit…
阅读更多...
不同技术实现鼠标滚动图片的放大缩小

不同技术实现鼠标滚动图片的放大缩小

摘要&#xff1a; 最近弄PC端的需求时&#xff0c;要求在layui技术下实现鼠标滚动图片的放大缩小的功能&#xff01;下面来总结一下不同框架剩下这功能&#xff01; layui: 看了一下layui文档&#xff0c;其实这有自带的组件的&#xff01;但是又版本要求的!并且layui的官方文档…
阅读更多...
LLaMA-Factory参数的解答（命令，单卡，预训练）

LLaMA-Factory参数的解答（命令，单卡，预训练）

前面这个写过&#xff0c;但觉得写的不是很好&#xff0c;这次是参考命令运行脚本&#xff0c;讲解各个参数含义。后续尽可能会更新&#xff0c;可以关注一下专栏&#xff01;&#xff01; *这是个人写的参数解读&#xff0c;我并非该领域的人如果那个大佬看到有参数解读不对或…
阅读更多...
2分钟自己写小游戏：使用js和css编写石头剪刀布小游戏、扫雷小游戏、五子棋小游戏。新手老手毕业论文都能用。

2分钟自己写小游戏：使用js和css编写石头剪刀布小游戏、扫雷小游戏、五子棋小游戏。新手老手毕业论文都能用。

系列文章目录 【复制就能用1】2分钟玩转轮播图,unslider的详细用法 【复制就能用2】css实现转动的大风车&#xff0c;效果很不错。 【复制就能用3】2分钟自己写小游戏&#xff1a;剪刀石头布小游戏、扫雷游戏、五子棋小游戏 【复制就能用4】2024最新智慧医疗智慧医院大数据…
阅读更多...
如何有效的将丢失的mfc140u.dll修复，几种mfc140u.dll丢失的解决方法

如何有效的将丢失的mfc140u.dll修复，几种mfc140u.dll丢失的解决方法

当你在运行某个程序或应用程序时&#xff0c;突然遭遇到mfc140u.dll丢失的错误提示&#xff0c;这可能会对你的电脑运行产生一些不利影响。但是&#xff0c;不要担心&#xff0c;以下是一套详细的mfc140u.dll丢失的解决方法。 mfc140u.dll缺失问题的详细解决步骤 步骤1&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023