本文用于记录前端开发的学习过程。前面我们已经学习了html的编写,知道了Web开发的一些最基本的知识;在html的学习过程中,我们提到关于样式的设计和修改常需要使用CSS来实现。那么CSS到底是什么东西呢?它又如何来设计样式呢?

目录

什么是CSS?

在HTML文件中直接使用

CSS语法规范

 引入样式

1.内部样式表

2.行内样式表

3.外部样式

总结


 

什么是CSS?

本文参考了CSS教程的部分内容。

CSS(级联样式表)是为 Web 内容设置样式的代码。它是一种样式表语言;能够对网页中元素表位置的排版进行像素级精确控制,实现美化页面的效果。(也许有点像化妆?)

可以理解为html决定页面结构,CSS决定展示效果。

在HTML文件中直接使用

CSS可以写在单独的文件,也可以直接写在html文件中。我们先来看如何直接在html文件中使用CSS。

在<head>标签内部添加<style>标签,我们在style标签中就可以书写CSS了。先建立一个html文件,并添加一行段落文字:

<!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标签 --><style></style>
</head>
<body><p>这是一段文字</p>
</body>
</html>

我们想要设计段落标签的样式,就需要在style标签中写出来,标签名+大括号;按照下面的例子开始:

 <style>p { color: red;font-size:40px;}</style>

这个时候我们点运行:

我们可以看到字体变大并且颜色变成了红色。 

那么,如果我们再添加一个段落呢?我们将段落添加到三条,其余不变:

 这时我们再次运行会发现每条段落的文字都做出了修改。

CSS语法规范

根据上面的例子,我们其实已经可以大概了解到CSS的书写规范了。

CSS的语法很简单,只需要选择器+{一条/n条声明},即可设计一种标签的样式。

  • 选择器决定针对谁修改
  • 声明决定修改的内容

 引入样式

CSS与html并不是同一个语言,所以要在html中使用CSS就需要引入。

1.内部样式表

上面介绍的在html中使用<style>标签来直接使用CSS其实是内部样式表的引入方式。将CSS写在style标签中,嵌入到html内部。其实理论上来说,style放到html文件的任意位置都能运行,一般我们放在head标签或者文件最底部。

但在实际开发过程中,这种方式并不常用。更多的是将CSS单独放在另一个文件中,在下面的方法会有介绍。

2.行内样式表

通过style属性,来指定某个标签的样式。只适合用于写简单形式,只针对某个标签生效。该方法优先级很高,会覆盖掉其他的样式,但不适用于写复杂的样式。

<p style="color:blueviolet;font-size:80px">hello world!</p>

我们运行后会发现,该样式将我们之前的样式覆盖掉了。

3.外部样式

这是实际开发过程中最常用的方式。我们会将CSS单独写在一个CSS文件中,在html中我们使用link标签引入CSS。

先创建一个CSS文件。(test.css)在文件中按照之前的写法在写一遍:

之后我们在html文件的head标签中嵌入link标签:

<link rel="stylesheet" href="./test.css">

 stylesheet表示样式表,用href链接css文件的路径即可。

总结

通过以上学习,我们对CSS有了基本的认识。CSS是html中样式修改十分便利的工具。我们理解了什么是CSS,知道了它的书写规范,也了解了如何在html文件中使用CSS;有了这些基础后,我们才能更深入地学习CSS的样式设计。

 

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

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

相关文章

数据结构(4)—栈和队列

一、概念1.栈只允许在栈顶位置入栈和出栈元素&#xff0c;链表可以在任意位置插入和删除元素&#xff0c;栈和队列只允许在指定位置插入和删除元素2.链表、栈和队列都是一种线性结构&#xff08;一对一&#xff09;&#xff0c;栈和队列是一种特殊的表状结构二、栈1.基础概念先…

vue2.如何给一个页面设置动态的name。不同路由使用一样的组件。页面不刷新怎么办?

page里面detail.vue export default { name: detail, } vue2里面.vue的页面都会设置一个name&#xff0c;这个通常是写死的。不能在页面动态设置的。页面刷新缓存通常都是根据这个name来判断的。如果name写死。我几个页面都通用这一个页面的话&#xff0c;他也不刷新页面啊。 比…

浮动IP(Floating IP)的删除通常需要满足什么条件

浮动IP&#xff08;Floating IP&#xff09;的删除通常需要满足什么条件在云计算或网络环境中&#xff0c;浮动IP&#xff08;Floating IP&#xff09;的删除通常需要满足一定的条件&#xff0c;以确保操作不会影响现有业务或导致网络中断。以下是常见的可删除浮动IP的场景和条…

机器学习之随机森林(Random Forest)实战案例

一、算法基础 首先&#xff0c;来介绍一下算法的基础语法 class sklearn.ensemble.RandomForestClassifier(\ n_estimators’warn’,\ criterion’gini’,\max_depthNone, \ min_samples_split2,\ min_samples_leaf1, \ min_weight_fraction_leaf0.0, \ max_features’auto’…

《C语言》指针练习题--1

《C语言》指针练习题–1 1. 交换两个整数的值 题目描述&#xff1a; 编写一个C程序&#xff0c;定义一个函数swap&#xff0c;使用指针参数交换两个整数的值。在main函数中调用该函数并输出交换后的结果。 解题思路&#xff1a; 为了交换两个整数的值&#xff0c;可以通过指针传…

应急响应整理

目录 windows下 1. 检查账号安全 利用注册表实现用户隐藏 粘滞键后门 2 检查异常端口、进程 3. 检查启动项、计划任务、服务 4. 日志分析-Windows 常见事件类型、登录类型 Linux下 1. 账号安全 2. 历史命令 3. 检查异常端口 4. 检查异常进程 5. 检查开机启动项 …

