Web前端-CSS（文本样式）

文章目录

  • 1.font字体
    • 1.1 font-size:大小
    • 1.2 font-family:字体
    • 1.3 font-weight:字体粗细
    • 1.4 font-style:字体风格
    • 1.5 font总结
  • 2. css外观属性
    • 2.1 color:文本颜色
    • 2.2 text-align:文本水平对齐方式
    • 2.3 line-height:行间距
    • 2.4 text-indent:首行缩进
    • 2.5 text-decoration 文本的装饰
    • 2.6 外观属性总结
  • 3.开发者工具（chrome）
  • 4. vscode快捷操作emmet语法

1.font字体

1.1 font-size:大小

  • 作用：

    font-size属性用于设置字号

p {  font-size:20px; 
}

  • 单位：

    • 可以使用相对长度单位，也可以使用绝对长度单位。

    • 相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。

注意：

  • cm是固定大小，在任何电脑浏览器看到都是固定cm，而像素是相对单位，不同屏幕1像素大小都是不一样的

  • 我们文字大小以后，基本就用px了，其他单位很少使用

  • 谷歌浏览器默认的文字大小为16px，最小字体大小是12px，不同浏览器字体像素是不一样的

  • 但是不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。一般给body指定整个页面文字的大小

    <head><meta charset="UTF-8"><title>Document</title><style>p {font-size: 18px;}</style>
</head><body><p>码上未来</p></body></html>

1.2 font-family:字体

  • 作用：

    font-family属性用于设置哪一种字体。

p{ 
font-family:"微软雅黑";
}
  • 网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑
  • 可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体， 如果都没有，则以我们电脑默认的字体为准。
p{font-family: Arial,"Microsoft Yahei", "微软雅黑";}

常用技巧：

1. 各种字体之间必须使用英文状态下的逗号隔开。font-family: STHeiti,"宋体";
2. 中文字体需要加引号，英文字体一般不需要加引号。font-family: STHeiti,"宋体";
3. 当需要设置英文字体时，英文字体名必须位于中文字体名之前。font-family: STHeiti,"宋体";
3. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，font-family: "Times New Roman";。
4. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
宋体：SimSuncss中中文字体（font-family）的英文名称
Mac OS：
华文细黑：ST Heiti Light [STXihei]
华文黑体：STHeiti
华文楷体：STKaiti
华文宋体：STSong
华文仿宋：STFangsong
儷黑 Pro：LiHei Pro Medium
儷宋 Pro：LiSong Pro Light
Windows:
新細明體：PMingLiU
細明體：MingLiU
標楷體：DFKai-SB
黑体：SimHei
新宋体：NSimSun
<head><meta charset="UTF-8"><title>Document</title><style>p {font-size: 20px;/* 一般不会手动设置字体，尽量使用浏览器默认字体 *//* 谷歌浏览器默认字体：微软雅黑 */font-family: "STHeiti","宋体";}</style>
</head><body><p>码上未来</p>
</body>
</html>

1.3 font-weight:字体粗细

  • 作用：

font-weight属性用于定义字体粗细，其可用属性值如下：

属性值描述
lighter定义更细的字符，100代表lighter
normal默认值（不加粗的）
bold定义粗体（加粗的）
100~900400 等同于 normal，而 700 等同于 bold 我们重点记住这句话

提倡：

  • 我们平时更喜欢用数字来表示加粗和不加粗。
  • 只能给100的倍数，不能给101、204这种数字设置字体粗细。
font-weight: 500;

1.4 font-style:字体风格

  • 作用：

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

属性作用
normal默认值，浏览器会显示标准的字体样式 font-style: normal;
italic浏览器会显示斜体的字体样式。
<head><meta charset="UTF-8"><title>Document</title><style>p {font-size: 20px;/* 一般不会让字体倾斜 */font-style: italic;}</style>
</head><body><p>码上未来</p>
</body></html>

html也提供了很多样式的标签作为了解：

		<!-- 该标签只是为了样式加粗，根本不用，因为我们有css的font-weight --><b>加粗</b><!-- 该标签语义化比较强烈，是强调一个文章的某段文字重要性 --><strong>粗体</strong><!-- 该标签只是为了样式上的倾斜，根本不用，因为我们有css的font-style  --><i>倾斜</i><!-- 该标签语义化比较强烈，是强调一个文章的某段文字是引用某个人的名言名句  --><em>斜体</em>

     p {/* font简写 *//* 顺序不可以变：font-style font-weight、font-size、font-family  */font: italic 600 24px "微软雅黑";}

1.5 font总结

