21.1 CSS 文字样式

这篇具有很好参考价值的文章主要介绍了21.1 CSS 文字样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

21.1 CSS 文字样式,Python 从入门到全栈开发,css,前端

1. 字体倾斜

font-style属性: 为文本设置字体样式.

常用取值:    
normal: 正常显示文本.  快捷键: fs+tab.
italic: 显示斜体文本.  快捷键: fsn+tab.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font style</title>
    <style>
        p {
            font-style: italic;
        }
    </style>
</head>
<body>
<p>你好!</p>
</body>
</html>

21.1 CSS 文字样式,Python 从入门到全栈开发,css,前端

2. 字体粗细

font-weight属性: 设置文本的字体粗细程度.

常用取值:                        
normal:  默认值, 表示标准的字体粗细; 快捷键: fwn+tab.   
bold:    表示加粗文本;              快捷键: fwb+tab.               
lighter: 表示更轻的字体权重;         快捷键: fwl+tab 
bolder:  表示更重的字体权重;         快捷键: fwbr+tab 
数字值: 可以使用数值来指定相对于标准字体的粗细程度, 100, 200, 300, 或使用绝对值的粗细程度, 400, 700, 900.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font weight</title>
    <style>
        p {
            font-weight: bold;
          
        }
    </style>
</head>
<body>
<p>你好!</p>
</body>
</html>

21.1 CSS 文字样式,Python 从入门到全栈开发,css,前端

3. 字体大小

font-size属性: 设置文本的字号大小. 它可以应用于任何具有文本内容的HTML元素.

在CSS中, 可以使用像素(px), 百分比(%), em, rem等单位来指定字号大小.
以下是一些示例:
font-size: 16px;   使用像素作为单位;                        快捷键: fz16 + tab.
font-size: 80%;    相对于父元素字号的百分比;                 快捷键: fz80% + tab.
font-size: 2em;    相对于父元素字号的倍数;                   快捷键: fz2e + tab.
font-size: 0.8rem; 相对于根元素(通常是<html>)字号的倍数;      快捷键: fz0.8r + tab.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font size</title>
    <style>
        p {
            font-size: 30px;
        }
    </style>
</head>
<body>
<p>你好!</p>
</body>
</html>

21.1 CSS 文字样式,Python 从入门到全栈开发,css,前端

4. 文本字体

font-family属性: 用于指定文本的字体系列. 它可以应用于任何具有文本内容的HTML元素.

在CSS中, 可以通过指定一系列字体名称或字体族来设置字体系列.
在字体系列的列表中, 浏览器会按优先级依次尝试使用字体, 直到找到合适的可用字体为止.

: 字体名称, 默认为宋体.
常用字体: 宋体(SimSun), 黑体(SimHei), 微软雅黑(Microsoft YaHei).
快捷键: ff+tab font-family:;

注意事项: 
* 1. 中文字体中包含英文, 英文字体没有包含中文, 设置后能影响到中文的就是中文字体否则就是英文字体.
* 2. 如果取值是中文, 需要加单引号或双引号.
* 3. 设置的字体是电脑系统上安装的了的字体.
* 4. 设置的字体不存在, 会使用默认使用宋体显示.
* 6. 可以设置备选方案, 设置多个值, 值与值之间用逗号隔开.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font family 1</title>
    <style>
        p { 
            font-family: '楷体', '微软雅黑';
        }
    </style>
</head>
<body>
    <p>你好!</p>  
</body>
</html>

21.1 CSS 文字样式,Python 从入门到全栈开发,css,前端

让中英文分别使用不同的字体: 预备方案先设置英文字体再设置中文字体, 让字母使用英文字体, 中文使用中文字体.
遇到中文时英文字体不起作用就使用备用的字体方案.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font family 2</title>
    <style>
        p {
            font-family: Arial, '楷体';
        }
    </style>
</head>
<body>
<p>abc 你好!</p>
</body>
</html>

21.1 CSS 文字样式,Python 从入门到全栈开发,css,前端

5. 文字样式

font属性: 设置文字样式的属性, 它可以接受多个值, 用空格分隔.
font: font-style font-weight font-size/line-height font-family;

注意事项:
font-style与font-weight的值可以省略, 可以互换位置.
font-size与font-family的值不可以省略, 不可以互换位置, 必须写在的最后两位.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font</title>
    <style>

        p {
            /*
            font-style: italic;
            font-weight: bold;
            font-size: 30px;
            font-family: '楷体';
            */
            font: italic bold 30px '楷体';
        }
    </style>
