CSS基础知识（部分）

chen43212 萌新 2026-08-03 03:50:44

一，CSS三种样式

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。在相关标签中用样式属性。样式属性可以包含任何CSS属性

<p style="color:blue;front-size:20px;">这是一个段落.</p>

背景颜色

背景色属性background_color定义一个元素的背景颜色

<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style ="background-color:green;">这是一个段落</p>
</body>

字体，字体颜色，字体大小

font-family(字体)，color(颜色)，和font-size(字体大小)属性来定义字体的样式

<h1 style="font-family:verdana;">这是一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落.</p>
<!--verdana和arial是一种字体的名字，px是像素，网页最基础长度单位—->

文本对齐方式

使用text-align（文字对齐）属性指定文本的水平与垂直对齐方式
- ```
<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这一个段落</p>
```
  内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。在head中通过style标签定义内部样式表

<head>
<style type="text/css">
body{background-color:yellow;}
p{color:blue;}
</style>
</head>

style标签用来专门包裹css样式代码；css语法：选择器{属性：值；}

将行内样式添加到head元素里，style标签中

h1{
   color:green;
   font-size:80px;
}
<!--CSS-->

丰富h1里面的文本样式
将内部样式单独存放在一个css文件当中
这个文件专门用来进行样式设计
这里的内部样式不包含style标签，只包含style标签里面的内容
css文件和修饰的html文件通过link标签链接

<link  rel="stylesheet" href="./position3.css">

外部样式表

当样式需要被应用到很多页面时，采用外部样式表，通过修改一个文件来改变整个站点的外观。
```
<head>
<link rel="stylesheet" type="text/css" href="./mystyle.css">
</head>
```
- link 链接定义资源引用地址，style定义文本样式
- rel关系 stylesheet样式；href写具体位置

二，CSS选择器

CSS 语法规范

选择器	声明块
h1	{color：green;font-size:40 px；}
	该声明块中有两个声明，声明由属性名和属性值组成，一个声明就是一个具体的样式；多个声明组成一个声明块。

只有最后一组声明的末尾分号可以省略
选择器和声明块之间需要加一个空格
”属性名：“ 和 “属性值” 之间也有一个空格，但是这个一般自动写好了

CSS代码风格

展开风格——开发时推荐，有利于维护和调试(平时)
```
h1 {
  color： red;
  font-size: 40px;
}
```
紧凑风格——项目上线时推荐，有利于减小文件体积
```
h1{color: red;font-size:40px;}
```
项目上线时，通过工具be like： webpack，将展开风格的代码变成紧凑风格的代码。

CSS基本选择器

基本选择器：
1.通配选择器
2.元素选择器
3.类选择器
4.id选择器

1.通配选择器

作用：可以选中所有的HTML元素。
语法：
```
*{
属性名： 属性值;
}
```
2. 元素选择器
作用：为页面中某种元素统一设置格式

语法：

  标签名 {
     属性名： 属性值;    
  }

ps: 元素选择器无法实现差异化设置，某一个标签的所有样式效果都是一样的。
3.类选择器
作用：根据元素的class值，来选中某些元素

类选择器中的类，就是分类的意思 class,所以class又被称为类名
语法：
```
.类名{
属性名：属性值;
}
```
注意点：
1.元素的class属性值不带".",但是CSS的类选择器需要带"."
2.class值，是我们自定义的，按照标准：不要使用纯数字，不要使用中文，尽量使用英文和数字的组合，若由多个单词组成，使用-做连接，命名尽量做到见到名字可以知道意思
3.一个元素不能写多个class属性
4.一个元素的属性值可以有多个
4.ID选择器
作用：根据元素的id属性值，来精准的选中某个元素

语法：

             *id值{
                     属性名： 属性值;
              }

注意：
- id属性值：尽量由字母，数字，下划线，短杆组成，最好以字符开头，不要包含空格，区分大小写
- 一个元素只能拥有一个id属性，不能重复
- 一个元素可以同时拥有id和class属性
  CSS复合选择器
  
  1.交集选择器
作用：选中同时符合多个条件的元素

交集有并且的含义
语法：选择器1选择器2选择器3...选择器n{}
注意：
1.有标签名，标签必须写在前面
2.id选择器，理论上可以作为交集的条件，但实际上不这么用
3.交集选择器中不可能同时出现两个元素选择器。因为一个元素，不可能既是p元素又是span元素
4.用的最多的交集选择器：元素选择器配合类名选择器。eg：p.beauty
2.并集选择器
作用：选中多个选择器对应的元素，又称：分组选择器

