一、长度单位
<!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
也是一个相对单位,相对于当前元素的字体大小来计算最终大小
也就是1em=1个font-size。如果当前的元素没有设置字体大小,
那么会继承祖先元素的字体大小
最终继承到html默认的字体大小,是16px
4.rem
r root 根
也是一个相对单位,相对于根标签html的字体大小来计算最终大小
也就是1rem=1个html的font-size
5、vw、vh
-->
<style>
section{
width: 300px;
height: 300px;
background-color: pink;
}
div{
width: 10em;
height: 10em;
background-color: red;
}
</style>
</head>
<body>
<section>
<div>
书倒么都。
</div>
</section>
</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:在CSS可以直接使用颜色的单词来表示不同的颜色
red、green、yellow、blank等
缺点:颜色单词太多了,不好描述
2.使用RGB值来表示不同的颜色
rgb(红色,绿色,蓝色)
颜色的值 0-255之家 0最小,255最大
直接用电脑或插件可以吸取颜色的比值 ctrl+alt+a
3:RGBA
rgba(red,green,blue,alpha)
alpha 透明度 0-1之间设置透明度 0是透明,1是不透明
4:使用十六进制的rgb值来表示颜色,原理和上边RGB原理一样
十六进制:0-9abcdef,
用十六进制的值来表示0-255之间的数值,表示红色,绿色,蓝色的浓度
语法:#ff0000,像这样两两重复的表示,可以省略一位,简写成#f00
例子:#f00 #0f0 #00f #ccc #333
5.HSL值(H - 色相 0-360,S-饱和度 0-1000%,L - 亮度 0-100%)
HSLA值 A-alpha 透明度 0-1之间
-->
<style>
.box{
width: 100px;
height: 100px;
background-color: rgb(255, 0, 0);
}
</style>
</head>
<body>
<div class="box1"></div>
</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.color 设置字体颜色,也可以设置其他颜色
2.font-size 设置字体体大小
3.font-fammily 可以指定文字的字体
4.@font-face 自定义字体
-->
<style>
/* 第一步:自定义字体 */
@font-face{
/* 你给字体起的名字 */
font-family: '666';
/* 字体引入路径 */
src: url();
}
p{
color: #f00;
font: 30px;
/* 设置文字的字体 字体是设计师设计好,提前规定好,我们直接使用即可 */
/* 第二步:使用自定义字体 */
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
</style>
</head>
<body>
<p>快子奔妙兮大密选贤梵希到不的非,朋皮好。</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>
<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>
五、字体的其他样式
<!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>
</head>
<!--
设置一个文字大小 font-siz
设置一个字体 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: italic;
/* 设置文字的加粗 */
font-weight: 900;
}
.p3{
color: green;
font: initial bold 30px serif;
}
</style>
<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 high) 文字占有的实际高度
行高=上间距+文字的大小+下间距
上间距=下间距
如果要设置行与行之间的空白距离,可以通过设置行高来实现
line-height样式名
可选值:
(1)直接写大小 单位:px/em/rem/%
(2)直接写倍数 1/2/3/4/5....
(3)可以写百分比,100%,200%。300%
2.单行文本在父元素中垂直居中
只需要设置行高跟父元素高度一致
3.font中也可以指定行高
font: 字体大小/行高 字体;
-->
<style>
.p1{
font-size: 25px;
color: red;
line-height: 50px;
}
.box{
width: 200px;
height: 100px;
background-color: pink;
line-height: 100px;
}
.p2{
color: green;
font: 30px/60px sans-serif;
/* line-height: 60px; */
}
</style>
</head>
<body>
<p class="p1">一株是枣树,还有一株也是枣树。 一株是枣树,还有一株也是枣树。 一株是枣树,还有一株也是枣树。 一株是枣树,还有一株也是枣树。 一株是枣树,还有一株也是枣树。</p>
<p class="p2">在我的后园,可以看见墙外有两株树,一株是枣树,</p>
<div class="box">
<a href="#">我是一个超链接</a>
</div>
</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>
<!-- 文本相关的样式 -->
<style>
.p1{
font-size: 30px;
/* text-transform: none; */
/* text-decoration: none; */
/* letter-spacing: 20px; */
word-spacing: 30px;
}
.p2{
font-size: 30px;
/* text-align: left; */
text-indent: 2em;
}
.p3{
background-color: pink;
/* 设置单行文本省略号的固定写法 */
/* 作业:自行研究多行文本省略号的写法 */
/* 设置宽度 */
width: 300px;
/* 设置不换行 */
white-space: nowrap;
/* 设置多余的内容裁剪掉 */
overflow: hidden;
/* 设置多余的内容以省略号的形式出现 */
text-overflow: ellipsis;
}
h1{
color: red;
text-align: center;
text-shadow: 5px 5px 10px;
}
.box{
width: 100px;
height: 100px;
background-color: green;
}
/* 需求:当鼠标移入的时候,box四周出现阴影 */
.box:hover{
box-shadow: 0px 0px 10px ;
}
span{
text-align: center;
}
</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、阴影的模糊半径 选填,默认是0px
4、阴影的颜色 一般情况用rgba 选填,默认是字体的颜色
10:box-shadow: h-shadow v-shadow blur color;
4个参数跟text-shadow是一样
唯一不同的是
阴影的颜色 默认是黑色
11: vertical-align 设置元素垂直对齐的方式
-->
-->
</head>
<body>
<h1>高解韩不后病自。</h1>
<p class="p1">
其融保得首法俭韩撒事,国够间下日支的人。
已慨有逃土死略是卧也我下老促天普他金一。
</p>
<p class="p2">
搏书弟天皇第别台俭,磊次兼之论足说视色。
秦不风罪锐魂郭非斯命一是如的,说人好老。
</p>
<span>我是span标签</span>
</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>
<!-- vertical-align 设置元素垂直对齐的方式
作用:
1.设置图文的对齐方式
2.解决图片三像素的问题
引入图片后,图片与图片之间会有三像素的空白,正常情况,
方法一:
vertical-align 非baseline
方法二:
设置其父元素的font-size为0
方法三:
设置图片为块元素
方法四:
使图片脱离文档流,设置它浮动或者绝对定位皆可
可选值:
baseline 基线对齐 默认值 以x的最下方为标准
top 文本靠上
bottom 文本靠下
middle 文本居中
-->
<style>
div{
width: 300px;
/* font-size: 0; */
}
img{
width: 300px;
/* vertical-align: middle; */
}
</style>
</head>
<body>
<div>
<img src="./img1.jpeg" alt="">
<img src="./img1.jpeg" alt="">
<span>xxx艳大令是。xxssegasdfxx</span>
</div>
</body>
</html>