CSS中的字体属性和文本属性

简介: 1.CSS字体的属性font 简写,作用是把所有的针对字体的属性设置在一个声明中font-family 设置字体系列font-size 设置字体尺寸font-style 设置字...

1.CSS字体的属性

font                    简写,作用是把所有的针对字体的属性设置在一个声明中
font-family             设置字体系列
font-size               设置字体尺寸
font-style              设置字体风格,italic或者normal;
font-variant            以小型大写字体或者正常字体显示文本
font-weight             设置字体的粗细,normal/bold/bolder/lighter

实例:在一个声明上设置所有的字体属性:

font:italic bold 12px;//设置字体大小
font-size:200%;

2.CSS的文本属性:

color                   设置文本颜色
direction               设置文本方向
line-height             设置行高
letter-spacing          设置字符间距
text-align              对齐元素中的文本
text-decoration         向文本中添加修饰
text-indent             缩进元素中文本的首行
text-transform          控制元素中的字母
unicode-bldl            设置文本的方向
white-space             设置元素中空白的处理方式
word-spacing            设置字间距

实例:

<p style="color:red;
        line-height:40px;
        letter-spacing:10px;
        background-color:silver;
        width:300px;
        height:300px;
        text-align:center;">hello world<br>hello world<br>
    </p>

效果:

img_793b5ed053c39eba64d5023b4a13edb4.png

目录
相关文章
|
18天前
|
前端开发
css的渐变属性linear-gradient
css的渐变属性linear-gradient
|
8天前
|
前端开发
CSS属性:盒子模型
CSS属性:盒子模型
20 0
|
8天前
|
前端开发
CSS属性
CSS属性
21 0
|
9天前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
12 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
24天前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。
51 28
|
11天前
|
前端开发
Vue3基础(十ba)___在css中使用props或者计算属性的变量,来实现动态样式
本文介绍了如何在Vue3中通过CSS变量和props或计算属性来实现动态样式。
12 0
|
Web App开发 前端开发 iOS开发
CSS3的REM设置字体大小
在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EMS优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局。不幸的是,仍然有不同的利弊,使各种技术都不太理想,但又无法不去用。真是进也难,退也难呀。
163 0
CSS3的REM设置字体大小
|
2月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)
|
3天前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。