所谓并集就是或者的含义
语法：选择器1,选择器2,选择器3...选择器n{}
注意：
1.并集选择器，一般竖着写；
2.任何形式的选择器，都可以作为并集选择器的一部分；
3.并集选择器，通常用于集体声明，可以缩小样式表体积
```
#suxi,
.rich,
.beauty,
.dog,
.pig {
font-size: 40px;
background-color: cadetblue;
width: 180px;
}
```
后代选择器
作用：选中指定元素中，符合要求的后代元素

语法：选择器1 选择器2 选择器3....选择器n {} 先写祖先，再写后代

选择器之间，用空格隔开，空格可以理解成“...中的”，其实在这里就是后代的意思，选择器12345..n可以任意类型选择器

ul li {
          color: blue;
      }
      /* ul中的li ul里的后代li*/
      ul li a {
          color: rgb(98, 163, 164);
      }
      ol li {
          color: rgb(182, 110, 250);
      }
      ol li a {
          color: rgb(165, 104, 104);
      }
      .subject li.front-end{
      color="blue";
      }
     // 选中类名为subject元素中的所有类名为front-end的li

注意：
1.后代选择器，最终选择的是后代，不选中祖先
2.儿子，孙子，重孙子都算是后代
3.结构一定要符合HTML嵌套要求，比如：p标签里面不能包括h1-6

子代选择器

作用:选中指定元素中，符合要求的子元素（儿子元素）。先写父，再写子

子代选择器又称为子元素选择器，子选择器
语法：选择器1>选择器2>选择器3>....选择器n{}

选择器之间用>隔开，大于号可以理解为是“XXX的子代“，即儿子的意思，选择器是任意类型的选择器
```
div>a{
color: red;
}
.person>a{
color:red;
}
```
注意：
1.子代选择器，最终选择的是子代，不是父级
2.子，孙子，重孙子，，，都是后代，子就是指儿子

兄弟选择器
相邻兄弟选择器：
- 作用：选中指定元素后的，符合条件的相邻兄弟元素
- 语法：选择器1+选择器2{}
通用兄弟选择器：
- 作用：选中指定元素后，符合条件的所有兄弟元素
- 语法：选择器1~选择器2{}

注意：这两种兄弟选择器，选择的都是下面的兄弟

div+p{ //选中div后紧紧相邻的兄弟p元素
color: red; //div紧紧挨着的p标签
}
div ~p{ //选中div后面所有的兄弟元素
color: red;
}
li+li{
color: red; // li+li=li~li;表示第一个li标签下面的所有兄弟标签--
}

属性选择器

语法：

//第一种写法：选中具有title属性的元素
[title]{
 color:red;
}
//第二种写法：选中具有title属性，且属性值为atguigu1的元素
[title="atguigu1"]{
 color:red;
}
//第三种写法：选中具有title属性，且属性值以a开头的元素
[title^="a"]{
 color:red;
}
//第四种写法：选中具有title属性，且属性值以u结尾的元素
[title$="u"]{
 color:red;
}
//第五种写法：选中具有title属性，且属性值中有u的元素
[title*="u"]{
 color:red;
}

伪类选择器

语法：

//第一种写法：选中具有title属性的元素
[title]{
 color:red;
}
//第二种写法：选中具有title属性，且属性值为atguigu1的元素
[title="atguigu1"]{
 color:red;
}
//第三种写法：选中具有title属性，且属性值以a开头的元素
[title^="a"]{
 color:red;
}
//第四种写法：选中具有title属性，且属性值以u结尾的元素
[title$="u"]{
 color:red;
}
//第五种写法：选中具有title属性，且属性值中有u的元素
[title*="u"]{
 color:red;
}

选择器优先级

简述优先级

优先级从高到低
	行内	ID选择器	类选择器	元素选择器	通配选择器

同类选择器之间遵循后来者先上原则

详述优先级

权重计算依据![[Pasted image 20260724171906.png\|327]]	例子：	结果：![[Pasted image 20260724172334.png\|173]]
		比较每一个优先级的数的大小

如果三位一样，那么按照后来者居上原则

ps:

一个比行内优先级更高的选择器

	代码
		注意，这里不是在类后面加上important，而是在颜色后面加上的important

简述和详述的本质是一样的

元素及之间的关系

