当前位置： 首页 > news >正文

【web开发】2、css基础

news 2026/2/7 20:15:37

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

  • 一、CSS是什么？
  • 二、使用步骤
    • 2.1.css的存放位置
    • 2.2.选择器
    • 2.3.常用CSS样式介绍与示例

一、CSS是什么？

层叠样式表(英文全称：Cascading Style Sheets)不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

二、使用步骤

2.1.css的存放位置

css样式可以写
1.直接在标签上

<img  style="height:100px;width:100px;"  src="/static/img.jpg"/>

2.在head标签中写style标签

<style>.c1{color:red;}
</style>

3.文件中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>.c1 {color: red;}
</style>
<link rel="stylesheet" href="common.css"/>

static目录下Common.css 文件名称
在这里插入图片描述

2.2.选择器

1.类选择器、id选择器（只能一个）、标签选择器
在这里插入图片描述
2.属性选择器
在这里插入图片描述
3.后代选择器
在这里插入图片描述

总代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{color:red;}#c2{color:gold;}.yy li{color:pink;}input[type="text"]{border:1px solid red;}.v1[xx="456"]{color:gold;}.yy>a{color:blue;}.outer{border:1px solid red;height:400px;width:200px;padding:20px 30px 45px 50px;}</style>
</head>
<body><div class="c1">中国</div><div id="c2">广西</div><div>上海</div><ul><li>上海</li><li>北京</li><li>云南</li></ul><input type="text"><input type="password"><div class="v1" xx="123"> s</div><div class="v1" xx="456"> f</div><div class="v1" xx="999"> a</div><div class="yy"><a href="https://www.baidu.com/">百度</a><div><a href="https://www.baidu.com/">谷歌</a></div><ul><li>美国</li><li>英国</li><li>德国</li></ul><div class="outer"><div>听老师的话</div></div>
</div></body>
</html>

在这里插入图片描述
当存在多个样式和覆盖的问题时，重名会覆盖，定义时以下方为准，！Important 不会被覆盖

2.3.常用CSS样式介绍与示例

1.宽度、高度

宽度支持百分比
行内标签默认无效；
块级标签默认有效（霸道，右侧区域空白也不给占用）

<div style="width: 200px;height: 400px;"></div>
<div style="width: 100%;height: 400px;"></div>

2.块级标签和行内标签
Css样式：->display:inline-block(style包含) 使行内标签对 height 和 width 生效
两标签的转化：

<div style="display: inline;">移动</div> 
<span style="display: block;">联通</span>

3.字体和颜色

<div style="color:#000;">颜色支持RGB</div>
<div style="color:red;">颜色</div>
<div style="font-weight:800;">字体加粗</div>
<div style="font-family:rainbow-2;">下载的字体样式</div>

4.文字对齐方式

<div style="text-align: center">水平方向居中</div>
<div style="line-height: 5px;">垂直方向居中 </div>
<div style="border: 1px solid red;">边框颜色及大小 </div>

5.浮动
如果在块级标签中，加入了float属性，那么这个块级标签奖不会再占用一整行，而是自己有多大就占用多大。防止浮动字符被遮挡，其解决办法：在同级子标签的最下面添加 style=“clear: both;”

<div class="container"><div style="background-color: pink; height: 200px;width: 50px;float: right"><div class="content">111</div><div class="content">222</div><div class="content">333</div><div style="clear: both;"></div></div></div>

在这里插入图片描述
6.内边距
padding:20px 30px 45px 50px; （上右下左、顺时针）

    <style>.outer{border:1px solid red;height:400px;width: 200px;padding-top:20px;padding-left:25px;}</style>

在这里插入图片描述
7.外边距
margin-top/right /left/ bottom
margin:0 auto 居中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{margin: 0;}.c1{background-color: pink;width:988px;height:900px;margin : 0 auto;/*    居中margin*/}</style>
</head>
<body><div class="c1"></div>
</body>
</html>

在这里插入图片描述

8.消除链接下的下划线 text-decoration:none

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.sub_header a{text-decoration:none}</style>
</head>
<body><div class="sub_header" ><a href="">链接</a></div>
</body>
</html>

