HTML和CSS前端教程03-CSS文本样式

1.CSS颜色-建议就用十六进制
2.CSS长度的度量单位-建议就用px
3.CSS文本样式
- 3.1. 字体属性
- 3.1. 文本样式

1.CSS颜色-建议就用十六进制

p{
  color: #ff0000
}

2.CSS长度的度量单位-建议就用px

p{
  margin: 0;
  padding: 0;
  font-size: 20px;
  height: 50px;
}

3.CSS文本样式

字体的大小，样式以及方位

3.1. 字体属性

属性名	说明	例子
`font-size`	字体大小	`font-size: 50px`
`font-variant`	英文字体是否转为小型字母	`font-variant: small-caps` `font-variant: normal`
`font-style`	字体倾斜	`font-style: italic` `font-style: normal`
`font-weight`	字体加粗	`font-weight: bold`
`font-family`	font字体	`font-family: 微软雅黑`
`font`	字体样式复合写法	`font: italic bold small-caps 50px 楷体`
`@font-face`	设置Web字体

3.1. 文本样式

属性名	说明	参数
`text-decoration`	z装饰文本出现各种划线	underline：底部线条 overline：头部线 line-through:中间删除线
`text-transform`	大写换成小写	uppercase:转成大写 lowercase：转成小写 capitalize:首字母大写
`text-shadow`	添加阴影	5px(水平偏移),5px(垂直偏移),3px(模糊度),black(颜色)
`text-align`	设置对齐方式	center：居中 left right justify：两端对齐
`white-space`	排版中的空白处理方式	normal: 空白符压缩，文本自动换行 nowrap:空白符压缩，文本不换行 pre:空白符保留，遇到换行符换行 pre-line:空白符压缩，文本排满时换行
`letter-spacing`	设置字母之间的间距	`letter-spacing: 4px`
`word-spacing`	设置单词之间的间距	`letter-spacing: 4px`
`line-height`	设置行高	`line-height: 200%`
`word-wrap`	控制段词,让国产的单词断开	`word-wrap:break-word`
`text-indent`	设置文本首行缩进

原文地址：https://www.cnblogs.com/haochen273/p/10305938.html

时间： 2024-10-04 22:22:57

HTML和CSS前端教程03-CSS文本样式的相关文章

CSS基础教程——纯CSS开发的气泡式提示框

本文为 H5EDU 机构官方 HTML5培训教程,主要介绍:CSS基础教程 —— 纯CSS开发的气泡式提示框作为前端开发人员,我们都熟悉使用CSS来生成页面上丰富的样式,对于边框border属性来说,也是我们最熟悉不过的CSS属性,今天我们这里将介绍如何使用纯CSS来生成一个气泡式样的提示框,希望大家喜欢! 在这篇文章中我们将使用:after伪标签来生成提示框的指示箭头. 首先我们定义提示框相关属性,我们添加了box阴影和文字阴影效果,这样让提示框更加漂亮: /* bubble */.tip

web前端教程：CSS 布局十八般武艺都在这里了

CSS布局布局是CSS中一个重要部分,本文总结了CSS布局中的常用技巧,包括常用的水平居中.垂直居中方法,以及单列布局.多列布局的多种实现方式(包括传统的盒模型布局和比较新的flex布局实现),希望能给需要的小伙伴带来一些帮助. 目录 1.常用居中方法:水平居中,垂直居中, 2.单列布局 3.二列&三列布局:float+margin,position+margin,圣杯布局(float+负margin),双飞翼布局(float+负margin),flex布局如果你想学习交流html5css3

HTML和CSS前端教程03-CSS选择器

目录 1. CSS定义 2. 创建CSS的三种方法 2.1. 元素内嵌(权重最高) 2.2. 文档内嵌 2.3. 外部引用 3. CSS层叠和继承 3.1. 浏览器样式 3.2. 样式表层叠 3.3. 样式继承 4. CSS选择器 4.1. 选择器的总汇 (1) 基本选择器 (2) 复合选择器 (3) 伪元素选择器:: (4) 伪类选择器 1. CSS定义层叠样式表 2. 创建CSS的三种方法 2.1. 元素内嵌(权重最高) <p style="color:red;font-size:5

前端教程(9)css入门教程-css属性设置

一字体属性 1.font-weight:文字粗细取值描述 normal 默认值,标准粗细 bord 粗体 border 更粗 lighter 更细 100~900 设置具体粗细,400等同于normal,而700等同于bold inherit 继承父元素字体的粗细值 2.font-style:文字风格 normal 正常,默认就是正常的 italic 倾斜 3.font-size:文字大小 fs:一般是12px或13px或14px 注意: 1.通过font-size设置文字大小一定要带单位

前端教程(10)css入门教程-css网页布局

一网页布局方式 #1.什么是网页布局方式布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如word,nodpad++等等而网页的布局方式指的就是浏览器这款工具是如何对网页中的元素进行排版的 #2.网页布局/排版的三种方式 2.1.标准流 2.2.浮动流 2.3.定位流二标准流标准流的排版方式,又称为:文档流/普通流,所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列. # 1 浏览器默认的排版方式就是标准流排版方式 # 2 在CSS中将

HTML和CSS前端教程05-CSS盒模型

目录 1. CSS盒模型 1.1 元素的尺寸 1.2. 元素内边距 padding 1.3. 元素外边距 margin 1.4. 处理溢出overflow 1.5. 元素的可见性Visibility 2. CSS元素的盒类型 2.1. 块级元素(区块) 2.2. 行内元素 2.3. 行内-块元素 2.4. 盒类型元素转换dispaly 3. CSS盒元素的浮动float 1. CSS盒模型元素的尺寸 1.1 元素的尺寸属性值说明 width auto.长度值或百分比元素的宽度 heig

CSS简单常用的text 文本样式

字体大小.text{ font-size:40px;} 字体颜色.text{ color:#22a534;} 字体样式.text{ font-family: 华文行楷;} 斜体.text{ font-style: italic;} 加粗.text{ font-weight: 600; }

web前端入门到实战：css选择器和css文本样式相关

[文章来源微信公众号:每天学编程]---关注,后台领取编程资源 css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url("*.css");使用导入式,页面加载完后,才会加载样式链接伪类的顺序 :link-> :visited ->:hover-> :active 或者 : visited -> : link ->:hover-> :active 选择器的优先级: id选择器>

好程序员web前端教程分享异步加载CSS的一些方法

好程序员web前端教程分享异步加载CSS的一些方法,在我们写页面的时候,我们做最主要的任务就是提高页面的性能和弹性加载速度,以不会延迟页面的呈现的形式来加载CSS.这是因为在默认情况下, - 浏览器会同步加载外部的CSS - 在下载和解析CSS时会影响所有页面呈现这两种情况都会导致潜在的延迟. 当然,这也是在开始渲染页面之前,应该至少加载网站的CSS的一部分,并且为了立即将该初始CSS添加到浏览器,我们建议内联css.对于整体数量较少的网站,仅此一项就足够了,但如果CSS很大(例如,大于15到