属性表示注意点
font-size字号我们通常用的单位是px 像素，一定要跟上单位
font-family字体实际工作中按照团队约定来写字体
font-weight字体粗细记住加粗是 700 或者 bold 不加粗 是 normal 或者 400 记住数字不要跟单位
font-style字体样式记住倾斜是 italic 不倾斜 是 normal 工作中我们最常用 normal

2. css外观属性

2.1 color:文本颜色

  • 作用：

    color属性用于定义文本的颜色，

  • 其取值方式有如下3种：

表示属性值
预定义的颜色值red，green，blue，还有我们的御用色 pink
十六进制#FF0000，#FF6600，#29D794
RGB代码rgb(255,0,0)或 rgb(100%,0%,0%)
  p {/* color 三种写法 *//* 1.color: 颜色单词; *//* color: red; *//* 2.color: rgb(); *//* color: rgb(blue, red, blue); *//* color: rgb(0, 0, 0); *//* color: rgb(255, 255, 255); *//* color: rgb(100%, 100%, 100%); *//* color: rgb(255, 0, 208); *//* 3.color: 16进制; *//* color: #AAA; */}

颜色转换器：https://www.sioe.cn/yingyong/yanse-rgb-16/

2.2 text-align:文本水平对齐方式

  • 作用：

    text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性

  • 其可用属性值如下：

属性解释
left左对齐（默认值）
right右对齐
center居中对齐

  • 注意：

    是让盒子里面的内容水平居中， 而不是让盒子居中对齐

<head><meta charset="UTF-8"><title>Document</title><style>p {font-size: 24px;text-align: right;}span {text-align: right;}</style>
</head><body><p>码上未来</p><!-- 文本内容和span标签盒子一般大，所以没有效果 --><span>码上未来</span>
</body>
</html>

2.3 line-height:行间距

  • 作用：

    line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。

  • 单位：

    • line-height常用的属性值单位有多种，分别为像素px，倍数，相对值em和百分比%，实际工作中使用最多的是像素px

  • 技巧：

一般情况下，行距比字号大7、8像素左右就可以了。
line-height: 24px;

<head><meta charset="UTF-8"><title>Document</title><style>p {font-size: 16px;/*行间距*/line-height: 24px;}</style>
</head><body><p>码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来</p></body></html>

2.4 text-indent:首行缩进

  • 作用：

    text-indent属性用于设置首行文本的缩进，

  • 属性值

    • 其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值,
    • 建议使用em作为设置单位。

1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度

p {/*行间距*/line-height: 25px;/*首行缩进2个字  em  1个em 就是1个字的大小*/text-indent: 2em;  }

<head><meta charset="UTF-8"><title>Document</title><style>p {font-size: 16px;/* 首行缩紧2个字体大小，就是32像素 */text-indent: 32px;/* 1em=当前一个字体大小，不需要计算了 */text-align: 2em;}</style>
</head><body><p>码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来</p>
</body>
</html>

2.5 text-decoration 文本的装饰

  • text-decoration 通常我们用于给链接修改装饰效果
值描述
none默认。定义标准的文本。 取消下划线（最常用）
underline定义文本下的一条线。下划线 也是我们链接自带的（常用）
overline定义文本上的一条线。（不用）
line-through定义穿过文本下的一条线。（不常用）
<head><meta charset="UTF-8"><title>Document</title><style>p {font-size: 16px;/* 文本装饰 */text-decoration: underline;}/* 去掉a标签的下划线 */a {text-decoration: none;}</style>
</head><body><p>码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来码上未来</p><a href="#">百度一下 </a>
</body>
</html>

2.6 外观属性总结

属性表示注意点
color颜色我们通常用 十六进制 比如 而且是简写形式 #fff
line-height行高控制行与行之间的距离
text-align水平对齐可以设定文字水平的对齐方式
text-indent首行缩进通常我们用于段落首行缩进2个字的距离 text-indent: 2em;
text-decoration文本修饰记住 添加 下划线 underline 取消下划线 none

3.开发者工具（chrome）

  • 此工具是我们的必备工具，以后代码出了问题

  • 我们首先第一反应就是：

  • “按F12”或者是 “shift+ctrl+i” 打开 开发者工具。

  • 菜单： 右击网页空白出—检查

    image-20230205214253338

  • 通过开发人员工具小指针工具，查找页面元素

  • 左侧是html页面结构，右侧是css样式

    小技巧：

  1. ctrl+滚轮 可以 放大开发者工具代码大小。
  2. 左边是HTML元素结构 右边是CSS样式。
  3. 右边CSS样式可以改动数值和颜色查看更改后效果。
  4. ctrl + 0 复原浏览器大小

