当前位置: 首页 > news >正文

一小时学会CSS (上)

1、CSS是什么?

CSS (Cascading Style Sheets)层叠样式表,是一种来为结构化文档,例如HTML 、XML 添加字体,间距和颜色等样式的计算机语言,扩展名是.CSS 。


2、CSS语法规则

CSS写在哪里,CSS写在style 标签中,style 标签,一般写在head 标签里,即 title 标签下面。

样式:

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

CSS 常见的属性有 :

color : 文字颜色

font-size:字体大小

gackground-color :背景颜色

width :宽度
height:高度


这是一个例子:

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document </title><style> p{color: red;font-size: 20;background: skyblue;background-color: blueviolet;width: 300px;height: 50px;}</style></head><body><div id="app"> </div><script src="test.js"></script>
</body>

注意事项:

  • CSS标点符号都是英文状态下

  • 每一个样式键对后,都以分号结尾


3、CSS 引入方式及实践


(1)、内联方式:内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS.

<div style="color: red"></div>

内联方式优缺点

只能改变当前标签的样式,如果想要多个 div 拥有相同的样式,不得不重复地为每个 div 添加相同的样式,如果想要修改一种样式,又不得不修改所有的 style 中的代码。会导致 HTML 代码变得冗长,且网页难以维护。


(2)、嵌入方式:嵌入方式指的是在 HTML 头部中的 style 标签下书写 CSS 代码。

<head><style>.content {color: red;}</style>
</head>

嵌入方式优缺点:嵌入方式 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中,所以会使得代码比较集中,当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。嵌入的 CSS 只对当前页面有效,当多个页面需要引入相同的 CSS 代码时,这样写会导致代码冗余,也不利于维护。


(3)、链接方式

链接方式指的是使用 HTML 头部的 head 标签引入外部的 CSS 文件。

<head><link rel="stylesheet" type="text/css" href="custom.css">
</head>

链接方式优点:是最常见的也是最推荐的引入 CSS 的方式。使用这种方式,所有的 CSS 代码只存在于单独的 CSS 文件中,具有良好的可维护性。CSS 文件会在第一次加载时引入,切换页面时只需加载 HTML 文件即可。


(4)、导入方式

导入方式指的是使用 CSS 规则引入外部 CSS 文件

<style>@import url(style.css);
</style>

(5)、实际开发中如何选择?

  • 仅引入一个css文件,则使用链接方式;
  • 如果需要引入多个css文件,则首先用链接式引入一个“目录”css文件,这个“目录”css文件中再使用导入式引入其他css文件。
  • 如果希望通过JavaScript来动态决定引入哪个css文件,则必须使用链接方式才能实现。

(6)、如何将多个CSS文件导入到一个CSS文件中?

可写多个css样式表 ,例如:css_a.css , css_b.css , css_c.css ,这样就可以写一个主样式 style.css 把三个样式表都装进去:

@import "css_a.css"; 
@import "css_b.css";
@import "css_c.css";

调用的时候只调用 style.css 就行了

<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>字体属性</title>
<link rel="stylesheet"  type="text/css" href="style.css" />
</head><body><p class="red">红色</p>
<p class="blue">蓝色</p>
<p class="green">绿色</p></body>
</html>style.css
@charset "utf-8";
@import "css_a.css";
@import "css_b.css";
@import "css_c.css";css_a.css
@charset "utf-8";
.red {
color:red;
}css_b.css
@charset "utf-8";
.blue{
color:blue;
}css_c.css
@charset "utf-8";
.green{
color:green;
}

相关文章:

一小时学会CSS (上)

1、CSS是什么&#xff1f; CSS &#xff08;Cascading Style Sheets&#xff09;层叠样式表&#xff0c;是一种来为结构化文档&#xff0c;例如HTML 、XML 添加字体&#xff0c;间距和颜色等样式的计算机语言,扩展名是.CSS 。 2、CSS语法规则 CSS写在哪里&#xff0c;CSS写在…...