父元素：直接包裹某个元素的元素，就是该元素的父元素；
子元素：被父元素直接包含的元素（儿子元素）；
祖先元素：父亲的父亲，一直往外找，都是祖先；
后代元素：儿子的儿子......一直往里找，都是后代；

兄弟元素：具有相同父元素的元素，互为兄弟元素。

<div>
 <h1> hello!</h1>
 <ul> 
     <li>前端</li>
     <li>Java</li>
     <li>大数据</li>
     <li>UI</li>
  </ul>
</div>

CSS的三大特性

1. 层叠性

概念：如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆盖）。

什么是样式冲突？——元素的同一个样式名，被设置了不同的值，产生冲突

冲突：
	![[Pasted image 20260725094224.png\|216]]	ps：内部样式和外部样式是平级的；遵循后来者先上原则

2.继承性

概念：元素会自动拥有其父元素或其祖先元素的某些样式
- 有些样式，如背景色blackground-color不能继承
规则：优先继承离得近
常见的可继承属性

text=？？ font=？？ line=？？ color....
ps: 参照MDN网站，可以查询属性是可以被继承
3. 优先级
简单聊：！important>行内样式>ID选择器>类选择器>元素选择器>* >继承的样式
详细聊：需要计算权重

计算权重时需要注意：并集选择器的每一个部分都是分开计算的

像素

像素

生活的长度单位km，m等不能代替网页中的px像素单位，网页无法识别；
cm，mm可以被识别，产生效果；微米，纳米无法识别。
但是在网页中使用cm，mm，是不够精细的，二者之间的跨度差距太大，精度不满足网页设计要求，于是产生了像素。

像素是相对单位；cm是绝对单位
像素点越小，呈现的图像越清晰细腻

颜色

表示方式	代码	tips
颜色名		这种方式用的并不多，因为很有限，并且不是很精确；具体颜色名参考MDN网站
rgb或rgba		rgb:red,green,blue;这三种是光（三个手电筒）的三原色（与颜料三原色区分）；
		（0,0,0）关灯——黑色；（255,255,255）全开到最大——白色
		rgba：a是控制透明度；eg：a=0.5意思是半透明，0是完全透明，1是完全不透明。观感上越透明越淡；0.5也可以写作.5
HEX或HEXA		两位一组，十六进制表示，表示范围0~255；本质和rgb差不多
	![[Pasted image 20260725112246.png\|142]]	当三组颜色值内部均重复时，eg：ffccdd 这时可以简写成以上形式，若添加透明度，透明度也必须是一位。
		HEXA中的A和rgba中的a类似，取值也是0~255，代表透明度；这里的字母不区分大小写
HSL或HSLA		hue：色相；用角度表示色相；写作 0 deg（deg可以省略）	![[Pasted image 20260725113119.png\|175]]
		saturation:饱和度（黑白）0%~100%（彩色）
		lightness：亮度（关灯）0%~100%（非常亮）
		a透明度：0~1

CSS列表相关属性

一

html

<ul>
<li>
<a href="???">《震惊！两男子竟然在教室做出这种事》</a>
</li>
<li>《好心态决定女人的一生》 </li>
<li>《给成功男人的五条建议》</li>
</ul>

css

ul{
  list-style-type: none;
  /*列表-格式-类型*/
  list-style-position: inside;
  /*列表-格式-位置*/
  list-style-image:url("路径");
  /*自定义列表符号*/
  list-style：decimal inside url("路径")
  /*复合属性*/
}

type，position，image，list-style这些属性可以用在ul，ol，li标签上
type 设置列表符号

属性名	属性值	对应功能
type:	none	不显示前面的表示（常用）
^	square	实心方块
^	disc	圆形
^	decimal	数字
^	lower-roman	小写罗马数字
^	upper-roman	大写罗马数字
^	lower-alpha	小写字母
^	upper-alpha	大写字母

position 设置列表符号的位置

属性名	属性值	对应功能
position:	inside	在li的里面
	ouside	在li的外面

image 自定义列表符号属性值：url(图片地址)

list-style 复合属性没有数量，顺序的要求

表格相关属性

边框属性

例

html

<caption>人员信息</caption>
<thead>
      <tr>     <!--行-->
          <th>序号</th>    <!--列-->
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>政治面貌</th>
      </tr>