4. vscode快捷操作emmet语法

Emmet的前身是Zen coding,它使用缩写,来提高html/css的编写速度。

  1. 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成

  2. 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div

  3. 如果有父子级关系的标签，可以用 > 比如 ul > li就可以了

  4. 如果有兄弟关系的标签，用 + 就可以了 比如 div+p

  5. 如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键就可以了

  6. div*5{nihao}

  7. div*5{$} 自动排序

  8. 如果生成的div 类名是有顺序的， 可以用 自增符号 $

    .demo$*3        
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>

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

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

相关文章

挑战52天学小猪佩奇笔记--day25

挑战52天学小猪佩奇笔记--day25

52天学完小猪佩奇--day25 ​【本文说明】 本文内容来源于对B站UP 脑洞部长 的系列视频 挑战52天背完小猪佩奇----day25 的视频内容总结&#xff0c;方便复习。强烈建议大家去关注一波UP&#xff0c;配合UP视频学习。 注&#xff1a;这集开始变成一段一段的猜台词&#xff0c;加…
阅读更多...
代码随想Day39 | 62.不同路径、63. 不同路径 II

代码随想Day39 | 62.不同路径、63. 不同路径 II

62.不同路径 每次向右或者向下走两个选择&#xff0c;定义dp数组dp[i][j] 为到达索引ij的路径和&#xff0c;状态转移公式为 dp[i][j]dp[i-1][j]dp[i][j-1]&#xff0c;初始状态的第一行和第一列为1&#xff0c;从左上到右下开始遍历即可。详细代码如下&#xff1a; class Sol…
阅读更多...
git push origin master

git push origin master

1、在github上面新建一个仓库&#xff0c;仓库名称就是项目总的名称&#xff0c;里面不要放置任何东西&#xff0c;包括README.md&#xff0c;然后复制仓库的地址 2、在本地项目名称下面的文件夹里面点击鼠标右键&#xff0c;然后点击Git Bash Here 3、使用git init去把这个目…
阅读更多...
03 Vue3中的生命周期函数

03 Vue3中的生命周期函数

概述 The Vue component lifecycle events happen during a component’s lifecycle, from creation to deletion. They allow us to add callbacks and side effects at each stage of the component’s life when necessary. Vue 组件生命周期事件发生在组件从创建到删除的…
阅读更多...
跟着官网学 Vue - 透传 Attributes

跟着官网学 Vue - 透传 Attributes

MyButton.vue 这是子组件&#xff0c;它是一个包含按钮的简单组件。它有一个按钮&#xff0c;当按钮被点击时&#xff0c;会触发 handleClick 方法。MyButton 组件中禁用了属性继承&#xff0c;以避免多次触发点击事件。 <!-- MyButton.vue --> <template><!-…
阅读更多...
LeetCode day26

LeetCode day26

LeetCode day26 LCR 189. 设计机械累加器 请设计一个机械累加器&#xff0c;计算从 1、2… 一直累加到目标数值 target 的总和。注意这是一个只能进行加法操作的程序&#xff0c;不具备乘除、if-else、switch-case、for 循环、while 循环&#xff0c;及条件判断语句等高级功能…
阅读更多...
Java并发(十九)----Monitor原理及Synchronized原理

Java并发(十九)----Monitor原理及Synchronized原理

1、Java 对象头 以 32 位虚拟机为例 普通对象 |--------------------------------------------------------------| | Object Header (64 bits) | |------------------------------------|-------------------------| | Mark W…
阅读更多...
MySQL 报错 You can‘t specify target table for update in FROM clause解决办法

MySQL 报错 You can‘t specify target table for update in FROM clause解决办法

You can’t specify target table for update in FROM clause 其含义是&#xff1a;不能在同一表中查询的数据作为同一表的更新数 单独执行复合查询是正常的&#xff0c;如下&#xff1a; 但是当执行子查询删除命令时&#xff0c;报如下错误 DELETE FROM abpusers WHERE Id I…
阅读更多...
简单介绍十款可以免费使用的API测试工具

简单介绍十款可以免费使用的API测试工具

API开发应该是后端开发最常见的工作&#xff0c;而调试和测试API是非常关键的&#xff0c;这篇文章简单介绍几款常用的工具以供大家参考。 SoapUI SoapUI是很老牌的工具的&#xff0c;在之前Webservice盛行的时候经常会用到。 现在官方推出了Pro版本的ReadyAPI&#xff0c;但要…
阅读更多...
Python glob

Python glob

