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>

运行结果:

 

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringCloud学习笔记(一)_快速入门

SpringCloud简介 Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具&#xff08;例如配置管理&#xff0c;服务发现&#xff0c;断路器&#xff0c;智能路由&#xff0c;微代理&#xff0c;控制总线&#xff09;。分布式系统的协调导致了样板模式, 使用Spr…

【React】生命周期和钩子函数

概念 组件从被创建到挂载到页面中运行&#xff0c;再到组件不用时卸载的过程。 只有类组件才有生命周期。 分为三个阶段&#xff1a; 挂载阶段更新阶段销毁阶段 三个阶段 挂载阶段 钩子函数 - constructor 创建阶段触发 作用&#xff1a;创建数据 之前定义状态是简写&…

Linux面试笔试题(5)

79、下列工具中可以直接连接mysql的工具有【c 】。 A.xhsell B.plsql C.navicat D.以上都不是 Navicat 是一套可创建多个连接的数据库开发工具&#xff0c; 让你从单一应用程序中同时连接 MySQL、Redis、MariaDB、MongoDB、 SQL Server、Oracle、PostgreSQL和 SQLite 。它与…

【算法日志】贪心算法刷题:重叠区问题(day31)

代码随想录刷题60Day 目录 前言 无重叠区间&#xff08;筛选区间&#xff09; 划分字母区间&#xff08;切割区间&#xff09; 合并区间 前言 今日的重点是掌握重叠区问题。 无重叠区间&#xff08;筛选区间&#xff09; int eraseOverlapIntervals(vector<vector<in…

已解决Gradle错误:“Unable to load class ‘org.gradle.api.plugins.MavenPlugin‘”

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

恒运资本:信创概念再度活跃,华是科技再创新高,南天信息等涨停

信创概念21日盘中再度活跃&#xff0c;截至发稿&#xff0c;华是科技涨超17%&#xff0c;盘中一度触及涨停再创新高&#xff0c;中亦科技涨超13%亦创出新高&#xff0c;久其软件、南天信息、新炬网络、英飞拓均涨停。 音讯面上&#xff0c;自8月3日以来&#xff0c;财政部官网连…

Amelia预订插件:WordPress企业级预约系统

并非所有WordPress预订插件都像他们所设计的那样。其中一些缺乏运行高效预约操作所需的功能&#xff0c;而其他一些则看起来陈旧过时。您不需要其中任何一个&#xff0c;但Amelia预订插件似乎希望确保所有用户都对功能和风格感到满意。 在这篇Amelia企业级预约系统插件评测中&…

uniapp编写微信小程序和H5遇到的坑总结

uniapp编写微信小程序和H5遇到的坑总结 1、阻止事件冒泡2、二维码生成3、H5跨域配置4、H5时&#xff0c;地址栏上添加版本号5、H5时&#xff0c;tabBar遮挡部分内容6、uniapp使用webview通信6.1、uniapp编写的小程序嵌入h5之间的通信6.1.1、小程序向h5发送消息6.1.2、h5向小程序…

C++基础Ⅰ编译、链接

目录儿 1 C是如何工作的1.1 预处理语句1.2 include1.3 main()1.4 编译单独编译项目编译 1.5 链接 2 定义和调用函数3 编译器如何工作3.1 编译3.1.1 引入头文件系统头文件自定义头文件 3.1.2 自定义类型3.1.3 条件判断拓展: 汇编 3.2 链接3.2.1 起始函数3.2.2 被调用的函数 3.3 …

[附源码]计算机毕业设计-JAVA火车票订票管理系统-springboot-论-文-ppt

PPT论文 文章目录 前言一、主要技术javaMysql数据库JSP技术 二、系统设计三、功能截图总结 前言 本论文主要论述了如何使用JAVA语言开发一个火车订票管理系统 &#xff0c;本系统将严格按照软件开发流程进行各个阶段的工作&#xff0c;采用B/S架构&#xff0c;面向对象编程思想…

MATLAB | 七夕节用MATLAB画个玫瑰花束叭

Hey又是一年七夕节要到了&#xff0c;每年一次直男审美MATLAB绘图大赛开始hiahiahia&#xff0c;真的这些代码越写越不知道咋写&#xff0c;又不想每年把之前的代码翻出来再发一遍&#xff0c;于是今年又对我之前写的老代码进行了点优化组合&#xff0c;整了个花球变花束&#…

掌握AI助手的魔法工具:解密Prompt(提示)在AIGC时代的应用「上篇」

在当今的AIGC时代&#xff0c;我们面临着越来越多的人工智能技术和应用。其中一个引人注目的工具就是Prompt&#xff08;提示&#xff09;。它就像是一种魔法&#xff0c;可以让我们与AI助手进行更加互动和有针对性的对话。那么&#xff0c;让我们一起来了解一下Prompt&#xf…

ElasticSearch学习2

1、索引的操作 1、创建索引 对ES的操作其实就是发送一个restful请求&#xff0c;kibana中在DevTools中进行ES操作 创建索引时需要注意ES的版本&#xff0c;不同版本的ES创建索引的语句略有差别&#xff0c;会导致失败 如下创建一个名为people的索引&#xff0c;settings&…

STM32 CubeMX (第三步Freertos中断管理和软件定时)

STM32 CubeMX STM32 CubeMX &#xff08;第三步Freertos中断管理和软件定时&#xff09; STM32 CubeMX一、STM32 CubeMX设置时钟配置HAL时基选择TIM1&#xff08;不要选择滴答定时器&#xff1b;滴答定时器留给OS系统做时基&#xff09;使用STM32 CubeMX 库&#xff0c;配置Fre…

k8s扩缩容与滚动更新

使用kubectl run创建应用 kubectl run kubernetes-bootcamp \> --imagedocker.io/jocatalin/kubernetes-bootcamp:v1 \> --port8080 端口暴露出去 kubectl expose pod kubernetes-bootcamp --type"NodePort" --port 8080 使用kubectl create创建应用 kubect…

周期性函数算出其周期(python)

在日常生活中&#xff0c;总是会遇见一些周期性的函数&#xff0c;我们可以人眼看出他们是有一定规律的&#xff0c;但是我们不能准确地发现它们的周期是多少。 创建一根周期性曲线 import numpy as np import matplotlib.pyplot as plt# 定义周期性函数 def periodic_functi…

Linux命令200例:telnet用于远程登录的网络协议(常用)

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌。CSDN专家博主&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &…

windows安装使用RocketMQ常见问题,及springboot整合

win安装rocketmq 官网下载二进制包&#xff1a;https://rocketmq.apache.org/download 解压到不包含中文及空格的目录&#xff0c;配置环境变量 ROCKETMQ_HOME4. 修改runbroker.cmd和runserver.cmd文件 文件地址在rocketmq安装目录下的bin文件夹中。 如果不修改可能会遇见以…

item_search_shop-获得淘宝/天猫店铺的所有商品

一、接口参数说明&#xff1a; item_search_shop-获得店铺的所有商品&#xff0c;点击更多API调试&#xff0c;请移步注册API账号点击获取测试key和secret 公共参数 请求地址: https://api-gw.onebound.cn/taobao/item_search_shop 名称类型必须描述keyString是调用key&…

VS2022解决Protobuf compiler version 23.4 doesn‘t match library version 4.23.4

在使用Visual Studio 2022MinGWCMake作为开发环境时&#xff0c;如果项目中使用了Protobuf&#xff0c;则在CMake运行时&#xff0c;可能会出现Protobuf compiler version 23.4 doesnt match library version 4.23.4的问题&#xff1a; 1> [CMake] CMake Warning at C:/Pro…