当前位置: 首页 > 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>

运行结果:

 

http://www.lryc.cn/news/127031.html

相关文章:

  • wsl2(debian)安装python的不同版本例如3.8
  • Python教程(9)——Python变量类型列表list的用法介绍
  • springboot+VUE智慧公寓管理系统java web酒店民宿房屋住宿报修信息jsp源代码
  • 神经网络基础-神经网络补充概念-36-dropout正则化
  • Go语言基础之变量和常量
  • Spring Boot 项目实现 Spring AOP
  • Baumer工业相机堡盟工业相机如何通过BGAPISDK设置相机的固定帧率(C#)
  • js拼接字符串
  • 神经网络基础-神经网络补充概念-37-其他正则化方法
  • 掌握Python的X篇_36_定义类、名称空间
  • 回归预测 | MATLAB实现GRU门控循环单元多输入多输出
  • 数据结构--拓扑排序
  • 算法竞赛备赛之搜索与图论训练提升,暑期集训营培训
  • Linux驱动入门(6.2)按键驱动和LED驱动 --- 将逻辑电平与物理电平分离
  • CentOS系统环境搭建(十四)——CentOS7.9安装elasticsearch-head
  • 设计HTML5图像和多媒体
  • 基于YOLOv8模型和Caltech数据集的行人检测系统(PyTorch+Pyside6+YOLOv8模型)
  • Flutter 宽高自适应
  • LeetCode 0833. 字符串中的查找与替换
  • Redis对象和五种常用数据类型
  • 常用的Elasticsearch查询DSL
  • 计算机网络笔记
  • 高效反编译luac文件
  • 密码湘军,融合创新!麒麟信安参展2023商用密码大会,铸牢数据安全坚固堡垒
  • 关于视频监控平台EasyCVR视频汇聚平台建设“明厨亮灶”具体实施方案以及应用
  • 区块链系统探索之路:私钥的压缩和WIF格式详解
  • DiffusionDet: Diffusion Model for Object Detection
  • CH01_重构、第一个示例
  • 学习篇之React Fiber概念及原理
  • 商城-学习整理-高级-全文检索-ES(九)