DockerImage镜像版本说明

参考文章 1、https://medium.com/swlh/alpine-slim-stretch-buster-jessie-bullseye-bookworm-what-are-the-differences-in-docker-62171ed4531d 2、https://stackoverflow.com/questions/52083380/in-docker-image-names-what-is-the-difference-between-alpine-jessie-stret…...

ROS学习第三十三节——Arbotix使用

https://download.csdn.net/download/qq_45685327/87718484 1.介绍 通过 URDF 结合 rviz 可以创建并显示机器人模型&#xff0c;不过&#xff0c;当前实现的只是静态模型&#xff0c;如何控制模型的运动呢&#xff1f;在此&#xff0c;可以调用 Arbotix 实现此功能。 Arboti…...

ElasticSearch第十九讲 ES-best fields,most fields策略

multi-field多字段搜索 假设有个网站允许用户搜索博客的内容,以下面两篇博客内容文档为例: PUT /my_index/my_type/1 {"title": "Quick brown rabbits","body": "Brown rabbits are commonly seen." }PUT /my_index/my_type/2 {&…...

Netty详解,5分钟了解,面试不用慌

1. 概述 1.1 Netty 是什么&#xff1f; Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty 是一个异步的、基于事件驱动的网络应用框架&#xff0c;用…...

Logstash学习

一、Logstash基础 1、什么是Logstash logstash是一个数据抽取工具&#xff0c;将数据从一个地方转移到另一个地方。下载地址&#xff1a;https://www.elastic.co/cn/downloads/logstash logstash之所以功能强大和流行&#xff0c;还与其丰富的过滤器插件是分不开的&#xff…...

【流畅的Python学习笔记】2023.4.22

此栏目记录我学习《流畅的Python》一书的学习笔记&#xff0c;这是一个自用笔记&#xff0c;所以写的比较随意 元组 元组其实是对数据的记录&#xff1a;元组中的每个元素都存放了记录中一个字段的数据&#xff0c;外加这个字段的位置。简单试试元组的特性&#xff1a; char…...

使用django_celery_beat在admin后台配置计划任务

一、依赖包的安装 django中使用celery做异步任务和计划任务最头疼的点就是包之间版本兼容性问题&#xff0c;项目一启动花花报错&#xff0c;大概率都是版本问题。每次都会花很大时间在版本兼容性问题上。本例使用如下版本&#xff1a; Django3.2 celery5.2.7 django-celery-b…...

ARP协议详解

ARP协议详解 文章目录 ARP协议详解ARP协议介绍ARP抓包ARP包解析 ARP协议介绍 ARP&#xff08;Address Resolution Protocol&#xff09;是一种用于将网络层地址&#xff08;如IP地址&#xff09;转换为数据链路层地址&#xff08;如MAC地址&#xff09;的协议&#xff0c;当一…...

不同数量的预测框和Ground Truth框计算IoU

import numpy as npdef calculate_iou(boxes1, boxes2):# 转换为 numpy 数组boxes1 np.array(boxes1)boxes2 np.array(boxes2)# 扩展维度&#xff0c;以便广播计算boxes1 np.expand_dims(boxes1, axis1)boxes2 np.expand_dims(boxes2, axis0)# 计算两组框的交集坐标范围x_m…...

偏好强化学习概述

文章目录 为什么需要了解偏好强化学习什么是偏好强化学习基于偏好的马尔科夫决策过程&#xff08;Markov decision processes with preferences&#xff0c;MDPP&#xff09; 反馈类型分类学习算法分类近似策略分布(Approximating the Policy Distribution)比较和排序策略(Comp…...

苹果笔到底有没有必要买?苹果平板电容笔排行榜

事实上&#xff0c;Apple Pencil与市场上普遍存在的电容笔最大的区别&#xff0c;就是两者的重量以及所具有的压感都互不相同。但是&#xff0c;苹果原有的电容笔因其昂贵的价格而逐步被平替电容笔所替代&#xff0c;而平替电容笔所具备的各种性能也在逐步提高。接下来&#xf…...

learn_C_deep_6 (布尔类型、布尔与“零值“、浮点型与“零值“、指针与“零值“的比较)

目录 语句和表达式的概念 if语句的多种语法结构 注释的便捷方法&#xff08;环境vs&#xff09; if语句执行的过程 逻辑与&& 逻辑或|| 运算关系的顺序 else的匹配原则 C语言有没有布尔类型 C99标准 sizeof(bool)的值为多少&#xff1f; _Bool原码 BOOL…...

JavaScript日期库之date-fn.js

用官网的话来说&#xff0c;date-fn.js 就是一个现代 JavaScript 日期实用程序库&#xff0c;date-fns 为在浏览器和 Node.js 中操作 JavaScript 日期提供了最全面、但最简单和一致的工具集。那实际用起来像它说的那么神奇呢&#xff0c;下面就一起来看看吧。 安装 安装的话就…...

五一假期出游攻略【诗与远方】

原文在&#xff1a;PUSDN 可以导入作为模板引用。 五一旅行计划 假期倒计时 [该类型的内容暂不支持下载] 本次目标&#xff1a;五一旅行计划【画饼版】 前言 任何一个地方&#xff0c;一个城市&#xff0c;都有可观赏的地方&#xff0c;如果没去过邢台的&#xff0c;建议五一去…...

怎样正确做web应用的压力测试?

web应用&#xff0c;通俗来讲就是一个网站&#xff0c;主要依托于浏览器实现其功能。 提到压力测试&#xff0c;我们想到的是服务端压力测试&#xff0c;其实这是片面的&#xff0c;完整的压力测试包含服务端压力测试和前端压力测试。 下文将从以下几部分内容展开&#xff1a…...

Hibernate的持久化类

Hibernate是一个开源的ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;用于将Java程序中的对象映射到数据库中的关系型数据。在Hibernate中&#xff0c;持久化类是用来映射Java对象和关系型数据库表的类。 编写Hibernate持久化类需要遵循以下规则&#xff1a; 持久…...

【c语言】enum枚举类型的定义格式 | 基本用法

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; 给大家跳段街舞感谢支持&#xff01;ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ…...

Python数据挖掘与机器学习

近年来&#xff0c;Python编程语言受到越来越多科研人员的喜爱&#xff0c;在多个编程语言排行榜中持续夺冠。同时&#xff0c;伴随着深度学习的快速发展&#xff0c;人工智能技术在各个领域中的应用越来越广泛。机器学习是人工智能的基础&#xff0c;因此&#xff0c;掌握常用…...

Java有用的书籍2

. 1.《Effective Java》是由Joshua Bloch撰写的一本Java编程规范和最佳实践指南&#xff0c;第三版是最新版。它涵盖了Java编程中一些常见问题和技巧&#xff0c;以及如何编写更加优雅、健壮和高效的Java代码。 该书共分为15章&#xff0c;每一章都涵盖了Java编程中的一个关键…...

UE5 学习系列(二)用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

深入解析C++中的extern关键字:跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

Kafka主题运维全指南:从基础配置到故障处理

#作者&#xff1a;张桐瑞 文章目录 主题日常管理1. 修改主题分区。2. 修改主题级别参数。3. 变更副本数。4. 修改主题限速。5.主题分区迁移。6. 常见主题错误处理常见错误1&#xff1a;主题删除失败。常见错误2&#xff1a;__consumer_offsets占用太多的磁盘。 主题日常管理 …...

pgsql:还原数据库后出现重复序列导致“more than one owned sequence found“报错问题的解决

问题&#xff1a; pgsql数据库通过备份数据库文件进行还原时&#xff0c;如果表中有自增序列&#xff0c;还原后可能会出现重复的序列&#xff0c;此时若向表中插入新行时会出现“more than one owned sequence found”的报错提示。 点击菜单“其它”-》“序列”&#xff0c;…...