在这里插入图片描述
9.随鼠标变化 hover 与download

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.c1 {color:grey;/*    原始的样式*/}.c1:hover {color: red;font-size: 20px;/*    有hover，表示鼠标触碰后的样式*/}.c2 {width: 300px;height: 300px;border: 3px solid red;/*    原始的样式*/}.c2:hover {border: 3px solid green;/*    有hover，表示鼠标触碰后的样式*/}.download {display: none;/*    隐藏*/}.app:hover .download {display: block;/*    鼠标碰到后显示*/}</style>
</head>
<body><div class="c1">灰色字体碰到鼠标变大且变成红色</div><div class="c2">红色边框碰到鼠标变成绿色</div><div class="app"><div>鼠标放我这里触发显示二维码</div><div class="download"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/78c30d4f259ed43ab20e810a522a6249.png" alt=""></div></div>
</body>
</html>

在这里插入图片描述
10.after

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.c1:after {content: "大帅比"}</style>
</head>
<body><div class="c1">张三</div>
</body>
</html>

在这里插入图片描述
11.透明度
opacity:0.7;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.c2{opacity:0.7;}</style>
</head>
<body><div class="c2">李四</div>
</body>
</html>

在这里插入图片描述

注意：
a标签是行内标签，行内标签的高度、内外边距，默认无效，需转化display:block
垂直方向居中：
文本：line-height
图片：边距

相关文章：

【web开发】2、css基础

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、CSS是什么&#xff1f;二、使用步骤2.1.css的存放位置2.2.选择器2.3.常用CSS样式介绍与示例 一、CSS是什么&#xff1f; 层叠样式表(英文全称&#xff1a;Casc…...

编程日记 2023/9/7 9:58:29

循迹小车原理介绍和代码示例

目录 循迹小车 1. 循迹模块使用 2. 循迹小车原理 3. 循迹小车开发和调试代码 循迹小车 1. 循迹模块使用 TCRT5000传感器的红外发射二极管不断发射红外线当发射出的红外线没有被反射回来或被反射回来但强度不够大时红外接收管一直处于关断状态&#xff0c;此时模块的输出…...

编程日记 2023/9/7 9:57:28

redis未授权访问

文章目录 搭建环境漏洞复现安装Exlopit并使用 前提条件&#xff1a; 1.安装docker docker pull medicean/vulapps:j_joomla_22.安装docker-compose docker run -d -p 8000:80 medicean/vulapps:j_joomla_23.下载vulhub 搭建环境 输入下面命令&#xff0c;来到Redis的路径下&am…...

编程日记 2023/9/7 9:56:27

【数学建模竞赛】优化类赛题常用算法解析

优化类建模 问题理解和建模&#xff1a;首先&#xff0c;需要深入理解问题&#xff0c;并将问题抽象为数学模型。这包括确定问题的目标函数、约束条件和决策变量。 模型分析和求解方法选择&#xff1a;对建立的数学模型进行分析&#xff0c;可以使用数学工具和方法&#xff0c;…...

编程日记 2023/9/7 9:55:25

