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

24.11.10 css

news 2025/6/9 16:43:10

2.css语法结构

选择器{

样式:样式值;

}

3.css引入方式

如何在html页面中写css代码

        1.页面中直接使用style标签 编写css                          调试样式代码时使用<style>  h1{color:red}</style>

       2.通过link标签 引入css文件                                 上线时使用  可使用三种路径 相对路径 相对根路径 绝对路径<link rel="stylesheet" href="/day2_css/css/mystyle.css">

          3.在元素上 通过style属性直接编辑样式                        尽量不用 后期维护更新比较麻烦<h1 style="color: red;" >我的标题</h1>

注意:

1,2 后加载的覆盖先加载的

3 覆盖1,2加载方式

4.css常用选择器

常用选择器

        1.标签选择器(通过html标签选择元素)   选取范围较大 只要是页面中指定的标签都会选中  2.class选择器(通过class值选元素)    选取范围精准 可以任意给元素指定class值 class值中有一个能匹配上即被选中class选择器 配合class多值的特性 让选取元素非常灵活3.id选择器(通过id值选元素)          选取范围精准 class可以替代id   id一般在写js是定义    基本选择器的优先级id>class>标签    权值高的覆盖权值低的

1.标签选择器p{color: blue;}
2.class选择器.myp{color: green;}
3.id选择器#aimp{color: lightcoral;}

选择器组合方式 (了解即可)

        4并集选择器  同时选多种类型元素       选择器,选择器5交集选择器  同时满足多种条件的元素   选择器选择器  先元素 再其他6后代选择器  选取元素内部的元素       选择器 选择器  选取范围较大7子代选择器  选取元素内部的子元素     选择器>选择器  选取较精准8属性选择器  [属性名] [属性名=属性值]9通用选择器  *               做全局默认设置

4并集选择器 h1,.myp{color: lightblue;}
5.交集选择器p.mystyle{color: blue;}
6.后代选择器div p{color: red;} 
7.子代选择器.testdiv>div>p{color: red;} 
8.属性选择器[type='button']{color: red;}/* .div1 [type='button']{color: red;}.div2 [type='button']{color: green;} */
9.全局选择器*{color: lightpink;}

5.css常用样式

文字背景常用设置

        常用样式属性1 color   文字颜色   颜色英文rgb值 红 绿 蓝  0-255#RGB 16进制#3CF 相当于 #33CCFF2 font-size 文字大小    单位 像素   绝对单位em rem     相对单位 默认字体倍率分辨率 1080p 1920*1080 2k 4k3 font-weight 字体粗细  数大的粗4 font-family 字体类型  默认黑体5 text-align: center;  调整文字左右位置6 line-height: 100px;  行高  行高与块高一致 文字正好在中心点7.background-image: url(./imgs/niu.jpg); 背景图片jpg png gif8.background-size: 50%;  调整大小比例9.background-repeat: no-repeat;  背景重复方式10. background-color: blueviolet; 背景颜色 背景图片与颜色一起使用时 图片会盖在颜色上边11. list-style:url(./imgs/niu2.png); 列表的标记 可以使用图片12. border: 1px solid black;  统一设置四条边分开设置left right top bottom 13. border-radius  像素 百分比四个角可以单独设置border-bottom-left-radius: 30%;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{color:#3CF;font-size: 2em;font-weight: 900;font-family: '楷体';text-align: center;width: 200px;height: 200px;/* border: 1px solid black;border-radius: 10%; */line-height: 200px;background-image: url(./imgs/640.gif);background-size: 50%;background-repeat: no-repeat;background-color: blueviolet;border-bottom: 5px solid lightslategray;border-left: 5px solid rgb(43, 5, 131);border-bottom-left-radius: 30%;border-top-right-radius: 30%;}a{text-decoration: none;}.myul{list-style:url(./imgs/niu2.png);}</style></head><body><div>测试</div><a href="###">测试超链接</a><!-- <img src="./imgs/niu.jpg"/> --><ul class="myul"><li>尔滨装卸行李温柔得像放鸡蛋</li><li>郑钦文称不与选手交朋友 李娜回应</li><li>快递小哥在仓库遇到小猪包裹</li><li>王俊凯发文卡点为王源庆生</li></ul></body></html>

