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建模零基础入门 创建椅座 首先,需要了解其左上角和右上角的…...
PostgreSQL 对 IPv6 的支持情况
PostgreSQL 对 IPv6 的支持情况 PostgreSQL 全面支持 IPv6 网络协议,包括连接、存储和操作 IPv6 地址。以下是详细说明: 一、网络连接支持 1. 监听 IPv6 连接 在 postgresql.conf 中配置: listen_addresses 0.0.0.0,:: # 监听所有IPv4…...

【计算机网络】NAT、代理服务器、内网穿透、内网打洞、局域网中交换机
🔥个人主页🔥:孤寂大仙V 🌈收录专栏🌈:计算机网络 🌹往期回顾🌹:【计算机网络】数据链路层——ARP协议 🔖流水不争,争的是滔滔不息 一、网络地址转…...
leetcode sql50题
在中文站没找到对应的集合,想来自己动手拷贝过来,方便大家面试复习用,对应英文站点: https://leetcode.com/studyplan/top-sql-50/ Select #1757. 可回收且低脂的产品 链接: https://leetcode.cn/problems/recyclable-and-low-fa…...
Boost ASIO 库深入学习(3)
Boost ASIO 库深入学习(3) UDP简单通信导论 在继续深入前,我们不妨也来点碎碎念,因为UDP通信协议的模型与TCP是不同的,这种差异正是理解“无连接通信”的关键所在。我们下面要构建的,是一个经典的UDP通信…...
【Go语言基础【19】】接口:灵活实现多态的核心机制
文章目录 零、概述一、接口基础1、接口的基本概念a. 接口定义b. 类型实现接口(无需显式声明)c. 接口变量(体现了多态) 2、实现接口的方式3、接口组合4、接口的底层结构 二、空接口与类型断言1. 空接口(interface{}&…...

(四)Linux性能优化-CPU-软中断
软中断 中断其实是一种异步的事件处理机制,可以提高系统的并发处理能力 由于中断处理程序会打断其他进程的运行,所以,为了减少对正常进程运行调度的影响,中断处理程序就需要尽可能快地运行 Linux 将中断处理过程分成了两个阶段&a…...

LLMs 系列科普文(5)
在前文中,我们讲述了什么是基础模型,并重点以 LLaMA 3.1 基础模型为例,向大家演示了它可以做什么,有哪些问题或有趣的现象。 在进入新的主题内容之前,我们再次对 基础模型 做一些总结: 这是一个基于 toke…...

3 个优质的终端 GitHub 开源工具
1、Oh My Zsh Oh My Zsh 是一个帮助你管理和美化 zsh 终端的开源工具。它让你的终端更炫酷、更高效。安装后,你可以快速使用各种插件和主题,比如常见的 git 命令简化、支持多种编程语言工具等,每次打开终端都会有惊喜。无论你是开发者还是普…...
Kali Linux 安全工具解析
Kali Linux 安全工具解析 目录 Kali Linux 安全工具解析一、Kali Linux 概述1.1 核心特性1.2 系统要求 二、核心工具分类与实战应用2.1 信息收集工具2.1.1 Nmap2.1.2 Recon-ng2.1.3 theHarvester 2.2 漏洞利用工具2.2.1 Metasploit Framework2.2.2 SQLMap2.2.3 Burp Suite 2.3 …...

随机算法一文深度全解
随机算法一文深度全解 一、随机算法基础1.1 定义与核心特性1.2 算法优势与局限 二、随机算法经典案例2.1 随机化快速排序原理推导问题分析与策略代码实现(Python、Java、C) 2.2 蒙特卡罗方法计算 π 值原理推导问题分析与策略代码实现(Python…...