Python实现SSA智能麻雀搜索算法优化LightGBM回归模型(LGBMRegressor算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 麻雀搜索算法(Sparrow Search Algorithm, SSA)是一种新型的群智能优化算法&#xff0c;在2020年提出&a…...

编程日记 2023/9/7 9:54:24

OpenCV（二十一）：椒盐噪声和高斯噪声的产生

目录 1.图像噪声介绍 2.椒盐噪声的产生 3.高斯噪声的产生 1.图像噪声介绍 噪声介绍 图像噪声是指在图像中存在的不期望的、随机的像素值变化&#xff0c;这些变化来源于多种因素。噪声可能导致图像细节模糊、失真或难以分辨。 以下是几种常见的图像噪声类型&#xff1a; 1…...

编程日记 2023/9/7 9:53:23

【设计模式】Head First 设计模式——构建器模式 C++实现

设计模式最大的作用就是在变化和稳定中间寻找隔离点&#xff0c;然后分离它们&#xff0c;从而管理变化。将变化像小兔子一样关到笼子里&#xff0c;让它在笼子里随便跳&#xff0c;而不至于跳出来把你整个房间给污染掉。 设计思想 ​ 将一个复杂对象的构建与其表示相分离&…...

编程日记 2023/9/7 9:52:20

基于Python+Django深度学习的身份证识别考勤系统设计与实现

摘 要 我们的生活都是由信息技术在潜移默化的改变着&#xff0c;那么早先改变校园生活的是校园信息化&#xff0c;改变社会人生活是各种应用软件。出行我们依靠的是滴滴&#xff0c;外卖我们依靠的是美团等等。从信息技术的发展至今&#xff0c;各色各样的技术能够满足各类人群…...

编程日记 2023/9/7 9:51:19

Unity控制程序退出

大家好&#xff0c;我是阿赵。   最近把公司的游戏发布到各种PC的游戏大厅&#xff0c;遇到了挺多奇怪的需求。之前介绍了一些Unity发布PC端控制窗口最大最小化、修改exe信息等问题&#xff0c;这次来探讨一下退出游戏的问题。 一、收到奇怪的需求 某游戏大厅要求&#xff0…...

编程日记 2023/9/7 9:50:18

C++ using的多种用法

1、引入命名空间 using namespace std; using std::cout; 2、引入基类成员 class Base{ public:void func(){cout << "Base::func()" << endl;} }; class Derived : public Base{ public:using Base::func;void func(int x){cout << "Deriv…...

编程日记 2023/9/7 9:49:17

Java环境的安装

最近博主也是在学校开始学习了Java&#xff0c;也通过老师知道了可以通过大学生学生证申(bai)请(piao) IDEA的企业版&#xff08;社区版也是够学习用的&#xff09;有很多同学还是没有搞懂便做一下分享。 &#x1f331;博客主页&#xff1a;青竹雾色间. &#x1f618;博客制作…...

编程日记 2023/9/7 9:48:16

【ES6】js中的__proto__和prototype

在JavaScript中&#xff0c;__proto__和prototype都是用于实现对象继承的关键概念。 1、proto __proto__是一个非标准的属性&#xff0c;用于设置或获取一个对象的原型。这个属性提供了直接访问对象内部原型对象的途径。对于浏览器中的宿主对象和大多数对象来说&#xff0c;可…...

编程日记 2023/9/7 9:47:15

工程项目管理系统源码-简洁+好用+全面-工程项目管理

​工程项目管理系统是指从事工程项目管理的企业&#xff08;以下简称工程项目管理企业&#xff09;受业主委托&#xff0c;按照合同约定&#xff0c;代表业主对工程项目的组织实施进行全过程或若干阶段的管理和服务。 ​系统定义 工程项目管理企业不直接与该工程项目的总承包企…...

编程日记 2023/9/7 9:46:14

后端SpringBoot+前端Vue前后端分离的项目（二）

前言&#xff1a;完成一个列表&#xff0c;实现表头的切换&#xff0c;字段的筛选&#xff0c;排序&#xff0c;分页功能。 目录 一、数据库表的设计 ​编辑二、后端实现 环境配置 model层 mapper层 service层 service层单元测试 controller层 三、前端实现 interface接…...

编程日记 2023/9/7 9:45:12

【5】openGL使用宏和函数进行错误检测

当我们编写openGL程序&#xff0c;没有报编译链接错误&#xff0c;但是运行结果是黑屏&#xff0c;这不是我们想要的。 openGL提供了glGetError 来检查错误&#xff0c;我们可以通过在运行时进行打断点查看glGetError返回值&#xff0c;得到的是一个十进制数&#xff0c;将其转…...

编程日记 2023/9/7 9:44:10

STM32 CAN快速配置（HAL库版本）

STM32 CAN快速配置&#xff08;HAL库版本&#xff09; 目录 STM32 CAN快速配置&#xff08;HAL库版本&#xff09;前言1 软件编程1.1 初始化1.1.1 引脚设置1.1.2 CAN参数设置1.1.3 CAN滤波器设置 1.2 CAN发送1.3 CAN接收 2 运行测试结束语 前言 控制器局域网总线&#xff08;CA…...

编程日记 2023/9/7 9:43:07

【文末送书】全栈开发流程——后端连接数据源（二）

前言 「作者主页」&#xff1a;雪碧有白泡泡 「个人网站」&#xff1a;雪碧的个人网站 「推荐专栏」&#xff1a; ★java一站式服务 ★ ★ React从入门到精通★ ★前端炫酷代码分享 ★ ★ 从0到英雄&#xff0c;vue成神之路★ ★ uniapp-从构建到提升★ ★ 从0到英雄&#xff…...

编程日记 2023/9/7 9:42:06

leetcode_27_最小栈

class MinStack { public:MinStack() {}void push(int val) {//只要是压栈&#xff0c;先将元素保存到_elem中_elem.push(val);//如果x小于_min中栈顶的元素&#xff0c;将x再压入_min中if(_min.empty() || val < _min.top()){_min.push(val);}}void pop() {//如果——min栈…...

编程日记 2023/9/7 9:41:05

01-ZooKeeper快速入门

1 Zookeeper概念 Zookeeper是Apache Hadoop项目下的一个子项目&#xff0c;是一个树形目录服务。 zookeeper翻译过来就是 动物园管理员&#xff0c;它是用来管理Hadoop&#xff08;大象&#xff09;、Hive&#xff08;蜜蜂&#xff09;、Pig&#xff08;小猪&#xff09;的管…...

编程日记 2023/9/7 9:40:04

[经典面试题]JS的typeof和instanceof区别

一、typeof typeof 是一个一元操作符不是函数&#xff0c;所以不需要传递参数&#xff0c;使用方法非常简单&#xff1a;typeof A 对于基本类型 let s "Nicholas"; let b true; let i 22; let u; let sb undefined; console.log(typeof s); // string console.…...

编程日记 2023/9/7 9:39:02

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

编程新知 2025/11/30 15:33:36

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

编程新知 2025/9/21 0:49:02

算法：模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...

编程新知 2026/1/25 10:01:01

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...

编程新知 2026/1/29 3:55:23

4. TypeScript 类型推断与类型组合

一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式&#xff0c;自动确定它们的类型。 这一特性减少了显式类型注解的需要&#xff0c;在保持类型安全的同时简化了代码。通过分析上下文和初始值&#xff0c;TypeSc…...

编程新知 2025/11/2 1:48:43

pycharm 设置环境出错

pycharm 设置环境出错 pycharm 新建项目&#xff0c;设置虚拟环境&#xff0c;出错 pycharm 出错 Cannot open Local Failed to start [powershell.exe, -NoExit, -ExecutionPolicy, Bypass, -File, C:\Program Files\JetBrains\PyCharm 2024.1.3\plugins\terminal\shell-int…...

编程新知 2026/1/16 15:03:10

ubuntu22.04有线网络无法连接，图标也没了

今天突然无法有线网络无法连接任何设备&#xff0c;并且图标都没了 错误案例 往上一顿搜索&#xff0c;试了很多博客都不行&#xff0c;比如 Ubuntu22.04右上角网络图标消失 最后解决的办法 下载网卡驱动&#xff0c;重新安装 操作步骤 查看自己网卡的型号 lspci | gre…...

编程新知 2026/2/6 13:01:28

0x-3-Oracle 23 ai-sqlcl 25.1 集成安装-配置和优化

是不是受够了安装了oracle database之后sqlplus的简陋&#xff0c;无法删除无法上下翻页的苦恼。 可以安装readline和rlwrap插件的话&#xff0c;配置.bahs_profile后也能解决上下翻页这些&#xff0c;但是很多生产环境无法安装rpm包。 oracle提供了sqlcl免费许可&#xff0c…...

编程新知 2025/11/27 2:47:09

【安全篇】金刚不坏之身：整合 Spring Security + JWT 实现无状态认证与授权

摘要 本文是《Spring Boot 实战派》系列的第四篇。我们将直面所有 Web 应用都无法回避的核心问题&#xff1a;安全。文章将详细阐述认证&#xff08;Authentication) 与授权&#xff08;Authorization的核心概念&#xff0c;对比传统 Session-Cookie 与现代 JWT&#xff08;JS…...

编程新知 2025/12/7 16:12:52

结构化文件管理实战：实现目录自动创建与归类

手动操作容易因疲劳或疏忽导致命名错误、路径混乱等问题&#xff0c;进而引发后续程序异常。使用工具进行标准化操作&#xff0c;能有效降低出错概率。 需要快速整理大量文件的技术用户而言&#xff0c;这款工具提供了一种轻便高效的解决方案。程序体积仅有 156KB&#xff0c;…...

编程新知 2026/2/7 12:58:21