html中的css

news2025/2/27 9:16:24

css

（cascading style sheets，串联样式表，也叫层叠样式表）
在这里插入图片描述
css规范一般约定：
1.存放CSS样式文件的目录一般命名为style或css。
2.在项目初期，会把不同类别的样式放于不同的CSS文件，是为了CSS编写和调试的方便；在项目后期，出网站性能的考虑会将不同的CSS文件整合到一个CSS文件中，这个文件一般命名为style.css或css.css。
3.推荐样式命名（见表）
4.在CSS中添加注释非常简单，它是以“/”开始，以“/”结尾。注释可以是单行，也可以是多行，并且可以出现在CSS代码的任何地方。一般将注释分为结构性注释和提示性注释。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>个人博客网站</title>
    <style type="text/css">
        body {font-size: 11pt;} /*设置主体字体大小*/
        /*设置区块宽度 600px、边框 1px 绿色虚线*/
        div {width: 780px; border: 1px green #00f;}
        /*设置 h3 标题的字体、颜色、对齐方式*/
        h3 {font-family: 黑体; font-size: 22pt; color: black; text-align: center;}
        h3.title {font-size: 18pt; font-weight: bold; color: #666; text-align: center;} /*设置 h3 的副标题*/
        /*设置段落文字 11pt；黑色；文本缩进两个字符*/
        p {font-size: 11pt; color: black; text-indent: 2em;}
        p.img {text-align: center;} /*设置段落中的图像居中对齐*/
        p.author {color: blue; text-align: right;} /*设置段落中的作者文字蓝色、右对齐*/
        img {width: 200; height: 160; border: 1px solid; color: skyblue;} /*设置图像的宽、高、边框*/
    </style>
</head>
<body>
    <div>
        <h3>如何快速建立自己的</h3>
        <h3 class="title">个人博客网站</h3>
        <p class="img"><img src="images/blog.jpg"></p>
        <p>各大博客门户网站相继关闭，做一个独立的个人博客网站是将来的趋势。越来越多的个人站长倾向于独立建站，那如何快速建立自己的个人博客网站呢？</p>
        <p>个人博客应该简单、优雅、稳重、大气、低调，采用 HTML5+CSS3 设计，nav 导航实现鼠标悬停渐变显示英文标题的效果，banner 部分，选择大图作为背景，利用 CSS3 中的 animation 属性结合文字图片实现文字从左到右的渐变效果。</p>
        <p class="author">发布：小江</p>
    </div>
</body>
</html>

在 HTML 中，style 标签用于定义文档的样式信息，而 type 属性指定了样式表的类型。对于 CSS，这个类型通常是 text/css。

可用link键入外部的css文件

...
<link rel="stylesheet" href="外部样式表文件名.css" type="text/css">
...
</head>

导入外部样式表文件

<style type="text/css">
    @import url("外部样式表的文件名1.css");
    @import url("外部样式表的文件名2.css");
    /* 其他样式表的声明 */
</style>

（建议使用link）
css的两个主要特性

1.层叠

层叠（Cascade）是指CSS能够对同一个元素应用多个样式表。（如果有矛盾的样式，会遵循覆盖的原则）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>多重样式表的层叠</title>
    <style type="text/css">
        div { color: red; font-size: 12pt; }
        p { color: blue; }
    </style>
</head>
<body>
    <div>
        <!-- p元素里的内容会继承div定义的属性 -->
        <p>这个段落的文字为蓝色 12号字</p>
    </div>
</body>
</html>

【说明】显示结果表明“这个段落的文字为蓝色12号字”继承div属性，为12号字；而color属性则依照最后的定义，为蓝色。

2.继承

继承指的是特定的CSS属性可以从父元素向下传递到子元素。这种特性允许样式不仅应用于某个特定的元素，同时也应用于其后代，而后代所定义的新样式，却不会影响父样式。
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>继承示例</title>
    <style type="text/css">
        p {
            color: #00f; /* 定义文字颜色为蓝色 */
            text-decoration: underline; /* 增加下画线 */
        }
        p em { /* 为 p 元素中的 em 子元素定义样式 */
            font-size: 24px; /* 定义文字大小为 24px */
            color: #f00; /* 定义文字颜色为红色 */
        }
    </style>
</head>
<body>
    <h3>CSS 基础</h3>
    <p>CSS 是一组格式设置规则，用于控制 <em>Web</em> 网页的外观。</p>
    <ul>
        <li>表现和内容（结构）分离</li>
        <li>易于维护和<em>改版</em></li>
        <li>更好地控制页面布局</li>
    </ul>
    <ul>
        <li>CSS 设计与编写原则</li>
    </ul>
</body>
</html>

在这里插入图片描述

注意事项：
1.如果有多个单词要用引号
2.虽然最后一个属性值后面不需要加；但是最好记得加上
3.在每一行尽量都只描述一个属性
4.可以通过选择器的分组，让相同的选择器享受相同的分组
在这里插入图片描述

选择器（Selector）

也被称为选择符，CSS选择器用于指明样式对哪些元素生效。HTML中的所有元素都是通过不同的CSS选择器进行控制的。在CSS中，根据选择器的功能或作用范围，可以将选择器分为元素选择器、class类选择器、id选择器和伪类选择器等。
其中，通配符选择器也称全局选择器，其作用是定义网页中所有元素均使用同一种样式。在编写代码时，用“*”表示通配符选择符。
属性选择器：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>属性选择器示例</title>
    <style type="text/css">
        img[alt] {border: 3px solid #00F;} /* 作用于任何带 alt 属性的 img 元素 */
        a[href][title] {font-weight: bold;} /* 作用于同时带 href 和 title 属性的 a 元素 */
        a[href="www.taobao.com"][title="淘宝"] {font-size: 18px;} /* 作用于地址指向 www.taobao.com 并且 title 为"淘宝"的 a 元素 */
        a[title~="baidu"] {color: red;}
        *[lang|="en"] {color: blue;}
        p[title^="my"] {color: yellow;}
        p[title$="Test"] {color: green;}
        p[title*="est"] {background-color: aqua;}
    </style>
</head>
<body>
    <p><img src="images/tulip.jpg" alt="郁金香" width="200" height="120" /></p>
</body>
</html>

在这里插入图片描述
后代选择器，如：h3 em选择器，这是一个并集选择器，只会对h3里面的em生效
而父子选择器h3>em则是只会对h3下的直接子元素生效
相邻兄弟选择器则会对相邻的后一个“兄弟”进行修改
例子：

h3+p{color:red;}

这里会对p进行修改但是仅仅是一个p，
而通用兄弟选择器，会对之后的所有p作出修改：

h3～p{color:red;}

id选择器；使用特有id时要加“#”

格式为：E#idValue{property1:value1;property2:value2;...}

（用于为某id单独设置样式）
在这里插入图片描述

class选择器：

可以为指定类的html元素单独设计样式

id 选择器示例

CSS3 简介

CSS (Cascading Style Sheet，串联样式表，也叫层叠样式表)，简称为样式表，CSS 是用于定义如何显示 HTML 元素，控制网页样式并将样式与网页内容分离的一种标记性语言。

CSS3 语法基础

CSS 的基本语法由两部分组成，其格式为：

selector{property1: value1; property2: value2;...}

selector 被称为选择器，选择器决定了样式定义需要改变的 HTML 元素。property: value 被称为样式声明，有一条或多条样式时，用冒号隔开，以分号结束，包含在一对大括号“{}”内。


```dart
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>id 选择器示例</title>
    <style type="text/css">
        #title {color: red;}
        #sub_title {background-color: aqua;}
        #p_content, #p_title strong {color: blue;}
        p {text-indent: 2em;}
    </style>
</head>
<body>
    <h2 id="title">CSS3 简介</h2>
    <p id="p_content">CSS (Cascading Style Sheet，串联样式表，也叫层叠样式表)，简称为样式表，CSS 是用于定义如何显示 HTML 元素，控制网页样式并将样式与网页内容分离的一种标记性语言。</p>
    <h2 id="sub_title">CSS3 语法基础</h2>
    <p>CSS 的基本语法由两部分组成，其格式为：</p>
    <p id="p_title"><strong>selector{property1: value1; property2: value2;...}</strong></p>
    <p>selector 被称为选择器，选择器决定了样式定义需要改变的 HTML 元素。property: value 被称为样式声明，有一条或多条样式时，用冒号隔开，以分号结束，包含在一对大括号“{}”内。</p>
</body>
</html>

伪类选择器：可以实现交互功能
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        a:link {color: blue;} /* 超链接单击之前是蓝色 */
        a:visited {color: red;} /* 超链接单击之后是红色 */
        a:hover {color: green; font-size: large; background-color: aqua;} /* 鼠标指针悬停时，绿色，较大的字体，背景是湖绿色 */
        a:active {color: black; background-color: blueviolet;} /* 按下鼠标按键不松手的时候，字体是黑色，背景是蓝紫色 */
        input:focus {background-color: yellow;} /* 输入框获得焦点时，背景色是黄色 */
        li:first-child {font-size: 22px; background-color: #00FFFF;} /* 列表的第一项元素字体是 22px，背景色是浅蓝色 */
    </style>
</head>
<body>
    <p>应用最为广泛的锚点元素 a 的几种状态（未访问超链接状态、已访问超链接状态、鼠标指针悬停超链接状态和被激活超链接状态）:</p>
    <a href="https://www.taobao.com/">淘宝</a><br />
    <a href="https://www.bilibili.com/">哔哩哔哩</a>
    <form action="login" method="post">
        用户名: <input type="text" name="username" id="username" value="" /><br />
        密码: <input type="password" name="password" id="password" value="" />
    </form>
    <div id="">
        <ul>
            <li>咖啡</li>
            <li>茶</li>
            <li>可口可乐</li>
        </ul>
        <ol>
            <li>面包</li>
            <li>馍</li>
            <li>汉堡</li>
        </ol>
    </div>
</body>
</html>

用于单独处于特殊状态的元素
伪元素选择器是CSS中的一种选择器，用于选择HTML元素的特定部分，而不是整个元素。它通常用于处理那些不是由HTML标签直接表示的内容，比如首行文字、首字母或者生成的内容等。
特点
• 创建虚拟元素：伪元素选择器会创建一个虚拟的元素，这个元素不在文档树中，但可以通过CSS进行样式控制。
• 语法：伪元素选择器以双冒号（::）开头，例如::before、::after等。不过，为了兼容旧版本浏览器，单冒号（:）的写法也被支持。
• 使用场景：常用于在元素的前后插入内容、修饰首行文字或首字母等。
常见的伪元素选择器
• ::before：在元素内容之前插入内容。
• ::after：在元素内容之后插入内容。
• ::first-line：选择元素的第一行内容。
• ::first-letter：选择元素的第一个字母。
示例
以下是一个使用::before和::after的示例：

<!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>
        div::before {
            content: "前缀：";
            color: red;
        }
        div::after {
            content: " 后缀";
            color: blue;
        }
    </style>
</head>
<body>
    <div>这是主要内容</div>
</body>
</html>

在这个示例中，div::before会在div元素的内容前面插入“前缀：”，div::after会在div元素的内容后面插入“后缀”。
伪元素选择器是CSS中非常强大的工具，可以帮助开发者实现复杂的页面布局和动态效果。

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

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

相关文章

JAVA面试常见题_基础部分_Dubbo面试题（上）

JAVA面试常见题_基础部分_Dubbo面试题（上）

Dubbo 支持哪些协议&#xff0c;每种协议的应用场景&#xff0c;优缺点&#xff1f; • dubbo&#xff1a; 单一长连接和 NIO 异步通讯&#xff0c;适合大并发小数据量的服务调用&#xff0c;以及消费者远大于提供者。传输协议 TCP&#xff0c;异步&#xff0c;Hessian 序列化…
阅读更多...
Binder通信协议

Binder通信协议

目录 一,整体架构 二,Binder通信协议 一,整体架构 二,Binder通信协议
阅读更多...
解决应用程序 0xc00000142 错误：完整修复指南

解决应用程序 0xc00000142 错误：完整修复指南

&#x1f4a5; 0xc00000142 错误出现的场景 你是不是遇到这样的情况&#xff1a; &#x1f539; 点击某个软件&#xff0c;突然弹出“应用程序无法正确启动(0xc00000142)” &#xff1f; &#x1f539; 明明安装了所有必要组件&#xff0c;软件却始终打不开&#xff1f; &…
阅读更多...
游戏引擎学习第125天

游戏引擎学习第125天

仓库:https://gitee.com/mrxiao_com/2d_game_3 回顾并为今天的内容做准备。 昨天&#xff0c;当我们离开时&#xff0c;工作队列已经完成了基本的功能。这个队列虽然简单&#xff0c;但它能够执行任务&#xff0c;并且我们已经为各种操作编写了测试。字符串也能够正常推送到队…
阅读更多...
DeepSeek R1满血+火山引擎详细教程

DeepSeek R1满血+火山引擎详细教程

DeepSeek R1满血火山引擎详细教程 一、安装Cherry Studio。 Cherry Studio AI 是一款强大的多模型 AI 助手,支持 iOS、macOS 和 Windows 平台。可以快速切换多个先进的 LLM 模型,提升工作学习效率。下载地址 https://cherry-ai.com/ 认准官网&#xff0c;无强制注册。 这…
阅读更多...
前端依赖nrm镜像管理工具

前端依赖nrm镜像管理工具

npm 默认镜像 &#xff1a;https://registry.npmjs.org/ 1、安装 nrm npm install nrm --global2、查看镜像源列表 nrm ls3、测试当前环境下&#xff0c;哪个镜像源速度最快。 nrm test4、 切换镜像源 npm config get registry # 查看当前镜像源 nrm use taobao # 等价于 npm…
阅读更多...
ES的简单讲解

ES的简单讲解

功能 &#xff1a; 文档存储 与 文档搜索 特点&#xff1a;比如有一个文档名 “你好” 可以用‘你‘&#xff0c;好&#xff0c;你好都可以搜索到这个文档 ES核心概念 类似于数据库中表的概念&#xff0c;在表的概念下又对数据集合进行了细分 ​ ES_Client查询接口 cpr::R…
阅读更多...
进程间通信(一)

进程间通信(一)

1.进程间通信介绍 数组传输&#xff1a;一个进程需要将它的数据发送给另一个进程 资源共享&#xff1a;多个进程之间共享同样的资源 通知事件&#xff1a;一个进程需要向另一个或者一组进程发送信息&#xff0c;通知发送了某种事件(如进程终止时要通知父进程) 进程控制&…
阅读更多...
adb的安装

adb的安装

1、概念 &#xff08;1&#xff09;adb&#xff08;android debug bridge&#xff09;安卓调试桥&#xff0c;用于完成电脑和手机之间的通信控制。 &#xff08;2&#xff09;xcode来完成对于ios设备的操控&#xff0c;前提是有个mac电脑。 2、adb的安装 &#xff08;1&…
阅读更多...
Nginx 平滑升级/回滚

Nginx 平滑升级/回滚

平滑升级和回滚的前提条件是 nginx 已经安装好&#xff0c;源码安装 nginx 可参考上一篇文章。在上一篇文章的基础上&#xff0c;nginx 已安装好且已启动&#xff0c;目前是 1.24 版本。 一、平滑升级 Nginx 的平滑升级&#xff08;热升级&#xff09;是一种 不中断服务 即可更…
阅读更多...
强化学习演进：GRPO 从何而来

强化学习演进：GRPO 从何而来

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是机器学习的一个分支&#xff0c;其核心是让智能体&#xff08;Agent&#xff09;通过与环境&#xff08;Environment&#xff09;的交互&#xff0c;学习如何采取最优行动&#xff08;Action&#xff09;以最大化…
阅读更多...
AOP进阶-02.通知顺序

AOP进阶-02.通知顺序

一.通知顺序 当有多个切面类中的切入点表达式一样时&#xff0c;这些切面类的执行顺序是怎样的呢&#xff1f;如图我们将定义两个切面类&#xff0c;一个MyAspect2&#xff0c;一个MyAspect3&#xff0c;一个MyAspect4。执行后我们发现&#xff0c; 对于目标方法前的通知方法&…
阅读更多...
深入探讨K8s资源管理和性能优化

深入探讨K8s资源管理和性能优化

#作者&#xff1a;曹付江 文章目录 前言&#xff1a;1&#xff0e;监控 Kubernetes 集群的资源利用率1.1 Prometheus1.2 Kubernetes 度量服务器1.3 Grafana1.4 自定义指标 2. 识别资源瓶颈2.1. 监控工具2.2. 性能剖析2.3 Kubernetes 事件和日志2.4. 群集自动扩展2.5. 负载测试…
阅读更多...
Buildroot 添加自定义模块-内置文件到文件系统

Buildroot 添加自定义模块-内置文件到文件系统

目录 概述实现步骤1. 创建包目录和文件结构2. 配置 Config.in3. 定义 cp_bin_files.mk4. 添加源文件install.shmy.conf 5. 配置与编译 概述 Buildroot 是一个高度可定制和模块化的嵌入式 Linux 构建系统&#xff0c;适用于从简单到复杂的各种嵌入式项目. buildroot的源码中bui…
阅读更多...
形式化数学编程在AI医疗中的探索路径分析

形式化数学编程在AI医疗中的探索路径分析

一、引言 1.1 研究背景与意义 在数字化时代，形式化数学编程和 AI 形式化医疗作为前沿领域，正逐渐改变着我们的生活和医疗模式。形式化数学编程是一种运用数学逻辑和严格的形式化语言来描述和验证程序的技术，它通过数学的精确性和逻辑性，确保程序的正确性和可靠性。在软件…
阅读更多...
HTML——前端基础1

HTML——前端基础1

目录 前端概述 前端能做的事情​编辑 两步完成一个网页程序 前端工具的选择与安装 HTML HTML5介绍 HTML5的DOCTYPE声明 HTML基本骨架 文字标签 标题之标签 标签之段落、换行、水平线 标签之图片 标签之超文本链接 标签之文本 列表标签之有序列表 列表标签之无序…
阅读更多...
Blueprint —— Events

Blueprint —— Events

目录 一&#xff0c;Event Level Reset 二&#xff0c;Event Actor Begin Overlap 三&#xff0c;Event Actor End Overlap 四&#xff0c;Event Hit 五&#xff0c;Event Any Damage 六&#xff0c;Event Point Damage 七&#xff0c;Event Radial Damage 八&#xff…
阅读更多...
Java一揽子集合整理

Java一揽子集合整理

Java 集合框架 List ArrayList&#xff0c;底层Object数组&#xff0c;相关方法add&#xff0c;remove Vector&#xff0c;底层Object数组&#xff0c;线程安全&#xff0c;使用 synchronized 关键字进行同步处理 Stack&#xff0c;继承自Vector&#xff0c;是一个后进先出的…
阅读更多...
第二十四：5.2【搭建 pinia 环境】axios 异步调用数据

第二十四：5.2【搭建 pinia 环境】axios 异步调用数据

第一步安装&#xff1a;npm install pinia 第二步&#xff1a;操作src/main.ts 改变里面的值的信息&#xff1a; <div class"count"><h2>当前求和为&#xff1a;{{ sum }}</h2><select v-model.number"n">　 // .number 这里是…
阅读更多...
HybridCLR+Adressable+Springboot热更

HybridCLR+Adressable+Springboot热更

本文章会手把手教大家如何搭建HybridCLRAdressableSpringboot热更。 创作不易&#xff0c;动动发财的小手点个赞。 安装华佗 首先我们按照官网的快速上手指南搭建一个简易的项目&#xff1a; 快速上手 | HybridCLR 注意在热更的代码里添加程序集。把用到的工具放到程序集里…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023