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

CSS语法、选择器、属性

news 2025/6/10 7:58:56

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语法 * 格式&#xff1a;选择器 {属性名1:属性值1;属性名2:属性值2;...}* 选择器:筛选具有相似特征的元素* 注意&#xff1a;* 每一对属性需要使用&#xff1b;隔开&#xff0c;最后一对属性可以不加 2.选择器&#xff1a;筛选具有相似特征的元素 * 分类&#xff1a;1. 基…...

编程日记 2023/11/9 22:10:30

深度学习读取txt训练数据绘制参数曲线图的方法

有一些深度学习模型是并不像yolo系列那样最终输出相应的参数图&#xff0c;有很多训练形成了一个训练log文件&#xff0c;于是需要读取log文件中的内容并绘制成曲线图。 如下实例&#xff0c;有一个log文件的部分截图&#xff0c;需要将其读取出来并绘制曲线图 废话不多说&…...

编程日记 2023/11/9 22:09:28

VB.NET—DataGridView控件教程详解

目录 前言: 过程: 第一步: 第二步: 第三步: 第四步: 第五步&#xff1a; 番外篇: 总结: 前言: DataGridView是.NET FormK中的一个Windows窗体控件&#xff0c;它提供了一个可视化的表格控件&#xff0c;允许用户以表格形式显示和编辑数据。它通常用于显示和编辑数据库…...

编程日记 2023/11/9 22:08:27

MCU测试科普|如何进行MCU芯片测试，具体流程是什么？

MCU芯片测试系统是一种专门用于检测MCU芯片性能和质量的综合性设备。它通常由硬件和软件两部分组成&#xff0c;硬件包括测试仪器、适配器、测试夹具等&#xff0c;用于连接被测MCU芯片和测试机&#xff0c;实现高效高精度的测试。软件部分通常包括测试程序、测试管理软件等&am…...

编程日记 2023/11/9 22:06:24

单向循环代码实现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:// 尾插法 …...

编程日记 2023/11/9 22:05:23

【原创】java+jsp+servlet简单图书管理系统设计与实现

摘要&#xff1a; 图书管理系统是一个专门针对图书馆管理而设计的系统&#xff0c;它可以帮助图书管理员有效的对图书进行管理&#xff0c;在图书管理系统的设计中&#xff0c;首先要考虑的是系统的需求分析&#xff0c;该系统的设计与实现涉及多个方面&#xff0c;包括数据库…...

编程日记 2023/11/9 22:04:22

JVM之jinfo虚拟机配置信息工具

jinfo虚拟机配置信息工具 1、jinfo jinfo&#xff08;Configuration Info for Java&#xff09;的作用是实时地查看和调整虚拟机的各项参数。 使用jps -v 可以查看虚拟机启动时显示指定的参数列表&#xff0c;但是如果想知道未被显示指定的参数的系统默认值&#xff0c;除 …...

编程日记 2023/11/9 22:03:22

软件测试|PO设计模式在 UI 自动化中的实践

PO的思想最早是2013年由IT大佬Martin Flower提出的&#xff1a;https://martinfowler.com/bliki/PageObject.html 没错&#xff0c;就是他 — 没错&#xff0c;就是他 — 在他的文章里有这样一张经典样图,图片中展示了测试代码中直接操作HTML元素和使用PO模式将page对象封装成…...

编程日记 2023/11/9 22:02:21

如何上传自己的Jar到Maven中央仓库

在项目开发过程中&#xff0c;我们常常会使用 Maven 从仓库拉取开源的第三方 Jar 包。本文将带领大家将自己写好的代码或开源项目发布到 Maven中央仓库中&#xff0c;让其他人可以直接依赖你的 Jar 包&#xff0c;而不需要先下载你的代码后 install 到本地。 注册帐号 点击以…...

编程日记 2023/11/9 22:00:19

智能井盖传感器功能，万宾科技产品介绍

在国家治理方面&#xff0c;对社会的治理是一个重要的领域&#xff0c;一定要在推进社会治理现代化过程中提高市政府的管理和工作能力&#xff0c;推动社会拥有稳定有序的发展。在管理过程中对全市井盖进行统一化管理&#xff0c;可能是市政府比较头疼的难题&#xff0c;如果想…...

编程日记 2023/11/9 21:58:17

洛谷P4185 离线+并查集

好题&#xff0c;发现没有强制在线&#xff0c;可以离线操作 排序之后带集合点数的并查集就好了 #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…...

编程日记 2023/11/9 21:57:16

遇到java.security.AccessControlException:access denied怎么办？

今天工作中遇到了如下报错&#xff0c;记录一下解决方案。 目录 问题 分析 结论 问题 这个问题出现在openjdk8启动网页端Java应用。 Java Exception:java.security.AccessControlException:access denied("java.net.SocketPermission""22.188.130.11:9000…...

编程日记 2023/11/9 21:55:14

c++对接CAT1400

最近工作中遇到需要对接1400协议，网上搜索不到c/c++的实现，所以记录一下自己的实现。 第一步注册： 1400是在http摘要认证的基础上做的，所以要去了解http摘要认证的流程 说明： 1.视图库通过用户分配，手动分配username，password给三方对接程序 2.三方对接程序第一次请求由…...

编程日记 2023/11/9 21:54:12

Linux基础【Linux知识贩卖机】

偶尔的停顿和修整&#xff0c;对于人生是非常必要的。 --随记 文章目录 Linux目录目录结构磁盘分区相关命令 相对路径和绝对路径 文件权限用户分类umask创建文件权限计算方法粘滞位 总结 Linux目录 目录结构 Linux 操作系统采用了一种层次化的目录结构&#xff0c;常被称为标…...

