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

前端---CSS（部分用法）

news 2025/7/6 1:57:48

HTML画页面--》这个页面就是页面上需要的元素罗列起来，但是页面效果很差，不好看，为了让页面好看，为了修饰页面---》CSS
CSS的作用：修饰HTML页面
用了CSS之后，样式和元素本身做到了分离的效果。---》降低了代码的耦合性

【2】HTML和CSS的关系？
先有HTML，先有页面，修饰页面--》CSS

【3】CSS名字：
CSS：cascading style sheets (层叠样式表)

层叠：样式的叠加
样式表：各种各样样式的集合

【1】内联样式：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--书写方式：内联样式（行内样式）在标签中加入一个style属性，CSS的样式作为属性值多个属性值之间用;进行拼接--><h1 style="color: deeppink;font-family: '宋体';">这是一个h1标题</h1></body>
</html>

【2】内部样式：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><!--书写方式：内部样式：head标签中加入一个style标签，在里面定位到你需要修饰的元素，然后在{}中加入你要修饰的样式。--><style type="text/css">h1{color: royalblue;font-family: 宋体;}</style></head><body><h1>这是一个标题</h1></body>
</html>

【3】外部样式：
首先要创建一个css文件，css文件的后缀.css

h1{color: red;font-family: 宋体;
}

再创建html页面：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><!--引入外部CSS资源：link--><link rel="stylesheet" type="text/css" href="css/mystyle.css"/></head><body><h1>这是一个标题</h1></body>
</html>

【4】实际开发中三种书写方式用的最多的是：
第三种：外部样式：因为这种方式真正做到了  元素页面和样式 分离

【5】三种书写方式优先级：
就近原则

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><!--引入外部CSS资源：link--><style type="text/css">h1{color: yellow;}</style><link rel="stylesheet" type="text/css" href="css/mystyle.css"/></head><body><h1 style="color: red;">这是一个标题</h1></body>
</html>

 选择器：

基本选择器：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/*【1】基本选择器：元素选择器：通过元素的名字进行定位，它会获取页面上所有这个元素，无论藏的多深都可以获取到格式：元素名字{css样式;}* */h1{color: red;}i{color: blue;}/*【2】基本选择器：类选择器应用场合：不同类型的标签使用相同的类型格式：.class的名字{css样式;}*/.mycls{color: green;}/*【3】基本选择器：id选择器：应用场合：可以定位唯一的一个元素不同的标签确实可以使用相同的id，但是一般我们会进行人为的控制，让id是可以唯一定位到一个元素。格式：#id名字{css样式;}*/#myid{color: yellow;}</style></head><body><h1>我是<i>一个</i>标题</h1><h1>我是一个标题</h1><h1 class="mycls">我是一个标题</h1><h1>我是一个标题</h1><h2 class="mycls">我是h2标题</h2><h2>我是h2标题</h2><h2 id="myid">我是h2标题</h2></body>
</html>

优先级别：
id选择器>class选择器>元素选择器：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.mycls{color: red;}/*#myid{color: yellow;}*/h1{color: greenyellow;}</style></head><body><h1 class="mycls" id="myid">我是标题</h1></body>
</html>

关系选择器：

div 和 span

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/*我们可以通俗的理解，把div理解为一个“塑料袋”div属于块级元素--》换行span属于行内元素--》没有换行效果span:里面的内容占多大，span包裹的区域就多大*/div{border: 1px red solid;}span{border: 1px greenyellow solid;}</style></head><body><div>马士兵马士兵<br />马士兵马士兵</div><div>马士兵</div><span>马士兵马士兵</span><span>马士兵</span><span>马士兵</span></body>
</html>

div和span 结合css用于页面的布局。div+css 用于页面布局。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/*关系选择器:* 后代选择器：只要是这个元素的后代，样式都会发生变化* div下面的所有h1标签样式都会改变*//*div h1{color: red;}*//*关系选择器：子代选择器只改变子标签的样式*/div>h1{color: royalblue;}span>h1{color: yellow;}</style></head><body><div><h1>这是标题</h1><h1>这是标题</h1><h1>这是标题</h1><h1>这是标题</h1><h1>这是标题</h1><span><h1>这是标题</h1><h1>这是标题</h1><h1>这是标题</h1><h1>这是标题</h1><h1>这是标题</h1></span></div></body>
</html>