盒子模型

        盒子模型页面元素在排布时 使用的逻辑概念 盒子互相嵌套和排布content 内容大小   可以自动适应也可以设置宽高width heightborder  边框      特殊显示效果padding 内部填充   边框到内容之间填充 (元素整体会变大)margin  外边距     元素之间的间隔距离                   margin: 100px auto;  元素居中 特殊用法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.mydiv{width: 100px;height: 100px;border: 10px solid black;/* padding: 50px; 内部填充  内容与边框的间隔 *//*   padding: 50px 40px 30px 20px; */顶部 右侧  底部  左侧 /* padding-left: 50px; *//* 四个方向可以单独设置 *//* margin:10px *//* 外边距 控制元素与元素的间隔 *//* margin-left: 50px;margin-top: 50px; */margin: 0px auto;}h1{margin-top: 50px;}</style></head><body><div class="mydiv">测试div<br>12332111</div><div class="mydiv">测试div<br>12332111</div><h1>11111</h1></body></html>

div+css布局

div+css布局实际上就是在页面中画格子大格子中套小格子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 页面元素排布时 像画table一样 行加单元格的思想来布局div+css宽高排版时 为了方便适配 通常使用相对单位百分比  高度使用百分比时 要求父元素的高度已指定视窗比例相对单位宽度 vw 100vw 视窗宽度100%高度 vh 100vh 视窗高度100%*//* html,body{margin: 0px;height: 100%;} */body{margin: 0px;}.mainPanel{width: 100vw;height: 100vh;background-color: lightgrey;}.top{width: 100%;height: 15%;background-color: rgb(255, 179, 179);}.middle{width: 100%;height: 70%;background-color: rgb(156, 234, 248);}.bottom{width: 100%;height: 15%;background-color: rgb(222, 238, 180);}.left{width: 20%;height: 100%;background-color: rgb(255, 119, 187);float: left;}.right{width: 80%;height: 100%;background-color: rgb(134, 69, 255);float: left;}</style></head><body><div class="mainPanel"><div class="top"></div><div class="middle"><div class="left"></div><div class="right"></div></div><div class="bottom"></div></div></body></html>

注意:

float属性用于创建浮动框，允许元素向左或向右浮动，使其脱离常规的文档流。浮动元素会移动到包含块的左端或右端，直到它的外边缘接触到包含块或另一个浮动元素的边缘。

left：元素向左浮动。
right：元素向右浮动。
none：元素不浮动（默认值）。
inherit：从父元素继承float属性的值

布局时可以使用绝对单位

宽高排版时为了方便适配通常使用两种相对单位

   百分比  高度使用百分比时 要求父元素的高度已指定

    视窗比例相对单位宽度 vw 100vw 视窗宽度100%高度 vh 100vh 视窗高度100%

显示方式属性

 display  元素显示方式block           块方式显示inline          行内方式显示inline-block    行内快方式显示none            不显示

显示规则:

块 (block) 从上到下排列宽高有效

行内(inline) 从左到右排列宽高无效

行内块() 从走到右排列宽高有效图片表单元素(输入框选择框按钮.....)

透明度:

opacity: 0; 透明度 0透明-1不透中间半透

rgba(41, 211, 168, 0.151)

透明度

伪类选择器

伪类选择器 (选取元素的交互状态)

:active  鼠标点击
:hover   鼠标悬停 (鼠标放在了某个元素上)

手型光标

cursor: pointer; 手型光标

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 伪类选择器 (选取元素的交互状态):active  鼠标点击:hover   鼠标悬停 (鼠标放在了某个元素上)这两个选择器作用在同一个元素上时会被覆盖，有一个元素不显示效果cursor: pointer;  手型光标*/.testDiv{width: 100px;height: 100px;border: 1px solid black;}.testDiv:active{background-color: red;}.testDiv:hover{border: 10px solid rgb(114, 105, 105);cursor: pointer;}a:hover{font-size: 30px;}</style></head><body><div class="testDiv"></div><a href="###">aaaa</a></body></html>