参考文章&#xff1a; Python 中glob.glob()、glob.iglob&#xff08;&#xff09;的使用-CSDN博客 Python 中glob.glob()的使用 glob.glob(path)的功能&#xff1a; 返回符合path格式的所有文件的路径&#xff0c;以list存储返回。 path的表示方法&#xff1a; 利用匹配符…
阅读更多...
数据科学知识库

数据科学知识库

​ 我的博客是一个技术分享平台&#xff0c;涵盖了机器学习、数据可视化、大数据分析、数学统计学、推荐算法、Linux命令及环境搭建&#xff0c;以及Kafka、Flask、FastAPI、Docker等组件的使用教程。 在这个信息时代&#xff0c;数据已经成为了一种新的资源&#xff0c;而机…
阅读更多...
C#监听端口报错“以一种访问权限不允许的方式做了访问套接字的尝试”

C#监听端口报错“以一种访问权限不允许的方式做了访问套接字的尝试”

C#编写的端口监听程序&#xff0c;平时都能正常运行&#xff0c;但最新操作系统更新补丁重启电脑后&#xff0c;运行程序报错“以一种访问权限不允许的方式做了访问套接字的尝试”&#xff0c;客户端程序也无法连接。   百度错误信息&#xff0c;给出的答案都是端口监听程序使…
阅读更多...
ES分词查询

ES分词查询

全文检索介绍 全文检索的发展过程&#xff1a; 数据库使用SQL语句&#xff1a;select * from table where data like “%检索内容%”出现lucene全文检索工具&#xff08;缺点&#xff1a;暴露的接口相对复杂&#xff0c;且没有效率&#xff09;出现分布式检索服务框架solr&am…
阅读更多...
python读取excel数据 附实战代码

python读取excel数据 附实战代码

在Python中&#xff0c;可以使用pandas库来读取Excel文件中的数据。下面是一个简单的例子&#xff1a; import pandas as pd# 读取Excel文件 df pd.read_excel(example.xlsx)# 显示前5行数据 print(df.head())在上面的代码中&#xff0c;我们首先导入了pandas库&#xff0c;并…
阅读更多...
ImageNet 数据集介绍

ImageNet 数据集介绍

首先介绍ImageNet 1K数据集&#xff1a; This dataset provides access to ImageNet (ILSVRC) 2012 which is the most commonly used subset of ImageNet. This dataset spans 1000 object classes and contains 1,281,167 training images, 50,000 validation images and 10…
阅读更多...
Java 第12章 异常 本章作业

Java 第12章 异常 本章作业

1 编程 两数相除的异常处理 各自属于哪些异常&#xff1a; 数据格式不正确 NumberformatException 缺少命令行参数 ArrayIndexOutOfBoundsException 除0异常处理 ArithmeticException ArrayIndexOutOfBoundsException 为数组下标越界时会抛出的异常&#xff0c;可以在检测到命…
阅读更多...
C语言学习day09:运算符优先级

C语言学习day09:运算符优先级

运算符优先级&#xff1a; //& 假如设一个int a; 给a一个变量&#xff1b; &a取a对应的地址 优先级运算符名称或含义使用形式结合方向说明1[1,2,3,4]数组下标数组名[常量表达形式]左到右()圆括号(表达式)/函数名(形参).成员选择(对象)对象.成员名->成员选择(指…
阅读更多...
C++继承中同名非静态成员与静态成员的处理（学习笔记）

C++继承中同名非静态成员与静态成员的处理（学习笔记）

非静态成员&#xff1a; 定义一个父类Base&#xff0c;子类Son class Base { public:int m_A 10;int m_B 200;void fun(){cout << "父类函数" << endl;}void fun(int a){cout << a << endl;} }; class Son : public Base { public:int m…
阅读更多...
GO的sql注入盲注脚本

GO的sql注入盲注脚本

之间学习了go的语法 这里就开始go的爬虫 与其说是爬虫 其实就是网站的访问如何实现 因为之前想通过go写sql注入盲注脚本 发现不是那么简单 这里开始研究一下 首先是请求网站 这里貌似很简单 package mainimport ("fmt""net/http" )func main() {res, …
阅读更多...
C语言数据结构-----二叉树(3)二叉树相关练习题

C语言数据结构-----二叉树(3)二叉树相关练习题

前言 前面详细讲述了二叉树的相关知识&#xff0c;为了巩固&#xff0c;做一些相关的练习题 文章目录 前言1.某二叉树共有 399 个结点&#xff0c;其中有 199 个度为 2 的结点&#xff0c;则该二叉树中的叶子结点数为&#xff1f;2.下列数据结构中&#xff0c;不适合采用顺序存…
阅读更多...
最新文章

Copyright @ 2022~2023