【web前端】CSS语法

CSS语法

1. CSS语法格式

通常情况下语法格式如下:

选择器{
    属性名:属性值;
    属性名:属性值;
    属性名:属性值;
    ...
}

2. CSS添加方式

2.1 行内样式

直接将样式写在本行的标签内。

    <h1><p style="font-size: 48px;  color:red;";>行内样式测试</p></h1>
    <p>行内样式-对比行</p>

运行效果:

在这里插入图片描述

可以看出,行内样式只对当前行产生效果。


2.2 内嵌样式

内嵌样式一般放在HTML文件的 header 中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内嵌样式</title>
    <style>
        /* P标签的内容全部遵循style格式 */
        p {
            font-size: 24px;
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>
        第一行
    </p>

    <p>
        第二行
    </p>
</body>
</html>

运行效果:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.3 单独文件

  1. 这种方式适用于多个页面需要设置为统一的样式。(可以代码复用)

  2. 保存时文件扩展名为.css

  3. 也是在head中使用

格式:

<link rel="stylesheet" href="D:\code\4html+css+JS\2024_03_19\global.css">

运行结果:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4. CSS选择器

4.1 标签选择器

标签在最前面

选择器 {
    属性名:属性值;
    ...
}

只要带有选择器的标识的,都会使用此样式

4.2 类选择器

使用 “.” 开头

.类名 {
    属性名:属性值;
    ...
}

多类选择器:

.类名1.类名2 {
    属性名:属性值;
    ...
}

4.3 ID选择器

使用 “#” 开头

#ID名 {
    属性名:属性值;
    ...
}

4.4 复合选择器

多个标签在前面

a b c {
    属性名:属性值;
    ...
}

a标签下的 b标签下的 c标签设置css样式

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

抖音视频批量提取软件|无水印视频下载

抖音视频批量提取软件&#xff0c;让您高效下载精彩内容&#xff01; 您是否经常需要下载抖音视频&#xff0c;但传统的下载方式繁琐且低效&#xff1f;别担心&#xff0c;我们为您提供了一款强大而智能的抖音视频批量提取软件&#xff0c;让您轻松实现下载无水印的精彩内容&am…

瑞云渲染邀请码怎么用?

瑞云渲染邀请码是用来提供注册用户的特殊权限或优惠的代码。最近&#xff0c;瑞云渲染在注册页面开放了填写邀请码的功能。对于新用户而言&#xff0c;在注册账号时可能不太了解邀请码的具体作用以及如何获取邀请码。下面我们一起来了解一下吧&#xff01; 瑞云渲染是什么&…

C语言技能数(知识点汇总)

C语言技能数&#xff08;知识点汇总&#xff09; C 语言概述特点不足之处 标准编程机制 数据类型变量数据类型字符类型整数类型符号位二进制的原码、反码和补码 浮点类型布尔类型 常量字面常量const 修饰的常变量#define定义的标识符常量枚举常量 sizeofsizeof(结构体)不要对 v…

视频技术1:使用ABLMediaServer推流rtsp

ABLMediaServer定位是高性能、高稳定、开箱即用、商用级别的流媒体服务器 下边展示了如何把1个mp3作为输入源&#xff0c;转换为rtsp流的过程。 作用&#xff1a;用rtsp模拟摄像头的视频流 1、启动ABLMediaServer ABLMediaServer-2024-03-13\WinX64\ABLMediaServer.exe 配…

nodejs 使用express插件multer文件上传,接收不到文件的bug

把路径改成绝对路径即可 改成 temp是你想上传到文件夹的路径&#xff0c;一般是在项目根目录下

蓝桥杯-python-递归

递归&#xff1a;通过自我调用解决问题的函数 注意&#xff1a; #1.递归出口 #2.当前问题如何变成子问题 例子&#xff1a;利用递归写一个阶乘函数&#xff0c;F(n),求n的阶乘 def f(n):if n < 1:return 1ans n * f(n-1)return ans print(f(5)) 例子&#xff1a;汉诺塔…

伪原创软件哪个好,本文分享5款

在内容创作的领域中&#xff0c;伪原创软件成为了许多人关注的焦点。这些软件旨在帮助用户快速生成与原始内容相似但又有所不同的文章&#xff0c;以满足各种需求。然而&#xff0c;面对众多的伪原创软件&#xff0c;很多人会感到困惑&#xff0c;不知道该如何选择。本文将为大…

mysql查询条件包含IS NULL、IS NOT NULL、!=、like %* 、like %*%,不能使用索引查询,只能使用全表扫描,是真的吗???

不知道是啥原因也不知道啥时候, 江湖上流传着这么一个说法 mysql查询条件包含IS NULL、IS NOT NULL、!、like %* 、like %*%,不能使用索引查询&#xff0c;只能使用全表扫描。 刚入行时我也是这么认为的&#xff0c;还奉为真理&#xff01; 但是时间工作中你会发现还是走索引…