</head>
<body>
<p>
    abc, 你好!
</p>
</body>
</html>

21.1 CSS 文字样式,Python 从入门到全栈开发,css,前端

6. 字体颜色

color属性: 设置文字的颜色.

可以使用以下不同的值来定义颜色:
* 1. 预定义颜色名称(如red, blue, green等).
* 2. 十六进制颜色值(#FF0000表示红色); 每两位十六进制为一组, 分别代表R/G/B.
* 3. RGB颜色值(如rgb(255, 0, 0)表示红色); 三原色数字代码光源的亮度, 0不发光, 255最亮.
* 4. RGBA颜色值(如rgba(255, 0, 0, 0.5)表示带有透明度的红色, 透明度值范围为0-1).
* 5. HSL颜色值(如hsl(0, 100%, 50%)表示红色).
* 6. HSLA颜色值(如hsla(0, 100%, 50%, 0.5)表示带有透明度的红色, 透明度值范围为0-1).
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字颜色属性</title>
    <style>
        p {
            color: rgba(00, 255, 255, 0.5);
        }
    </style>
</head>
<body>
    <p>你好!</p>
</body>
</html>

21.1 CSS 文字样式,Python 从入门到全栈开发,css,前端

7. 字体装饰

text-decoration属性: 设置文字的装饰效果, 可以添加或删除文字的下划线, 删除线, 上划线.

常用取值:
none: 无任何装饰效果(默认值); 快捷键: td+tab.
underline: 添加下划线;       快捷键: tau+tab. 
overline: 添加上划线;        快捷键: tao+tab.
line-through: 添加删除线;    快捷键: tal+tab.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text decoration</title>
    <style>
        p {
            text-decoration: overline;
        }

        a { /* 取出a标签的下划线 */
            text-decoration: none;
        }
    </style>
</head>
<body>
<p>你好!</p>
<a href="https:www.baidu.com">百度</a>
</body>
</html>

21.1 CSS 文字样式,Python 从入门到全栈开发,css,前端

8. 水平对齐

text-align属性: 设置文字在其容器中的水平对齐方式.

常用取值:
left: 将文字左对齐;      快捷键: ta+tab.
right: 将文字右对齐;     快捷键: tar+tab.
center: 将文字居中对齐;  快捷键: tac+tab.
justify: 将文字两端对齐, 尽可能平均分布在容器中.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text align</title>
    <style>
        p {
            text-align: center;
        }
    </style>
</head>
<body>
<p>你好!</p>
</body>
</html>

21.1 CSS 文字样式,Python 从入门到全栈开发,css,前端

9. 字体缩进

text-indent属性: 用于设置文本块(block-level element)的首行缩进量.
通过设置text-indent, 可以在段落或其他块级元素的每一行的开头添加一个空格或指定的缩进值.

常用取值:
* 1. 像素值(px): 可以使用具体的像素数值来设置缩进值.              快捷键: ti2+tab  -->  text-indent: 2px.
* 2. em单位(em): em单位是相对于当前元素的字体大小的倍数.          快捷键: ti2e+tab -->  text+indent: 2em.
* 3. 百分比(%):  可以使用百分比值来相对于父元素的宽度来设置缩进值. 快捷键: ti80%    -->  text-indent: 80%.
* 4. 继承值(inherit) 可以使用inherit关键字让元素继承父元素的text-indent值.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text indent</title>
    <style>
        p {
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <p>hello  world!</p>
</body>
</html>

21.1 CSS 文字样式,Python 从入门到全栈开发,css,前端文章来源地址https://www.toymoban.com/news/detail-653563.html

到了这里,关于21.1 CSS 文字样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 猿创征文|前端到全栈,一名 IT 初学者的学习与成长之路

    2021 年 7 月 18 日我在 CSDN 发布了第一篇技术文章,距现在已有一年,这也意味着我在 CSDN 创作已经一年了。这一年创作历程对我来说,无疑是在 IT 方面技术成长与收获最大的一年,毫不夸张的说,从来没有过在一年时间内能学到这么多,能提升这么多。 其实如标题中所说,

    2023年04月08日
    浏览(41)
  • Python全栈开发(一)——环境搭建和入门

    今天是2023年的第一天,接下来的一个月里,我将持续更新关于python全栈开发的相关知识,前面一段时间都是基础语法。主要分成四大块:基础、面向对象、MYSQL数据库、Django框架。话不多说,进入到今天的主题。 markdown笔记-语法-格式笔记 # 第一章 python基础 ## 1.1 环境搭建 使

    2024年02月03日
    浏览(40)
  • 21.1 使用PEfile分析PE文件

    PeFile模块是 Python 中一个强大的便携式第三方 PE 格式分析工具,用于解析和处理 Windows 可执行文件。该模块提供了一系列的API接口,使得用户可以通过 Python 脚本来读取和分析PE文件的结构,包括文件头、节表、导入表、导出表、资源表、重定位表等等。此外,PEfile模块还可以

    2024年02月13日
    浏览(40)
  • 21.1 stm32使用LTDC驱动LCD--配置说明

    本文讲解如何配置LTDC驱动LCD的参数配置,以及CubeMx参数配置说明 本文使用的是淘宝买的一块带电容触摸的液晶显示屏:5寸TFT液晶显示屏高清800*480免驱40P通用RGBIPS全视角彩屏GT911 说实话,价格还是相对挺便宜的,值得入手,哈哈哈 这款屏幕采用的是RGB888格式 这里面也就是常

    2024年02月05日
    浏览(51)
  • FL Studio21.1中文完整版Win/Mac

    FL Studio All Plugins Edition【中文完整版 + Win/Mac】适合音乐制作人/工作室使用,全套插件!(20.9新增Vintage Chorus,Pitch Shifter变调插件)FL Studio是超多顶级音乐人的启蒙首选!包括百大DJ冠军Martin Garrix,六获格莱美提名的Deadmau5,现代嘻哈创始人TM88等等,名单每月都在增加!如果你

    2024年02月12日
    浏览(34)
  • 要在HTML中让文字居中,可以使用CSS样式来设置文本的对齐方式

    以下是几种常见的居中文本的方法: 1. 使用 `text-align: center;` CSS样式:    这个方法适用于将文本居中对齐在其父元素内。可以将 `text-align: center;` 应用于父元素,这将使其内部的所有文本内容都居中对齐。    示例代码:    ```html    style       .container {         text-align

    2024年02月16日
    浏览(47)
  • IDEA(21.1终极版本)的安装教程及环境配置 Maven和(JDK)

    文章目录 Idea的安装及环境配置概要 安装流程 技术名词解释 技术细节 小结 提示:安装IDEA的地址(点击链接即可下载): https://download.jetbrains.com/idea/ideaIU-2021.1.3.exe 官网地址: IntelliJ IDEA – the Leading Java and Kotlin IDE IntelliJ IDEA is undoubtedly the top-choice IDE for software developers. It

    2024年03月12日
    浏览(81)
  • css三角和css 用户见面样式,vertical-align 属性应用,溢出的文字省略号显示,常见布局技巧

    目录 3.CSS三角  4.CSS 用户界面样式 4.1什么是界面样式  4.2轮廓线 outline  4.3 防止拖拽文本域 resize  5.vertical-align 属性 5.1图片,表单都属于行内块元素,默认的vertical-align 是基线对齐。 5.2解决图片底部默认空白缝隙问题 6.溢出的文字省略号显示 1.单行文本溢出显示省略号--必须

    2023年04月09日
    浏览(51)
  • 〖Web全栈开发⑤〗— CSS基础

    🏘️🏘️个人简介:以山河作礼。 🎖️🎖️: Python领域新星创作者,CSDN实力新星认证,阿里云社区专家博主 🎁🎁:Web全栈开发专栏:《Web全栈开发》免费专栏,欢迎阅读! CSS 的意思为 Cascading Style Sheets,中文名是层叠样式表。 CSS 是由大名鼎鼎的 W3C 中 CSS 工作组来发布以

    2024年02月09日
    浏览(49)
  • Nuxt 菜鸟入门学习笔记五:CSS 样式

    Nuxt 官网地址: https://nuxt.com/ Nuxt 在样式设计方面非常灵活。 可以编写自己的样式; 可以引用本地和外部样式表; 可以使用 CSS 预处理器、CSS 框架、UI 库和 Nuxt 模块来为应用程序设计样式。 按照惯例,将本地样式表放在 assets/ 目录下。 在组件内导入的样式表将在 Nuxt 渲染的

    2024年02月10日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包