0.学习目标
1:长度单位大小,有几种书写方式
2:颜色单位常用方式有哪些
3:字体样式有哪些(了解)
4:常用的字体分类
5:行高
6:文本样式(7-8个)
1.长度单位
1:像素 px
像素是屏幕上一个个的小正方形,我们正常看不到的,需要放到最大,才能看到
px是固定的单位,px也是非常常用单位
2:百分比 %
相对于其父元素的宽高比,是相对单位,一般用来做响应式的布局
3、em
相对于当前元素的字体大小来改变长度,如果当前元素没有设置字体大小,
那么浏览器会继承祖先元素的字体大小,最终html根标签根元素的默认字体大小是16px
4、rem
相对于根标签根元素改变字体的大小,一般用来做响应式的布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
#box {
width: 300px;
height: 300px;
background-color: red;
/* font-size: 20px; */
}
.box1 {
width: 10em;
height: 10em;
/* font-size: 20px; */
background-color: green;
}
</style>
</head>
<body>
<div id="box">
<!-- 程禀心,密谓和挟谭。 -->
<div class="box1"></div>
</div>
</body>
</html>
2.颜色的单位
颜色单位:
1:在CSS可以直接使用颜色的单词来表示不同的颜色
red green yellow orange
这种单位不推荐使用 单词比较多,不好描述
2:使用RGB值来表示不同的颜色
R red
G green
B blue
浓度值 0-255
3:RGBA
a 透明度 0-1之间数值
1 不透明 0 完全透明
4:使用十六进制的rgb值来表示颜色,原理和上边RGB原理一样
十六进制 0-9abcdfe 如果数值两两重复,可以截取一位表示
常用的颜色
#ccc 灰色 #eee 深灰色
#f00 红色 #0f0 绿色
#f60 棕黄色
rgb(255,0, 0)
5:HSL值 HSLA值
颜色浓度
色相
亮度
透明度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color:#f60;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
3.字体的样式
1:color 设置字体颜色,也可以设置其他颜色
2:font-size 设置字体的大小 单位 px,em rem
3:font-family 可以指定文字的字体
4:@font-face 自定义字体
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
p {
color: red;
font-size: 30px;
font-family:"xiyangyang";
}
@font-face {
/* 字体起的名字 */
font-family: "xiyangyang";
/* 引入字体的路径 */
src: url(./字体/MeowScript-Regular.ttf);
}
</style>
</head>
<body>
<p>其灰斗请法张作智切巴答的孔,何郭倒秦君。dsfdsdfexcf</p>
</body>
</html>
4.字体的分类
在网页中将字体分成5大类:
serif ['serif](衬线字体)
sans-serif(非衬线字体)
monospace (等宽字体)
cursive ['kə:siv](草书字体)
fantasy ['fæntəsi](虚幻字体)
可以将字体设置为这些大的分类,当设置为大的分类以后,
浏览器会自动选择指定的字体并应用样式
一般会将字体的大分类,指定为font-family中的最后一个字体 ,用来兜底
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title> </title>
<style>
/* p{
font-family: ;
} */
</style>
</head>
<body>
<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>
5.字体的其他样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<!--
颜色
设置一个文字大小
设置一个字体
设置文字斜体
设置文字的加粗
设置一个小型大写字母
font简写
-->
<style>
.p1 {
/* 设置一个文字大小 */
font-size: 40px;
/* 设置一个字体 */
font-family: fantasy;
/* 设置文字斜体
可选值:
normal 默认值 文字正常显示
italic 文字斜体 常用的
oblique 文字斜体
*/
font-style: oblique;
/* 设置文字的加粗
可选值
normal 默认值 文字正常显示
bold 加粗
100-900数值 100最细 900最粗
*/
font-weight: 900;
}
.p2 {
/* 设置一个小型大写字母 */
font-variant: small-caps;
}
/* font简写 必须有设置字体大小(必须倒数第二位)、设置字体(必须在倒数第一位) */
.p3 {
font: bold italic 30px fantasy;
}
</style>
</head>
<body>
<strong>了赐贤生之,我放郭。</strong>
<h1>下将恶,厅大时,法。</h1>
<!-- <p class="p1">我是一段文字我是一段文字我是一段文字,ABCDEFGabcdefg</p> -->
<p class="p2">我是一段文字,ABCDEFGabcdefg</p>
<p class="p3">我是一段文字,ABCDEFGabcdefg</p>
</body>
</html>
6.行间距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<!-- 1、行高(line height) 文字占有的实际高度
可选值
1、可以直接设置大小 例如50px,100px
2、可以写数值,是字体的倍数
3、可以写百分比
2、单行文本在父元素中垂直居中,把行高和高度设置一样的,
行高=上间距+文字的大小+下间距
3、font中也可以指定行高
font: 38px/2 monospace;
-->
<style>
p {
font: 38px/2 monospace;
}
.box {
width: 200px;
height: 200px;
background-color: pink;
line-height: 200px;
}
</style>
</head>
<body>
<p class="p1">一株是枣树,还有一株也是枣树。 一株是枣树,还有一株也是枣树。 一株是枣树,还有一株也是枣树。 一株是枣树,还有一株也是枣树。 一株是枣树,还有一株也是枣树。</p>
<p class="p2">在我的后园,可以看见墙外有两株树,一株是枣树,</p>
<!-- <div class="box">
<em>同仓要位倒 </em>
</div> -->
</body>
</html>
7.文本样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<!--
1: text-transform 可以用来设置文本的大小写
可选值:
none 默认值 正常显示
uppercase 字母大写
lowercase 字母小写
capitalize 首字母大写
2: text-decoration [dɛkə'reɪʃ(ə)n] 可以用来设置文本的修饰
可选值:
none 没有任何修饰线
underline; 加下划线
overline 加上划线
line-through 删除线
3: letter-spacing可以指定字符间距
4: word-spacing可以设置单词之间的距离
5: text-align用于设置文本的对齐方式
可选值:
left 默认值 左对齐
right 右对齐
center 居中对齐
justify 两端对齐
6: text-indent 设置首行缩进
一般用em为单位
7: white-space: ; 设置网页如何处理空白
可选值
normal
8: text-overflow 文本溢出包含元素时发生的事情
可选值
none 默认 正差显示
ellipsis 省略号显示
9: text-shadow: 设置文本阴影 四个参数由空格隔开
参数:
1.h-shadow 必填 阴影水平位移距离
2.v-shadow 必填 阴影垂直位移距离
3.blur 阴影模糊半径 默认为0px(清晰)
4.color 阴影的颜色 默认字体颜色
10:vertical-align 设置文本垂直对齐的方式 只能设置图文表格的垂直对齐
作用:1.设置图文对齐
可选值:
baseline 默认值 基线对齐
bottom 下对齐
top 上对齐
middle 居中对齐
2.解决图片三像素问题 图片与图片之间的空白
方案一:vertical-align:属性值不为baseline
方案二:为图片父元素设置字体大小为0px
方案三:将行内块元素图片转成块元素
-->
<style>
img{
width: 300px;
/* 将元素转化成块元素 */
display: block;
}
/* display: ; 实现元素间的相互转换
可选值:
none 隐藏元素
block 将元素转化成块元素
inline-block 将元素转化成行内块元素*/
.p1{
text-transform:capitalize;
/* text-decoration: line-through; */
/* letter-spacing: 20px; */
/* word-spacing: 20px; */
}
.p2{
/* text-align:justify; */
/* text-indent:2em; */
/* 文本省略号固定写法 */
/* 设置固定宽度 */
width: 300px;
/* 设置不换行 */
white-space: nowrap;
/* 背景颜色 */
/* background-color: cornflowerblue; */
/* 设置多余内容省略号 */
text-overflow: ellipsis;
/* 设置裁剪多余部分 */
overflow: hidden;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<img src="./img1.jpeg" alt="">
<a href="#">你生下也。</a>
<p class="p1">斯娟书准一氏会,赏。Lorem ipsum dolor sit amet consectetur.</p>
<p class="p2">即文烦航斗收手派皮为保极之仓由有火别至。Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, quia.</p>
</body>
</html>