【前端】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.mzph.cn/web/12975.shtml

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

相关文章

c++父类指针指向子类

有一个常见的c题&#xff0c;就是父类和子类的构造函数和析构函数分别调用顺序&#xff1a; 父类构造函数子类构造函数子类析构函数父类析构函数 以及父类中的函数在子类中重新实现后&#xff0c;父类指针指向子类后&#xff0c;该指针调用的函数是父类中的还是子类中的&…

震撼发布!GPT-4o 上线!

5 月 14日凌晨一点&#xff0c;OpenAI 发布了 GPT-4o&#xff01; 新模型的功能简单概括就是&#xff1a;更快、更智能、更像人类。 秉承着持续更新的态度&#xff0c;Hulu AI 快速接入 GPT-4o 啦&#xff01; 继 5 月份上线 Suno 之后&#xff0c;这次是 Hulu AI 的又一重大…

vue3专栏项目 -- 六、上传组件(上)

1、上传组件需求分析 我们还需要新建和展示文章&#xff0c;新建文章自然是发送post请求&#xff0c;同时在post中自带对应的数据&#xff0c;展示文章就是根据id取出已有的数据并且展示出来。 这里有一个难点就是上传组件&#xff0c;上传文件是App应用中最基本的需求&#…

Socks5:网络世界的隐形斗篷

在数字化时代&#xff0c;网络隐私和安全已成为人们日益关注的话题。Socks5&#xff0c;作为一种代理协议&#xff0c;为用户在网络世界中的匿名性提供了强有力的支持。本文将从Socks5的多个方面&#xff0c;深入探讨这一技术如何成为网络世界的“隐形斗篷”。 一、Socks5的基本…

linux基础指令讲解(ls、pwd、cd、touch、mkdir)

&#x1fa90;&#x1fa90;&#x1fa90;欢迎来到程序员餐厅&#x1f4ab;&#x1f4ab;&#x1f4ab; 主厨&#xff1a;邪王真眼 主厨的主页&#xff1a;Chef‘s blog 所属专栏&#xff1a;c大冒险 总有光环在陨落&#xff0c;总有新星在闪烁 这个是我们今天要用到的初始…

P8805 [蓝桥杯 2022 国 B] 机房

P8805 [蓝桥杯 2022 国 B] 机房 分析 是一道lca题目&#xff0c;可以直接套模板 前缀和处理点权 具体思路&#xff1a; 1.n台电脑用n-1条网线相连&#xff0c;任意两个节点之间有且仅有一条路径&#xff08;拆分成各自到公共祖先节点的路径——lca&#xff09;&#xff1b;…

波搜索算法(WSA)-2024年SCI新算法-公式原理详解与性能测评 Matlab代码免费获取

​ 声明&#xff1a;文章是从本人公众号中复制而来&#xff0c;因此&#xff0c;想最新最快了解各类智能优化算法及其改进的朋友&#xff0c;可关注我的公众号&#xff1a;强盛机器学习&#xff0c;不定期会有很多免费代码分享~ 目录 原理简介 一、初始化阶段 二、全…

我与C++的爱恋:string类的常见接口函数

​ ​ &#x1f525;个人主页&#xff1a;guoguoqiang. &#x1f525;专栏&#xff1a;我与C的爱恋 朋友们大家好啊&#xff0c;本节我们来到STL内容的第一部分&#xff1a;string类接口函数的介绍 ​ ​ 1.string类的认识 给大家分享一个c文档 https://legacy.cplusplus.…

Weblogic 管理控制台未授权远程命令执行漏洞(CVE-2020-14882,CVE-2020-14883)

1 漏洞概述 Weblogic Pre-Auth Remote Command Execution 漏洞&#xff08;CVE-2020-14882, CVE-2020-14883&#xff09;是针对 Oracle WebLogic Server 的两个安全漏洞。CVE-2020-14882 允许远程用户绕过管理员控制台组件中的身份验证&#xff0c;而 CVE-2020-14883 则允许经…

Sam Blackshear谈Move语言的起源

