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建模零基础入门 创建椅座 首先，需要了解其左上角和右上角的…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略，并且实现了基本的选区操作，还调研了自绘选区的实现。那么相对的，我们还需要设计编辑器的选区表达，也可以称为模型选区。编辑器中应用变更时的操作范围，就是以模型选区为基准来…...
（二）TensorRT-LLM | 模型导出（v0.20.0rc3）
0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述，后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作，其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...
剑指offer20_链表中环的入口节点
链表中环的入口节点 给定一个链表，若其中包含环，则输出环的入口节点。 若其中不包含环，则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...
第25节 Node.js 断言测试
Node.js的assert模块主要用于编写程序的单元测试时使用，通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试，通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...
Docker 本地安装 mysql 数据库
Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker ；并安装。 基础操作不再赘述。 打开 macOS 终端，开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...
音视频——I2S 协议详解
I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议，专门用于在数字音频设备之间传输数字音频数据。它由飞利浦（Philips）公司开发，以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...
【JavaSE】多线程基础学习笔记
多线程基础 -线程相关概念 程序（Program） 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序，比如我们使用QQ，就启动了一个进程，操作系统就会为该进程分配内存…...
Rust 开发环境搭建
环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行： rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu 2、Hello World fn main() { println…...
实战三：开发网页端界面完成黑白视频转为彩色视频
一、需求描述 设计一个简单的视频上色应用，用户可以通过网页界面上传黑白视频，系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观，不需要了解技术细节。 效果图 二、实现思路 总体思路： 用户通过Gradio界面上…...
LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用
中达瑞和自2005年成立以来，一直在光谱成像领域深度钻研和发展，始终致力于研发高性能、高可靠性的光谱成像相机，为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...