当前位置: 首页 > 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编程中的一个关键…...

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

linux 错误码总结

1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

深入浅出深度学习基础:从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...