属性选择器：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/*属性选择器*/input[type="password"]{background-color: red;}input[type="text"][value="zhaoss1"]{background-color: yellow;}</style></head><body><form>用户名：<input type="text" value="zhaoss1" />用户名2：<input type="text" value="zhaoss2" />密码：<input type="password" value="123123" /><input type="submit" value="登录" /></form></body>
</html>

伪类选择器 向某些选择器添加特殊效果。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.mycls:hover{color: red;}</style></head><body><h1 class="mycls">我是标题</h1></body>
</html>

一般伪类选择器都用在超链接上：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/*设置静止状态*/a:link{color: yellow;}/*设置鼠标悬浮状态*/a:hover{color: red;}/*设置触发状态*/a:active{color: blue;}/*设置完成状态*/a:visited{color: green;}</style></head><body><a href="index.html">超链接</a></body>
</html>

总结：

本篇文章通过简单的例子说明了HTML和CSS的基础知识，介绍了如何通过不同方式书写CSS，以及如何使用各种CSS选择器和优先级管理样式，帮助理解如何将HTML与CSS结合，使得网页美观且结构清晰。但CSS有很多技术如浮动，定位，盒子模型等等，有兴趣可以去了解一下。

相关文章：

前端---CSS（部分用法）

HTML画页面--》这个页面就是页面上需要的元素罗列起来&#xff0c;但是页面效果很差&#xff0c;不好看&#xff0c;为了让页面好看&#xff0c;为了修饰页面---》CSS CSS的作用&#xff1a;修饰HTML页面 用了CSS之后&#xff0c;样式和元素本身做到了分离的效果。---》降低了代…...

编程日记 2024/11/27 9:26:14

2024年最新版Java八股文复习

最新版本Java八股文复习&#xff0c;每天更新一篇&#xff0c;博主正在持续努力更新中~~~ 一、Java基础篇1、怎么理解面向对象&#xff1f;简单说说封装、继承、多态三大特性&#xff1f;2、多态体现在哪几个方面&#xff1f;3、面向对象的设计原则你知道有哪些吗&#xff1f;4…...

编程日记 2024/11/27 9:24:10

计算机毕业设计Hadoop+Spark音乐推荐系统 音乐预测系统 音乐可视化大屏 音乐爬虫 HDFS hive数据仓库 机器学习 深度学习 大数据毕业设计

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…...

编程日记 2024/11/27 9:23:08

MyBatis高级扩展

一、Mapper批量映射优化: 1.需求: Mapper 配置文件很多时&#xff0c;在全局配置文件中一个一个注册太麻烦&#xff0c;希望有一个办法能够一劳永逸 2.配置方式: Mybatis允许在指定Mapper映射文件时&#xff0c;只指定其所在的包: <mappers><package name"c…...

编程日记 2024/11/27 9:22:06

代码美学2：MATLAB制作渐变色

效果&#xff1a; %代码美学&#xff1a;MATLAB制作渐变色 % 创建一个10x10的矩阵来表示热力图的数据 data reshape(1:100, [10, 10]);% 创建热力图 figure; imagesc(data);% 设置颜色映射为“cool” colormap(cool);% 在热力图上添加边框 axis on; grid on;% 设置热力图的颜色…...

编程日记 2024/11/27 9:18:01

浅谈- “ 变量中 无符号 与 有符号 的 值转换 ”

在同一个表达式中&#xff0c;若同时出现 无符号变量 与 有符号变量 &#xff1a; 1、都转换为无符号类型&#xff1a;&#xff08;注&#xff1a;2^324294967296&#xff09;即unsigned int 的最大值 2、然后再运行表达式 实例&#xff1a; #include <stdio.h>char fun(…...

编程日记 2024/11/27 9:17:00

