HTML5+CSS3的学习(二)

HTML5+CSS3的学习(二)

2018版李立超html+css基础 103集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1sW411T78k?spm_id_from=333.999.0.0

2019版李立超前端html5+css3 148集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1XJ411X7Ud?spm_id_from=333.999.0.0

四、文本标签及样式

1.文本标签

  • 标识网页中的不同内容

em和strong

em标签用于表示一段内容中的着重点。

strong标签用于表示一个内容的重要性。

• 这两个标签可以单独使用,也可以一起使用。

通常em显示为斜体,而strong显示为粗体。

<!-- 
			em和strong
			- 这两个标签都表示一个强调的内容,

				em主要表示语气上的强调,em在浏览器中默认使用斜体显示

				strong表示强调的内容,比em更强烈,默认使用粗体显示
		-->
<p>
 <strong>警告:任何情况下不要接近僵尸。</strong>
 他们只是 <em>看起来</em> 很友好,实际上他们是为了吃你的胳膊!
</p>

HTML5+CSS3的学习(二)

i和b

<!-- 
			i标签中的内容会以斜体显示
			b标签中的内容会以加粗显示
这两个标签和em和strong类似,但是这两个标签没有语义。
			
			h5规范中规定,当我们只想设置文本特殊显示,对于不需要着重的内容而是单纯的加粗或者是斜体,
				就可以使用b和i标签
		-->
<p>
 <b>警告:任何情况下不要接近僵尸。</b>
 他们只是 <i>看起来</i> 很友好,实际上他们是为了吃你的胳膊!
</p>

small

small标签表示细则一类的旁注,通常包括免责声明、注意事项、法律限制、版权信息等。

• 浏览器在显示small标签时会显示一个比父元素小的字号。

<!--
			small标签中的内容会比他的父元素中的文字要小一些
				在h5中使用small标签来表示一些细则一类的内容
				比如:合同中小字,网站的版权声明都可以放到small
		-->
<p><small>&copy;2016 尚硅谷. 保留所有权利.</small></p>

HTML5+CSS3的学习(二)

cite

• 使用cite标签可以指明对某内容的引用或参考。例如,戏剧、文章或图书的标题,歌曲、电影、照片或雕塑的名称等。

<!-- 
			网页中所有的加书名号的内容都可以使用cite标签,表示参考的内容,
				比如:书名 歌名 话剧名 电影名 。。。
		-->
<p>
  <cite>《七龙珠》</cite>讲的是召唤神龙的故事。
</p>

HTML5+CSS3的学习(二)

blockquote和q

blockquoteq表示标记引用的文本。

blockquote用于长引用,q用于短引用。

• 在两个标签中还可以使用cite属性来表示引用的地址。

<!--
			q标签表示一个短的引用(行内引用)
				q标签引用的内容,浏览器会默认加上引号
			
			blockquote标签表示一个长引用(块级引用)
		-->
孟子曾经说过:
<blockquote>天将降大任于是人也...</blockquote>
他说的真对啊!
<p>孔子曾经说过:<q>学而时习之不亦说乎</q></p>

HTML5+CSS3的学习(二)

sup和sub

sup和sub用于定义上标和下标。

<p>10<sup>3</sup>H<sub>2</sub>O</p>

HTML5+CSS3的学习(二)

ins和del

ins表示插入的内容,显示时通常会加上下划线。

del表示删除的内容,显示时通常会加上删除线。

<p>10<ins>3</ins><del>2</del></p>

HTML5+CSS3的学习(二)

code和pre

• 如果你的内容包含代码示例或文件名,就可以使用code元素。

• pre元素表示的是预格式化文本,可以使用pre包住code来表示一段代码。

	<!--
			需要页面中直接编写一些代码
			pre是一个预格式标签,会将代码中的格式保存,不会忽略多个空格
			code专门用来表示代码
			
			我们一般结合使用pre和code来表示一段代码
		-->
<pre>
  <code>
     function fun(){
        alert("hello");
     }
  </code>
</pre>

HTML5+CSS3的学习(二)

2.布局标签

  <!-- 
        布局标签(结构化语义标签)
     -->
     <!-- 
        header 表示网页的头部
        main 表示网页的主体部分(一个页面中只会有一个main)
        footer 表示网页的底部
        nav 表示网页中的导航
        aside 和主体相关的其他内容(侧边栏)
        article 表示一个独立的文章
        section 表示一个独立的区块,上边的标签都不能表示时使用section
        div 没有语义,就用来表示一个区块,目前来讲div还是我们主要的布局元素
        span 行内元素,没有任何的语义,一般用于在网页中选中文字
      -->
     <header></header>
     <main></main>
     <footer></footer>
     <nav></nav>
     <aside></aside>
     <article></article>
     <section></section>
     <div></div>
     <span></span>

3.有序列表

• 使用olli来创建一个有序列表。

HTML5+CSS3的学习(二)

4.无序列表

