【web前端开发】CSS--CSS简介及其编写位置(上)

1、CSS简介

(1)CSS的全称为:层叠式样式表(Cascading  Style   Sheets)

(2)CSS也是一种标记语言,用于给HTML结构设置样式,例如:文字大小、颜色、元素宽度等等。

剖析层叠式样式表

层叠:一层一层“涂”上去

样式:文字大小、背景颜色、元素宽度等等

表:列表

简单理解:CSS可以美化HTML,让HTML更漂亮。

核心思想:HTML搭建结构,CSS添加样式,实现了:结构与样式的分离。

2、CSS的编写位置

(1)行内样式

示例:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS_行内样式</title>
</head>
<body><h1 style="color:green;font-size: 60px;">好好学习,天天向上</h1>
</body></html>

结果:

所谓的行内样式就是与HTML的标签搭配使用。

在HTML中,名值对之间用“=”相连;

例如:

而在CSS中,名与值之间用“:”相连,末尾加";"

总结:

(1)CSS的行内样式是写在标签的style属性中(行内样式又称:内联样式)

(2)语法:

<h1 style="color: blue;">锄禾日当午</h1>
<h1 style="color: red;">汗滴禾下土</h1>

运行结果:

(3)注意点:

1))style属性的值不能随便写,写时要符合CSS语法规范:是名:值;的形式

2))行内样式表,只能控制当前标签的样式,对其他标签无效

例如:

存在的问题:

书写繁琐,样式不能复用,并且没有体现出结构与样式分离的思想,不推荐大量使用,只有对当前元素添加样式时,才偶尔使用。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机视觉|Swin Transformer:视觉 Transformer 的新方向

一、引言 在计算机视觉领域的发展历程中&#xff0c;卷积神经网络&#xff08;CNN&#xff09; 长期占据主导地位。从早期的 LeNet 到后来的 AlexNet、VGGNet、ResNet 等&#xff0c;CNN 在图像分类、目标检测、语义分割等任务中取得了显著成果。然而&#xff0c;CNN 在捕捉全…

UE4 组件 (对话组件)

制作一个可以生成对话气泡&#xff0c;显示对话台词的简单组件。这个组件要的变量&#xff1a;台词&#xff08;外部传入&#xff09;。功能&#xff1a;开始对话&#xff08;生成气泡UI&#xff09; &#xff0c;结束对话。 一、对话组件创建 二、开始对话事件 1、注意这里获…

WPF高级 | WPF 应用程序部署与发布:确保顺利交付到用户手中

WPF高级 | WPF 应用程序部署与发布&#xff1a;确保顺利交付到用户手中 一、前言二、部署与发布基础概念2.1 部署的定义与目的2.2 发布的方式与渠道2.3 部署与发布的关键要素 三、WPF 应用程序打包3.1 使用 Visual Studio 自带的打包工具3.2 使用第三方打包工具 四、发布到不同…

Vue3自定义hooks

Vue3自定义hooks 什么是自定义hooks 把一个功能的所有数据和方法写到同一个ts文件里。 命名规范&#xff1a;useXxx&#xff0c;小驼峰。 在每一个hooks中&#xff0c;都可以写onMounted、computed等属性&#xff0c;互不干扰。 体现出了组合式AI的优势&#xff0c;一个功能的…

Win7重装不翻车!ISO镜像安全下载渠道+BIOS设置避雷手册

一、写在前面&#xff1a;为什么你需要这份教程&#xff1f; 当电脑频繁蓝屏、系统崩溃甚至无法开机时&#xff0c;重装系统可能是最后的救命稻草。但市面上的教程往往存在三大痛点&#xff1a; ⚠️ 镜像来源不明导致系统被植入后门 ⚠️ 启动盘制作失败反复折腾 ⚠️ 操作失…

DeepSeek大模型 —— 全维度技术解析

DeepSeek大模型 —— 全维度技术解析 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家&#xff01;点我试试&#xff01;&#xff01; 文章目录 DeepSeek大模型 —— 全维度技术解析一、模型架构全景解析1.1…

AGI 之 【Dify】 之 使用 Docker 在 Windows 端本地部署 Dify 大语言模型(LLM)应用开发平台

AGI 之 【Dify】 之 使用 Docker 在 Windows 端本地部署 Dify 大语言模型&#xff08;LLM&#xff09;应用开发平台 目录 AGI 之 【Dify】 之 使用 Docker 在 Windows 端本地部署 Dify 大语言模型&#xff08;LLM&#xff09;应用开发平台 一、简单介绍 二、Docker 下载安…

外键 FK enable constraints enq:TM lock

ALTER TABLE X ENABLE NOVALIDATE CONSTRAINT XX&#xff1b; 如果referenced 表在DML 就会出现 enq:TM lock

深度学习语义分割数据集全景解析