</thead>
<tbody>
      <tr>
          <td>1</td>
          <td>张三</td>
          <td>18</td>
          <td>男</td>
          <td>中共党员</td>
      </tr>
      <tr>
          <td>2</td>
          <td>李四</td>
          <td>19</td>
          <td>女</td>
          <td>团员</td>
      </tr>
      <tr>
          <td>3</td>
          <td>王五</td>
          <td>20</td>
          <td>男</td>
          <td>群众</td>
      </tr>
      <tr>
          <td>4</td>
          <td>赵六</td>
          <td>21</td>
          <td>女</td>
          <td>中共党员</td>
      </tr>
</tbody>
<tfeet>
</tfeet>

css(1)

<style>
        table {
            border-width: 2px;
            /* 线的宽度 */
            border-color: aquamarine;
            /*指明线的颜色*/
            border-style: dashed;
            /*指明线的形式*/
        }
    </style>

css(2)

<style>
    table{
       border:2px green soild;
    }     
     /*表格相关*/ 
    td,th{
      border:2px orange soild;
    }
   /*单元格相关*/ 
</style>

边框相关属性（其他元素也能用）

CSS属性名	功能	属性值
border-width	边框宽度	CSS中可用的长度值
border-color	边框颜色	CSS中可用的颜色值
border-style	边框风格	none 默认值
^	^	solid 实线
^	^	dashed 虚线
^	^	dotted 点线
^	^	double 双实线
border	边框复合属性	没有数量，顺序的要求

其他属性——表格独有属性

例

css

<style>
        table {
            border: 2px green solid
            width: 500px;
            
            /*控制表格列宽*/
            table-layout: fixed;
            
            /*控制单元格间距*/
            border-spacing: 0px;
            
            /*合并相邻单元格的边框*/
            border-collapse: collapse;
            
            /*隐藏没有内容的单元格*/
            empty-cells: hide;
            
            /*设置表格标题的位置*/
            caption-side: top;
        }
        
        td,
        th {
            border: 2px orange solid;
        }
        
        .number {
            width: 50px;
        }
 </style>

表格独有属性（只有table标签才能使用）

CSS属性名	功能	属性值
table-layout	设置列宽度	auto：自动，列宽根据内容计算（默认值）
^	^	fixed：固定列宽，平均分
border-spacing	单元格间距	CSS中可用的长度值。
^	^	生效的前提：单元格边框不能合并
border-collapse	合并单元格边框	collapse：合并
^	^	separate：不合并
empty-cells	隐藏没有内容的单元格	show：显示，默认
^	^	hide：隐藏
^	^	生效前提：单元格不能合并
caption-side	设置表格标题位置	top：上面（默认值）
^	^	bottom：在表格下面

CSS背景

例

CSS

body{
  background-color: gray;
}
div{
  width:400px;
  height:400px;
  border:2px black solid;
  /*设置背景颜色，默认值是transparent*/
  background-color: transparent;
  /*设置背景图片*/
  background-image:url(图片路径)
  /*设置背景图片的重复方式*/
  background-repeat:no-repeat;
  /*控制背景图片的位置 (1)关键词写法*/
  background-position:left top;
  /*控制背景图片的位置 (2)像素值写法*/
   background-position:10px 20px; 
  /*控制背景图片的位置 (2)像素值写法*/
   background-position:300px;  /*x轴上100px*/
   
   
   /*复合属性*/
   background:skyblue url(图片路径) no-repeat 300px;
}

CSS背景属性

CSS属性名	功能	属性值
background-color	设置背景颜色	符合CSS中颜色规范的值
^	^	默认背景颜色是transparent（透明的）
background-image	设置背景图片	url（图片地址）
background-repeat	设置背景重复方式	repeat：重复，铺满整个元素，默认值
^	^	repeat-x：只在水平方向重复
^	^	repeat-y：只在垂直方向上重复
^	^	no-repeat：不重复
background-position	设置背景图位置	通过关键字设置位置：写两个值，用空格隔开（如果只写一个值，另一个方向取center）	水平：left center right
^	^		垂直：top center bottom
		通过长度指定坐标位置：以元素左上角为坐标原点，设置图片右上角的位置	两个值，分别是x坐标和y坐标（只写一个值，会被当做x坐标，y坐标取center）
background	复合属性	没有数量和顺序要求

鼠标相关

例

CSS

<style>
        div {
            width: 400px;
            height: 400px;
            background-color: aquamarine;
            cursor:move;  
        }
    </style>

HTML

<div>
        把鼠标放进来看一看
        <input type="text">
        <a href="#">百度</a>
</div>

CSS鼠标属性

