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>
