【前端】CSS基础（3）

文章目录

  • 前言
  • 1. CSS常用元素属性
    • 1.1 字体属性
      • 1.1.1 字体
      • 1.1.2 字体大小
      • 1.1.3 字体颜色
      • 1.1.4 字体粗细
      • 1.1.5 文字样式

前言

  • 这篇博客仅仅是对CSS的基本结构进行了一些说明，关于CSS的更多讲解以及HTML、Javascript部分的讲解可以关注一下下面的专栏，会持续更新的。
    链接： Web前端学习专栏

  • 下面我对这个专栏的内容进行几点说明：

    1. 适合每一个前端0基础的小伙伴学习。
    2. 对常用标签以及常用属性进行了详细讲解。
    3. 最后有综合案例实现，手把手带大家实现每一个综合案例。
    4. 可以把专栏当作查询资料，前端的知识忘记了的话可以根据博客的目录找到相对应的内容进行复习。

  • 首先，提示一下大家，如果是在手机端看这篇博客的小伙伴，请移步电脑端学习哈！在电脑上会更好看一些！如果能够跟着在电脑上进行代码的实现就会更好了！
    在这里插入图片描述

  • 其次，欢迎大家来到前端的学习，因为我们可以很直观的看见代码的效果，所以我觉得前端的学习其实是很有意思的。这篇博客，将帮助您从零开始学习前端。

  • 在这个学习过程中，将遇到挑战和困难，但请相信，每一次的努力和坚持都将化为成长的动力。让我们携手共进，一起探索Web前端的无限可能！

1. CSS常用元素属性

CSS 属性有很多, 可以参考文档
链接：参考文档

不需要全都背下来, 而是在使用中学习.

1.1 字体属性

1.1.1 字体

body {font-family: '微软雅黑';font-family: 'Microsoft YaHei';
}

语法说明：

  1. 字体名称可以使用中文，但是不建议。
  2. 多个字体之间使用逗号分割（从左到右查找字体，如果都找不到，会使用默认字体）。
  3. 如果字体名有空格，使用引号包裹。
  4. 建议使用常见字体，否则兼容性不好。

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div>这是宋体</div>
</body>
</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>div {font-family: '宋体';}</style>
</head>
<body><div>这是宋体</div>
</body>
</html>

浏览器显示如下：
在这里插入图片描述

1.1.2 字体大小

p {font-size: 20px;
}

语法说明：

  1. 不同浏览器默认字号是不一样的，最好给一个明确值（chrome默认是16px）.
  2. 可以给boby标签使用font-size.
  3. 要注意单位px不要忘记。
  4. 标题标签需要单独指定大小。

代码：

<!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 {font-family: '宋体';font-size: 80px;}</style>
</head>
<body><div>这是宋体</div>
</body>
</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>div {font-family: '宋体';font-size: 80p;}</style>
</head>
<body><div>这是宋体</div>
</body>
</html>

浏览器显示如下：
在这里插入图片描述

我们可以看到，此时浏览器会表现出一定的容错能力，我们把字体大小的单位写错了，浏览器会展示浏览器默认的字体大小。

1.1.3 字体颜色

认识RGB:
我们的显示器是由很多很多的 “像素” 构成的. 每个像素视为一个点, 这个点就能反映出一个具体的颜色.

我们使用 R (red), G (green), B (blue) 的方式表示颜色(色光三原色). 三种颜色按照不同的比例搭配, 就能混合出各种五彩斑斓的效果.

计算机中针对 R, G, B 三个分量, 分别使用一个字节表示(8个比特位, 表示的范围是 0-255, 十六进制表示为 00-FF)。
数值越大, 表示该分量的颜色就越浓. 255, 255, 255 就表示白色; 0, 0, 0 就表示黑色。

color: red;
color: #ff0000;
color: rgb(255, 0, 0);

注意： 鼠标悬停在vscode的颜色上，会出现颜色选择器，可以手动调整颜色。

color 属性值的写法：

  1. 预定义的颜色值（直接是单词）。
  2. 最常用的是十六进制的形式。
    十六进制形式表示颜色, 如果两两相同, 就可以用一个来表示.
    #ff00ff => #f0f
  3. RGB方式。