CSS属性名	功能	属性值
cursor	设置鼠标光标的样式	pointer：小手
^	^	move：移动图标
^	^	text：文字选择器
^	^	crosshair：十字架
^	^	wait：等待
^	^	help：帮助

自定义鼠标图标：
cursor:url("路径").pointer;

...全文

34 回复打赏收藏转发到动态举报

写回复

用AI写文章

切换为时间正序

请发表友善的回复…

发表回复

代码下载链接： https://pan.quark.cn/s/9b9011ebc861 一款主要用于城市运动预约的工具类程序——运动场馆预约小程序，其核心服务面向20至45岁的运动爱好者群体。该程序提供前后端完整的代码实现，内容涵盖场馆最新动态、运动相关知识普及以及多种场地与设施预约功能，具体包括羽毛球场地、足球场地、篮球场地、健身房、乒乓球场地、游泳场地和网球场地的预约服务。使用者可根据自身运营状况，对提供的场馆类型进行选择性采纳或增添新的场地种类。此程序设计兼具通用性与灵活性，既可满足大型综合性文体中心的需求，也能够适配于羽毛球馆、健身房、乒乓球馆等单一类型的运动场馆。基于腾讯平台提供的技术支持，运动场馆预约小程序能够有效提升城市运动资源的预约与管理效率。

Python DenseNet121 CIFAR-10 十类图像分类在 CIFAR-10 上训练 DenseNet121 分类模型，输出混淆矩阵、history.csv 与损失曲线，数据自动下载。功能： · CIFAR-10 十类 · DenseNet121 密集连接 · 混淆矩阵 · 损失曲线 · 自动下载数据 · 打包时预跑 output/preview 压缩包含可运行源码、依赖与说明，按 README 安装后即可复现。

LED灯锁螺丝包装线.rar

全栈攻防局

社区成员

社区内容

发帖

与我相关

我的任务

前端经验分享学习高校

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

📢 社区公告：全栈攻防局开业大吉！

致各位未来的 0day 挖掘机、Prompt 魔法师以及永不秃头的码农们：

欢迎入局！👋

这里不是传统的枯燥技术论坛，而是属于我们网安 + 软开 + AI 三栖打工人的「线上基地」。

在这里，我们不搞虚头巴脑的 PPT，只聊硬核干货与踩坑实录。不管你是正在宿舍里 Debug到凌晨的早八战神，还是在实验室里守着服务器当修勾饲养员的赛博保安，只要你对技术有好奇心，这里就是你的主场。

🎮 局内生存法则（必读）

关于身份：

入局后，请在个人简介/签名中认领你的身份。例如：摸鱼侦探或退堂鼓表演艺术家。管理员（也就是局座我）会根据大家的表现，不定期发放诸如【肝帝】、【野王】等荣誉称号。
关于周报（核心任务）：

咱们局实行 “周更制”。每周日 24:00 前，请在本版块发布一篇“本周学习或技术感悟”。
- 没灵感？哪怕只是记录了一个 Bug是怎么修好的，或者分享了一份美食、一部好剧，都算数！
- 不敢发？没关系，发出来被大家怼（划掉）指正，才是进步最快的方式。
关于氛围：
- 允许合理摆烂：谁还没个状态差的时候？累了就说一声，大家陪你躺平。
- 禁止凡尔赛：严禁发“我也就随便考了个第一”、“我实习工资才 5000”（虽然大家都知道是假的，但还是想打人）。
- 友善交流：无论是红队蓝队的互怼，还是代码风格之争，对事不对人，骂代码不骂人。

🚀 本周行动指令

既然建好了局，那就立个 Flag：

请各位特工（Agent），发布你的第一篇入局帖。

内容可以是自我介绍 + 最近在学啥 + 一个你觉得好用的工具推荐。

最后，记住我们的局训：

代码要跑，防线要牢，模型要飘。

只要我 Bug 够多，别人就追不上我！

冲！🚀

全栈攻防局 · 局座

试试用AI创作助手写篇文章吧

+ 用AI写文章

CSS基础知识（部分）

一，CSS三种样式

内联样式

背景颜色

字体，字体颜色，字体大小

文本对齐方式

内部样式表

将行内样式添加到head元素里，style标签中

将内部样式单独存放在一个css文件当中

外部样式表

二，CSS选择器

CSS 语法规范

CSS代码风格

CSS基本选择器

1.通配选择器

2. 元素选择器

3.类选择器

4.ID选择器

CSS复合选择器

1.交集选择器

2.并集选择器

后代选择器