一文读懂 C# 中的 Bitmap

一文读懂 C# 中的 Bitmap 一、Bitmap 到底是什么? 二、推荐使用场景 三、实战 Demo 基础用法:加载、创建和保存 进阶用法 缩放图片 裁剪图片 颜色调整(反色处理) 四、核心方法和属性说明 常用函数 常用属性 五、避坑指南、注意事项 六、总结与决策 一文读懂 C# 中的 Bitmap…

预约时间组件

效果图如何使用<template><view><button click"pickerTime(0)">预约时间0</button><button click"pickerTime(1)">预约时间1</button><button click"pickerTime(2)">预约时间2</button><but…

Android 开发 - Service、Camera、Layout Design 自定义设备类型和大小

一、Service 启动 1、基本介绍 &#xff08;1&#xff09;startService()其他组件通过调用 startService() 启动 Service 后&#xff0c;Service 可在后台无限期运行&#xff0c;即使启动 Service 的组件被销毁也不受影响&#xff0c;一般情况下 startService() 是执行单一操作…

Qwen Image:开源中文渲染SOTA,重塑文生图技术边界

1. Qwen Image的技术定位与行业痛点1.1 文本渲染&#xff1a;文生图领域的长期技术瓶颈传统文生图模型在图像美学与真实感优化上已取得显著进展&#xff0c;但多语言文本渲染始终是行业难以突破的瓶颈。主流模型在处理中文等非字母语言时&#xff0c;常出现字符断裂、布局错位、…

Docker入门教程:在腾讯云轻量服务器上部署你的第一个容器化应用 (2025)

更多云服务器知识&#xff0c;尽在hostol.com“在我电脑上明明是好的啊&#xff01;”这句话&#xff0c;是不是堪称程序员“甩锅”排行榜第一名的金句&#xff1f;当你辛辛苦苦开发完一个应用&#xff0c;把它交给同事或者部署到服务器上时&#xff0c;却发现因为它依赖的某个…

DevOps平台结合Gradle实现打包流水线

在现代软件开发中,持续集成与持续交付(CI/CD)已成为团队提速、降本增效的核心实践。Gradle作为强大的自动化构建工具,常被用于Android与Java项目的构建打包任务。而将Gradle集成进企业的DevOps平台中,不仅可以标准化构建过程,还能自动化打包、测试、发布的全流程,大幅提…

Node.js 操作 MySQL

目录 一、什么是 MySQL&#xff1f; 二、MySQL 的功能概览 三、MySQL 的安装与启动 安装 MySQL 启动服务 四、Node.js 如何连接 MySQL&#xff1f; 使用 mysql2 模块&#xff08;推荐&#xff09; 建立连接 五、创建数据表和插入数据&#xff08;SQL 初始化&#xff09…

解锁高效敏捷:2025年Scrum项目管理工具的核心应用解析

一、为什么Scrum团队需要专业项目管理工具&#xff1f;在敏捷开发实践中&#xff0c;Scrum框架虽然提供了基础的工作流程&#xff0c;但缺乏对任务细粒度管理的支持。传统白板或简单看板工具往往无法满足现代敏捷团队的需求&#xff0c;导致&#xff1a;冲刺规划混乱&#xff1…

途游大数据面试题及参考答案

Java 的反射机制是什么?主要应用在哪些场景? Java的反射机制是指程序在运行时,能够获取自身类的信息(如类名、属性、方法、构造器等),并动态操作这些信息的能力。正常情况下,Java代码编译时类型已确定,而反射打破了这种编译期约束,让程序在运行时灵活操作类和对象。 …

贪心+矩阵算法

贪心算法贪心的本质是&#xff1a;选择每一阶段的局部最优&#xff0c;从而达到全局最优做题的时候&#xff0c;只要想清楚 局部最优 是什么&#xff0c;如果推导出全局最优&#xff0c;其实就够了。买卖股票的最佳实际思路&#xff1a;如果第i天卖出股票&#xff0c;则最大利润…

STM32U5 周期性异常复位问题分析

关键字&#xff1a; Option Bytes, IDWG 1. 问题背景 客户反馈使用 NUCLEO_STM32U575 进行评估时&#xff0c;发现板子烧录完程序后&#xff0c;能看到指示程序运行的 LED 灯正常点亮&#xff0c;但是程序跑不起来。仔细观察 LED 指示灯&#xff0c;并不是常亮而是出现周期性…

RedisBloom使用

安装RedisBloom模块&#xff0c;从git获取对应的原码&#xff0c;make生成.so文件&#xff0c;挂载.so文件&#xff0c;启动redis docker run --name test-redis -v /iothub/test-redis/data:/data -v /iothub/test-redis/modules:/modules -p 6378:6379 -d redis:4.0.10 redis…

ADC、Flash、SPI、watchdog

ADCADC(Analog-to-Digital Converter), 即模拟信号 - 数字信号转换器在STM32F103C8T6中, 同样具有ADC功能.以我们的芯片为例, 也存在2个片上外设ADC, 即ADC1和ADC2, 这两个ADC片上外设都挂载在APB2总线上.我们的ADC片上外设, 是一种具有12位逐次逼近型ADC,ADC转换的本质是不断的…

冷库设备远程监控物联网+省电节能解决方案

随着生鲜电商、医药冷链、跨境物流等行业的爆发式增长&#xff0c;我国冷库容量激增&#xff0c;但传统冷库管理模式正面临严峻挑战。据统计&#xff0c;国内冷链运输损耗率高达12%-15%&#xff0c;其中因温度失控导致的货损占比超60%。在某医药企业冷库事故中&#xff0c;因制…