【AI绘画】Midjourney进阶：色调详解（上）

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: AI绘画 | Midjourney 文章目录 &#x1f4af;前言&#x1f4af;Midjourney中的色彩控制为什么要控制色彩&#xff1f;为什么要在Midjourney中控制色彩&#xff1f; &#x1f4af;色调白色调淡色调明色调 &#x1f4af…...

编程日记 2024/11/27 9:12:55

代码管理之Gitlab

文章目录 Git基础概述场景本地修改未提交&#xff0c;拉取远程代码修改提交本地&#xff0c;远程已有新提交 GitIDEA引入Git拉取仓库代码最后位置 Git基础 概述 workspace 工作区&#xff1a;本地电脑上看到的目录&#xff1b; repository 本地仓库&#xff1a;就是工作区中隐…...

编程日记 2024/11/27 9:10:53

防御网络攻击的创新策略

关键要点 ● 了解各种类型的网络攻击对于组织加强防御至关重要。 ● 制定敏捷的网络安全策略可帮助企业快速应对新出现的威胁。 ● 跨行业协作和威胁情报共享可以增强整体安全性。 网络攻击威胁日益严重 网络攻击的数量和复杂程度急剧增加&#xff0c;对全球组织构成了重大…...

编程日记 2024/11/27 9:09:52

C++软件设计模式之组合模式概述

组合模式&#xff08;Composite Pattern&#xff09;是C软件设计模式中的一种&#xff0c;主要用于解决对象的层次结构问题。它允许你将对象组合成树形结构来表示“部分-整体”的层次结构&#xff0c;使得客户端可以统一地处理单个对象和组合对象。 主要用于解决的问题&#x…...

编程日记 2024/11/27 9:06:48

利用HTML5和CSS来实现一个漂亮的表格样式

利用HTML5和CSS来实现一个漂亮的表格样式 第一步&#xff1a;创建HTML结构第二步&#xff1a;添加CSS样式第三步&#xff1a;响应式设计第四步&#xff1a;加入交互效果 第一步&#xff1a;创建HTML结构 我们将用HTML创建一个基本的表格结构。代码如下&#xff1a; <!DOCT…...

编程日记 2024/11/27 9:04:46

Vivado程序固化到Flash

在上板调试FPGA时&#xff0c;通常使用JTAG接口下载程序到FPGA芯片中&#xff0c;FPGA本身是基于RAM工艺的器件&#xff0c;因此掉电后会丢失芯片内的程序&#xff0c;需要重新烧写程序。但是当程序需要投入使用时不能每一次都使用JTAG接口下载程序&#xff0c;一般FPGA的外围会…...

编程日记 2024/11/27 9:03:45

HCIA笔记3--TCP-UDP-交换机工作原理

1. tcp协议 可靠的连接 1.1 报文格式 1.2 三次握手 1.3 四次挥手 为什么TIME_WAIT需要2MSL的等待时间&#xff1f; &#xff08;a&#xff09; 为了实现可靠的关闭 &#xff08;b&#xff09;为了让过期的报文在网络上消失 对于(a), 假设host发给server的last ack丢了。 ser…...

编程日记 2024/11/27 9:02:42

计算机网络的功能

目录 信息交换 资源共享 分布式处理 可靠性增强 集中管理 信息交换 计算机网络最基本的功能之一是允许不同设备之间的数据通信。这包括电子邮件的发送和接收、即时消息的传递、文件传输等。通过网络&#xff0c;用户可以轻松地与全球各地的其他人进行沟通和协作。 信息交…...

编程日记 2024/11/27 9:01:40

Redis设计与实现第14章 -- 服务器 总结（命令执行器 serverCron函数 初始化）

14.1 命令请求的执行过程 一个命令请求从发送到获得回复的过程中&#xff0c;客户端和服务器都需要完成一系列操作。 14.1.1 发送命令请求 当用户在客户端中输入一个命令请求的时候&#xff0c;客户端会把这个命令请求转换为协议格式&#xff0c;然后通过连接到服务器的套接字…...

编程日记 2024/11/27 8:59:38