Move编程语言作为Sui生态系统的关键组成部分&#xff0c;通过可编程交易区块等机制支持其独特的对象数据模型&#xff0c;并支持高效的代码。五年前&#xff0c;Mysten Labs的联合创始人兼首席技术官Sam Blackshear创建了Move。他专门设计了Move&#xff0c;用于编写智能合约&a…

sqli-labs靶场第十四关

目录 1&#xff1a;分析 找闭合符&#xff1a; 2&#xff1a;开始注入 报错注入&#xff1a; 注入数据库名&#xff1a; 注入表名&#xff1a; 注入列名&#xff1a; 注入具体值&#xff1a; 1&#xff1a;分析 经过我们的实验发现当我们输入的密码后面存在双引号时会报…

【C++】学习笔记——多态_1

文章目录 十二、继承8. 继承和组合 十三、多态1. 多态的概念2. 多态的定义和实现虚函数重写的两个特殊情况override 和 final 3. 多态的原理1. 虚函数表 未完待续 十二、继承 8. 继承和组合 我们已经知道了什么是继承&#xff0c;那组合又是什么&#xff1f;下面这种情况就是…

英语学习笔记13——A new dress

A new dress 一件新连衣裙 词汇 Vocabulary colour / color n. 颜色 v. 上色&#xff0c;涂色  英  美 颜色短语&#xff1a;green hand 新手      black tea 红茶      white house 白宫      black sheep 害群之马 英文颜色类词汇&#xff1a; red 红色…

鸿蒙开发接口Ability框架:【ApplicationContext】

ApplicationContext ApplicationContext模块提供开发者应用级别的的上下文的能力&#xff0c;包括提供注册及取消注册应用内组件生命周期的监听接口。 说明&#xff1a; 开发前请熟悉鸿蒙开发指导文档&#xff1a; gitee.com/li-shizhen-skin/harmony-os/blob/master/README.m…

静态IP代理:网络世界的隐秘通道

在数字化时代&#xff0c;网络安全和隐私保护日益受到重视。静态IP代理作为一种网络服务&#xff0c;为用户提供了一个稳定且可预测的网络连接方式&#xff0c;同时保护了用户的在线身份。本文将从五个方面深入探讨静态IP代理的概念、优势、应用场景、技术实现以及选择时的考量…

C语言学习【printf函数和scanf函数】

C语言学习【printf函数和scanf函数】 printf()函数和scanf()函数可以让用户与程序交流&#xff0c;是输入/输出函数 printf()函数 请求printf()函数打印数据的指令要与待打印数据的类型相匹配。例如&#xff0c;打印整数时使用%d&#xff0c;打印字符时使用%c。这些符号被称…

程序在银河麒麟系统下实现开机自启及创建桌面快捷方式

目录 1. 机器环境说明 2. 程序开机自启动设置 2.桌面快捷方式设置 3. 附加说明 1. 机器环境说明 机器安装的银河麒麟操作系统属性如下&#xff1a; 2. 程序开机自启动设置 第1步&#xff1a;编写一个脚本,用于自动化启动&#xff0c;为便于后文描述&#xff0c;该脚本名称…

干货教程【软件篇】| 免费实现游戏加速自由

需要这个游戏加速软件的小伙伴可以关注一下文章底部公众号&#xff0c;回复关键词【zdjs】即可获取。 该软件可以实现免费的游戏加速&#xff0c;实测延迟低体验好&#xff01; 建议看到后赶紧保存下来防止丢失&#xff01; 下面讲一下该软件安装流程~ 通过链接可以得到下面…

Linux进程控制——Linux进程程序替换

前言&#xff1a;Linux进程控制包含了进程终止&#xff0c;进程等待&#xff0c;进程程序替换。走到现在我们也只剩下进程程序替换没介绍了&#xff0c;那么让我们来看看进程程序替换到底是什么&#xff01; 本篇主要内容&#xff1a; 替换原理 替换函数 实现简易shell 我们所创…

Broad Learning System (BLS) 宽度学习系统

宽度学习&#xff08;Broad Learning System, BLS&#xff09;是一种有效的神经网络学习框架&#xff0c;旨在通过扩展网络的宽度而不是深度来提高学习能力和效率。与传统的深度学习相比&#xff0c;宽度学习通过堆叠多层特征节点和增强节点来构建网络&#xff0c;从而避免了深…