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建模零基础入门 创建椅座 首先,需要了解其左上角和右上角的…...
BetterNCM Installer II:网易云音乐插件管理器终极使用指南
BetterNCM Installer II:网易云音乐插件管理器终极使用指南 【免费下载链接】BetterNCM-Installer 一键安装 Better 系软件 项目地址: https://gitcode.com/gh_mirrors/be/BetterNCM-Installer BetterNCM Installer II是一款专为网易云音乐PC客户端设计的插件…...
Skybridge:基于React与TypeScript的AI嵌入式应用全栈框架
1. 从零到一:为什么我们需要 Skybridge?如果你最近在捣鼓 ChatGPT 的 Apps SDK 或者 Model Context Protocol(MCP),想给大模型对话里塞点交互式 UI,那你大概率已经体验过那种“原始”的开发手感了。官方 SD…...
怎样轻松配置魔兽争霸3优化工具:完整实用指南
怎样轻松配置魔兽争霸3优化工具:完整实用指南 【免费下载链接】WarcraftHelper Warcraft III Helper , support 1.20e, 1.24e, 1.26a, 1.27a, 1.27b 项目地址: https://gitcode.com/gh_mirrors/wa/WarcraftHelper 还在为魔兽争霸3在现代电脑上的兼容性问题而…...
让Python三维数据可视化变得简单有趣:PyVista入门指南
让Python三维数据可视化变得简单有趣:PyVista入门指南 【免费下载链接】pyvista 3D plotting and mesh analysis through a streamlined interface for the Visualization Toolkit (VTK) 项目地址: https://gitcode.com/gh_mirrors/py/pyvista 还在为复杂的三…...
douyin-downloader:构建高效抖音内容获取系统的终极解决方案
douyin-downloader:构建高效抖音内容获取系统的终极解决方案 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback…...
别再只数朋友了!用NetworkX实战解读社交网络中的三种“核心”玩家(附完整代码)
社交网络中的关键角色识别:用NetworkX解锁三类核心玩家 在微信朋友圈里,总有几个"人脉王"能帮你联系到意想不到的资源;微博上总有些"信息枢纽"能让热点话题迅速发酵;而某些"活跃分子"则像社交网络的…...
别再死记硬背DP公式了!用‘分苹果’的思路,5分钟搞懂‘数的划分’(附NOIP真题解析)
用‘分苹果’的思维破解动态规划:数的划分问题实战指南 每次看到动态规划的状态转移方程,是不是总有一种“这公式是怎么蹦出来的”困惑?尤其是面对经典的“数的划分”问题时,那些抽象的dp[i][j]定义和递推关系,简直像天…...
态、势、感、知之间的对称性与非对称性
从《人机环境系统智能:超越人机融合》一书中我们可以得到人机协同深度态势感知理论的核心,即态、势、感、知四者之间的关系,并非简单的线性或单向作用,而是一个充满了对称性与非对称性的复杂动态网络。简单来说,对称性…...
实战避坑:为你的STM32MP157开发板手动编译和配置U-Boot SPL(附常见编译错误解决)
实战避坑:为你的STM32MP157开发板手动编译和配置U-Boot SPL(附常见编译错误解决) 嵌入式开发中,U-Boot SPL(Secondary Program Loader)作为系统启动的关键环节,往往成为开发者移植过程中的"…...
AutoDock Vina 分子对接终极指南:从零开始掌握药物虚拟筛选
AutoDock Vina 分子对接终极指南:从零开始掌握药物虚拟筛选 【免费下载链接】AutoDock-Vina AutoDock Vina 项目地址: https://gitcode.com/gh_mirrors/au/AutoDock-Vina AutoDock Vina 是一款功能强大的开源分子对接软件,专为药物发现和虚拟筛选…...