• 使用ulli来创建一个无序列表。

HTML5+CSS3的学习(二)

5.定义列表

• 使用dl、dd、dt来创建一个定义列表。

HTML5+CSS3的学习(二)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
	</head>
	<body>
		<!--
			定义列表用来对一些词汇或内容进行定义
			使用dl来创建一个定义列表
				dl中有两个子标签
					dt : 被定义的内容
					dd : 对定义内容的描述
			同样dl和ul和ol之间都可以互相嵌套		
		-->
		<dl>
			<dt>武松</dt>
			<dd>景阳冈打虎英雄,战斗力99</dd>
			<dd>后打死西门庆,投奔梁山</dd>
			<dt>武大</dt>
			<dd>著名餐饮企业家,战斗力0</dd>
		</dl>
	</body>
</html>

HTML5+CSS3的学习(二)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">		
			/*
			 去掉项目符号
			 * */
			/*ul{
				list-style: none;
			}*/			
		</style>
	</head>
	<body>	
		<!-- 
			列表(list)就相当于去超市购物时的那个购物清单,
				在HTML也可以创建列表,在网页中一共有三种列表:
					1.无序列表
					2.有序列表
					3.定义列表
		-->
		
		<!--
			无序列表
				- 使用ul标签来创建一个无序列表
				- 使用li在ul中创建一个一个的列表项,
					一个li就是一个列表项
					
			通过type属性可以修改无序列表的项目符号
				可选值:
					disc,默认值,实心的圆点
					square,实心的方块
					circle,空心的圆
					
			注意:默认的项目符号我们一般都不使用!!
				如果需要设置项目符号,则可以采用为li设置背景图片的方式来设置
				
			ul和li都是块元素	
		-->
		<ul>
			<li>西门大官人</li>
			<li>柴大官人</li>
			<li>许大官人</li>
			<li>唐僧大官人</li>
		</ul>		
		<!-- 
			有序列表和无序列表类似,只不过它使用ol来代替ul
			有序列表使用有序的序号作为项目符号
			type属性,可以指定序号的类型
				可选值:1,默认值,使用阿拉伯数字
						a/A 采用小写或大写字母作为序号
						i/I 采用小写或大写的罗马数字作为序号
            start属性,起始索引,表示从几开始,必须得写数字,即下方的为 50.结构开始
                                                     
						
			ol也是块元素		
                  列表之间可以互相嵌套
		-->
		<ol type="1" start="50">
			<li>结构</li>
			<li>表现</li>
			<li>行为</li>
		</ol>	
		<!-- 
			列表之间都是可以互相嵌套,可以在无序列表中放个有序列表
				也可以在有序列表中放一个无序列表
		-->		
		<p>菜谱</p>
		<ul>
			<li>
				鱼香肉丝
				<ol>
					<li>鱼</li>
					<li>香</li>
					<li>肉丝</li>
				</ol>
			</li>
			<li>
				宫保鸡丁
				<ul>
					<li>宫保</li>
					<li>鸡丁</li>
				</ul>
			</li>
			<li>青椒肉丝</li>
		</ul>	
	</body>
</html>

HTML5+CSS3的学习(二)

6.文本格式化

为内容设置不同的样式

6.1.长度单位

px、百分比%、em、rem

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">		
			/*
			 * 长度单位
			 * 		像素 px
			 * 			- 像素是我们在网页中使用的最多的一个单位,
			 * 				一个像素就相当于我们屏幕中的一个小点,
			 * 				我们的屏幕实际上就是由这些像素点构成的
			 * 				但是这些像素点,是不能直接看见。
			 * 			- 不同显示器一个像素的大小也不相同,
			 * 				显示效果越好越清晰,像素就越小,反之像素越大。
                        - 如果我们将一个图片放大的话,我们会发现一个图片是有一个一个的小色块构成的,这                        一个小色块就是一个像素,也就是1px,对于不同的显示器来说一个像素的大小是不同的。
			 * 
			 * 		百分比 %
			 * 			- 也可以将单位设置为一个百分比的形式,
			 * 				这样浏览器将会根据其父元素的样式来计算该值
			 * 			- 使用百分比的好处是,当父元素的属性值发生变化时,
			 * 				子元素也会按照比例发生改变
			 * 			- 在我们创建一个自适应的页面时,经常使用百分比作为单位
                        - 也可以使用一个百分数来表示一个大小,百分比是相对于父元素来说的,如果父元素使                           用的大小是16px,则100%就是16px,200%就是32px。
			 * 
			 * 		em
			 * 			- em和百分比类似,它是相对于当前元素的字体大小来计算的
			 * 			- 1em = 1font-size,通常默认1font-size为16px
			 * 			- 使用em时,当字体大小发生改变时,em也会随之改变
			 * 			- 当设置字体相关的样式时,经常会使用em
                        - em和百分比类似,也是相对于父元素说的,1em就相当于100%,2em相当于200%,                                 1.5em相当于150%。
            
                    rem
                        - rem是相对于根元素的字体大小来计算(html所设定的字体大小,)
                               html{
                                   font-size:10px
                               }
			 * 			
			 */
			.box{
				width: 300px;
				height: 300px;
				background-color: red;
			}
			
			.box1{
				font-size: 20px;
				width: 2em;
				height: 50%;
				background-color: yellow;
			}
			
		</style>
	</head>
	<body>
		
		<div class="box">
			
			<div class="box1"></div>
			
		</div>
		
	</body>
