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

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

news 2026/2/2 5:11:59

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

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

编程新知 2026/1/31 18:11:04

C++：std::is_convertible

C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

编程新知 2025/6/11 15:23:57

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする 1、前言（1）情况说明（2）工程师的信仰2、知识点（1）　にする1，接续：名词＋にする2，接续：疑问词＋にする3，（A）は（B）にする。（2）復習：（1）复习句子（2）ために　＆　ように（３）そう（４）にする3、…...

编程新知 2025/11/20 7:52:01

CMake基础：构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

编程新知 2026/1/24 12:38:03

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

编程新知 2026/1/29 5:29:57

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

编程新知 2026/1/26 21:47:06

Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

编程新知 2026/2/1 5:47:57

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

编程新知 2026/1/7 1:29:19

智能分布式爬虫的数据处理流水线优化：基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

编程新知 2026/1/20 22:51:34

Golang——9、反射和文件操作

反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一&#xff1a;使用Read()读取文件2.3、方式二&#xff1a;bufio读取文件2.4、方式三&#xff1a;os.ReadFile读取2.5、写…...

编程新知 2026/1/30 6:20:08