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

css学习2(利用id与class修改元素)

1、id选择器可以为标有特定id的html元素指定特定的样式。

2、选择器以#开头,后跟某id的属性值。

3、class选择器用于描述一组元素的样式,class可以在多个元素使用。

4、类选择器用.选择。

5、指定特定的元素使用class。

6、元素的多个类用空格分开,显示模式为各类的综合。

7、通过元素与类名双重限定可以用元素.类名限定相应匹配的元素格式,只有单个元素或单个类名匹配,不会起作用。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS的ID与class</title><style>#para1 {/*通过元素的id修改元素的样式*/text-align: center;color: red;}.center{/*通过类名控制样式*/text-align: center;}.color{color: red;}p.right{/*通过元素、类名控制*/text-align: right;}</style></head><body><p id="para1">HELLO PHP</p><p>这个段落不受样式的影响</p><h1 class="center">标题居中</h1><!--单个类名设置样式--><p class="center color">段落居中</p><!--同一元素,多个类名,样式多重控制叠加--><h1 class="right">h1右对齐</h1><!--类名起作用--><p class="right">段落靠右</p><!--元素与类名都匹配,起作用--><p>普通段落</p><!--只有元素名匹配,不起作用--></body>
</html>

运行结果:

 

相关文章:

css学习2(利用id与class修改元素)

1、id选择器可以为标有特定id的html元素指定特定的样式。 2、选择器以#开头&#xff0c;后跟某id的属性值。 3、class选择器用于描述一组元素的样式&#xff0c;class可以在多个元素使用。 4、类选择器用.选择。 5、指定特定的元素使用class。 6、元素的多个类用空格分开&…...

wsl2(debian)安装python的不同版本例如3.8

要在Debian上安装 Python 3.8&#xff0c;可以按照以下步骤操作&#xff1a; 1.确保你的 Debian 系统已经更新到最新版本&#xff0c;可以使用以下命令更新&#xff1a; sudo apt update sudo apt upgrade2.安装 Python 3.8 的依赖项&#xff0c;以及构建 Python 时需要的工具…...

Python教程(9)——Python变量类型列表list的用法介绍

列表操作 创建列表访问列表更改列表元素增加列表元素修改列表元素删除列表元素 删除列表 在Python中&#xff0c;列表&#xff08;list&#xff09;是一种有序、可变的数据结构&#xff0c;用于存储多个元素。列表可以包含不同类型的元素&#xff0c;包括整数、浮点数、字符串等…...

springboot+VUE智慧公寓管理系统java web酒店民宿房屋住宿报修信息jsp源代码

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 springbootVUE智慧公寓管理系统 系统有2权限&#xf…...

神经网络基础-神经网络补充概念-36-dropout正则化

概念 Dropout 是一种常用的正则化技术&#xff0c;用于减少深度神经网络中的过拟合问题。它在训练过程中随机地将一部分神经元的输出置为零&#xff0c;从而强制模型在训练过程中学习多个独立的子模型&#xff0c;从而减少神经元之间的依赖关系&#xff0c;提高模型的泛化能力…...

Go语言基础之变量和常量

标识符与关键字 标识符 在编程语言中标识符就是程序员定义的具有特殊意义的词&#xff0c;比如变量名、常量名、函数名等等。 Go语言中标识符由字母数字和_(下划线&#xff09;组成&#xff0c;并且只能以字母和_开头。 举几个例子&#xff1a;abc, _, _123, a123 关键字 关…...

Spring Boot 项目实现 Spring AOP

【注】实现在SpringBoot项目中&#xff0c;同时给两个类的方法添加AOP前置通知 1、创建一个SpringBoot项目 2、创建两个目标类和方法 package com.tqazy.learn_spring_project.spring_aop;import org.springframework.stereotype.Service;/*** ClassName SpringAopUserServi…...

