第3阶段：HTML5之CSS3基础与加强下
73前端开发基础视频-CSS长度单位表示
绝对长度：cm：厘米、mm：毫米、in：英寸
相对长度：px：像素点、em：1em等于当前的字体大小，例如当前元素的字体大小为16px，那么1em = 16px；
74前端开发基础视频-关于像素的补充-CSS设置字体大小
76前端开发基础视频-font-family设置字体系列
字体系列：
西方国家字母体系分为：serif以及scans serif。
serif是有衬线体，意思是在字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同。scans serif则没有这些额外的装饰。
font-famliy:tahoma,arial,’Hiragino SansGb’,\5b8b\4f53，表示在前面的字体都查找失败后，在系统中找一种sans-serif字体作为默认字体
注意顺序，如果把sans-serif放在前面，则后面的都会失效（相当于在sans-serif系列中找一个字体做默认字体）。
77前端开发基础视频-font-weight设置字体的粗细
78前端开发基础视频-font-style设置字体的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>display css属性</title>
<style>
p
{
font-family:"Lucida console","宋体","微软雅黑","黑体";
}
</style>
</head>
<body>
<p style="font-size: 1cm">
p标签、font-size: 1cm
</p>
<p style="font-size: large">
p标签
</p>
<p style="font-size: medium">
p标签
</p>
<p style="font-size: small">
p标签
</p>
<p style="font-size: larger">
在CSS中设置字体名称，直接写中文是可以的，当时在文件编码不匹配时会产生错误。
为此，在CSS直接使用Unicode编码来写字体名称可以避免这些错误。使用Unicode写中文字体名称，浏览器可以正确解析。
-font-family:"\5FAE\8F6F\96C5\9ED1"，表示设置字体为“微软雅黑”。
-可以通过escape()来得到，把中文字符转换成utf-8编码。
-中文字体也有对应的英文名，使用英文名也可以解决上述问题。
</p>
<p style="font-weight:100">
font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100-900（100的整数倍），有继承性。400：Normal、700：bold。
<b >字体的加粗跟字体有关，比如：一种字体只有两种粗细程度的变化，那么normal到bold和到bolder都是一样的效果</b>
</p><!--b标签也可以加粗-->
<p style="font-style:italic">
font-style属性用于定义字体风格
normal：默认
italic：斜体(如果某种字体没有斜体（字体中带有的斜体），将正常显示)
oblique：倾斜（浏览器会让字体倾斜显示）
</p>
<p style="font-style:oblique">
font-style属性用于定义字体风格
normal：默认
italic：斜体
oblique：倾斜
</p>
</body>
</html>
79前端开发基础视频-font字体所有属性合写
font属性对于字体样式进行综合设置，其基本语法如下：font:font-style font-weight font-size/line-height font-family;
各个属性以空格分隔开。
其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则不起作用。
80前端开发基础视频-设置字符的间距和文字的间距
letter-spacing：字间距
字符与字符之间的间距，其属性值可以为不同单位的数值，允许使用负数
word-spacing:单词间距
用于定义英文单词之间的间距，对中文字符无效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>display css属性</title>
<style>
p.p1
{
letter-spacing: 20px;
}
p.p2
{
letter-spacing: 1cm;
}
p.p3
{
letter-spacing:-5px;
}
</style>
</head>
<body>
<p class="p1">
p1标签
</p>
<p class="p2">
p2标签
</p>
<p class="p3">
p2标签
</p>
</body>
</html>
81前端开发基础视频-按钮综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>display css属性</title>
<style>
a
{
background-color: aqua;
font-size: 20px;
font-weight: 700;
font-family: "黑体";
width: 300px;/*行内标签不能有宽度，因此设置display为block*/
display: block;
text-align: center;
text-decoration:line-through;
}
a.example1
{
word-spacing: 1cm;
}
a.example2
{
letter-spacing: 1cm;
}
</style>
</head>
<body>
<a href="#" class="example1">按 钮</a>
<br>
<a href="#" class="example2">按 钮</a>
</body>
</html>
82前端开发基础视频-彻底搞懂行高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>display css属性</title>
<style>
p{
text-indent: 2em;
}
p.class1{
line-height: 2.5em;
background-color: aquamarine;
}
p.class2{
font: 12px/0.5em "宋体";/*注意用复合表达式表示font时一定要带有大小和字体family数据，否则无效*/
background-color:orange;
}
p.class3{
font: 24px/1.5 "黑体";
background-color:blue;
}
</style>
</head>
<body>
<p class="class1">
黔无驴，有好事者船载之以入。至则无可用，放之山下。虎见之，庞然大物也，以（之）为神，蔽林间窥之。稍出进之，慭（yìn）慭然（小心谨慎的样子），莫相知。
</p>
<p class="class2">
他日，驴一鸣，虎大骇，远遁；以为且（将要）噬己也，甚恐。然（虎）往来视之，觉无异能者；益（渐渐）习（习惯）其声，又近出前后，终不敢搏。稍近（之），益（更加）狎（近亲而不庄重），荡（碰撞）（之）依（依靠）（之）冲（冲撞）（之）冒（之）。驴不胜怒，蹄之。虎因喜，计（算计）之（这件事）曰：“技止此耳！”因跳踉（liáng，跃）大㘎（hãn,吼），断其喉，尽其肉，乃去。
</p>
<p class="class3">
噫！形之庞也类有德，声之宏也类有能。向不出其技，虎虽猛，疑畏，卒不敢取。今若是焉，悲夫！
</p>
</body>
</html>
84前端开发基础视频-文本的装饰线的控制
使用text-decoration属性设置文本上划线、中划线、下划线等装饰效果。
85前端开发基础视频-text-indent设置首行缩进
text-align：水平对齐方式，用于设置文本内容的水平对齐，相当于html中的align对齐属性。
text-indent：首行缩进，只能设置于块级标签
起属性值可以用多种单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值，建议使用em作为设置单位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>display css属性</title>
<style>
div{
padding: 0px;
margin: 0px;
line-height: 1em;
text-align: left;
}
.wrap {
font: 16px "黑体";
background-color: green;
text-indent:-50px;//1em,1cm;
}
.wrap p{/*wrap下面的p标签*/
background-color: red;
font: 20px/4.5em "宋体";/*此时行高会是30px*/
text-indent:50%;
}
</style>
</head>
<body>
<div class="wrap">
DIV文本内容
<p>
子段落标签
</p>
DIV文本内容
</div>
</body>
</html>
87前端开发基础视频-设置单词自动换行的处理
word-break：自动换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS属性</title>
<style>
div
{
width: 300px;
background-color: aqua;
}
div.class1
{
white-space: pre;
}
div.class2
{
white-space: nowrap;
}
div.class3
{
word-break:normal;
}
</style>
</head>
<body>
<div>
使用HTML制作网页时，不论源代码中有多少空格，在浏览器中只会显示一个字符的空白。在CSS中，使用white-space属性可以设置空白符的处理方式。
</div>
<div class="class1"> 预格式化，按文档的书写格式保留空格、空行原样显示。注意此时到达边界后没有自动换行</div>
<div class="class2">
空格空行通默认设置时一样没有效果，但强制文本不能换行。若超出浏览器页面会自动增加滚动条。
</div>
<br>
<div class="class3">
word-break:
normal 使用浏览器默认的换行规则;
break-all 允许在单词内换行;
keep-all 只能在半角空格或连字符处换行;
</div>
</body>
</html>
88前端开发基础视频-体育新闻综合案例
扫一扫
94
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