多输入多输出 | Matlab实现TCN-GRU时间卷积神经网络结合门控循环单元多输入多输出预测

多输入多输出 | Matlab实现TCN-GRU时间卷积神经网络结合门控循环单元多输入多输出预测 目录 多输入多输出 | Matlab实现TCN-GRU时间卷积神经网络结合门控循环单元多输入多输出预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 多输入多输出 | Matlab实现TCN-GRU时间卷积…...

编程日记 2024/11/27 8:56:34

windows安全中心，永久卸载工具分享

使用方法 2024Goby红队版工具分享&#xff0c;附2024年漏洞POC下载 下载链接&#xff1a; https://pan.quark.cn/s/4fc2712a2afc一路回车&#xff0c;选项Y即可 耐心等待几秒种&#xff0c;自动重启 此时打开windows安全中心&#xff0c;已经完全不能使用了&#xff0c;响应…...

编程日记 2024/11/27 8:54:32

《安富莱嵌入式周报》第346期：开源2GHz带宽，12bit分辨率，3.2Gsps采样率示波，开源固件安全分析器, 开源口袋电源，开源健康测量，FreeCAD

周报汇总地址&#xff1a;嵌入式周报 - uCOS & uCGUI & emWin & embOS & TouchGFX & ThreadX - 硬汉嵌入式论坛 - Powered by Discuz! 视频&#xff1a; https://www.bilibili.com/video/BV1TYBhYKECK/ 《安富莱嵌入式周报》第346期&#xff1a;开源2GHz带…...

编程日记 2024/11/27 8:52:30

Apache OFBiz xmlrpc XXE漏洞（CVE-2018-8033）

目录 1、漏洞描述 2、EXP下载地址 3、EXP利用 1、漏洞描述 Apache OFBiz是一套企业资源计划&#xff08;ERP&#xff09;系统。它提供了广泛的功能&#xff0c;包括销售、采购、库存、财务、CRM等。 Apache OFBiz还具有灵活的架构和可扩展性&#xff0c;允许用户根据业务需求…...

编程日记 2024/11/27 8:50:28

【论文复现】融入模糊规则的宽度神经网络结构

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀ 融入模糊规则的宽度神经网络结构 论文概述创新点及贡献 算法流程讲解核心代码复现main.py文件FBLS.py文件 使用方法测试结果示例&#xff1a…...

编程日记 2024/11/27 8:49:26

React Native 导航系统实战（React Navigation）

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

编程新知 2025/6/21 7:48:44

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

编程新知 2025/6/21 13:57:28

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

编程新知 2025/6/15 11:28:43

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

编程新知 2025/6/17 16:58:36

使用Matplotlib创建炫酷的3D散点图：数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例（带样式）应用场景在数据科学和可视化领域，三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

编程新知 2025/6/16 21:06:50

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

编程新知 2025/6/19 5:33:21

视频行为标注工具BehaviLabel（源码+使用介绍+Windows.Exe版本）

前言&#xff1a; 最近在做行为检测相关的模型&#xff0c;用的是时空图卷积网络&#xff08;STGCN&#xff09;&#xff0c;但原有kinetic-400数据集数据质量较低&#xff0c;需要进行细粒度的标注&#xff0c;同时粗略搜了下已有开源工具基本都集中于图像分割这块&#xff0c…...

编程新知 2025/7/4 14:16:03

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...

编程新知 2025/7/4 12:30:30

在Mathematica中实现Newton-Raphson迭代的收敛时间算法（一般三次多项式）

考察一般的三次多项式&#xff0c;以r为参数&#xff1a; p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]&#xff1b; 此多项式的根为&#xff1a; 尽管看起来这个多项式是特殊的&#xff0c;其实一般的三次多项式都是可以通过线性变换化为这个形式…...

编程新知 2025/7/5 10:04:34

基于Springboot+Vue的办公管理系统

角色&#xff1a; 管理员、员工 技术&#xff1a; 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能&#xff1a; 该办公管理系统是一个综合性的企业内部管理平台&#xff0c;旨在提升企业运营效率和员工管理水…...

编程新知 2025/7/5 8:50:50