Baumer工业相机堡盟工业相机如何通过BGAPISDK设置相机的固定帧率(C#)

Baumer工业相机堡盟工业相机如何通过BGAPI SDK设置相机的固定帧率&#xff08;C#&#xff09; Baumer工业相机Baumer工业相机的固定帧率功能的技术背景CameraExplorer如何查看相机固定帧率功能在BGAPI SDK里通过函数设置相机固定帧率 Baumer工业相机通过BGAPI SDK设置相机固定帧…...

js拼接字符串

在js中&#xff0c;你可以使用字符串拼接的方式创建新的字符串。 下面是一些常用的方法&#xff1a; 1、使用运算符&#xff1a; var str1 "Hello"; var str2 "World"; var result str1 " " str2; console.log(result); // 输出&#xf…...

神经网络基础-神经网络补充概念-37-其他正则化方法

概念 L1 正则化&#xff08;Lasso Regularization&#xff09;&#xff1a;L1 正则化通过在损失函数中添加参数的绝对值之和作为惩罚项&#xff0c;促使部分参数变为零&#xff0c;实现特征选择。适用于稀疏性特征选择问题。 L2 正则化&#xff08;Ridge Regularization&…...

掌握Python的X篇_36_定义类、名称空间

本篇将会重新回到python语法的主线&#xff0c;并且开展新的篇章&#xff0c;那就是面向对象的编程。 文章目录 1. 面向对象2. 定义类3. 类的名称空间性质 1. 面向对象 面向对象是一种编程的思想&#xff0c;并不是限制在某一种语言上的&#xff0c;不同语言面向对象的表达能力…...

回归预测 | MATLAB实现GRU门控循环单元多输入多输出

回归预测 | MATLAB实现GRU门控循环单元多输入多输出 目录 回归预测 | MATLAB实现GRU门控循环单元多输入多输出预测效果基本介绍程序设计往期精彩参考资料 预测效果 基本介绍 MATLAB实现GRU门控循环单元多输入多输出&#xff0c;数据为多输入多输出预测数据&#xff0c;输入10个…...

数据结构--拓扑排序

数据结构–拓扑排序 AOV⽹ A O V ⽹ \color{red}AOV⽹ AOV⽹(Activity On Vertex NetWork&#xff0c;⽤顶点表示活动的⽹)&#xff1a; ⽤ D A G 图 \color{red}DAG图 DAG图&#xff08;有向⽆环图&#xff09;表示⼀个⼯程。顶点表示活动&#xff0c;有向边 < V i , V j …...

算法竞赛备赛之搜索与图论训练提升,暑期集训营培训

目录 1.DFS和BFS 1.1.DFS深度优先搜索 1.2.BFS广度优先搜索 2.树与图的遍历&#xff1a;拓扑排序 3.最短路 3.1.迪杰斯特拉算法 3.2.贝尔曼算法 3.3.SPFA算法 3.4.多源汇最短路Floy算法 4.最小生成树 4.1.普利姆算法 4.2.克鲁斯卡尔算法 5.二分图&#xff1a;染色法…...

Linux驱动入门(6.2)按键驱动和LED驱动 --- 将逻辑电平与物理电平分离

前言 &#xff08;1&#xff09;在学习完Linux驱动入门&#xff08;6&#xff09;LED驱动—设备树之后&#xff0c;我们发现一个问题&#xff0c;设备树明明的gpios信息明明有三个元素gpios <&gpio5 3 GPIO_ACTIVE_LOW>; &gpio5 3 用来确定控制那个引脚&#xf…...

CentOS系统环境搭建(十四)——CentOS7.9安装elasticsearch-head

centos系统环境搭建专栏&#x1f517;点击跳转 关于node的安装请看上一篇CentOS系统环境搭建&#xff08;十三&#xff09;——CentOS7安装nvm&#xff0c;&#x1f517;点击跳转。 CentOS7.9安装elasticsearch-head 文章目录 CentOS7.9安装elasticsearch-head1.下载2.解压3.修…...

设计HTML5图像和多媒体

在网页中的文本信息直观、明了&#xff0c;而多媒体信息更富内涵和视觉冲击力。恰当使用不同类型的多媒体可以展示个性&#xff0c;突出重点&#xff0c;吸引用户。在HTML5之前&#xff0c;需要借助插件为网页添加多媒体&#xff0c;如Adobe Flash Player、苹果的QuickTime等。…...

基于YOLOv8模型和Caltech数据集的行人检测系统(PyTorch+Pyside6+YOLOv8模型)

摘要 基于YOLOv8模型和Caltech数据集的行人检测系统可用于日常生活中检测与定位行人&#xff0c;利用深度学习算法可实现图片、视频、摄像头等方式的行人目标检测&#xff0c;另外本系统还支持图片、视频等格式的结果可视化与结果导出。本系统采用YOLOv8目标检测算法训练数据集…...

Flutter 宽高自适应

在Flutter开发中也需要宽高自适应&#xff0c;手动写一个工具类&#xff0c;集成之后在像素后面直接使用 px或者 rpx即可。 工具类代码如下&#xff1a; import dart:ui;class HYSizeFit {static double screenWidth 0.0;static double screenHeight 0.0;static double phys…...

LeetCode 0833. 字符串中的查找与替换

【LetMeFly】833.字符串中的查找与替换 力扣题目链接&#xff1a;https://leetcode.cn/problems/find-and-replace-in-string/ 你会得到一个字符串 s (索引从 0 开始)&#xff0c;你必须对它执行 k 个替换操作。替换操作以三个长度均为 k 的并行数组给出&#xff1a;indices,…...

告别假进度条!UE5蓝图实战:用自定义AssetManager实现真实关卡加载进度

UE5蓝图实战&#xff1a;打造真实关卡加载进度系统 在虚幻引擎5&#xff08;UE5&#xff09;游戏开发中&#xff0c;流畅的关卡加载体验对玩家沉浸感至关重要。许多开发者会遇到"假进度条"问题——进度条看似在动&#xff0c;实则与真实加载进度无关。本文将手把手教…...

OpenClaw 2.7.5 Windows 一键部署教程|零配置开箱即用

前言 本地 AI 智能体技术持续迭代&#xff0c;私有化部署、数据安全可控、低门槛快速落地&#xff0c;已成为用户选型的核心考量。开源轻量化 AI 智能体 OpenClaw 2.7.5 版本完成全面优化升级&#xff0c;在环境适配性、服务稳定性与模型集成能力上均有显著提升&#xff0c;原…...

深入STM32中断系统:从EXTI触发到NVIC裁决的完整流程剖析(附流程图详解)

深入STM32中断系统&#xff1a;从EXTI触发到NVIC裁决的完整流程剖析 在嵌入式开发中&#xff0c;中断系统是实时响应的核心机制。对于STM32开发者而言&#xff0c;深入理解从外部信号触发到CPU执行中断服务程序(ISR)的完整链路&#xff0c;是优化系统实时性、排查异常问题的关…...

新手入门教程使用Python快速调用Taotoken提供的多模型API服务

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 新手入门教程使用Python快速调用Taotoken提供的多模型API服务 对于刚开始接触大模型API的开发者而言&#xff0c;直接对接不同厂商…...

性能优化实战:在Unity项目里管理多个Video Player,如何避免内存泄漏和卡顿?

Unity多视频管理实战&#xff1a;规避内存泄漏与卡顿的深度优化策略 在沉浸式游戏体验和交互式AR/VR应用中&#xff0c;视频内容已成为提升用户参与度的关键要素。但当场景中同时存在多个Video Player组件时&#xff0c;开发者往往会遭遇突如其来的性能断崖——内存占用飙升、播…...

Android WebView进阶:从基础API到AndroidX WebKit实战解析

1. WebView基础&#xff1a;从调试到交互全解析 第一次接触WebView时&#xff0c;我完全被这个"浏览器套娃"搞懵了。直到踩了无数坑才发现&#xff0c;掌握这几个核心API就像拿到了打开混合开发大门的钥匙。调试模式绝对是开发者的第一道救命符 - 在Chrome地址栏输入…...

【中科院研究所主办、高录用、往届会后4个月检索】第二届人工智能与基础模型国际学术会议(AIFM 2026)

第二届人工智能与基础模型国际学术会议&#xff08;AIFM 2026&#xff09;将于2026 年 6 月 26-28 日在中国乌鲁木齐举办。会议旨在汇聚来自世界各地学术界、产业界及政府机构的专家学者&#xff0c;围绕人工智能与基础模型技术的核心议题展开深度研讨&#xff0c;共同探索领域…...

3分钟搞定B站视频下载:免费解锁4K大会员高清视频的完整教程

3分钟搞定B站视频下载&#xff1a;免费解锁4K大会员高清视频的完整教程 【免费下载链接】bilibili-downloader B站视频下载&#xff0c;支持下载大会员清晰度4K&#xff0c;持续更新中 项目地址: https://gitcode.com/gh_mirrors/bil/bilibili-downloader 你是否曾为无法…...

Linux应用配置分层实战指南

Linux应用配置分层实战指南本文面向具备一定 Linux 基础的技术人员&#xff0c;围绕应用配置分层展开&#xff0c;重点讨论默认配置、环境覆盖和敏感参数隔离。在中级运维和系统管理工作中&#xff0c;这类主题常常与配置变更、资源状态、权限边界、自动化任务和业务影响交织在…...

智能车底盘DIY避坑指南:直流电机、减速器、编码器怎么选?TB6612FNG够用吗?

智能车底盘DIY避坑指南&#xff1a;直流电机、减速器、编码器怎么选&#xff1f;TB6612FNG够用吗&#xff1f; 当你第一次尝试组装智能车底盘时&#xff0c;站在琳琅满目的电机、减速器和驱动器面前&#xff0c;很容易陷入选择困难。本文将带你避开新手常踩的坑&#xff0c;从实…...