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默认的字体大小, 是16px 4. 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. RGBA rgba(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 #333 5. 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: 设置首行缩进 常用的长度单位: em 7. white-space 设置网页如何处理空白, 换不换行 8. text-overflow 可选值: ellipsis 省略号 9. text-shadow: h-shadow v-shadow blur color 4个参数(参数之间以空格隔开) 1. 阴影水平位移距离 正值向右 负值向左 2. 阴影的垂直位移距离 正值向下 负值向上 3. 阴影模糊半径 4. 阴影颜色, 一般情况下, 用rgba形式比较多, 选填, 默认是字体颜色 10. box-shadow: h-shadow v-shadow blur color 4个参数和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 sit amet 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>
