CSS语法、选择器、属性
1.css语法
* 格式:选择器 {属性名1:属性值1;属性名2:属性值2;...}* 选择器:筛选具有相似特征的元素* 注意:* 每一对属性需要使用;隔开,最后一对属性可以不加
2.选择器:筛选具有相似特征的元素
* 分类:1. 基础选择器1. id选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一* 语法:#id属性值{}2. 元素选择器:选择具有相同标签名称的元素* 语法: 标签名称{}* 注意:id选择器优先级高于元素选择器3. 类选择器:选择具有相同的class属性值的元素。* 语法:.class属性值{}* 注意:类选择器选择器优先级高于元素选择器2. 扩展选择器:1. 选择所有元素:* 语法: *{}2. 并集选择器:* 选择器1,选择器2{}3. 子选择器:筛选选择器1元素下的选择器2元素* 语法: 选择器1 选择器2{}4. 父选择器:筛选选择器2的父元素选择器1* 语法: 选择器1 > 选择器2{}5. 属性选择器:选择元素名称,属性名=属性值的元素* 语法: 元素名称[属性名="属性值"]{}6. 伪类选择器:选择一些元素具有的状态* 语法: 元素:状态{}* 如: <a>* 状态:* link:初始化的状态* visited:被访问过的状态* active:正在访问状态* hover:鼠标悬浮状态
3.属性
1. 字体、文本* font-size:字体大小* color:文本颜色* text-align:对其方式* line-height:行高 2. 背景* background:3. 边框* border:设置边框,符合属性4. 尺寸* width:宽度* height:高度5. 盒子模型:控制布局* margin:外边距* padding:内边距* 默认情况下内边距会影响整个盒子的大小* box-sizing: border-box; 设置盒子的属性,让width和height就是最终盒子的大小* float:浮动* left* right
示例:
1.基础选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基础选择器</title><style>.cls1{color: blue;}div{color:green;}#div1{color: red;}</style>
</head>
<body>
<!--
1. 基础选择器1. id选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一* 语法:#id属性值{}2. 元素选择器:选择具有相同标签名称的元素* 语法: 标签名称{}* 注意:id选择器优先级高于元素选择器3. 类选择器:选择具有相同的class属性值的元素。* 语法:.class属性值{}* 注意:类选择器选择器优先级高于元素选择器
--><div id="div1">传智播客</div><div class="cls1">黑马程序员</div><p class="cls1">传智学院</p></body>
</html>
2.扩展选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>扩展选择器</title><style>div p{color:red;}div > p {border: 1px solid;}input[type='text']{border: 5px solid;}a:link{color: pink;}a:hover{color: green;}a:active{color: yellow;}a:visited{color: red;}</style>
</head>
<body><div><p>传智播客</p></div><p>黑马程序员</p><div>aaa</div><input type="text" ><input type="password" ><br> <br> <br><a href="#">黑马程序员</a></body>
</html>
3.CSS属性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css属性</title><style>p{color: #FF0000;font-size: 30px;text-align: center;line-height: 200px;/*border 边框*/border: 1px solid red;}div{border: 1px solid red;/*尺寸*/height: 200px;width: 200px;/*背景*/background: url("img/logo.jpg") no-repeat center;}</style>
</head>
<body><p>传智播客</p><div>黑马程序员</div>
</body>
</html>
4.CSS属性_盒子模型
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css属性</title><style>div{border: 1px solid red;width: 100px;}.div1{width: 100px;height: 100px;/*外边距*//* margin: 50px; */}.div2{width: 200px;height: 200px;padding: 50px;/*设置盒子的属性,让width和height就是最终盒子的大小*/box-sizing: border-box;}.div3{float: left;}.div4{float: left;}.div5{float: right;}</style>
</head>
<body><div class="div2"><div class="div1"></div></div><div class="div3">aaaa</div><div class="div4">bbbbb</div><div class="div5">cccc</div>
</body>
</html>
相关文章:
CSS语法、选择器、属性
1.css语法 * 格式:选择器 {属性名1:属性值1;属性名2:属性值2;...}* 选择器:筛选具有相似特征的元素* 注意:* 每一对属性需要使用;隔开,最后一对属性可以不加 2.选择器:筛选具有相似特征的元素 * 分类:1. 基…...
深度学习读取txt训练数据绘制参数曲线图的方法
有一些深度学习模型是并不像yolo系列那样最终输出相应的参数图,有很多训练形成了一个训练log文件,于是需要读取log文件中的内容并绘制成曲线图。 如下实例,有一个log文件的部分截图,需要将其读取出来并绘制曲线图 废话不多说&…...
VB.NET—DataGridView控件教程详解
目录 前言: 过程: 第一步: 第二步: 第三步: 第四步: 第五步: 番外篇: 总结: 前言: DataGridView是.NET FormK中的一个Windows窗体控件,它提供了一个可视化的表格控件,允许用户以表格形式显示和编辑数据。它通常用于显示和编辑数据库…...
MCU测试科普|如何进行MCU芯片测试,具体流程是什么?
MCU芯片测试系统是一种专门用于检测MCU芯片性能和质量的综合性设备。它通常由硬件和软件两部分组成,硬件包括测试仪器、适配器、测试夹具等,用于连接被测MCU芯片和测试机,实现高效高精度的测试。软件部分通常包括测试程序、测试管理软件等&am…...
单向循环代码实现cpp
// 单向循环链表 class CircleLink { public:CircleLink(){head_ new Node();tail_ head_;head_->next_ head_;}~CircleLink(){Node* p head_->next_;while (p ! head_){head_->next_ p->next_;delete p;p head_->next_;}delete head_;}public:// 尾插法 …...
【原创】java+jsp+servlet简单图书管理系统设计与实现
摘要: 图书管理系统是一个专门针对图书馆管理而设计的系统,它可以帮助图书管理员有效的对图书进行管理,在图书管理系统的设计中,首先要考虑的是系统的需求分析,该系统的设计与实现涉及多个方面,包括数据库…...
JVM之jinfo虚拟机配置信息工具
jinfo虚拟机配置信息工具 1、jinfo jinfo(Configuration Info for Java)的作用是实时地查看和调整虚拟机的各项参数。 使用jps -v 可以查看虚拟机启动时显示指定的参数列表,但是如果想知道未被显示指定的参数的系统默认值,除 …...
软件测试|PO设计模式在 UI 自动化中的实践
PO的思想最早是2013年由IT大佬Martin Flower提出的:https://martinfowler.com/bliki/PageObject.html 没错,就是他 — 没错,就是他 — 在他的文章里有这样一张经典样图,图片中展示了测试代码中直接操作HTML元素和使用PO模式将page对象封装成…...
如何上传自己的Jar到Maven中央仓库
在项目开发过程中,我们常常会使用 Maven 从仓库拉取开源的第三方 Jar 包。本文将带领大家将自己写好的代码或开源项目发布到 Maven中央仓库中,让其他人可以直接依赖你的 Jar 包,而不需要先下载你的代码后 install 到本地。 注册帐号 点击以…...
智能井盖传感器功能,万宾科技产品介绍
在国家治理方面,对社会的治理是一个重要的领域,一定要在推进社会治理现代化过程中提高市政府的管理和工作能力,推动社会拥有稳定有序的发展。在管理过程中对全市井盖进行统一化管理,可能是市政府比较头疼的难题,如果想…...
洛谷P4185 离线+并查集
好题,发现没有强制在线,可以离线操作 排序之后带集合点数的并查集就好了 #include<bits/stdc.h> using namespace std; const int N 1e510; int n,m; int p[N],sz[N];int find(int x){if(x!p[x])p[x] find(p[x]);return p[x]; } struct Node{in…...
遇到java.security.AccessControlException:access denied怎么办?
今天工作中遇到了如下报错,记录一下解决方案。 目录 问题 分析 结论 问题 这个问题出现在openjdk8启动网页端Java应用。 Java Exception:java.security.AccessControlException:access denied("java.net.SocketPermission""22.188.130.11:9000…...
c++对接CAT1400
最近工作中遇到需要对接1400协议,网上搜索不到c/c++的实现,所以记录一下自己的实现。 第一步注册: 1400是在http摘要认证的基础上做的,所以要去了解http摘要认证的流程 说明: 1.视图库通过用户分配,手动分配username,password给三方对接程序 2.三方对接程序第一次请求由…...
Linux基础【Linux知识贩卖机】
偶尔的停顿和修整,对于人生是非常必要的。 --随记 文章目录 Linux目录目录结构磁盘分区相关命令 相对路径和绝对路径 文件权限用户分类umask创建文件权限计算方法粘滞位 总结 Linux目录 目录结构 Linux 操作系统采用了一种层次化的目录结构,常被称为标…...
CSS 边框、轮廓线
一、CSS边框: CSS边框属性允许指定一个元素边框的样式和颜色。 1)、边框样式:border-style属性用来定义边框的样式,border-style值: 2)、边框宽度:border-width属性用于指定边框宽度。指定变宽…...
Transformer架构 完整的处理流程
Transformer 是由多层的 Encoder 和 Decoder 构成的。每一层的 Encoder 和 Decoder 都包含了多头自注意力机制(Multi-head Self Attention)、前馈神经网络(Feed Forward)和添加及归一化(Add & Norm)。特…...
git and svn 行尾风格配置强制为lf
git CLI配置: // 提交时转换为LF,检出时转换为CRLF git config --global core.autocrlf true // 提交时转换为LF,检出时不转换 git config --global core.autocrlf input // 提交检出均不转换 git config --global core.autocrlf f…...
达梦数据库答案
1、 创建数据库实例,到/dm8/data下,数据库名:DEMO,实例名DEMOSERVER(10分) [dmdbadmServer ~]$ cd /dm8/tool [dmdbadmServer tool]$ ./dbca.sh1、 簇大小32,页大小16,登录密码&…...
基于SSM的楼房销售系统设计与实现
末尾获取源码 开发语言:Java Java开发工具:JDK1.8 后端框架:SSM 前端:采用JSP技术开发 数据库:MySQL5.7和Navicat管理工具结合 服务器:Tomcat8.5 开发软件:IDEA / Eclipse 是否Maven项目&#x…...
Blender做一个小凳子学习笔记
文章目录 创建椅座椅子腿靠背渲染 本文是这个B站视频的学习笔记:【Blender】爆肝两个月!拜托三连了!这绝对是全B站最用心的(没有之一)Blender 3D建模零基础入门 创建椅座 首先,需要了解其左上角和右上角的…...
FLUX.1-Krea-Extracted-LoRA生成艺术展:多风格LoRA效果对比鉴赏
FLUX.1-Krea-Extracted-LoRA生成艺术展:多风格LoRA效果对比鉴赏 1. 虚拟艺术展导览 欢迎来到这场独特的AI生成艺术展。与传统展览不同,这里所有作品都是由FLUX.1基础模型配合不同主题LoRA生成的数字艺术品。LoRA(Low-Rank Adaptation&#…...
Arm Total Compute时钟控制架构与低功耗设计解析
1. Arm Total Compute时钟控制架构解析在Arm Total Compute 2022参考设计中,时钟控制系统采用分层架构设计,由CPU PIK(Power Integration Kit)和System PIK两大模块组成。这种设计源于现代SoC对精细功耗管理的需求——传统的一体式…...
【多线路故障】含sop的配电网故障重构研究附Matlab代码
✅作者简介:热爱科研的Matlab仿真开发者,擅长数据处理、建模仿真、程序设计、完整代码获取、论文复现及科研仿真。🍎 往期回顾关注个人主页:Matlab科研工作室🍊个人信条:格物致知,完整Matlab代码及仿真咨询…...
AI驱动的错误监控代理:从告警到自愈的智能运维实践
1. 项目概述:一个AI驱动的错误监控代理在软件开发和运维的日常里,错误监控是个老生常谈但又无法回避的核心议题。传统的监控方案,比如我们熟知的Sentry、Datadog APM或者自研的日志告警系统,已经能很好地完成“发现错误”和“告警…...
为什么你的MCP 2026边缘服务始终达不到SLA 99.99%?——基于17个真实客户集群的优化归因分析
更多请点击: https://intelliparadigm.com 第一章:MCP 2026边缘服务SLA达标性诊断框架 MCP 2026边缘服务SLA达标性诊断框架是一套面向低时延、高可用边缘计算场景的轻量化可观测性验证体系,聚焦于响应延迟、服务连续性与资源隔离三类核心SLA…...
如何用开源项目Ryujinx在PC上免费畅玩Switch游戏?终极探索指南
如何用开源项目Ryujinx在PC上免费畅玩Switch游戏?终极探索指南 【免费下载链接】Ryujinx 用 C# 编写的实验性 Nintendo Switch 模拟器 项目地址: https://gitcode.com/GitHub_Trending/ry/Ryujinx 想象一下,你正坐在电脑前,想要体验《…...
MCP 2026沙箱资源隔离白皮书首发:23项隔离指标基准测试、ARM/x86差异对比及FIPS 140-3合规路径
更多请点击: https://intelliparadigm.com 第一章:MCP 2026沙箱资源隔离白皮书概述 MCP 2026(Multi-Context Partitioning 2026)沙箱是面向云原生安全执行环境设计的下一代资源隔离框架,旨在为微服务、AI推理任务及敏…...
星穹铁道抽卡数据分析终极指南:免费解锁您的完整抽卡历史
星穹铁道抽卡数据分析终极指南:免费解锁您的完整抽卡历史 【免费下载链接】star-rail-warp-export Honkai: Star Rail Warp History Exporter 项目地址: https://gitcode.com/gh_mirrors/st/star-rail-warp-export 还在为记不清自己抽了多少次卡而烦恼吗&…...
智能看板系统:基于事件驱动的自动化项目管理实践
1. 项目概述:一个能“感受”任务状态的智能看板 如果你和我一样,在团队协作或者个人项目管理中重度依赖看板工具,那你一定遇到过这样的痛点:看板上的卡片越来越多,状态更新全靠手动拖拽,时间一长࿰…...
深入理解W25Q64:基于STM32的SPI Flash存储管理实战(含扇区/块擦除策略)
深入理解W25Q64:基于STM32的SPI Flash存储管理实战 在嵌入式系统开发中,外部Flash存储器扮演着至关重要的角色。W25Q64作为一款8MB容量的SPI NOR Flash芯片,因其高性价比和易用性,成为众多STM32项目的首选存储方案。但真正要发挥它…...