</html>

HTML5+CSS3的学习(二)

6.2.颜色

• 在CSS中可以直接使用颜色的关键字来代表一种颜色。

• 17种颜色:

​ – aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow

• 还有147种svg颜色,这里就不一一列举了,但是明显即使这些颜色变成double,也不足以描绘我们世界中所有的颜色。

十六进制颜色

• 用的最多的颜色是十六进制符号。一个颜色值,比如:#6600FF实际上包含了三组十六进制的数字。

• 上边的例子中66代表红色的浓度,00代表绿色的浓度,FF代表了蓝色的浓度。最后的颜色是由这些指定浓度的红绿蓝混合而成的。

• 如果每一组数中的两个数字都相同,就可以把十六进制的数字缩短为只有3个字符,如将#6600FF缩短为#60F。

RGB值

• 也可以使用计算机中常用的RGB值来表示颜色。可以使用0255的数值,也可以使用0%100%的百分比数。

​ – RGB(100%,0%,0%)

​ – RGB(0,255,0)

• 第一个数表示红色的浓度,第二个数表示绿色浓度,第三个数表示蓝色的浓度。

RGBA

• RGBA表示一个颜色和RGB类似,只不过比RGB多了一个A(alpha)来表示透明度,透明度需要一个0-1的值。0表示完全透明,1表示完全不透明。

​ – RGBA(255,100,5,0.5)

HSL值和HSLA值

HSLA(H,S,L,A) 的参数说明:

H:Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360

S:Saturation(饱和度)。取值为:0.0% - 100.0%

L:Lightness(亮度)。取值为:0.0% - 100.0%

A:Alpha透明度。取值0~1之间。

注:此色彩模式与HSL相同,只是在HSL模式上新增了Alpha透明度

background-color: hsla(98, 48%, 40%, 0.658);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">			
			.box1{
				width: 100px;
				height: 100px;				
				/*
				 * 颜色单位:
				 * 	 在CSS可以直接使用颜色的单词来表示不同的颜色
				 * 		红色:red
				 * 		蓝色:blue
				 * 		绿色:green	
				 *   也可以使用RGB值来表示不同的颜色
				 * 		- 所谓的RGB值指的是通过Red Green Blue三元色,
				 * 			通过这三种颜色的不同的浓度,来表示出不同的颜色
				 * 		- 例子:rgb(红色的浓度,绿色的浓度,蓝色的浓度);
				 * 			- 颜色的浓度需要一个0-255之间的值,255表示最大,0表示没有
				 * 			- 浓度也可以采用一个百分数来设置,需要一个0% - 100%之间的数字
				 * 				使用百分数最终也会转换为0-255之间的数
				 * 				0%表示0
				 * 				100%表示255
				 *   也可以使用十六进制的rgb值来表示颜色,原理和上边RGB原理一样,
				 * 		只不过使用十六进制数来代替,使用三组两位的十六进制数组来表示一个颜色
				 * 		每组表示一个颜色,第一组表示红色的浓度,范围00-ff
				 * 					第二组表示绿色的浓度,范围是00-ff
				 * 					第三组表示蓝色的浓度,范围00-ff
				 * 		语法:#红色绿色蓝色
				 * 		十六进制:
				 * 		0 1 2 3 4 5 6 7 8 9 a b c d e f
				 * 		00 - ff
				 * 		00表示没有,相当于rgb中的0
				 * 		ff表示最大,相当于rgb中255
				 * 		红色:
				 * 			#ff0000
				 * 		像这种两位两位重复的颜色,可以简写
				 * 			比如:#ff0000 可以写成 #f00
				 * 			#abc  #aabbcc		
				 * 			
				 */
				/*background-color: rgb(161,187,215);*/
				
				/*background-color: rgb(100%,50%,50%);*/
				
				/*background-color: #00f;*/
				
				/*background-color: #abc;*/ /*#aabbcc*/
				
				background-color: #084098;
			}			
		</style>
	</head>
	<body>
		<div class="box1"></div>
	</body>
</html>

