CSS的三种基本选择器

news2025/1/23 7:04:42

使用CSS控制网页格式有行内法,内嵌式,链接式,导入式等方法

这里将采用内嵌式的方法书写

内嵌法就是通过<style>标记将样式定义在HTML的文件头部中

1.标记选择器

标记选择器特点:定义了标记选择器之后,网页中该标记的样式均会发生改变

样例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 标记选择器 */
        h1{
            /* 居中 */
            text-align: center;
        }
        p{
            /* 设置字的大小 */
            font-size:50px;
        }
    </style>
</head>

<body>
    <h1>你好</h1>
    <p>Yor can't park your car here.</p>
</body>
</html>

效果:

 2.class选择器

class选择器:别称类选择器,选择器以英文句号开始,后面再加英文单词

样例:

效果:

 

3,ID选择器 

ID选择器是以#开始的,选择器定义之后需要设置id属性才可以应用样式

样例:

效果:

 全部代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 标记选择器 */
        h1{
            /* 居中 */
            text-align: center;
        }
        p{
            /* 设置字的大小 */
            font-size:50px;
        }

        /* class选择器 */
        .p1{
            text-align: left;
        }
        .p2{
            text-align: center;
        }
        .p3{
            text-align: right;
        }

        /* ID选择器 */
        #id1{
            /* 设置一个盒子宽700px 高400px */
            width: 700px;
            height: 400px;
            /* 边框厚度 线框线的类型  线框颜色 */
            border: 5px solid red;
        }
    </style>
</head>

<body>
    <h1>你好</h1>
    <p>Yor can't park your car here.</p>

    <div id="id1">
        <!-- class选择器:当修改了类选择器之后,只有应用此类选择器的标记样式才可以发生变化 -->
        <p class="p1">dragon</p>
        <p class="p2">rabbit</p>
        <p class="p3">tiger</p>
    </div>

</body>
</html>

整体效果:

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

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

相关文章

Leetcode 93-复原 IP 地址

有效 IP 地址 正好由四个整数&#xff08;每个整数位于 0 到 255 之间组成&#xff0c;且不能含有前导 0&#xff09;&#xff0c;整数之间用 ‘.’ 分隔。 例如&#xff1a;“0.1.2.201” 和 “192.168.1.1” 是 有效 IP 地址&#xff0c;但是 “0.011.255.245”、“192.168.…

一问详解Unity下RTMP推送|轻量级RTSP服务|RTSP|RTMP播放模块说明

技术背景 好多开发者&#xff0c;对Unity下的模块&#xff0c;不甚了解&#xff0c;实际上&#xff0c;除了Windows/Linux/Android/iOS Native SDK&#xff0c;大牛直播SDK发布了Unity环境下的RTMP推流|轻量级RTSP服务&#xff08;Windows平台Linux平台Android平台&#xff09…

行人持刀检测数据集 voc yolo

行人持刀检测数据集 9000张 持刀检测 带标注 voc yolo 行人持刀检测数据集 数据集描述 该数据集旨在用于行人持刀行为的检测任务&#xff0c;涵盖了多种场景下的行人图像&#xff0c;特别是那些携带刀具的行人。数据集包含大量的图像及其对应的标注信息&#xff0c;可用于训练…

【ShuQiHere】 探索数据挖掘的世界:从概念到应用

&#x1f310; 【ShuQiHere】 数据挖掘&#xff08;Data Mining, DM&#xff09; 是一种从大型数据集中提取有用信息的技术&#xff0c;无论是在商业分析、金融预测&#xff0c;还是医学研究中&#xff0c;数据挖掘都扮演着至关重要的角色。本文将带您深入了解数据挖掘的核心概…

记录一题----计算机网络传输层

线路&#xff1a;TCP报文下放到物理层传输。 TCP报文段中&#xff0c;“序号”长度为32bit&#xff0c;为了让序列号不会循环&#xff0c;则最多能传输2^32B的数据&#xff0c;则最多能传输&#xff1a;2^32/1500B个报文 结果&#xff1a; 吞吐率一个周期内传输的数据/周期时间…

使用Webpack创建vue脚手架并搭建路由---详解

1.使用 vue 库 vue 是一个非常好用的 javascript 库&#xff0c;现在已经发行了 vue 3&#xff0c;我们可以直接导入使用库文件&#xff0c;也可以使用单文件&#xff08;SFC&#xff09;的形式&#xff0c;直接使用库文件会简单一点&#xff0c;我们先来试一下吧。 1.1安装 v…

探索AutoIt:自动化任务的Python魔法棒!

文章目录 探索AutoIt&#xff1a;自动化任务的Python魔法棒&#xff01;背景&#xff1a;为什么选择AutoIt&#xff1f;AutoIt库简介安装AutoIt库简单的库函数使用方法场景应用常见Bug及解决方案总结 探索AutoIt&#xff1a;自动化任务的Python魔法棒&#xff01; 背景&#x…

小阿轩yx-SaltStack部署与应用基础

