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

news2024/12/26 14:12:08

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>

运行结果:

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/887082.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

python测试 unittest 实践要点

目录 命名篇 命令行篇 测试断言篇 常见测试断言 特殊测试断言 测试前后篇 在每个测试方法前后执行 在每个测试类的所有方法前后执行 不运行测试篇 参考 命名篇 测试模块应以 test_开头 测试类应以Test开头或结尾 测试类中的测试方法应该以test_开头 命令行篇 测…

第二章 Linux系统-系统接口管理

第二章 Linux系统-系统接口管理 ​ 操作系统接口时架构在硬件上的第一层软件&#xff0c;时计算机底层硬件和用户之间的接口&#xff0c;利用操作系统才能使用应用程序&#xff08;或用户&#xff09;对系统硬件的访问。任何操作系统都会想上层提供接口&#xff0c;操作系统接…

应用层自定义协议(组织数据的格式)

概念 在进行网络传输数据的时候&#xff0c;通常是将要传输的数据组织成一个字符串&#xff0c;再将字符串转换为一个字节流进行网络传输数据&#xff0c;而数据组织的格式是多种多样的&#xff0c;我们只需要保证&#xff0c;客户端和服务器对于字符串的组织和解析统一即可 现…

使用mysql、java开发的平台软件一键安装

前言 一般web项目会使用mysql数据库、java开发应用程序打包成jar包。 有些项目会需要导入初始化的行政区域信息。 流程图 说明 1. 脚本中提供变量去配置当前项目的区域 2. 安装包里需要包含全国所有的区域信息 3. 运行程序的时候就可以根据配置 &#xff0c;调用接口&am…

Linux fork 和 exec 联合使用创建一个全新的进程

复制和替换结合在一起&#xff08;forkexec&#xff09;是产生一个新进程的主要方式。 将复制和替换结合在一起&#xff08;forkexec&#xff09;&#xff1a; 先fork&#xff0c;使系统中多出一个进程&#xff0c;默认情况下&#xff0c;fork之后&#xff0c;父进程和子进程的…

爬虫逆向实战(十四)--某培训平台登录

一、数据接口分析 主页地址&#xff1a;某培训平台 1、抓包 通过抓包可以发现登录是表单提交到j_spring_security_check 2、判断是否有加密参数 请求参数是否加密&#xff1f; 通过查看“载荷”模块可以发现有一个j_password加密参数 请求头是否加密&#xff1f; 无响应是…

【bug】Unity无法创建项目

bug UnityHub无法创建项目 UnityHub无法创建项目 出现的问题&#xff1a;在创建新项目时弹出来一个 无法创建项目 尝试的方法&#xff1a; 刷新许可证 ❌没用退出账号重新登陆 ❌没用重启电脑 ❌没用 最后发现是什么问题呢&#xff1f; 2021.3.3这个版本我之前在资源管理器中…

mysql binlog 回滚

mysqlbinlog 严格来说mysqlbinlog 不能算回滚&#xff0c;他只是将过去的数据修改记录 重新执行一遍&#xff0c;但是从结果上来看&#xff0c;他也算把数据恢复到任意时间点了&#xff0c;举例来说在昨天的某一刻误删除了一条数据&#xff0c;导致其他数据存储都是异常&#…

C++Qt动态增加垂直滚动条

本博文源于笔者正在工作的一个小内容&#xff0c;内容涉及到为qt动态增加垂直滚动条。文章分为三个部分&#xff0c;问题起源&#xff0c;问题解决方案&#xff0c;问题解决成功效果。思路清晰&#xff0c;文章干货满满&#xff0c;复制源码即可使用。 问题起源 qt中一个页面…

0143 串

目录 4.串 4.1串的定义和实现 4.2串的模式匹配 部分习题 4.串 4.1串的定义和实现 4.2串的模式匹配 部分习题 1.设有两个串S1和S2&#xff0c;求S2在S1中首次出现的位置的运算称为&#xff08;&#xff09; A.求字串 B.判断是否相等 C.模式匹配 D.连…