第二种颜色设置说明：

  1. 前两位是指红像素点的数量，其数值是像素点的个数，其数值越大，颜色就越深。
    在这里插入图片描述
  2. 中间两位数字是指绿色像素点的数值。
    在这里插入图片描述
  3. 最后两位数字是指蓝色像素点的值。
    在这里插入图片描述

第三种写法说明：

在这里插入图片描述

  1. 其中rgb中的r是指红色。括号中被逗号隔开的第一个数值就是红色的数值。
    在这里插入图片描述
  1. 其中rgb中的g是指绿色。括号中被逗号隔开的第二个数值就是绿色的数值。
    在这里插入图片描述
  2. 其中rgb中的b是指蓝色。括号中被逗号隔开的第三个数值就是蓝色的数值。
    在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div>这是第一段话</div><p>这是第二段话</p>
</body>
</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>
</head>
<style>div {color: red;}
</style>
<body><div>这是第一段话</div><p>这是第二段话</p>
</body>
</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>
</head>
<style>div {color: #f00;}
</style>
<body><div>这是第一段话</div><p>这是第二段话</p>
</body>
</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>
</head>
<style>div {color: rgb(255,0,0);}
</style>
<body><div>这是第一段话</div><p>这是第二段话</p>
</body>
</html>

浏览器显示如下：
在这里插入图片描述

1.1.4 字体粗细

字体粗细的问题大家可以参考上面提到的参考手册，在里面找到font-weight属性，点进去就好。
链接：参考手册

下面我截取一些网页中的内容对其进行说明：
在这里插入图片描述
首先第一部分：我们可以通过英文单词来对字体粗细进行设置。
在这里插入图片描述
其次，我们还可以通过用数值来对其进行设置：
在这里插入图片描述

p {font-weight: bold;font-weight: 700;
}

语法说明：

  1. 可以使用数字表示粗细。
  2. 700bold,400是不变粗normal。
  3. 取值范围是100–900。

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div>这是第一段话</div>
</body>
</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>div {font-weight: bold;}</style>
</head>
<body><div>这是第一段话</div>
</body>
</html>

浏览器显示如下：

在这里插入图片描述

这是加粗的效果。

1.1.5 文字样式

文字样式的问题大家可以参考上面提到的参考手册，在里面找到font-style属性，点进去就好。
链接：参考文档
在这里插入图片描述

代码示例：

/* 设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;

很少会把某个文字变倾斜，但是经常要把em / i改成不倾斜。

代码：

<!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 {font-style: italic;}</style>
</head>
<body><div>这是第一段话</div>
</body>
</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>div {font-style: oblique;}</style>
</head>
<body><div>这是第一段话</div>
</body>
</html>

浏览器显示如下：
在这里插入图片描述

它们两个的效果基本上没有差别的。

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

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

相关文章

做软件测试如何突破月薪20K?

做软件测试如何突破月薪20K?

IT行业从事技术岗位&#xff0c;尤其对于测试来说&#xff0c;月薪20K&#xff0c;即便在北上广深这类一线城市薪水也不算低了&#xff0c;可以说对于大部分测试岗位从业者来说&#xff0c;20K都是一个坎儿。 那么&#xff0c;问题来了&#xff0c;做软件测试如何可以达到月薪…
阅读更多...
连锁收银系统如何助力实体门店私域运营

连锁收银系统如何助力实体门店私域运营

作为实体门店&#xff0c;私域运营是提升客户黏性和增加复购率的重要策略之一。而连锁收银系统在私域运营中扮演了关键的角色&#xff0c;它不仅可以帮助门店管理客户信息和消费记录&#xff0c;还能够通过数据分析和营销功能提供个性化的服务和推广活动。下面看看连锁收银系统…
阅读更多...
Qt 6.7 正式发布！

Qt 6.7 正式发布！

本文翻译自&#xff1a;Qt 6.7 Released! 原文作者&#xff1a;Qt Group研发总监Volker Hilsheimer 在最新发布的Qt 6.7版本中&#xff0c;我们大大小小作出了许多改善&#xff0c;以便您在构建现代应用程序和用户体验时能够享受更多乐趣。 部分新增功能已推出了技术预览版&a…
阅读更多...
证照之星是什么软件 证照之星哪个版本好用？证照之星支持哪些相机 证照之星XE免费版

证照之星是什么软件 证照之星哪个版本好用？证照之星支持哪些相机 证照之星XE免费版

许多人都需要使用证件照&#xff0c;为了满足这一需求&#xff0c;人们会使用照相机、手机、电脑等工具进行拍摄。除此之外&#xff0c;市面上还存在专门的证件照拍摄软件&#xff0c;比如证照之星。那么&#xff0c;各位小伙伴是否了解证照之星哪个版本好用&#xff0c;证照之…
阅读更多...
什么？你设计接口什么都不考虑？

什么？你设计接口什么都不考虑？

如果让你设计一个接口&#xff0c;你会考虑哪些问题&#xff1f; 1.接口参数校验 接口的入参和返回值都需要进行校验。 入参是否不能为空&#xff0c;入参的长度限制是多少&#xff0c;入参的格式限制&#xff0c;如邮箱格式限制 返回值是否为空&#xff0c;如果为空的时候是…
阅读更多...
单位个人如何向期刊投稿发表文章？

单位个人如何向期刊投稿发表文章？

在单位担任信息宣传员一职以来,我深感肩上的责任重大。每月的对外信息宣传投稿不仅是工作的核心,更是衡量我们部门成效的重要指标。起初,我满腔热血,以为只要勤勉努力,将精心撰写的稿件投至各大报社、报纸期刊的官方邮箱,就能顺利登上版面,赢得读者的青睐。然而,现实远比理想骨…
阅读更多...
6、Qt—Log4Qt使用小记1

6、Qt—Log4Qt使用小记1

开发平台&#xff1a;Win10 64位 开发环境&#xff1a;Qt Creator 13.0.0 构建环境&#xff1a;Qt 5.15.2 MSVC2019 64位 一、Log4Qt简介 Log4Qt是使用Trolltech Qt Framework的Apache Software Foundation Log4j包的C 端口。它旨在供开源和商业Qt项目使用。所以 Log4Qt 是Apa…
阅读更多...
OSPF实验

OSPF实验

OSPF单区域实验案例 需求 实现全网互联互通 配置步骤 配置PC接口IP地址 配置路由器的接口IP地址 配置OSPF 创建ospf进程&#xff0c;定义router-id指定相应区域宣告网段进入ospf 验证结果 配置命令 第一步&#xff1a;配置PC接口IP地址 第二步&#xff1a;配置路由器接口…
阅读更多...
Leaflet.canvaslabel在Ajax异步请求时bindPopup无效的解决办法

Leaflet.canvaslabel在Ajax异步请求时bindPopup无效的解决办法

目录 前言 一、场景重现 1、遇到问题的代码 2、问题排查 二、通过实验验证猜想 1、排查LayerGroup和FeatureGroup 2、排查Leaflet.canvaslabel.js 三、柳暗花明又一村 1、点聚类的办法 2、歪打正着 总结 前言 在上一篇博客中介绍了基于SpringBoot的全国风景区WebGIS按…
阅读更多...
【多模态】31、Qwen-VL | 一个开源的全能的视觉-语言多模态大模型

【多模态】31、Qwen-VL | 一个开源的全能的视觉-语言多模态大模型

文章目录 一、背景二、方法2.1 模型架构2.2 输入和输出2.3 训练 三、效果3.1 Image Caption 和 General Visual Question Answering3.2 Text-oriented Visual Question Answering3.3 Refer Expression Comprehension3.4 视觉-语言任务的少样本学习3.5 真实世界用户行为中的指令…
阅读更多...
BGP(border gateway protocol)边界网关协议初识篇

BGP(border gateway protocol)边界网关协议初识篇

BGP它是一种路径矢量协议&#xff0c;用于决定数据包在互联网中的最佳路径。 1、工作原理&#xff1a; 自治系统&#xff08;AS&#xff09;间路由: BGP主要用于连接不同自治系统之间的路由器&#xff0c;其中每个自治系统&#xff08;AS&#xff09;代表一组具有共同路由的网…
阅读更多...
Rust构造JSON和解析JSON

Rust构造JSON和解析JSON

目录 一、Rust构造JSON和解析JSON 二、知识点 serde_json JSON 一、Rust构造JSON和解析JSON 添加依赖项 cargo add serde-json 代码&#xff1a; use serde_json::{Result, Value};fn main() -> Result<()>{//构造json结构 cpu_loadlet data r#"{"…
阅读更多...
【C -＞ Cpp】由C迈向Cpp （6）：静态、友元和内部类

【C -＞ Cpp】由C迈向Cpp （6）：静态、友元和内部类

标题&#xff1a;【C -&#xff1e; Cpp】由C迈向Cpp &#xff08;6&#xff09;&#xff1a;静态、友元和内部类 水墨不写bug &#xff08;图片来源于网络&#xff09; 目录 &#xff08;一&#xff09;静态成员 &#xff08;二&#xff09;友元 &#xff08;三&#xff09…
阅读更多...
想让普通金额数字显示为逗号分隔的数字？

想让普通金额数字显示为逗号分隔的数字？

使用vueelement 后台传的数据 1.编写方法 放在method当中 /** 数字转换显示格式 */priceFormat (num, n) {n n || 2;let symbol ",";if (num null) return num;if (typeof num ! number) throw new TypeError(num参数应该是一个number类型);if (n < 0) thro…
阅读更多...
eNSP中小型园区网络拓扑搭建（上）

eNSP中小型园区网络拓扑搭建（上）

→b站直通车&#xff0c;感谢大佬← →eNSP中小型园区网络拓扑搭建&#xff08;下&#xff09;← 不带配置命令的拓扑图已上传~ 项目背景&#xff1a; 某公司准备新建一张网络供企业办公使用。写字楼共3层&#xff0c;一层会客大厅、二层行政部及市场部、三层研发部。一层设…
阅读更多...
基于java的超级玛丽游戏的设计与实现（论文 + 源码）

基于java的超级玛丽游戏的设计与实现（论文 + 源码）

Java的超级玛丽游戏.zip资源-CSDN文库https://download.csdn.net/download/JW_559/89313347 基于java的超级玛丽游戏的设计与实现 摘要 近年来&#xff0c;Java作为一种新的编程语言&#xff0c;以其简单性、可移植性和平台无关性等优点&#xff0c;得到了广泛地应用。J2SE称…
阅读更多...
容联云零代码平台容犀desk：重新定义坐席工作台

容联云零代码平台容犀desk：重新定义坐席工作台

在数智化浪潮的推动下&#xff0c;企业亟待灵活适应市场变化、快速响应客户需求&#xff0c;同时还要控制成本并提升效率&#xff0c;传统的软件开发模式因开发周期长、成本高、更新迭代慢等问题&#xff0c;逐渐难以满足企业灵活多变的业务需求。 容犀Desk&#xff0c;观察到…
阅读更多...
Linux网络编程——HTTP协议的理解与运用

Linux网络编程——HTTP协议的理解与运用

目录 前言 一、认识URL 二、认识HTTP样例 三、HTTP的报头内容 1.url 2. Content-Type 3.Method 方法 1.GET方法 2.POST方法 4、状态码 5.cookie和session 前言 我们知道&#xff0c;协议就是一种约定&#xff0c;客户端与服务端统一的用这种约定进行传输数据。我们…
阅读更多...
如何快速优雅的免费申请和搭建属于自己的服务器

如何快速优雅的免费申请和搭建属于自己的服务器

今天来讲一下如何快速优雅的搭建属于自己的服务器&#xff0c;我们以阿里云的云服务器为例&#xff0c;新用户一般是有三个月使用期限。 首先我们进入官网&#xff0c;选择云服务器ecs 链接直达&#xff1a;https://cn.aliyun.com 打开网页后&#xff0c;往下滑&#xff0c;然…
阅读更多...
「AIGC」Python实现tokens算法

「AIGC」Python实现tokens算法

本文主要介绍通过python实现tokens统计，避免重复调用openai等官方api，开源节流。 一、设计思路 初始化tokenizer使用tokenizer将文本转换为tokens计算token的数量二、业务场景 2.1 首次加载依赖 2.2 执行业务逻辑 三、核心代码 from transformers import AutoTokenizer imp…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023