HTML5+CSS3的学习(二)

   .box1{
            width: 100px;
            height: 100px;
            /* 
                颜色单位:
                    在CSS中可以直接使用颜色名来设置各种颜色
                        比如:red、orange、yellow、blue、green ... ...
                        但是在css中直接使用颜色名是非常的不方便

                    RGB值:
                        - RGB通过三种颜色的不同浓度来调配出不同的颜色
                        - R red,G green ,B blue
                        - 每一种颜色的范围在 0 - 255 (0% - 100%) 之间
                        - 语法:RGB(红色,绿色,蓝色)
                        - 可调的颜色256*256*256种

                    RGBA:
                        - 就是在rgb的基础上增加了一个a表示不透明度
                        - 需要四个值,前三个和rgb一样,第四个表示不透明度
                            1表示完全不透明   0表示完全透明  .5半透明

                    十六进制的RGB值:
                        - 语法:#红色绿色蓝色
                        - 颜色浓度通过 00-ff
                        - 如果颜色两位两位重复可以进行简写  
                            #aabbcc --> #abc
                    
                    HSL值 HSLA值
                        H 色相(0 - 360,实际上是一个圆)
                        S 饱和度,颜色的浓度 0% - 100%
                        L 亮度,颜色的亮度 0% - 100%

             */
            background-color: red;
            background-color: rgb(255, 0, 0);
            background-color: rgb(0, 255, 0);
            background-color: rgb(0, 0, 255);
            background-color: rgb(255,255,255);
            background-color: rgb(106,153,85);
            background-color: rgba(106,153,85,.5);
            background-color: #ff0000;
            background-color: #ffff00;
            background-color: #ff0;
            background-color: #bbffaa;
            background-color: #9CDCFE;
            background-color: rgb(254, 156, 156);
            background-color: hsla(98, 48%, 40%, 0.658);
        }

6.3.字体

• 通过font-family可以指定标签中文字使用的字体。

• 例如:

p{font-family:Arial}

上边这行代码指定了p标签中使用名为arial作为字体

• 一般来说只有用户计算机中安装了我们指定的字体时,它才会显示,否则这行代码是没有意义的。

• 通过font-family可以同时指定多个字体。

• 例如:

p{font-family:Arial , Helvetica , sans-serif}

• 如上我实际上指定了三种字体,那么到底使用的是哪个呢?浏览器会优先使用第一个,如果没有找到则使用第二个,以此类推。

• 这里面sans-serif并不是指的具体某一个字体。而是一类字体。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        /* 
        font-face可以将服务器中的字体直接提供给用户去使用(当用户电脑没有安装指定的字体时) 
            问题:
                1.加载速度
                2.版权
                3.字体格式  
        */
        @font-face {
            /* 指定字体的名字 */
            font-family:'myfont' ;
            /* 服务器中字体的路径  format("truetype"):指定字体的格式,一般可不写*/
            src: url('./font/ZCOOLKuaiLe-Regular.ttf') format("truetype");
        }

        p{
            /* 
            字体相关的样式 
                color 用来设置字体颜色
                font-size 字体的大小
                    和font-size相关的单位
                    em 相当于当前元素的一个font-size
                    rem 相对于根元素的一个font-size
                font-family 字体族(字体的格式)
                    可选值:
                        serif  衬线字体
                        sans-serif 非衬线字体
                        monospace 等宽字体
                            - 指定字体的类别,浏览器会自动使用该类别下的字体

                - font-family 可以同时指定多个字体,多个字体间使用,隔开
                   字体生效时优先使用第一个,第一个无法使用则使用第二个 以此类推

                   Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif
            */
            color: blue;
            font-size: 40px;         
            /* font-family: 'Courier New'(有引号是因为中间有空格), Courier, monospace; */
            font-family: myfont;
        }
    </style>
</head>
<body>
    <p>
        今天天气真不错,Hello Hello How are you!
    </p>
</body>
</html>

HTML5+CSS3的学习(二)

字体的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">			
			.p1{
				/*设置字体颜色,使用color来设置文字的颜色*/
				color: red;
				/*
				 * 设置文字的大小,浏览器中一般默认的文字大小都是16px
				 	font-size设置的并不是文字本身的大小,
				 		在页面中,每个文字都是处在一个看不见的框中的
				 		我们设置的font-size实际上是设置格的高度,并不是字体的大小
				 		一般情况下文字都要比这个格要小一些,也有时会比格大,
				 		根据字体的不同,显示效果也不同	
				 * */
				font-size: 30px;
				
				/*
				 * 通过font-family可以指定文字的字体
				 * 	当采用某种字体时,如果浏览器支持则使用该字体,
				 * 		如果字体不支持,则使用默认字体
				 * 该样式可以同时指定多个字体,多个字体之间使用,分开
				 * 	当采用多个字体时,浏览器会优先使用前边的字体,
				 * 		如果前边没有在尝试下一个
				 */
				/*font-family: arial , 微软雅黑;*/
				
				/*
				 * 浏览器使用的字体默认就是计算机中的字体,
				 * 	如果计算机中有,则使用,如果没有就不用
				 * 
				 * 在开发中,如果字体太奇怪,用的太少了,尽量不要使用,有可能用户的电脑没有,就不能达到想要的效果。
				 */
				/*
                font-family: 华文彩云 , arial , 微软雅黑;
                也可以设置face表示字体,例如face="仿宋"
                */				
				font-family: "curlz mt";				
			}			
		</style>
	</head>
	<body>		
		<p class="p1">
			我是一个p标签,ABCDEFGabcdefg
		</p>		
	</body>