7-10 奇偶分家

分数 10 全屏浏览题目 切换布局 作者 陈越 单位 浙江大学 给定N个正整数&#xff0c;请统计奇数和偶数各有多少个&#xff1f; 输入格式&#xff1a; 输入第一行给出一个正整N&#xff08;≤1000&#xff09;&#xff1b;第2行给出N个非负整数&#xff0c;以空格分隔。 输…

DNNGP模型解读-early stopping 和 batch normalization的使用

一、考虑的因素&#xff08;仅代表个人观点&#xff09; 1.首先我们看到他的这篇文章所考虑的不同方面从而做出的不同改进&#xff0c;首先考虑到了对于基因组预测的深度学习方法的设计 &#xff0c;我们设计出来这个方法就是为了基因组预测而使用&#xff0c;这也是主要目的&…

leetcode 力扣刷题 数组交集(数组、set、map都可实现哈希表)

数组交集 349. 两个数组的交集排序&#xff0b;双指针数组实现哈希表unordered_setunordered_map 350. 两个数组的交集Ⅱ排序 双指针数组实现哈希表unordered_map 349. 两个数组的交集 题目链接&#xff1a;349. 两个数组的交集 题目内容如下&#xff0c;理解题意&#xff1a…

C++之std::pair<uint64_t, size_t>应用实例(一百七十七)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

零售行业供应链管理核心KPI指标(三)

完美订单满足率和退货率 完美订单满足率有三个方面的因素影响&#xff1a;订单按时、足量、无损交货。通常情况下零售企业追求线上订单履行周期慢慢达到行业平均水平&#xff0c;就是交付的速度变快了&#xff0c;这个肯定是一件好事情&#xff0c;趋势越来越好。 同时&#…

前端图片转base64,并使用canvas对图片进行压缩

目录 1.图片转base64的应用场景 2.图片转base64代码 3.对上传的图片进行压缩 1.图片转base64的应用场景 图片转base64通常用在用户上传图片的情况下使用&#xff0c;他的作用就是让用户看到预览的图片不受网络的影响。 这是传统的文件传输的流程&#xff1a;首先是用户选择…

浅析基于视频汇聚与AI智能分析的新零售方案设计

一、行业背景 近年来&#xff0c;随着新零售概念的提出&#xff0c;国内外各大企业纷纷布局智慧零售领域。从无人便利店、智能售货机&#xff0c;到线上线下融合的电商平台&#xff0c;再到通过大数据分析实现精准推送的个性化营销&#xff0c;智慧零售的触角已经深入各个零售…

牛客网华为OD前端岗位,面试题库练习记录02

题目一 删除字符串中出现次数最少的字符(HJ23) JavaScript Node ACM 模式 const rl require("readline").createInterface({ input: process.stdin }); var iter rl[Symbol.asyncIterator](); const readline async () > (await iter.next()).value;void (asyn…

【JavaEE基础学习打卡04】JDBC之MySQL数据库安装

目录 前言一、JDBC与数据库二、MySQL数据库1.MySQL数据库2.MySQL服务下载安装3.MySQL服务启动停止4.MySQL命令 三、MySQL客户端安装总结 前言 &#x1f4dc; 本系列教程适用于JavaWeb初学者、爱好者&#xff0c;小白白。我们的天赋并不高&#xff0c;可贵在努力&#xff0c;坚持…

Markdown编辑器 Mac版Typora功能介绍

Typora mac是一款跨平台的Markdown编辑器&#xff0c;支持Windows、MacOS和Linux操作系统。它具有实时预览功能&#xff0c;能够自动将Markdown文本转换为漂亮的排版效果&#xff0c;让用户专注于写作内容而不必关心格式调整。 Typora Mac版除了支持常见的Markdown语法外&#…