【web前端开发】CSS文字和文本样式
文章目录
- 前言
- 字体大小
- 字体粗细
- 字体样式
- 字体
- font复合属性
- 文本缩进
- 文本水平对齐方式
- 文本修饰线
- 行高
- 颜色
- 标签水平居中
- ⭐思维导图
前言
本篇文章主要讲解CSS中的文字和文本样式及一些实用技巧.文章最后有思维导图.
字体大小
属性名:font-size
取值: 数字+px
注意:
- 谷歌浏览器默认字体大小为16px
- 单位需要设置,否则无效
字体粗细
属性名: font-weight
取值有两种:
- 关键字: normal(正常) bold(加粗)
- 数字100~900: 400(正常) 700(加粗)
加粗标签:<strong></strong>
粗体标签:<b></b>
虽然在HTML中,strong和b标签也有加粗的效果,不过还是建议使用CSS设置字体加粗的样式
字体样式
这里的字体样式指的是否倾斜
属性名:font-style
取值: normal(正常)是默认值 italic(倾斜)
字体
属性名:font-family
常见取值:具体字体1,具体字体2,具体字体3,…,字体系列
- 常见字体:微软雅黑,黑体,宋体,楷体等
- 字体系列:sans-serif, serif,monospace等
注意:
- 取值有多个,浏览器会依次查找,如果电脑没有安装这个字体,就会显示下一个字体
如果前面的字体都没有安装,就会显示最后字体系列的任意一个字体
- 如果字体中存在多个单词,推荐使用引号包裹
最后一项字体系列不需要使用引号包裹
- 尽量使用电脑常用的字体,以保证用户浏览网页能正确显示
font复合属性
font复合属性就是对前面的字体样式的一种简写属性
属性名:font(符合属性)
取值:font-style font-weight font-size font-family(顺序固定,用空格隔开)
取值只能省略前面两个,省略了就相当于是默认值
文本缩进
属性名:text-indent
取值:数字+px或者数字+em
注意:1em 相当于 当前标签的font-size大小
一般文本缩进都是首行缩进2个字符,如果要进行首行缩进两个字符,建议使用em. 直接写text-indent: 2em 就可以了
至于为什么不使用数字+px的这种形式.
是因为浏览器的默认字体大小是16px,如果要用数字+px的这种形式,就需要写text-indent: 32px
但是不推荐这么写,因为万一字体的大小改了,取值就变成修改后字体的大小乘2+px了
文本水平对齐方式
属性名:text-align
取值:
属性值 | 效果 |
---|---|
left | 左对齐 |
right | 右对齐 |
center | 居中对齐 |
文本修饰线
属性值:text-decoration
取值:
属性值 | 效果 |
---|---|
underline | 下划线 |
line-through | 删除线 |
overline | 上划线 |
none | 无装饰线 |
效果:
这里有一个经常会用到的地方:
⭐可以使用text-decoration: none 来去除a标签的下划线
例如:
行高
属性名:line-height
作用:控制一行的上下间距
取值:
- 数字+px
- 倍数(当前font-size的倍数)
行高由上间距,文字高度和下间距组成
- line-height: 1 可以取消文本的上下间距
行高有一个比较常用的地方: 让文字行高和盒子的高度一样时,文字会在中间显示
注意这里的效果与设置text-align: center的区别
行高也在写在font(符合属性)中
写法:font-style font-weight font-size/line-height font-family
注意 font-size 和 line-height 之间使用的是/
颜色
设置颜色在前端中用到的还是比较多的,所以还是要了解一下的
属性名的有很多,就不一一列举了,取值要说一下
取值:
颜色表示方式 | 表示方式 | 属性值 |
---|---|---|
关键字 | 预定义的颜色名 | 如:red,blue,green等 |
rgb | 红绿蓝三原色,每项取值为0~255 | rgb(0~255 , 0~255, 0~255) |
rgba |
红绿蓝三原色,a表示透明度,a的取值为(0~1)
|
rgba(0~255 , 0~255, 0~255, 0~1) |
十六进制 | #开头 将数字转换为16进制 | #000000 #ff0000等 也可以简写 如:#f00 #000 |
标签水平居中
标签水平居中: margin: 0 auto
效果如图:
我们平时使用的页面主体部分应该是在我们屏幕中间的.这也是使用标签水平居中的方法实现的.
简单解释一下这里,margin是外边距.后面会在盒子模型中详细介绍,0 auto: 上下外边距为0,左右自适应相同值
⭐思维导图
感谢你的观看!希望这篇文章能帮到你!
web前端开发专栏在不断更新中,欢迎订阅!
“愿与君共勉,携手共进!”
【web前端开发】CSS文字和文本样式相关推荐
- 前端开发css禁止选中文本
在我们日常的Java web前端开发的过程中呢,程序员们会遇到各种各样的要求,所以不每天学的东西感觉自己都退步了,都更不上时代的发展了. 每天应对各种需求,每天活在疑问中就是我们程序员的真是写照.但我 ...
- Web前端开发——CSS样式(Ⅰ)文本与文字样式
目录 1. 单位 2. 颜色 3. 文本 3.1 字符间距letter-spacing 3.2 行高line-height 3.2.1 基本概念 3.2.2 行高的应用--居中垂直对齐效果 3.3 对 ...
- Web前端开发css基础样式总结
颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255之间 一般都用16进制表示颜色 单 ...
- Web前端开发——CSS样式之CSS选择器
1. CSS选择器类型 css选择器可分为标签选择器.类别选择器.ID选择器,这里的三种类型主要针对内嵌样式和单独文件样式而言 1.1 标签选择器 1.1.1 测试代码 <!DOCTYPE ht ...
- Web前端开发——CSS样式(Ⅱ)背景、超链接样式
目录 1. CSS背景 1.1 基本属性 1.2 文件组织形式 1.3 测试代码 1.4 效果图 2. CSS超链接 2.1 链接的四种状态 2.2 测试代码 2.3 效果图 1. CSS背景 1.1 ...
- Web前端开发CSS基础(2)
CSS 层叠样式表(英文全称:Cascading Style Sheets),是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不 ...
- WEB前端学习:CSS学习_用户界面样式
用户界面样式 文章目录 用户界面样式 一.鼠标样式 二.轮廓 三.防止文本域拖拽 四.去除图片底侧空白间隙 五.溢出文字隐藏 1. work-break 2. white-space 3. text- ...
- 快来学习一下吧!Web前端开发CSS居中的五大方式
学习css大家是不是对元素居中的知识点很是模糊?是不是苦于找不到一个总结的通俗易懂的说明?是不是自己懒得去总结?今天小编在前端的学习与实践中总结出的元素的五大居中方式,黏贴了代码并对代码做了解释,希望 ...
- 【web前端开发 | CSS】css元素的显示模式
思维导图 一:元素显示模式分类 *网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页. *元素显示模式就是元素(标签)以什么方式进行显示,比如<div> ...
最新文章
- 输入一个数组,逆序存放在另一个数组并输出
- 生物识别技术在我们日常生活中的应用
- 触手可得的云原生 | 阿里云中间件发布多项新功能
- python opencv模板匹配多目标_基于opencv的多目标模板匹配
- 计算机一级ie浏览器和电子邮件,2016年职称计算机考试Internet基础知识:利用IE收发电子邮件...
- DDD:如何更好的使用值对象
- CSS hack:区分IE6 IE7 Firefox
- idea多级目录不展开的问题
- matlab虚拟现实之建立simulink虚拟现实工具箱的使用
- 在学习C语言和C++初期的疑惑有哪些?
- php log日志管理,PHP日志LOG类定义与用法示例
- HDFView 把 JPG 图片转换成 HDF5 格式文件
- Mac配置allure环境变量
- JavaWeb医院挂号系统
- IT忍者神龟之 配额不足的解决方法ORA-01536: space quota exceeded for tablespace
- markdown快捷键大全
- ubantu与CentOS虚拟机之间搭建GRE隧道
- 屏幕录制视频时有杂音怎么办?
- 使用fastjson字符串对象互转
- C语言随机刷新,C语言 刷新缓冲区