【CSS03】CSS基础03_文本_字体

最新推荐文章于 2024-04-30 06:47:19 发布

cs_xuhuan

最新推荐文章于 2024-04-30 06:47:19 发布

阅读量170

点赞数

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/cs_xuhuan/article/details/88084149

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS文本

文本颜色

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red

body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

文本的对齐方式

文本排列属性是用来设置文本的水平对齐方式。

文本可居中或对齐到左或右,两端对齐.

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

文本修饰

text-decoration 属性用来设置或删除文本的装饰。

从设计的角度看 text-decoration属性主要是用来删除链接的下划线：

a {text-decoration:none;}

也可以这样装饰文字：

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}

文本转换

文本转换属性是用来指定在一个文本中的大写和小写字母。

可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

文本缩进

文本缩进属性是用来指定文本的第一行的缩进。

p {text-indent:50px;}

CSS字体

serif和sans-serif字体之间的区别
在这里插入图片描述
在计算机屏幕上，sans-serif字体被认为是比serif字体容易阅读

字型

在CSS中，有两种类型的字体系列名称：

通用字体系列 - 拥有相似外观的字体系统组合（如 “Serif” 或 “Monospace”）
特定字体系列 - 一个特定的字体系列（如 “Times” 或 “Courier”）
在这里插入图片描述

字体系列

ont-family 属性设置文本的字体系列。

font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family：“宋体”。

多个字体系列是用一个逗号分隔指明：

p{font-family:"Times New Roman", Times, serif;}

字体样式

主要是用于指定斜体文字的字体样式属性。

这个属性有三个值：

正常 - 正常显示文本
斜体 - 以斜体字显示的文字
倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

设置字体大小像素

设置文字的大小与像素，让您完全控制文字大小：

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

上面的例子可以在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通过缩放浏览器调整文本大小。

虽然可以通过浏览器的缩放工具调整文本大小，但是，这种调整是整个页面，而不仅仅是文本

用em来设置字体大小

为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。

em的尺寸单位由W3C建议。

1em和当前字体大小相等。在浏览器中默认的文字大小是16px。

因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em

h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */

在上面的例子，em的文字大小是与前面的例子中像素一样。不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。

不幸的是，仍然是IE浏览器的问题。调整文本的大小时，会比正常的尺寸更大或更小。

使用百分比和EM组合

在所有浏览器的解决方案中，设置元素的默认字体大小的是百分比：

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

我们的代码非常有效。在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。

实例

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
  <meta charset="UTF-8">
  <title>世界最大的同性恋交友网站</title>
</head>
<style>
  hr {color:blue;}
  h1 {text-align:center; color: yellowgreen; font-family: 方正粗黑宋简体}
  p {text-align:center; argin-left:20px;font-family: 苏新诗柳楷繁;font-size: large;}
  p.feng{font-family:"Times New Roman",Times,Serif; font-style: italic; font-size: 12px}
  p.date{text-align: right}
  p.gay{font-size: 2.5em}
  p.porn{font-size: 120%}
  p.gay a{text-decoration: none;}
  p.porn a{text-decoration: line-through}
  p.feng{text-transform: uppercase; text-align: right}
  body {background-color: blanchedalmond;}
</style>
<body>
  <h1>冯伟恒的快乐天地</h1>
  <p class="feng"> the happy sky of feng weiheng</p>
  <p class="gay">世界最大的同性恋交友网站<br><a href="https://github.com/">点此进入github</a></p>
  <p class="porn">世界最大的学习资料共享网站<br><a href="https://pornhub.com">点此进入pornhub</a></p>
  <p class="date">2019年3月3日</p>
  <hr>
</body>
</html>

在这里插入图片描述