CSS字体、行高等其他样式
2024-05-19 16:13:24
CSS字体、行高等其他样式
一、长度单位与颜色单位
1. 长度单位
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- 长度单位1. 像素 px就是电脑屏幕上的一个个的发光的小点, 我们眼睛是看不出来的像素就是我们pc端最常用的一个单位, 它是一个固定单位2. 百分比 %是父元素宽高的百分比, 是一个相对单位, 一般情况下,做流式布局比较多, 会随着父元素的宽高变化而变化3. em也是一个相对单位, 相对于当前字体大小来计算最终大小, 也就是一个em等于一个font-size, 如果当前元素没有设置字体大小, 那么会继承祖先元素的字体大小, 最终继承到html默认的字体大小, 是16px4. rem r root 根也是一个相对单位, 相对于根标签html的字体大小来计算最终大小1rem = 1个html的font-size--><style>section {width: 300px;height: 300px;background-color: pink;}div {/* width: 50%; *//* height: 50%; *//* width: 10em; *//* height: 10em; */width: 10rem;height: 10rem;background-color: red;}</style></head><body><section><div>到了方上。</div></section></body>
</html>
2. 颜色单位
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- 颜色单位1. 在CSS可以直接使用颜色的单词来表示不同颜色red, green, yellow, black等缺点: 颜色单词太多, 不好描述2. 使用RGB值来表示不同颜色rgb(红色, 绿色, 蓝色)颜色的值 0-255之间 0最小, 255最大直接用电脑或插件可以吸取颜色的比值3. RGBArgba(red, green, blue, alpha);alpha 透明度 0-1之间 0是透明 1是不透明4. 使用十六进制的rgb来表示颜色, 原理上和RGB一样十六进制: 0-9 abcdef 0表示最小, 代替0-255的0 ff表示最大, 代替0-255的25用十六进制的值分别表示红色, 绿色, 蓝色的浓度语法: #f00, 两两重复的表示, 可以省略一位常用: #0f0 #00f #ccc #eee #3335. HSL值(H - 色相值 0-360, S - 饱和度 0-100%, L - 亮度 0 - 100%)--><style>.box1 {width: 100px;height: 100px;/* background-color: rgb(0, 255, 0); */background-color: rgba(0, 255, 0, 0.5);}</style></head><body><div class="box1"></div></body>
</html>
二、字体
1. 字体的样式
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- 1. color 设置字体颜色2. font-size 设置字体大小3. font-family 设置字体样式4. @font-face 自定义字体--><style>@font-face {/* 给字体起的名字 */font-family: '111';/* 引入路径 */src: url();}p{color: red;font-size: 30px;/* 设置文字的字体 字体是设计师设计好的, 我们直接使用即可 */font-family: cursive;}</style></head><body><p>赐招仄骨本之羊韩好策哥，龄我破无，导什。</p></body>
</html>
2. 字体的分类
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title></title><style>/* p{font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;} */</style></head><body><!-- 在网页中将字体分成5大类：serif ['serif]（衬线字体）sans-serif（非衬线字体）monospace （等宽字体）cursive ['kə:siv]（草书字体）fantasy ['fæntəsi]（虚幻字体）可以将字体设置为这些大的分类,当设置为大的分类以后，浏览器会自动选择指定的字体并应用样式一般会将字体的大分类，指定为font-family中的最后一个字体 ,用来兜底--><p style="font-size: 20px; font-family: serif">衬线字体：我是一段文字，ABCDEFGabcdefg</p><p style="font-size: 20px; font-family: sans-serif">非衬线字体：我是一段文字，ABCDEFGabcdefg</p><p style="font-size: 20px; font-family: monospace">等宽字体：我是一段文字，IHABCDEFGabcdefg</p><p style="font-size: 20px; font-family: cursive">草书字体：我是一段文字，ABCDEFGabcdefg</p><p style="font-size: 20px; font-family: fantasy">虚幻字体：我是一段文字，ABCDEFGabcdefg</p></body>
</html>
3. 字体的其他样式
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title></title><!-- 设置一个文字大小 font-size设置一个字体 font-family设置文字斜体 font-style: ;可选值：normal 默认值 文字正常显示italic 文字倾斜 （比较常用）oblique 文字倾斜 （了解）设置文字的加粗font-weight: ;可选值：normal 默认值 文字正常显示bold 文字加粗bolder 文字加粗100-900 之间数值 100最细 900最粗 注意没有单位设置一个小型大写字母font-variant 可选值：normal 默认值 文字正常显示small-caps 设置小型大写字母font简写可以统一设置文字相关的一些样式注意：1、必须要有字体大小和文字的字体2、字体大小必须在倒数第二位文字字体必须在倒数第一位--><style>.p1 {font-size: 2em;font-family: "Times New Roman", Times, serif;/* 设置文字斜体 */font-style: oblique;/* 设置文字的加粗 */font-weight: 900;}.p2 {color: red;font-size: 35px;font-variant: small-caps;}.p3 {color: green;font: italic bold 30px serif;}</style></head><body><p class="p1">我是一段文字我是一段文字我是一段文字，ABCDEFGabcdefg</p><p class="p2">我是一段文字，ABCDEFGabcdefg</p><p class="p3">我是一段文字，ABCDEFGabcdefg</p></body>
</html>
三、行间距
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- 1. 行高(line height) 文字占有的实际高度行高 = 上间距 + 文字大小 + 下间距上间距 = 下间距如果要设置行与行之间的空白距离, 可以通过设置行高来实现line-height样式名可选值:(1). 直接写大小, 单位: px/em/rem/%(2). 直接写倍数, 1/2/3/4/5...(3). 可以写百分比, 100%, 200%, 300%2. 单行文本在父元素垂直居中只需要设置行高跟父元素高度一致3. font中也可以指定行高font: 30px/60px cursive;font: 字体大小/行高 字体;--><style>.p1 {font-size: 26px;color: red;/* line-height: 50px; */line-height: 2;}.p2 {color: green;font: 30px/60px cursive;}.box {width: 100px;height: 100px;background-color: pink;line-height: 100px;}</style></head><body><p class="p1">况是太谓我也王司里帮未药能四，上即感赐她要三开马，之战日国。有郭洪，鲜人氏纯郭，来张起同德皮小也月远大们你别到勇，谓劫快帅王老能招小揽磊起极的色上诗而，怒毒后君，韩单韩命足说才话感范一友，无领化前胜极到资房年极，通作了极几秦关会整自自老下五要助无是雷，皇陛沾。</p><p class="p2">况是太谓我也王司里帮未药能四，上即感赐她要三开马，之战日国。</p><div class="box"><a href="#">我是一个超链接</a></div></body>
</html>
四、文本相关样式
1. 文本相关样式（一）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- 文本相关样式 --><style>h1 {text-align: center;text-shadow: 5px 5px 10px rgb(146, 143, 143);}.p1 {font-size: 30px;/* text-transform: none; *//* text-transform: uppercase; *//* text-transform: lowercase; *//* text-transform: capitalize; *//* text-decoration: line-through; *//* letter-spacing: 10px; */}.p2 {font-size: 30px;/* text-align: center; */text-indent: 2em;}.p3 {background-color: pink;/* 设置单行文本省略号的固定写法 *//* 自行研究多行文本省略号写法 */width: 300px;/* 设置不换行 */white-space: nowrap;/* 设置多余内容隐藏 */overflow: hidden;/* 设置多余的内容以省略号的形式出现 */text-overflow: ellipsis;}.box:hover {box-shadow: 0px 0px 10px black;}.box {width: 100px;height: 100px;background-color: green;/* box-shadow: 0px 0px 10px black; */}</style><!-- 1. text-transform 可以设置文本大小写可选值:none 文本正常显示 默认值uppercase 字母大写lowercase 字母小写capitalize 首字母大写2. text-decoration 可以用来设置文本的修饰符可选值:none 文本正常显示 默认值underline 文本下划线overline 文本上划线line-through 删除线3. letter-spacing 可以指定字符间距4. word-spacing 可以指定单词之间的间距或句和句之间的间距5. text-align: 设置文本的对齐方式可选值:left 默认值 文本靠左对齐right 文本靠右对齐center 文本居中对齐注意: 设置文本的对齐方式必须要给文本一定的空间, 如果要是行内元素的话,它的宽度是被内容撑开的, 也就无法设置6. text-indent: 设置首行缩进常用的长度单位: em7. white-space设置网页如何处理空白, 换不换行8. text-overflow可选值: ellipsis 省略号9. text-shadow: h-shadow v-shadow blur color4个参数(参数之间以空格隔开)1. 阴影水平位移距离 正值向右 负值向左2. 阴影的垂直位移距离 正值向下 负值向上3. 阴影模糊半径4. 阴影颜色, 一般情况下, 用rgba形式比较多, 选填, 默认是字体颜色10. box-shadow: h-shadow v-shadow blur color4个参数和text-shadow一样, 唯一不同阴影颜色默认黑色--></head><body><h1>人卧互，才圣快。</h1><p class="p1">得历瞠一揽厅回鼓第话了为洪被流，国不全。 相后才说尽挟了若孔子无派非春薪好妄应常。Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque, voluptate.</p><p class="p2">学都子会，互但木下，夫县量人者回尝，几。了绝诗，为孔忧日败。Lorem ipsum dolor sitamet consectetur adipisicing elit. Doloribus, esse?</p><p class="p3">是夭是览的壬尤锐尺无，之快韩人中曰承劝一着挟望哥德区没，到。</p><div class="box"></div></body>
</html>
2. 文本相关样式（2）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- vertical-align 设置元素垂直对齐方式 --><!-- 作用:1. 设置图文的对齐方式2. 解决图片三像素问题引入图片后, 图片与图片之间会有三像素空白, 正常情况下, 这个空白是不需要的方法一: vertical-align 非baseline方法二:设置其父元素font-size为0方法三: 设置图片为块元素方法四:使图片脱离文档流, 设置它浮动或绝对定位可选值:baseline: 基线对齐 默认值 以x的最下方为标准top: 文本靠上bottom: 文本靠下middle: 文本居中--><style>div{width: 300px;}img{width: 300px;/* vertical-align: baseline; */vertical-align: top;}</style></head><body><div><img src="../homework1121/images/game01.jpg" alt="!" width="300"><img src="../homework1121/images/game01.jpg" alt="!" width="300"></div></body>
</html>
CSS字体、行高等其他样式相关推荐
- css字体的分类及样式
一.分类 在网页中将字体分成五大类: serif(衬线字体) sans-serif(非衬线字体) monospace (等宽字体) cursive (草书字体) ...
- 说一下CSS字体属性
CSS Fonts(字体)属性用定义字体系列,大小粗细,和文字样式(如斜体) 3.1字体系列 CSS使用font-family属性定义文本字体系列 p { font-family:'微软雅黑' ;} ...
- css 字体样式设置
css字体样式(Font Style),属性 时间:2014-05-08 21:49 来源:我爱学习网 | 作者:我爱学习网 | 本文已影响 68353 人 css字体样式(Font Style)是网 ...
- 前端：CSS/09/行内框架，CSS简介，CSS选择器，组合选择器，CSS注释，CSS尺寸属性，CSS字体属性，CSS文本属性
内嵌框架(行内框架,浮动框架) 语法格式:<iframe 属性="值">不支持时的提示信息</iframe> 描述:内嵌框架,相当于在现有的网页中,挖了一个 ...
- CSS基础——CSS字体样式属性【学习笔记】
CSS字体样式属性调试工具 font字体 CSS外观属性 快捷操作emmet语法 练习案例-体育页面 1.font字体 1.1 font-size:大小 作用: font-size属性用于设置字号 p ...
- HTML5常用的文本标签及css字体样式属性
HTML5常用的文本标签 标签 描述 标题标签 HTML中一共有六级标题,标题按字号大小从大到小为H1.H2.H3.H4.H5.H6 <p> 用于定义HTML中的段落 <br> ...
- css 字体样式设置大全
css样式大全(整理版) 字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 {fo ...
- css 字体颜色 样式大全
CSS 颜色大全 css 字体颜色,将颜色代码代替css里面的颜色,就可以. div中控制某段字体 颜色 html代码 divid=sidebar spanCSS 颜色大全 css 字体颜色/span ...
- HTML标记fort属性最大取值,CSS(2)---css字体、文本样式属性
css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...
最新文章
- guava之preconditions
- oracle+创建序列自增,oracle序列详解和建立自增主键
- 写 Python 时的 5 个坏习惯
- PHP包含文件函数include、include_once、require、require_once区别
- 如何把 Kitten编程猫上开发出来的项目打包成安卓平台上可以安装的apk文件
- Win7性能信息和工具在哪打开
- 报错注入是什么？一看你就明白了。报错注入原理+步骤+实战案例
- CMake使用详解二（多文件编译）
- 【华为推荐】基于反事实学习的推荐系统研究.pdf(附pdf下载链接)
- AJPFX解析关于编码ansi、GB2312、unicode与utf-8的区别
- dos命令 启动项目
- 用nmap查看局域网存活的主机
- video call BT audio音频流程
- php word 生成图片,PHP导出成word，带图片样式
- Win11新Bug任务栏图标不显示的解决方法
- 要出发周边游APP产品体验报告
- 2021年上半年软考电子证书可以查询啦！
- 【加量不加价，提供只读脚本】小麦苗健康检查脚本说明（Oracle巡检脚本）
- 使用TIM捕获测量PWM频率和占空比
- 力扣第四十六题（全排列）详解