• 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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    外嵌式

    .css文件

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

    • 1
    • 2
    • 3
    • 4

    .html文件

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		
		<link href = "css/index.css" rel = "stylesheet"/>s
	head>
	<body>
		<p>
			nihao
		p>
		
	body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    id选择器

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

    • #id_name{

}

      • 1
      • 2
      • 3

    类选择器

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

    • 语法

      .class_name{

}

      • 1
      • 2
      • 3
    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		
		
		
		<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>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53

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

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

    后代选择器

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Nine Percenttitle>
		<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 Percentli>
		ul>
	body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

    文本修饰

    • 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;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    在上面的代码中，使用了兄弟选择器+来选择.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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    image-20240309144520413

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

    浮动

    float

    transform

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

    2D转换函数

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

transform: translate(50px, 100px);

    • 1
    • 2
    • 3
    1. scale()：缩放元素。
    css复制代码

transform: scale(2, 0.5); /* 宽放大2倍，高缩小到一半 */

    • 1
    • 2
    • 3
    1. rotate()：旋转元素。
    css复制代码

transform: rotate(45deg); /* 旋转45度 */

    • 1
    • 2
    • 3
    1. skew()：倾斜元素。
    css复制代码

transform: skew(30deg, 20deg); /* X轴倾斜30度，Y轴倾斜20度 */

    • 1
    • 2
    • 3
    1. matrix()：定义一个2D转换，使用六个值的矩阵。

    3D转换函数

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

transform: translate3d(50px, 100px, 200px);

    • 1
    • 2
    • 3
    1. scale3d()：在3D空间中缩放元素。
    css复制代码

transform: scale3d(2, 0.5, 1);

    • 1
    • 2
    • 3
    1. rotate3d()：在3D空间中旋转元素。
    css复制代码

transform: rotate3d(1, 0, 0, 45deg); /* 绕X轴旋转45度 */

    • 1
    • 2
    • 3
    1. rotateX()**，rotateY()，rotateZ()：分别绕X轴、Y轴和Z轴旋转元素。
    css复制代码

transform: rotateX(45deg);

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

    用法

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

    css复制代码

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

    • 1
    • 2
    • 3

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

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

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

    css复制代码

transform-origin: top left;

    • 1
    • 2
    • 3

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

  • 相关阅读:
    ORACLE归档日志满，没法访问
    8.19PMP考试成绩已出！（附查询流程）
    CDH集群spark-shell执行过程分析
    直流有刷电机及Matlab/Simulink驱动仿真
    flink重温笔记（十六）： flinkSQL 顶层 API ——实时数据流结合外部系统
    ACM算法笔记(六)排序算法【上】
    2020南京icpc M 树形背包
    想要彻底搞的性能优化，得先从底层逻辑开始了解~
    【最全】linux服务器上安装Mysql
    STM32F407ZGT6|定时器中断
  • 原文地址：https://blog.csdn.net/weixin_75111785/article/details/138203784