</html>

HTML5+CSS3的学习(二)

字体的其他样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">			
			.p1{
				color: red;
				font-size: 30px;
				font-family: "微软雅黑";
				/*
				 * font-style可以用来设置文字的斜体
				 * 	- 可选值:
				 * 		normal,默认值,文字正常显示
				 * 		italic 文字会以斜体显示
				 * 		oblique 文字会以倾斜的效果显示
				 * 	- 大部分浏览器都不会对倾斜和斜体做区分,
				 * 		也就是说我们设置italic和oblique它们的效果往往是一样的
				 *  - 一般我们只会使用italic
				 */
				font-style: italic;
				
				/*
				 * font-weight可以用来设置文本的加粗效果:
				 * 		可选值:
				 * 			normal,默认值,文字正常显示
				 * 			bold,文字加粗显示
				 * 
				 * 	该样式也可以指定100-900之间的9个值,
				 * 		但是由于用户的计算机往往没有这么多级别的字体,所以达到我们想要的效果
				 * 		也就是200有可能比100粗,300有可能比200粗,但是也可能是一样的
				 */
				font-weight: bold;
				
				/*
				 * font-variant可以用来设置小型大写字母
				 * 		可选值:
				 * 			normal,默认值,文字正常显示
				 * 			small-caps 文本以小型大写字母显示
				 * 
				 * 小型大写字母:
				 * 		将所有的字母都以大写形式显示,但是小写字母的大写,
				 * 			要比大写字母的大小小一些。
				 */
				font-variant: small-caps ;
			}
			
			.p2{
				/*设置一个文字大小*/
				font-size: 50px;
				/*设置一个字体*/
				font-family: 华文彩云;
				/*设置文字斜体*/
				font-style: italic;
				/*设置文字的加粗*/
				font-weight: bold;
				/*设置一个小型大写字母*/
				font-variant: small-caps;
			}
			
			.p3{
				/*
				 * 在CSS中还为我们提供了一个样式叫font,
				 * 	使用该样式可以同时设置字体相关的所有样式,
				 * 	可以将字体的样式的值,统一写在font样式中,不同的值之间使用空格隔开
				 * 
				 * 使用font设置字体样式时,斜体 加粗 小大字母,没有顺序要求,甚至可写可不写,
				 * 	如果不写则使用默认值,但是要求文字的大小和字体必须写,而且字体必须是最后一个样式
				 * 	大小必须是倒数第二个样式
				 * 
				 * 实际上使用简写属性也会有一个比较好的性能
				 */
				font: small-caps bold italic 60px "微软雅黑";
			}						
		</style>
	</head>
	<body>
		
		<p class="p3">我是一段文字,ABCDEFGabcdefg</p>
		
		<p class="p1">我是一段文字,ABCDEFGabcdefg</p>
		
		<p class="p2">我是一段文字,ABCDEFGabcdefg</p>
	</body>
</html>

HTML5+CSS3的学习(二)

字体分类

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>字体的分类</title>
		<style type="text/css">
			p{
				font-family: arial , 微软雅黑 , 华文彩云 , serif;
			}
		</style>
	</head>
	<body>
		<!-- 
			在网页中将字体分成5大类:
				serif(衬线字体)
				sans-serif(非衬线字体)
				monospace (等宽字体)
				cursive (草书字体)
				fantasy (虚幻字体)
			以上这些分类都是一些大的分类,并没有涉及具体的类型,
               如果将字体指定为这些格式,浏览器会自己选择指定类型的字体。
			一般会将字体的大分类,指定为font-family中的最后一个字体	
		-->
		<p style="font-size: 50px; font-family: serif;">衬线字体:我是一段文字,ABCDEFGabcdefg</p>
		<p style="font-size: 50px; font-family: sans-serif;">非衬线字体:我是一段文字,ABCDEFGabcdefg</p>
		<p style="font-size: 50px; font-family: monospace;">等宽字体:我是一段文字,IHABCDEFGabcdefg</p>
		<p style="font-size: 50px; font-family: cursive;">草书字体:我是一段文字,ABCDEFGabcdefg</p>
		<p style="font-size: 50px; font-family: fantasy;">虚幻字体:我是一段文字,ABCDEFGabcdefg</p>
	</body>
</html>

HTML5+CSS3的学习(二)

斜体和粗体

font-style用来指定文本的斜体。

  • – 指定斜体:font-style:italic
  • – 指定非斜体:font-style:normal

font-weight用来指定文本的粗体。

  • – 指定粗体:font-weight:bold

  • – 指定非粗体:font-weight:normal

文字大小

  • font-size用来指定文字的大小。