一、语义分割任务概述 语义分割是计算机视觉领域的核心任务之一&#xff0c;目标是通过算法将图像中的每个像素精准划分到对应的语义类别&#xff08;如道路、车辆、行人等&#xff09;。高质量标注数据集是推动该领域发展的关键因素。本文将系统梳理主流数据集的技术特征与适…

【芯片设计】处理器芯片大厂前端设计工程师面试记录·20250307

面试问题和ds的参考答案 好的,我现在需要处理用户的请求,他们希望我扩展之前的回答,使其更详细、更丰富。首先,我需要回顾之前的回答,看看哪些部分可以进一步展开。用户提到“回答多说一些!”,这意味着他们希望每个问题的回答内容更深入,包含更多的技术细节、实际案例…

C++特殊类设计

目录 不能被拷贝的类 只能在堆上创建对象的类 构造函数私有化&#xff1a; 析构函数私有化&#xff1a; 只能在栈上创建对象的类 不能被继承的类 只能创建一个对象的类(单例模式) 设计模式&#xff1a; 单例模式&#xff1a; 饿汉模式&#xff1a; 懒汉模式&#xff1a; 线程…

Linux系统之配置HAProxy负载均衡服务器

Linux系统之配置HAProxy负载均衡服务器 前言一、HAProxy介绍1.1 HAProxy简介1.2 主要特点1.3 使用场景二、本次实践介绍2.1 本次实践简介2.2 本次实践环境规划三、部署两台web服务器3.1 运行两个Docker容器3.2 编辑测试文件3.3 访问测试四、安装HAProxy4.1 更新系统软件源4.2 安…

从零开始学机器学习——什么是机器学习

这个系列的文章旨在为初学者提供机器学习知识&#xff0c;避免使用专业术语和复杂的概念&#xff0c;以便更好地理解和应用。 首先给大家介绍一个很好用的学习地址&#xff1a;https://cloudstudio.net/columns 机器学习 在这里简要介绍机器学习&#xff1a;它利用真实世界或…

AI驱动的消费者体验优化——DeepBI如何用智能策略助力亚马逊卖家“俘获”消费者的心

在亚马逊这个竞争异常激烈的电商平台上&#xff0c;消费者体验已经成为决定卖家成败的关键因素之一。优质的消费者体验不仅能够提升客户满意度&#xff0c;还能加速口碑传播&#xff0c;带动销量持续增长。 今天&#xff0c;我们就来深入解析&#xff0c;DeepBI如何依托 AI 驱动…

Devart dbForge Studio for MySQL Enterprise 9.0.338高效数据库管理工具

Devart dbForge Studio for MySQL Enterprise 9.0.338 是一款功能强大的 MySQL 数据库管理工具&#xff0c;专为数据库开发人员和管理员设计。它提供了丰富的功能&#xff0c;帮助用户更高效地管理、开发和维护 MySQL 数据库 Devart dbForge Studio for MySQL Enterprise 9.0.…

SQL_语法

1 数据库 1.1 新增 create database [if not exists] 数据库名; 1.2 删除 drop database [if exists] 数据库名; 1.3 查询 (1) 查看所有数据库 show databases; (2) 查看当前数据库下的所有表 show tables; 2 数据表 2.1 新增 (1) 创建表 create table [if not exists…

PX4中的UAVCAN_V1的实现库libcanard与数据格式DSDL

libcanard简介 libcanard 是用于嵌入式实时系统的 UAVCAN 协议的缩减版实现库。 在 PX4 中&#xff0c;在 src/drivers/uacvan_v1 目录中&#xff0c;与 0.9 版本的相比&#xff0c;名称更改了(v0.9版本为 libuavcan)&#xff1a; 此库有几个点需要注意&#xff1a; 1&#…

物联网系统搭建

实验项目名称 构建物联网系统 实验目的 掌握物联网系统的一般构建方法。 实验要求&#xff1a; 1&#xff0e;构建物联网系统&#xff0c;实现前后端的交互。 实验内容&#xff1a; CS模式MQTT&#xff08;不带数据分析处理功能&#xff09; 实现智能设备与应用客户端的交…

SpringBoot优雅关机,监听关机事件,docker配置

Spring Boot 提供了多种方法来实现优雅停机&#xff08;Graceful Shutdown&#xff09;&#xff0c;这意味着在关闭应用程序之前&#xff0c;它会等待当前正在处理的请求完成&#xff0c;并且不再接受新的请求。 一、优雅停机的基本概念 优雅停机的主要步骤如下&#xff1a; …

Docker 学习(二)——基于Registry、Harbor搭建私有仓库

Docker仓库是集中存储和管理Docker镜像的平台&#xff0c;支持镜像的上传、下载、版本管理等功能。 一、Docker仓库分类 1.公有仓库 Docker Hub&#xff1a;官方默认公共仓库&#xff0c;提供超过10万镜像&#xff0c;支持用户上传和管理镜像。 第三方平台&#xff1a;如阿里…