编程日记 2023/11/9 21:53:11

CSS 边框、轮廓线

一、CSS边框&#xff1a; CSS边框属性允许指定一个元素边框的样式和颜色。 1&#xff09;、边框样式&#xff1a;border-style属性用来定义边框的样式&#xff0c;border-style值&#xff1a; 2&#xff09;、边框宽度&#xff1a;border-width属性用于指定边框宽度。指定变宽…...

编程日记 2023/11/9 21:52:10

Transformer架构 完整的处理流程

Transformer 是由多层的 Encoder 和 Decoder 构成的。每一层的 Encoder 和 Decoder 都包含了多头自注意力机制&#xff08;Multi-head Self Attention&#xff09;、前馈神经网络&#xff08;Feed Forward&#xff09;和添加及归一化&#xff08;Add & Norm&#xff09;。特…...

编程日记 2023/11/9 21:51:09

git and svn 行尾风格配置强制为lf

git CLI配置&#xff1a; // 提交时转换为LF&#xff0c;检出时转换为CRLF git config --global core.autocrlf true // 提交时转换为LF&#xff0c;检出时不转换 git config --global core.autocrlf input // 提交检出均不转换 git config --global core.autocrlf f…...

编程日记 2023/11/9 21:50:07

达梦数据库答案

1、 创建数据库实例&#xff0c;到/dm8/data下&#xff0c;数据库名&#xff1a;DEMO&#xff0c;实例名DEMOSERVER&#xff08;10分&#xff09; [dmdbadmServer ~]$ cd /dm8/tool [dmdbadmServer tool]$ ./dbca.sh1、 簇大小32&#xff0c;页大小16&#xff0c;登录密码&…...

编程日记 2023/11/9 21:47:04

基于SSM的楼房销售系统设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…...

编程日记 2023/11/9 21:46:03

Blender做一个小凳子学习笔记

文章目录 创建椅座椅子腿靠背渲染 本文是这个B站视频的学习笔记&#xff1a;【Blender】爆肝两个月&#xff01;拜托三连了&#xff01;这绝对是全B站最用心的&#xff08;没有之一&#xff09;Blender 3D建模零基础入门 创建椅座 首先&#xff0c;需要了解其左上角和右上角的…...

编程日记 2023/11/9 21:44:01

PostgreSQL 对 IPv6 的支持情况

PostgreSQL 对 IPv6 的支持情况 PostgreSQL 全面支持 IPv6 网络协议&#xff0c;包括连接、存储和操作 IPv6 地址。以下是详细说明&#xff1a; 一、网络连接支持 1. 监听 IPv6 连接 在 postgresql.conf 中配置&#xff1a; listen_addresses 0.0.0.0,:: # 监听所有IPv4…...

编程新知 2025/6/10 7:40:00

【计算机网络】NAT、代理服务器、内网穿透、内网打洞、局域网中交换机

&#x1f525;个人主页&#x1f525;&#xff1a;孤寂大仙V &#x1f308;收录专栏&#x1f308;&#xff1a;计算机网络 &#x1f339;往期回顾&#x1f339;&#xff1a;【计算机网络】数据链路层——ARP协议 &#x1f516;流水不争&#xff0c;争的是滔滔不息 一、网络地址转…...

编程新知 2025/6/10 1:18:14

leetcode sql50题

在中文站没找到对应的集合&#xff0c;想来自己动手拷贝过来&#xff0c;方便大家面试复习用&#xff0c;对应英文站点&#xff1a; https://leetcode.com/studyplan/top-sql-50/ Select #1757. 可回收且低脂的产品 链接: https://leetcode.cn/problems/recyclable-and-low-fa…...

编程新知 2025/6/9 20:00:16

Boost ASIO 库深入学习（3）

Boost ASIO 库深入学习&#xff08;3&#xff09; UDP简单通信导论 在继续深入前&#xff0c;我们不妨也来点碎碎念&#xff0c;因为UDP通信协议的模型与TCP是不同的&#xff0c;这种差异正是理解“无连接通信”的关键所在。我们下面要构建的&#xff0c;是一个经典的UDP通信…...

编程新知 2025/6/9 18:50:19

【Go语言基础【19】】接口：灵活实现多态的核心机制

文章目录 零、概述一、接口基础1、接口的基本概念a. 接口定义b. 类型实现接口&#xff08;无需显式声明&#xff09;c. 接口变量&#xff08;体现了多态&#xff09; 2、实现接口的方式3、接口组合4、接口的底层结构 二、空接口与类型断言1. 空接口&#xff08;interface{}&…...

编程新知 2025/6/9 17:52:31

（四）Linux性能优化-CPU-软中断

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

编程新知 2025/6/9 16:47:34

LLMs 系列科普文（5）

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

编程新知 2025/6/9 13:32:46

3 个优质的终端 GitHub 开源工具

1、Oh My Zsh Oh My Zsh 是一个帮助你管理和美化 zsh 终端的开源工具。它让你的终端更炫酷、更高效。安装后&#xff0c;你可以快速使用各种插件和主题&#xff0c;比如常见的 git 命令简化、支持多种编程语言工具等&#xff0c;每次打开终端都会有惊喜。无论你是开发者还是普…...

编程新知 2025/6/9 11:58:50

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 …...

编程新知 2025/6/9 10:16:37

随机算法一文深度全解

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

编程新知 2025/6/9 5:32:36