定位属性

定位属性 position默认文档流 块从上到下 行内元素从左到右relative相对定位  元素不脱离文档流 元素以原始位置偏移 absolute绝对定位  元素脱离文档流  以页面位置进行偏移fixed  固定定位  元素脱离文档流  以页面位置进行偏移 并固定在此处static  默认文档流top   向下偏移  可以取负值 反方向left  向右偏移z-index 图层顺序  必须用在有定位改变的元素上 static时无效

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.div1{width: 100px;height: 100px;border: 1px solid black;background-color: lightcoral;position: fixed;top: 10px;left: 10px;z-index: 1;}
/* 
定位属性 position默认文档流 块从上到下 行内元素从左到右relative相对定位  元素不脱离文档流 元素以原始位置偏移 absolute绝对定位  元素脱离文档流   以页面位置进行偏移fixed   固定定位  元素脱离文档流   以页面位置进行偏移 并固定在此处static  默认文档流加了定位出图层      top    向下偏移  可以取负值 反方向
left   向右偏移z-index 图层顺序  必须用在有定位改变的元素上 static时无效*/.div2{width: 100px;height: 100px;border: 1px solid black;background-color: lightgoldenrodyellow;/* margin-top: 50px; */position: fixed;top: 30px;left: 30px;z-index: 2;}.div3{width: 300px;height: 100px;border: 1px solid black;background-color: lightskyblue;position: fixed;top: 50px;left: 50%;margin-left: -150px;z-index: 3;}</style></head><body><div class="div1">div1</div><div class="div2">div2</div><div class="div3">div3</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body></html>

Javascript1

24.11.10 css

2.css语法结构选择器{ 样式:样式值; 样式:样式值; } 3.css引入方式如何在html页面中写css代码 1.页面中直接使用style标签编写css 调试样式代码时使用<style> h1{color:red}</style>2.通过link标签引入css文件 …...

编程日记 2024/11/13 3:22:01

git新手使用教程

git新手使用教程一、安装和初始化配置2、新建仓库3.工作区域和文件状态4.添加和提交文件5 git reset回退版本6 使用git diff查看差异7 使用git rm删除文件8 .gitignore忽略文件9 注册GitHub账号10 SSH配置和克隆仓库11 关联本地仓库和远程仓库12 Gitee的使用由B站视频教程整理…...

编程日记 2024/11/13 3:21:00

运维发展方向

