CSS的三种基本选择器

news/2024/9/20 6:36:20 标签: css, 前端

使用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.niftyadmin.cn/n/5666780.html

相关文章

『功能项目』QFrameWorkBug修改器界面【65】

我们打开上一篇64QFrameWork道具栏物品生成的项目&#xff0c; 本章要做的事情是做一个道具bug调试面板&#xff0c;可以增加主角属性&#xff0c;可以增加道具的功能 首先创建一个空物体&#xff08;钉子&#xff09; 按住Alt键将空物体钉到左侧 重命名为Left 创建Button、Im…

【计算机基础题目】Linux系统中文件权限 字母权限和数字权限的相互转换

创作日志&#xff1a; 很久之前对这个略有了解&#xff0c;但是现在完全忘记了&#xff0c;看到这类题目一脸懵逼&#xff0c;现在系统复习下。 1、权限的数字表示&#xff08;3位&#xff09; 在Linux系统中&#xff0c;文件权限由一个三位的八进制数表示&#xff0c;每一位代…

Mac 上哪个剪切板增强工具比较好用? 好用剪切板工具推荐

在日常文字编辑中&#xff0c;我们经常需要重复使用复制的内容。然而&#xff0c;新内容一旦复制&#xff0c;旧内容就会被覆盖。因此&#xff0c;选择一款易用高效的剪贴板工具成为了许多人的需求。本文整理了一些适用于 macOS 系统的优秀剪贴板增强工具&#xff0c;欢迎大家下…

C语言中的一些小知识点

一、逗号表达式 说明 在C语言中&#xff0c;逗号表达式是一种特殊的表达式&#xff0c;它允许你将多个表达式串联起来&#xff0c;并且会按照从左到右的顺序依次计算每个表达式&#xff0c;但整个表达式的值是最后一个表达式的值。 一般形式如下&#xff1a; expression1, …

大文件编辑器(QT)

项目需要做一个大文件编辑器&#xff0c;并对文件中特定的字符串进行高亮显示&#xff0c;尝试过几种方式。这里的大文件是指>几百兆的文件。 一 综述实现方式 方式1 用普通的QTextEdit来分段加载显示文本&#xff0c;当单段文本显示完毕并且继续向下拖动滚动条时&#xf…

从openAI最新模型GPT-o1再谈思维链(Cot)技术,大模型该怎么提升其逻辑推理能力?

“ 推理能力是大模型迈向AGI的必经之路 ” 最近openAI发布了号称史上最强模型——o1,其具有强大的逻辑推理能力,号称能达到人类的博士生水平。 而从o1模型的评测来看,o1模型在数学竞赛,编码,科学问答等方面表现良好,甚至高出了GPT4o一大截。 而且,o1在物理,化学,生…

Vue:加载本地视频

目录 封装视频弹框调用视频组件 封装视频弹框 <template><el-dialog class"videoBox" :title"title" :visible.sync"visible" width"40%" :before-close"handleOnClose" :close-on-click-modal"false" …

用 ReactPHP 实现图片上传加速:让并发上传实现真正的高效

在这个数据爆炸的时代&#xff0c;如何更快、更高效地处理上传任务是每个开发者面临的重要挑战。尤其当我们要上传大量图片时&#xff0c;简单的同步上传方法早已不再满足现代应用的需求。那么问题来了——有没有一种方法能并发上传图片&#xff0c;同时最大限度减少响应时间&a…