小型大写字母

font-variant属性可以将字母类型设置为小型大写。在该样式中,字母看起来像是稍微缩小了尺寸的大写字母。

​ – font-variant:small-caps

<p style=" font-variant: small-caps">abcABC</p>

HTML5+CSS3的学习(二)

字体的简写属性

• font可以一次性同时设置多个字体的样式。

• 语法:

​ – font:加粗 斜体 小型大写 大小/行高 字体

• 这里前边几个加粗、斜体和小型大写的顺序无所谓,也可以不写,但是大小和字体必须写且必须写到后两个。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            border: 1px red solid;

            /* 
                font 可以设置字体相关的所有属性
                    语法:
                        font: 字体大小/行高 字体族
                        行高 可以省略不写 如果不写使用默认值           
            */

            /* font-size: 50px;
            font-family: 'Times New Roman', Times, serif; */
            font-weight: bold;
            /* font: 50px/2  微软雅黑, 'Times New Roman', Times, serif; */
            /* font: normal normal 50px/2  微软雅黑, 'Times New Roman', Times, serif; */
            font: bold italic 50px/2  微软雅黑, 'Times New Roman', Times, serif;
            /* font:50px 'Times New Roman', Times, serif;
            line-height: 2; */

            /* font-size: 50px; */

            /* font-weight 字重 字体的加粗 
                可选值:
                    normal 默认值 不加粗
                    bold 加粗
                    100-900 九个级别(没什么用,因为计算机字体基本上没有这么多字体,
                            基本上资源normal和bold,设置100~500粗细是一样的)

                font-style 字体的风格
                    normal 正常的
                    italic 斜体
            */
            /* font-weight: bold; */
            /* font-weight: 500;
            font-style: italic; */
        }
    </style>
</head>
<body>
    
    <div>今天天气真不错 Hello hello</div>
    
</body>
</html>

HTML5+CSS3的学习(二)

图标字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./fa/css/all.css">
</head>
<body>
    <!-- 
        图标字体(iconfont)
            - 在网页中经常需要使用一些图标,可以通过图片来引入图标
                但是图片大小本身比较大,并且非常的不灵活
            - 所以在使用图标时,我们还可以将图标直接设置为字体,
                然后通过font-face的形式来对字体进行引入
            - 这样我们就可以通过使用字体的形式来使用图标

        fontawesome 使用步骤
            1.下载 https://fontawesome.com/
            2.解压
            3.将css和webfonts移动到项目中
            4.将all.css引入到网页中
            5.使用图标字体
                   第一种方法:
                - 直接通过类名来使用图标字体
                    class="fas fa-bell"
                    class="fab fa-accessible-icon"

     -->
    
    <i class="fas fa-bell" style="font-size:80px; color:red;"></i>
    <i class="fas fa-bell-slash"></i>
    <i class="fab fa-accessible-icon"></i>
    <i class="fas fa-otter" style="font-size: 160px; color:green;"></i>
</body>
</html>

HTML5+CSS3的学习(二)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./fa/css/all.css">
    <style>
        li{
            list-style: none;
        }

        li::before{
            /*  第二种方法:
                通过伪元素来设置图标字体
                    1.找到要设置图标的元素通过before或after选中
                    2.在content中设置字体的编码
                    3.设置字体的样式(在引入的all.css文件中找)
                        fab
                        font-family: 'Font Awesome 5 Brands';

                        fas
                        font-family: 'Font Awesome 5 Free';
                        font-weight: 900; 

            */
            /*注意要加\*/
            content: '\f1b0';
            /* font-family: 'Font Awesome 5 Brands'; */
            font-family: 'Font Awesome 5 Free';
            font-weight: 900; 
            color: blue;
            margin-right: 10px;
        }
    </style>
</head>
<body>

    <!-- <i class="fas fa-cat"></i> -->

    <ul>
        <li>锄禾日当午</li>
        <li>汗滴禾下土</li>
        <li>谁知盘中餐</li>
        <li>粒粒皆辛苦</li>
    </ul>

    <!-- 
        第三种方法:
        通过实体来使用图标字体:
            &#x图标的编码;
     -->
    <span class="fas">&#xf0f3;</span>
    
</body>
</html>

HTML5+CSS3的学习(二)

阿里的字体库

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    //引入iconfont下载后解压的文件
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        i.iconfont{
            font-size: 100px;
        }
       /*  第三种方法:通过伪元素,实体在下载后的html文件中去找(复制&#x之后的元素),注意加\   */
        p::before{
            content: '\e625';
            font-family: 'iconfont';
            font-size: 100px;
        }
    </style>
</head>
<body>
     <!--第一种方法:通过实体,代码在下载后的html文件中去找-->
    <i class="iconfont">&#xe61c;</i>
    <i class="iconfont">&#xe622;</i>
    <i class="iconfont">&#xe623;</i>
   <!--第二种方法:通过类名,类名在下载后的html文件中去找-->
    <i class="iconfont icon-qitalaji"></i>

    <p>Hello</p>