作为一名运维工程师，我建议可以从以下几个方面规划职业发展： 1. 夯实基础知识 - Linux 系统管理与优化 - 网络协议和架构 - 数据库运维(MySQL、PostgreSQL等) - Shell 脚本编程 - Python/Go 等自动化语言 2. 掌握现代化工具 - 容器技术(Docker、Kubern…...

编程日记 2024/11/13 3:19:58

jmeter常用配置元件介绍总结之函数助手

系列文章目录 1.windows、linux安装jmeter及设置中文显示 2.jmeter常用配置元件介绍总结之安装插件 3.jmeter常用配置元件介绍总结之取样器 jmeter常用配置元件介绍总结之函数助手 1.进入函数助手对话框2.常用函数的使用介绍2.1.RandomFromMultipleVars函数2.2.Random函数2.3.R…...

编程日记 2024/11/13 3:16:55

Pytorch从0复现worc2vec skipgram模型及fasttext训练维基百科语料词向量演示

目录 Skipgram架构代码开源声明 Pytorch复现Skip-gram 导包及随机种子设置维基百科数据读取建立词频元组列表并根据词频排序建立词频字典,word_id字典,id_word字典二次采样正采样与负采样 Skipgram模型类模型训练词向量输出近义词寻找 fasttext训练Skip-…...

编程日记 2024/11/13 3:15:51

fastapi 查询参数支持 Pydantic Model：参数校验与配置技巧

fastapi 查询参数支持 Pydantic Model：参数校验与配置技巧本文介绍了 FastAPI 中通过 Pydantic model 声明查询参数的使用方法，提供了更加灵活和强大的参数校验方式。通过将查询参数定义在 Pydantic model 中，开发者可以对参数设置默认值、…...

编程日记 2024/11/13 3:13:49

mysql 大数据查询

基于 mysql 8.0 基础介绍 com.mysql.cj.protocol.ResultsetRows该接口表示的是应用层如何访问 db 返回回来的结果集它有三个实现类 ResultsetRowsStatic 默认实现。连接 db 的 url 没有增加额外的参数、单纯就是 ip port schema 。 @Test public void generalQuery() t…...

编程日记 2024/11/13 3:12:47

如何在 Spring Boot 中利用 RocketMQ 实现批量消息消费

文章目录准备工作项目依赖配置 RocketMQ生产批量消息消费批量消息测试批量消息发送和消费总结推荐阅读文章 RocketMQ 是一款分布式消息队列，支持高吞吐、低延迟的消息传递。对于需要一次处理多条消息的场景，RocketMQ 提供了批量消费的机制，这…...

编程日记 2024/11/13 3:06:39

基于驾驶员面部特征的疲劳检测系统

大家好，本文是对基于驾驶员面部特征的疲劳检测系统源码的介绍与说明。项目下载：基于驾驶员面部特征的疲劳检测系统 1.关于项目疲劳驾驶检测系统通过监测驾驶人的眼睛状态，头部状态，嘴部状态等指标，识别出疲劳迹象…...

编程日记 2024/11/13 2:58:27

前端知识点---字符串的8种拼接方法(Javascript)

文章目录 01使用运算符(改变了原始字符串)02使用运算符(改变了原本的字符串)03 使用 concat() 方法(不改变原本的字符串)04使用模板字面量（不改变原本的字符串）05使用 join() 方法（不改变原本的字符串）①指定分隔符 ②没有指定…...

编程日记 2024/11/13 2:55:24

用 Python 从零开始创建神经网络（一）：编码我们的第一个神经元

编码我们的第一个神经元引言1. A Single Neuron：Example 1Example 2 2. A Layer of Neurons：Example 1 引言本教程专为那些对神经网络已有基础了解、但尚未动手实践过的读者而设计。尽管网上充斥着各种教程，但很多内容要么过于简略&#x…...

编程日记 2024/11/13 2:53:22

低代码开发

低代码（Low Code）是一种软件开发方法，它通过可视化界面和少量的编码来快速构建应用程序。低代码平台的核心理念是通过抽象和最小化手工编码的方式，加速软件开发和部署的过程。定义低代码是一种软件开发方法，它允许…...

编程日记 2024/11/13 2:48:09

sql server 文件和文件组介绍

sql server 文件和文件组介绍数据库文件和文件组 - SQL Server | Microsoft Learn...

编程日记 2024/11/13 2:46:07

caozha-CEPCS（新冠肺炎疫情防控系统）

caozha-CEPCS，是一个基于PHP开发的新冠肺炎疫情防控系统，CEPCS（全称：COVID-19 Epidemic Prevention and Control System），可以应用于单位、企业、学校、工业园区、村落等等。小小系统，希望能为大…...

编程日记 2024/11/13 2:40:02

1Panel修改PostgreSQL时区

需求 1Panel安装的PostgreSQL默认是UTC时区，需要将它修改为上海时间步骤进入PostgreSQL的安装目录 /opt/1panel/apps/postgresql/postgresql/data打开postgresql.conf文件修改： log_timezone Asia/Shanghai timezone Asia/Shanghai保存后重启…...

编程日记 2024/11/13 2:39:01

开发一个CRM系统难吗？CRM系统的实现步骤

越来越多企业意识到了，客户关系管理（CRM）系统已成为企业提升客户体验、推动销售增长的必备工具。一个高效的CRM系统不仅能够帮助企业优化客户数据管理，还能提升客户满意度，增强客户忠诚度，从而推动业务的持…...

编程日记 2024/11/13 2:34:57

kafka常见面试题总结

Kafka 核心知识解析一、Kafka 消息发送流程 Kafka 发送消息涉及两个线程：main 线程和 sender 线程。在 main 线程中，会创建一个双端队列 RecordAccumulator，main 线程负责将消息发送给 RecordAccumulator，而 sender 线程则从 R…...

编程日记 2024/11/13 2:32:54

文章目录 01 typeof 运算符02 instanceof 运算符03 Array.isArray()04 Object.prototype.toString.call()05 constructor 属性06 isNaN() 和 Number.isNaN() (常用)07 isFinite() 和 Number.isFinite()08 typeof null 是 "object" 的问题 01 typeof 运算符返回值是…...

编程日记 2024/11/13 2:31:53

aspose如何获取PPT放映页“切换”的“持续时间”值

aspose如何获取PPT放映页“切换”的“持续时间”值项目场景问题描述问题1：从官方文档和资料查阅发现并没有对切换的持续时间进行处理的方法问题2：aspose的依赖包中，所有的关键对象都进行了混淆处理解决方案1、找到ppt切换的持续时间对应的混…...

编程日记 2024/11/13 2:30:52

CSS 轮廓（Outline）与边框（Border）的深度解析

在 CSS 中，轮廓（outline）和边框（border）是两个用于装饰元素的重要属性，但它们在功能、渲染机制和应用场景上存在显著差异。下面从多个维度进行详细对比： 一、基础定义与语法差异边框&#xf…...

编程新知 2025/6/9 15:08:07

Linux运维新人自用笔记（乌班图apt命令和dpkg命令、两系统指令区别，rpm解决路径依赖、免安装配置java环境）

内容全为个人理解和自查资料梳理，欢迎各位大神指点！ 每天学习较为零散。 day17 一、Ubuntu apt命令和dpkg命令二进制命令配置文件数据文件，打包好的单个文件 Windows ：.exe macos：.dmg 后缀适用系统安装方式.d…...

编程新知 2025/6/9 9:33:58

pgsql batch insert optimization （reWriteBatchedInserts ）

reWriteBatchedInserts 是 PostgreSQL JDBC 驱动提供的一个优化选项，它可以重写批量插入语句，从而提高插入性能。作用当 reWriteBatchedInsertstrue 时，PostgreSQL JDBC 驱动会将多个单独的 INSERT 语句转换为一个多行 INSERT 语句&a…...

编程新知 2025/6/9 9:24:19

【优选算法】分治

一：颜色分类 class Solution { public:void sortColors(vector<int>& nums) {// 三指针法int n nums.size();int left -1, right n, i 0;while(i < right){if(nums[i] 0) swap(nums[left], nums[i]);else if(nums[i] 2) swap(nums[--right], num…...

编程新知 2025/6/9 8:05:44

CSS 预处理器与工具

目录 CSS 预处理器与工具1. Less主要特性 2. Sass/SCSS主要特性 3. Tailwind CSS主要特性 4. 其他工具PostCSSCSS Modules 5. 选择建议 CSS 预处理器与工具 1. Less Less 是一个 CSS 预处理器，它扩展了 CSS 语言，添加了变量、嵌套规则、混合&#xff0…...

编程新知 2025/6/9 7:45:24

Vue---vue使用AOS(滚动动画)库

AOS介绍 aos.js是一个轻量级的动画库插件,可以简单的实现页面滚动触发动画效果,可以让我们网页看起来更加生动(高大上) 官网演示地址:aos.js 安装 YARN, NPM, BOWER安装 yarn add aos npm install aos --save bower install aos --save CDN引入 <link href"https…...

编程新知 2025/6/9 4:01:36

Android第十二次面试-多线程和字符串算法总结

多线程的创建与常见使用方法一、多线程创建方式 1. 继承Thread类 class MyThread extends Thread {Overridepublic void run() {// 线程执行逻辑System.out.println(Thread.currentThread().getName() " is running");} }// 使用 MyThread thread new …...

编程新知 2025/6/9 1:34:04