CSS文本和字体--笔记回顾

最新推荐文章于 2024-06-21 15:26:11 发布
最新推荐文章于 2024-06-21 15:26:11 发布
阅读量120 收藏
点赞数
分类专栏： css css文本和字体 文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47000934/article/details/109274308
版权

CSS文本和字体--笔记回顾

1、文本_text-decoration

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    a{
      text-decoration:none;
      color: #333;
    }
    .taobao{
      color: #00ffff;
    }
    p{
      text-decoration: overline;
    }
    div{
      text-decoration: line-through;
    }
    span{
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <!-- 1.将a元素的下划线清除 -->
  <a href="#">百度一下</a>
  <div>
    <a href="#" class="taobao">淘宝一下</a>
  </div>

  <!-- 2.给其他元素添加装饰线 -->
  <p>hahahaha</p>
  <div>hehehe</div>
  <span>hihihi</span>

  <!-- 3.u元素 -->
  <u>heiheiehei</u>
</body>
</html>

在这里插入图片描述

2、文本_letter-word-spacing

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .p1{
      letter-spacing: 10px;
      /* letter-spacing: -10px; */
    }
    .p2{
      word-spacing: 10px;
      /* word-spacing: -10px; */
    }
  </style>
</head>
<body>
  <p class="p1">hello world</p>
  <p>hello world</p>
  <p class="p2">hello world</p>
</body>
</html>

在这里插入图片描述

3、文本_text-transform

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .text1{
      text-transform: capitalize;
    }
    .text2{
      text-transform: uppercase;
    }
    .text3{
      text-transform: lowercase;
    }
  </style>
</head>
<body>
  <div class="text1">hello word</div>
  <div class="text2">hello word</div>
  <div class="text3">Hello Word</div>
</body>
</html>

在这里插入图片描述

4、文本_text-indent

<!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>
    p{
      /* px->pixel */
      /* em->1em*20px=20px  相对父类*/
      /* rem->root em  相对根元素*/
      text-indent: 2em;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <p>
    啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
    啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
    啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
    啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
    啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
    啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
    啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
    啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
    啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
    啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
    啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
  </p>
</body>
</html>

在这里插入图片描述

5、文本_text-align

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* left/right/center */
    box1{
      background-color: blue;
      text-align: center;
    }
    box2{
      background-color: purple;
      text-align: center;
    }

    box3{
      background-color: grey;
      text-align: center;
    }
    .inner1{
      background-color: purple;
      width: 200px;
    }

    .box4{
      background-color: #0045fd;
      /* 让内嵌子元素div居中必须先取消其块级特性 */
      text-align: center;
    }
    .inner2{
      background-color: rebeccapurple;
      width: 200px;
      /* 取消块级元素独占一行的特性 */
      display: inline-block;
    }

    /* 2.justify */
    .box5{
      background-color: red;
      color: white;
      width: 500px;

      /* text-align:justify对最后一行没有效果 */
      text-align:justify;
      /* text-align-last: justify;设置最后一行 */
      /* text-align-last: justify; */
    }
  </style>
</head>
<body>
  <!-- left/right/center -->
  <div class="box1">hahahha</div>
  <div class="box2">
    <img src="" alt="">
  </div>

  <div class="box3">
    <!-- div块级元素 -->
    <div class="inner1">hehehehhe</div>
  </div>

  <div class="box4">
    <div class="inner2">hihihihi</div>
  </div>

  <!-- 2.justify -->
  <div class="box5">
    Hello World Hello World Hello World Hello World
    Hello World Hello World Hello World Hello World
    Hello World Hello World Hello World Hello World
    Hello World Hello World Hello World Hello World
    Hello World Hello World Hello World Hello World
    Hello World Hello World Hello World Hello World
    Hello World Hello World Hello World Hello World
    Hello World Hello World Hello World Hello World
    Hello World Hello World Hello World Hello World
    Hello World Hello World Hello World Hello World
  </div>
</body>
</html>

在这里插入图片描述

6、字体_font-size

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{
      font-size: 20px;
    }

    p{
      /* px */
      /* font-size: 24px; */

      /* em单位：1em代表100%，2em代表200%。0.5em代表50% */
      /* font-size中 2em相对于：父元素的font-size*2em=40px*/
      font-size: 2em;

      /* font-size百分比 */
      /* font-size: 50%; */
      /* 谷歌浏览器字体最小是12px */
    }
  </style>
</head>
<body>
  <div class="box">
    <span>span</span>
    <p>hahhahah</p>
  </div>
</body>
</html>

在这里插入图片描述

7、字体_font-family

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    p{
      /* 1.设置网页的字体 */
      /* 默认：font-family: "Microsoft YaHei"; */
      /* font-size: "宋体"; */

      /* 2.设置多种字体，为了防止字体不存在 */
      /* 一般情况下，英文字体只使用于英文，中文字体同时适用英文和中文 */
      /* 若希望中英文分别使用不同的字体，应先把英文字体写在前面，中文字体写在后面 */
      /* 注意：加引号可以防止空格出错 */
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
  </style>
</head>
<body>
  <p>hahahahhaha你好</p>
</body>
</html>

在这里插入图片描述

8、字体_font-weight

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .price{
      color: red;
      /* font-weight: 700; */
      font-weight: bold;
    }
  </style>
</head>
<body>
  <!-- 1.粗体标签 -->
  <!-- strong:700 -->
  <strong>hahhahaha</strong>
  <h1>标题</h1>

  <!-- 2.font-weight (normal:400   bold:700)-->
  <p>
    <span class="price">￥99</span>
  </p>
</body>
</html>

在这里插入图片描述

9、字体_font-style

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    p{
      /* font-style: italic; */
      /* font-style: oblique; */
    }
    
    /* italic:前提是font-family字体支持斜体 */
    .p1{
      font-style: italic;
    }

    /* oblique：让文字倾斜 */
    .p2{
      font-style: oblique;
    }
  </style>
</head>
<body>
  <!-- 1.斜体标签 -->
  <!-- i标签比较常用 (小图标)-->
  <i>hahaha</i>
  <em>hehehe</em>
  <strong></strong>

  <!-- 2.font-style -->
  <p class="p1">hahahahah</p>
  <p class="p2">hehehhehe</p>
</body>
</html>

在这里插入图片描述

10、字体_font-varient

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .title1{
      font-variant: small-caps;
    }
  </style>
</head>
<body>
  <h1 class="title1">Hello World</h1>
  <h1 class="title2">Hello World</h1>
</body>
</html>

在这里插入图片描述

11、字体_font_line-height

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div{
      /* 行高=div高度->文字居中 */
      height: 200px;
      line-height: 200px;
      background-color: rosybrown;
    }
  </style>
</head>
<body>
  <!-- 行高:line-height (俩行文字基线之间的间距)-->
  <!-- 行高=文字高度+行距（上下行距平分） -->
  <!-- 作用：让一行文字在div内部垂直居中 -->
  <div>哈哈哈hahahahha哈哈哈</div>
</body>
</html>

在这里插入图片描述

12、字体_font_缩写属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box1{
      background-color: green;
      /* 有内容时可以用行高（line-height）撑起高度 */
      /* height: 50px; */
      font-size: 30px;
      font-family: "宋体";
      font-weight: 700;
      font-style: italic;
      line-height: 50px;
      font-variant: small-caps;
    }
    /* font的缩写 */
    .box2{
      background-color: green;
      /* font：style varient weight size/line-height family */
      font: italic small-caps bold 30px/50px "宋体";

      /* 
      font: 30px/50px "宋体";
      font: 30px "宋体"; 
      */
    }
    /* 注意
            style、varient、weight可以调换顺序/省略
            /line-height可以省略
            size、family不可以调换顺序，不可以省略
     */
     
  </style>
</head>
<body>
  <div class="box1">hahahha</div>
  <div class="box2">hahahha</div>
</body>
</html>

在这里插入图片描述

Li敢敢
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3文本阴影text-shadow属性详解
09-28
下面小编就为大家带来一篇关于CSS3文本阴影text-shadow属性详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦
Css样式–字体样式和链接样式详解
12-13
1.指定字体：font-family （1）实用通用字体系列： 复制代码代码如下:body {font-family: sans-serif;} （2）制定字体系列： 复制代码代码如下: h1 {font-family: Georgia, <span xss=removed>serif;} 在所有 ...
css文本
Venciki的博客
12-28 404
字体 在上一周我们说了文本属性，而另一项能让文本变得好看的就是字体啦，我们可以通过改变字体的大小，风格，样式来不让我们页面的文本模块变得单调。 字体系列 在 CSS 中，有两种不同类型的字体系列名称： 通用字体系列 - 拥有相似外观的字体系统组合（比如 “Serif” 或 “Monospace”） 特定字体系列 - 具体的字体系列（比如 “Times” 或 “Courier”） 除了各种特定的字体...
HTML和css的笔记,Html和Css学习笔记-html基础知识
weixin_42521628的博客
07-01 177
此篇博客是我的复习笔记，html和css学的时间太久了，忘得差不多了，最近要使用一下，所以重新打开html的书略读，后记录了标签，元素，属性的具体意义。这里所介绍的html和css的版本为html5与css3Html是超文本标记语言(英语全称：HyperText Markup Language，简称：HTML)是一种用于创建网页的标准标记语言Css是层叠样式表(英文全称：Cascading Sty...
安卓文本居中——关于css，字体和line-box的笔记
weixin_34062329的博客
11-02 103
前言 本文主要探索在安卓系统下浏览器中小字号中文居中的实现以及在混排时的对齐处理。本文是受《Deep dive CSS: font metrics, line-height and vertical-align》(以下简称为《Deep》)所启发，并以此为基础所写，建议先阅读前文，您也可以选择阅读大漠老师或方应杭老师的翻译版。大漠版 方应杭...
uni-app笔记
codipy的博客
01-30 4909
学习笔记-uni-app 快速入门 从零开始实现新闻资讯类跨端应用
CSS学习笔记
zzh的博客
01-08 1741
文章目录关于CSSHTML的局限性CSSCSS语法规范CSS样式风格选择器选择器的作用及分类基础选择器标签选择器类选择器多类名id选择器id选择器和类选择器的区别通配符选择器基础选择器总结复合选择器后代选择器（重要）子选择器（重要）并集选择器（重要）伪类选择器链接伪类选择器:focus伪类选择器复合选择器总结CSS引入方式行内样式表（行内式）内部样式表(嵌入式）外部样式表（链接式）字体属性字体系列字体大小字体粗细文字样式字体复合属性字体属性总结CSS文本属性文本颜色对齐文本装饰文本文本缩进行间距emmet语
CSS笔记
vscode2021的博客
07-28 2106
css笔记
便于回顾做的CSS笔记
fan__lee的博客
06-05 188
注意：#要给块设置高度，如果只让元素撑起，可能会导致下一个块与其有间距。 一个单独的块（也可能是嵌套）只设置高度，不设置宽度，默认跟随上一个块元素的宽度 #banner{height: 500px;} div ,span都是容器标签。标签内可以用style为内部元素添加样式 text-align:让容器内部元素水平居中 css中，align用text-align代替 空div容器，默认宽度100%，高度0 。往里面填充内容，会被撑起 <div style="color: #555">
py---web学习笔记03(CSS)
weixin_42569562的博客
08-27 279
一、上堂回顾 1.网页开发的知识 ​ 组成：结构，表现，行为 ​ 实现：html，css，javascript ​ 2.html简介 ​ 超文本标记语言 ​ 规范：标签组成 ​ 操作思想：封装 ​ 3.html中常用的标签 ​ font：设置字体，size   color p:设置段落 h：标题，注意：数字 越大，字号越小 ...
html、css回顾
小柯的的博客
01-03 473
目录前言本章导学Html知识回顾常用标签文本标签（font)段落标签（p）换行标签 （br）标题标签（h1、h2......）图片标签（img）超链接标签（a） 前言     博主很久以前就学习了Html和css，也学习了Java基础，但是一直没有使用过，写过的项目也都是在使用Python。这不，最近期末结课了，时间挺多，所以准备学学Java Web。网课已经备好了，笔记也会同步分享，有一样的小伙伴一起来看看吧 本章导学    &nbsp
css中默认中文字体font-family列表
09-25
css中文字体font-family列表主要是系统自带的一些、装Office会生出来的一些、Windows的一些，感兴趣的朋友可以了解下
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
12-02
大家在制作的时候有时候会碰到英文文本超过固定宽度，不会自己换行的问题。这种问题以前解决的时候大多都用...2、取之说明 (1)normal和break-word，其中normal为默认值，当其值为normal控制连续文本换行(允许内容顶开容
css恢复默认样式
最新发布
u011511086的专栏
06-21 73
css恢复默认样式
CSS期末复习速览（二）
2301_80369371的博客
06-16 463
4.行内块元素：常见的行内块元素：<img/> <input/> <td>，同时具有块元素和行内元素的特点，特点：和相邻行内元素（行内块）在一行上，但是它们之间会有空白缝隙，一行可以显示多个（行内元素特点）；高度，行高，内外边距都可以控制（块元素特点）2.块元素：常见的块元素：<h1>~<h6> <p> <div> <ul> <ol> <li>，特点：自己独占一行；3.行内元素：常见的行内元素：<a> <strong> <span>，特点：相邻行内元素在一行上，一行可以显示多个；
CSS 修改鼠标图标样式
JiuYux的博客
06-18 245
自定义的鼠标图标，推荐使用ico或cur格式，png也可以。
css系列：音频播放效果-波纹律动
zkx529的博客
06-12 646
音频律动效果，实现了语音播放时的带有动画的特殊样式的进度条
css的字体样式font-family
08-27
CSS的字体样式font-family用于设置文本的字体样式。它可以指定一个或多个字体名称，以确保在用户设备上显示合适的字体。当指定多个字体名称时，如果用户设备上没有第一个字体，浏览器会尝试下一个字体，依此类推。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值