小阿轩yx-SaltStack部署与应用基础 前言 当今数字化时代&#xff0c;大规模 IT 系统的管理已经成为一个复杂而繁琐的任务。为了提高系统管理的效率和准确性&#xff0c;自动化工具成为各企业不可或缺的一部分。Saltstack 作为一款强大的自动化和配置管理工具&#xff0c;在业…

文本情感识别分析系统Python+SVM分类算法+机器学习人工智能+计算机毕业设计

一、介绍 使用Python作为开发语言&#xff0c;基于文本数据集&#xff08;一个积极的xls文本格式和一个消极的xls文本格式文件&#xff09;&#xff0c;使用Word2vec对文本进行处理。通过支持向量机SVM算法训练情绪分类模型。实现对文本消极情感和文本积极情感的识别。并基于D…

rsync 全网备份

目录 1.前言 2.背景 3.备份的内容 4.备份方式 5.环境准备 6.步骤 7.rsync服务端调试 7.1配置 7.2创建目录并测试 8.客户端备份脚本 9.服务端脚本配置 10.增加校验功能 11.致谢 1.前言 在当今数字化的时代&#xff0c;数据的价值不言而喻。无论是企业的关键…

Linux中使用Docker构建Nginx容器完整教程

&#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f427;Linux基础知识(初学)&#xff1a;点击&#xff01; &#x1f427;Linux高级管理防护和群集专栏&#xff1a;点击&#xff01; &#x1f510;Linux中firewalld防火墙&#xff1a;点击&#xff01; ⏰️创作…

责任链模式实现规则校验

1、项目中责任链模式实战 我们使用责任链模式实现对订单中参数的校验&#xff0c;首先校验订单id是否为空&#xff0c;然后校验下单人是否为空&#xff0c;最后检验收获地址是否为空。业务的流程图如下所示&#xff1a; 针对上述的业务&#xff0c;我们使用责任链的模式来实现…

后端接收数组,集合类数据

文章目录 一. 请求行Path参数&#xff08;不建议&#xff09;二.数组接收&#xff08;不建议&#xff09;三.List集合接收&#xff08;建议&#xff09;四. GET请求既包含请求体又包含请求行 一. 请求行Path参数&#xff08;不建议&#xff09; DeleteMapping("/{ids}&quo…

面试干货|自动化测试中常见面试题

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 “ 今天我给大家介绍一些python自动化测试中常见的面试题&#xff0c;涵盖了Python基础、测试框架、测试工具、测试方法等方面的内容&#xff0c;希望能够帮助…

PyO3:一个Rust与Python无缝交互的工具,用Rust打造高性能Python应用

PyO3 是一个强大的工具&#xff0c;它为 Rust 开发者提供了一种与 Python 世界无缝交互的方式。无论你想用 Rust 编写 Python 模块&#xff0c;还是将 Python 集成到 Rust 程序中&#xff0c;PyO3 都能满足你的需求。 PyO3 的优势&#xff1a; 高效便捷&#xff1a; PyO3 允许你…

光伏发电量估算有多重要?如何分析?

光伏发电量的准确估算不仅是项目规划、投资决策的关键依据&#xff0c;也是后续运维管理、效益评估的基础。 一、光伏发电量估算的重要性 1、项目规划与投资决策&#xff1a;准确的发电量预测能够帮助投资者评估项目的经济可行性&#xff0c;包括投资回报率、成本回收期等关键…

基于YOLOv8+LSTM的商超扶梯场景下行人安全行为姿态检测识别

基于YOLOv8LSTM的商超扶梯场景下行人安全行为姿态检测识别 手扶电梯 行为识别 可检测有人正常行走&#xff0c;有人 跌倒&#xff0c;有人逆行三种行为 跌倒检测 电梯跌倒 扶梯跌倒 人体行为检测 YOLOv8LSTM。 基于YOLOv8LSTM的商超扶梯场景下行人安全行为姿态检测识别&#xf…

uni-app安装插件

1.通过插件市场安装https://ext.dcloud.net.cn 打开HBuilderX编辑器。 点击菜单栏中的“工具”->“插件安装”。 这里会看到已安装插件和安装新插件两个选项卡&#xff0c;点击安装新插件&#xff0c; 能看到一些核心插件&#xff0c;如果所需要的插件在核心插件里面有&…

服务器数据恢复—raid5阵列热备盘上线失败导致阵列崩溃的数据恢复案例

服务器磁盘阵列数据恢复环境&#xff1a; 服务器中有两组分别由4块SAS硬盘组建的raid5磁盘阵列&#xff0c;两组raid5阵列划分LUN&#xff0c;组成LVM结构&#xff0c;格式化为EXT3文件系统。 服务器磁盘阵列故障&#xff1a; 服务器中一组raid5阵列中有一块硬盘离线&#xff…

【学习笔记】SSL/TLS证书安全机制之证书透明

1、概念 CT - Certificate Transparency&#xff0c;证书透明 2、Trying to Solve 如果意外的 CA 为我们的域名颁发证书&#xff0c;我们是不可见&#xff0c;这就是证书透明&#xff08;CT&#xff09;要解决的问题 3、How CT Works 任何CA机构颁发的所有证书的公共登记处&…