</body>
</html>

HTML5+CSS3的学习(二)

6.4.行间距、行高(line-height)

line-height用于设置行高,行高越大则行间距越大。

行间距 = line-height – font-size

<style type="text/css">
			/*
			 * 在CSS并没有为我们提供一个直接设置行间距的方式,
			 * 	我们只能通过设置行高来间接的设置行间距,行高越大行间距越大
			 * 使用line-height来设置行高 
			 * 	行高类似于我们上学单线本,单线本是一行一行,线与线之间的距离就是行高,
			 * 	网页中的文字实际上也是写在一个看不见的线中的,而文字会默认在行高中垂直居中显示
			 * 
			 * 行间距 = 行高 - 字体大小
			 */
			.p1{
				font-size: 20px;
				
				/*
				 * 通过设置line-height可以间接的设置行高,
				 * 	可以接收的值:
				 * 		1.直接就收一个大小
				 * 		2.可以指定一个百分数,则会相对于字体去计算行高
				 * 		3.可以直接传一个数值,则行高会设置字体大小相应的倍数
				 */
				/*line-height: 200%;*/
				
				line-height: 2;
			}
			
			.box{
				width: 200px;
				height: 200px;
				background-color: #bfa;
				/*
				 * 对于单行文本来说,可以将行高设置为和父元素的高度一致,
				 * 	这样可以是单行文本在父元素中垂直居中
				 */
				line-height: 200px;
			}
			
			.p2{								
				/*
				 * 在font中也可以指定行高
				 * 	在字体大小后可以添加/行高,来指定行高,该值是可选的,如果不指定则会使用默认值
				 */
				font: 30px "微软雅黑";
				line-height: 50px;
			}
			
		</style>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            font-size: 50px;

            /* 可以将行高设置为和高度一样的值,使单行文字在一个元素中垂直居中 */
            line-height: 200px;

            /* 
                行高(line height)
                    - 行高指的是文字占有的实际高度
                    - 可以通过line-height来设置行高
                        行高可以直接指定一个大小(px em)
                        也可以直接为行高设置一个整数
                            如果是一个整数的话,行高将会是字体的指定的倍数(line-height: 1;)
                    - 行高经常还用来设置文字的行间距
                        行间距 = 行高 - 字体大小

                字体框
                    - 字体框就是字体存在的格子,设置font-size实际上就是在设置字体框的高度,
                      而字就是写在这样的每一个框中

                行高会在字体框的上下平均分配(即居中)
            */

            border: 1px red solid;

            /* line-height: 1.33; */
            /* line-height: 1; */
            /* line-height: 10 */
        }
    </style>
</head>
<body>
    
    <div>今天天气这不错 Hello hello 今天天气这不错 Hello hello 今天天气这不错 Hello hello 今天天气这不错 Hello hello</div>

</body>
</html>

HTML5+CSS3的学习(二)

6.5.大写化(text-transform)

text-transform样式用于将元素中的字母全都变成大小。

  • 大写:text-transform:uppercase
  • 小写:text-tansform:lowercase
  • 首字母大写:text-transform:capitalize
  • 正常:text-transform:none

6.6.文本的修饰(text-decoration)

text-decoration属性,用来给文本添加各种修饰。通过它可以为文本的上方、下方或者中间添加线条。

• 可选值:

  • underline

  • overline

  • line-through

  • none

6.7.文本的水平和垂直对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 800px;
            border: 1px red solid;

            /* 
                text-align 文本的水平对齐
                    可选值:
                        left 左侧对齐
                        right 右对齐
                        center 居中对齐
                        justify 两端对齐(即两端都没有间隙,不留空白,)
            */
            /* text-align: justify; */

            font-size: 50px;
        }

        span{
            font-size: 20px;
            border: 1px blue solid;

                /*
                vertical-align 设置元素垂直对齐的方式
                    可选值:
                        baseline 默认值 基线对齐(基线都是文字的底部一条线,看不到但是存在的)
                        top 顶部对齐(让子元素的顶部与父元素的顶部对齐)
                        bottom 底部对齐
                        middle 居中对齐(不是实际的居中对齐,而是与父元素的x居中对齐,参考css开发手册)
                        通常通过调整值对齐
                          vertical-align:10px;
                */
            vertical-align:baseline; 
        }

        p{
            border: 1px red solid;

        }
        /*图片通过 vertical-align: bottom(top、middle皆可);如果不设置会使图片与基线对齐,即下方还会存在间隙*/
        img{
            vertical-align: bottom;
        }
    </style>
</head>
<body>
    
<div>
    今天天气 Helloyx<span>真不错 Hello</span>!
</div>

    <!-- <div>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo nihil iure at ab atque nostrum molestiae totam porro, dolorem maiores repudiandae molestias veritatis, eligendi laudantium incidunt dolores corporis? Quibusdam, consequatur.
    </div> -->

    <p>
       <img src="./img/an.jpg" alt=""> 
    </p>