IDEA集成Github

1.分析工程到 Gitee 新建一个项目初始化本地库添加到暂存区添加到本地库 在 Gitee 上可以查看到刚才提交的内容 2 .将本地代码 push 到远程库 新建一个码云仓库新建一个项目初始化本地库添加到暂存区添加到本地库 到码云仓库查看 3.pull 拉取远程库到本地库 在码云…

git基础命令(三)之远程命令

目录 基础概念origin git clonegit remote add 添加远程存储库git remote 显示远程存储库列表git pushgit pushgit push origin mastergit push origin --allgit push -f origin mastegit push origin --tags git fetch获取远程仓库的更新查看远程分支的更新情况拉取特定远程分…

【IntelliJ IDEA】Idea版本控制修改文件后要让文件夹也随之变颜色的操作步骤

idea怎么让修改文件后所在的文件夹也跟着变色 新版本旧版本不一样 旧版本 新版本 全局设置 刚才的setting设置只是对当前项目&#xff0c;想对以后的每个项目都设置上&#xff0c;就要在这个设置里面再设置一下。 效果图

2、字节码文件详解

2.1 Java虚拟机的组成 Java虚拟机主要分为以下几个组成部分&#xff1a; 类加载子系统&#xff1a;核心组件类加载器&#xff0c;负责将字节码文件中的内容加载到内存中。运行时数据区&#xff1a;JVM管理的内存&#xff0c;创建出来的对象、类的信息等等内容都会放在这块区域…

2.牛客---字符串中的最后一个字符的长度(Java版)

链接如下: https://www.nowcoder.com/practice/8c949ea5f36f422594b306a2300315da?tpId37&tqId21224&ru/exam/oj 描述 计算字符串最后一个单词的长度&#xff0c;单词以空格隔开&#xff0c;字符串长度小于5000。&#xff08;注&#xff1a;字符串末尾不以空格为结尾&…

openGauss学习笔记-245 openGauss性能调优-SQL调优-典型SQL调优点-算子级调优

文章目录 openGauss学习笔记-245 openGauss性能调优-SQL调优-典型SQL调优点-算子级调优245.1 算子级调优245.1.1 算子级调优介绍245.1.2 算子级调优示例 openGauss学习笔记-245 openGauss性能调优-SQL调优-典型SQL调优点-算子级调优 SQL调优是一个不断分析与尝试的过程&#x…

Sora 发布的意义能和 ChatGPT 相比吗?

个人觉得&#xff0c;Sora 的发布弥补了ChatGPT语言模型在视频内容领域的不足&#xff0c;简单来说&#xff0c;这两个模型均有自己的优势&#xff0c;ChatGPT是一种语言模型&#xff0c;可以理解和解释自然语言&#xff0c;而Sora是文字到视频转化的应用&#xff0c;将文本内容…

Python库Gym:打开机器学习与强化学习的大门

Python库Gym&#xff1a;打开机器学习与强化学习的大门 强化学习作为人工智能领域的重要分支&#xff0c;已经在各种领域展现出了巨大的潜力。为了帮助开发者更好地理解和应用强化学习算法&#xff0c;Python库Gym应运而生。Gym提供了一个开放且易于使用的环境&#xff0c;供开…

String类型详解

1. Java为何要创造String类 在C语言中,是没有String这个类型的,通常使用字符数组中存放一个个字符,再加上最后一个\0来表示/存放一个字符串.也可以使用一个字符指针指向字符串的首元素,直到遇到\0停止,再加上C语言头文件string.h中封装的函数,对于字符串的操作已经够用了. Java…

VUE3 十种组件通信的方式(附详细代码)

props 用途&#xff1a;可以实现父子组件、子父组件、甚至兄弟组件通信 父组件 <template><div><Son :money"money"></Son></div> </template><script setup lang"ts"> import Son from ./son.vue import { re…

企业公关新闻稿怎么写?媒介盒子揭秘

企业公关稿的目的在于宣传企业&#xff0c;化解企业负面舆论&#xff0c;想要写好新闻稿需要企业有专业的素养&#xff0c;深厚的笔力才能将新闻稿写得让读者愿意看&#xff0c;又能塑造企业正面形象&#xff0c;今天媒介盒子就来和大家聊聊&#xff1a;企业公关新闻稿怎么写。…

全氟己酮灭火片是什么?盘点自动灭火片的优缺点

全氟己酮灭火片是什么&#xff1f;全氟己酮灭火片是一种新型灭火材料&#xff0c;通过特殊的纳米微胶囊压缩技术&#xff0c;将环保高效的全氟己酮灭火剂压缩存储成薄片状&#xff0c;一旦温度达到一定阙值或发生明火&#xff0c;内部的全氟己酮灭火剂就会突破薄膜材料喷射出来…