</body>
</html>

HTML5+CSS3的学习(二)

其他的文本样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>其他的文本样式</title>
    <style>
        .box1{
            font-size: 50px;
            font-family: 微软雅黑;


            /* 
                text-decoration 设置文本修饰
                    可选值:
                        none 什么都没有
                        underline 下划线
                        line-through 删除线
                        overline 上划线
            */

            /* text-decoration: overline; */

            /*给下划线添加样式 text-decoration: underline red dotted; */
        }

        .box2{
            width: 200px;
            /* 
                white-space 设置网页如何处理空白
                    可选值:
                        normal 正常,默认值
                        nowrap 不换行(内容就只占一行,太长就会有滑轮)
                        pre 保留空白(你找html里面怎么写在浏览器中也会怎样显示)
             例如:
            <div class="box2">
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, minus fugit in perspiciatis reprehenderi
            a
              a
    </div>

            */
            /*常用来处理显示不完的新闻标题, text-overflow: ellipsis;对裁剪后超出的内容用省略号表示*/
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>

    <div class="box2">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, minus fugit in perspiciatis reprehenderit consequuntur aspernatur repellat cumque quidem asperiores quaerat placeat, tenetur vel veritatis deserunt numquam. Dolores, cupiditate enim.
    </div>

    <div class="box1">
        今天天气真不错
    </div>
</body>
</html>

HTML5+CSS3的学习(二)

6.8.字母间距(letter-spacing)和单词间距(word-spacing)

  • letter-spacing 用来设置字符之间的间距。

  • word-spacing 用来设置单词之间的间距。

• 这两个属性都可以直接指定一个长度或百分数作为值。正数代表的是增加距离,而负数代表减少距离。

6.9.对齐文本(text-align)

text-align用于设置文本的对齐方式。

• 可选值:

  • left:左对齐

  • right:右对齐

  • justify:两边对齐

  • center:居中对齐

6.10.首行缩进(text-indent)

text-indent用来设置首行缩进。

• 该样式需要指定一个长度,并且只对第一行生效。

6.11.文本样式

		.p1 {
				/*
				 * text-transform可以用来设置文本的大小写
				 * 	可选值:
				 * 		none 默认值,该怎么显示就怎么显示,不做任何处理
				 * 		capitalize 单词的首字母大写,通过空格来识别单词
				 * 		uppercase 所有的字母都大写
				 * 		lowercase 所有的字母都小写
				 */
				text-transform: lowercase;
			}
			
			.p2 {
				/*
				 * text-decoration可以用来设置文本的修饰
				 * 		可选值:
				 * 			none:默认值,不添加任何修饰,正常显示
				 * 			underline 为文本添加下划线
				 * 			overline 为文本添加上划线
				 * 			line-through 为文本添加删除线
				 */
				text-decoration: line-through;
			}
			
			a {
				/*超链接会默认添加下划线,也就是超链接的text-decoration的默认值是underline
				 	如果需要去除超链接的下划线则需要将该样式设置为none
				 * */
				text-decoration: none;
			}
			
			.p3 {
				/**
				 * letter-spacing可以指定字符间距
				 */
				/*letter-spacing: 10px;*/
				
				/*
				 * word-spacing可以设置单词之间的距离
				 * 	实际上就是设置词与词之间空格的大小
				 */
				word-spacing: 120px;
			}
			
			
			.p4{
				/*
				 * text-align用于设置文本的对齐方式
				 * 	可选值:
				 * 		left 默认值,文本靠左对齐
				 * 		right , 文本靠右对齐
				 * 		center , 文本居中对齐
				 * 		justify , 两端对齐
				 * 				- 通过调整文本之间的空格的大小,来达到一个两端对齐的目的
				 */
				text-align: justify ;
			}
			
			.p5{
				font-size: 20px;				
				/*
				 * text-indent用来设置首行缩进
				 * 	当给它指定一个正值时,会自动向右侧缩进指定的像素
				 * 	如果为它指定一个负值,则会向左移动指定的像素,
				 * 		通过这种方式可以将一些不想显示的文字隐藏起来
				 *  这个值一般都会使用em作为单位
				 */
				text-indent: -99999px;
			}

源码获取

至此,我们的HTML5+CSS3的学习(二)就讲解完成了。下篇我们将介绍CSS盒子模型,源码素材可以通过关注我的微信公众号 我爱学习呀嘻嘻 ,回复关键字HTML5+CSS3源码素材进行获取哦。

HTML5+CSS3的学习(三)

HTML5+CSS3的学习(四)

HTML5+CSS3的学习(五)

HTML5+CSS3的学习(六)

HTML5+CSS3的学习(一)

HTML5+CSS3的学习(二)

上一篇:HTML5的部分基础知识


下一篇:html5课后记录3(学习自用)