• 4、常用样式

    1、字体类型：font-family

            font-family 属性设置文本的字体类型。
            font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。


            注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。
            多个字体系列是用一个逗号分隔指明

    示例1：字体类型：font-family

    （1）font.css

    1. body{
    2. 	/* 
    3. 		font-family 属性设置文本的字体类型。
    4. 		font-family 属性应该设置几个字体名称作为一种"后备"机制，
    5. 		如果浏览器不支持第一种字体，他将尝试下一种字体。
    6. 		
    7. 		注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。
    8. 		
    9. 		多个字体系列是用一个逗号分隔指明：
    10. 	 */
    11. 	font-family: times,"Times New Roman","宋体";
    12. }

    （2）font.html

    1. html>
    2. <html>
    3. <head lang="en">
    4.     <meta charset="UTF-8">
    5.     <title>字体类型title>
    6.     <link href="css/font.css" rel="stylesheet" type="text/css"/>
    7. head>
    8. <body>
    9. <div>
    10.     <h1>京东商城――全部商品分类h1>
    11.  
    12.     <h2>图书、音像、电子书刊h2>
    13.  
    14.     <p><span>电子书刊span> 电子书 网络原创 数字杂志 多媒体图书目<br/>
    15.         <span>音像span>音乐 影视 教育音像<br/>
    16.         <span>经管励志span> 经济 金融与投资 管理 励志与成功p>
    17.  
    18.     <h2>家用电器h2>
    19.  
    20.     <p><span>大家电span> 平板电视 空调 冰箱 DVD播放机<br/>
    21.         <span>生活电器span> 净化器 电风扇 饮水机 电话机p>
    22.  
    23.     <h2>个护化妆h2>
    24.  
    25.     <p><span>面部护理span> 洁面乳 精华露 眼部护理 T区护理<br/>
    26.         <span>身体护理span> 洗发护发 沐浴 手工/香皂 手足护理<br/>
    27.         <span>香水SPAspan> 女士香水 男士香水 组合套装 迷你香水p>
    28.  
    29.     <h2>钟表h2>
    30.  
    31.     <p><span>瑞士品牌span> 江诗丹顿 卡地亚Cartier 帝舵TUDOR 真利时ZENITH 雷蒙威Raymond Well<br/>
    32.         <span>时尚品牌span> 巴宝莉BURBERRY 雅克利曼Jacques Lemans 苏菲玛索Sophie Marceau<br/>
    33.         <span>国产品牌span> 聚利时Julius 北京beijing 依宝诺EBONO 劳士顿p>
    34.  
    35.     <h2>服饰鞋帽h2>
    36.  
    37.     <p><span>女装span> T恤 衬衫 针织衫 卫衣 连衣裙 风衣 大衣 休闲裤<br/>
    38.         <span>男装span> 衬衫 POLO衫 针织衫 皮衣 外套 棉服 大衣<br/>
    39.         <span>运动span> 休闲鞋 跑步鞋 足球鞋 运动裤 运动包p>
    40. div>
    41. body>
    42. html>

    2.字体样式(字体风格)：font-style

    主要是用于指定斜体文字的字体样式属性。
    这个属性有三个值：
                normal：默认值。正常的字体
                oblique：倾斜的字体
                italic：斜体。对于没有斜体变量的特殊字体，将应用 oblique，故不建议使用

    示例2-1 ：

    （1）font.css

    1. body{
    2. 	/* 设置字体类型 */
    3. 	font-family:Times, "Times New Roman", "楷体" ;
    4. }
    5. h1{
    6. 	/* 设置h1标签中的文字大小 */
    7. 	font-size: 24px;
    8. }
    9. h1 span{
    10. 	/* font-style: italic; 斜体,对于没有斜体变量的特殊字体，将应用 oblique */
    11. 	font-style: oblique;   /* 斜体-以斜体字显示的文字 */
    12. 	
    13. }
    14. h2{
    15. 	font-size: 16px;
    16. 	font-style: normal; /* 正常-正常显示文本 */
    17. }
    18. p{
    19. 	font-size: 12px;
    20. }

    （2）font.html：与示例1中的font.html文件代码一样

    示例2-2：

    （1）font.html（使用内部样式）

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>使用oblique正常显示字体title>
    6. 		<style>
    7. 			em{
    8. 				/* 字体正常显示 */
    9. 				font-style: normal;
    10. 			}
    11. 		style>
    12. 	head>
    13. 	<body>
    14. 		<em>看看我是不是倾斜的em>
    15. 	body>
    16. html>

    3.字体大小：font-size

        font-size 属性设置文本的大小。
        三种设置字体大小的方式：
            （1）设置字体大小像素
                    h1 {font-size:40px;}
                    h2 {font-size:30px;}
                    p {font-size:14px;}
            （2）用em来设置字体大小
                    h1 {font-size:2.5em;} /* 40px/16=2.5em */
                    h2 {font-size:1.875em;} /* 30px/16=1.875em */
                    p {font-size:0.875em;} /* 14px/16=0.875em */
            （3）使用百分比和em组合
                    body {font-size:100%;}
                    h1 {font-size:2.5em;}
                    h2 {font-size:1.875em;}
                    p {font-size:0.875em;}

    示例3：

    （1）font.css

    1. body {
    2. 	/* 设置字体类型 */
    3. 	font-family: Times, "Times New Roman", "楷体";
    4. }
    5.  
    6. h1 {
    7. 	font-size: 24px;    /* 设置字体大小 */
    8. 	font-style: italic; /* 设置字体风格：斜体 */
    9. }
    10.  
    11. h1 span {
    12. 	font-style: oblique;   /* 设置字体风格:斜体 */
    13. 	font-weight: normal;   /* 设置字体粗细：正常 */
    14. }
    15.  
    16. h2 {
    17. 	font-size: 16px;      /* 设置字体大小 */
    18. 	font-style: normal;   /* 设置字体风格：正常 */
    19. }
    20.  
    21. p {
    22. 	font-size: 12px;   /* 设置字体大小 */
    23. }
    24.  
    25. p span {
    26. 	font-weight: bold;  /* 设置字体粗细：加粗 */
    27. }
    28.  
    29. p span {
    30. 	/* 设置字体：斜体、加粗、字体大小、楷体 */
    31. 	font: oblique bold 12px "楷体"; 
    32. }

    （2）font.html：与示例1中的font.html文件代码一样

     4.字体粗细：font-weight

            font-weight指定字体的粗细

        normal： 默认值。正常的字体。相当于 400 。声明此值将取消之前任何设置 
        bold：粗体。相当于 700 。也相当于 b 对象的作用 
        bolder：比 normal >粗 
        lighter ：比 normal >细 
        100 ：字体至少像 200 那样细 
        200 ：字体至少像 100 那样粗，像 300 那样细 
        300：字体至少像 200 那样粗，像 400 那样细 
        400：相当于 normal  
        500：字体至少像 400 那样粗，像 600 那样细 
        600 ：字体至少像 500 那样粗，像 700 那样细 
        700 ：相当于 bold  
        800 ：体至少像 700 那样粗，像 900 那样细 
        900：字体至少像 800 那样粗         

    代码解析请查看：示例3中的font.css代码 

    5.文本颜色：color

    表示颜色的方式：
    （1）方式一:颜色英文单词表示法
    （2）方式二:rgb表示法   rgb(r,g,b)      r,g,b分别表示0-255之间的数字
    （3）方式三:rgba表示法  rgba(r,g,b,a)   r,g,b,a分别是0-255  a是表示透明度，数字介于0-1之间，数字越小越透明
    （4）方式四:十六进制表示法 #------      -表示十六进制数字，从0-9 A-F

                    color: red; 

                    color: rgb(255,0,0); 

                    color: rgba(255,0,0,0.5); 

                    color: #ff0000;

     示例5：

    （1）common.css

    1. h1{
    2. 	color: rgba(0,0,255,0.5);
    3. 	font-size: 24px;
    4. }
    5. h3{
    6. 	/* font-size: 30px;
    7. 	font-weight: normal; */
    8. 	/* 上述简写如下： */
    9. 	font: 30px normal; /* 设置字体大小、字体粗细正常显示 */
    10. }
    11.  
    12. p{
    13. 	font-size: 12px;
    14. }
    15. p span{
    16. 	color: #F00;
    17. }

    （2）index.html：与示例1中的font.html文件代码一样

    1. html>
    2. <html>
    3. 	<head lang="en">
    4. 		<meta charset="UTF-8">
    5. 		<title>总裁致辞页面title>
    6. 		<link href="css/common.css" rel="stylesheet" type="text/css" />
    7. 	head>
    8.  
    9. 	<body>
    10. 		<h1>总裁致辞h1>
    11. 		<h3>来源：来自北大青鸟h3>
    12. 		<hr />
    13. 		<p><img src="image/icon.jpg" alt="高管团队" width="176"
    14. 				height="108" />目前北大青鸟IT教育全体系员工<span>10000span>余名、授权培训中心<span>180span>余家、合作院校<span>500span>余所、覆盖全国<span>90span>余座城市，市场占有率达到<span>39.8%span>。
    15. 		p>
    16.  
    17. 		<p>作为IT职业教育的先行者，北大青鸟IT教育创新的职业教育理念和业务经营模式得到了社会的广泛认可：国家人力资源和社会保障部与北大青鸟IT教育实施课程联合认证制度；公司两度入选中华人民共和国商务部评选的“中国连锁经营百强企业”，是迄今为止教育培训领域唯一上榜品牌。公司连续两年荣获
    18. 			“中国服务业十大优秀特许品牌”称号，并获得中国特许经营协会颁发的中国连锁经营百强和中国特许经营年度大奖；获得新浪颁发的“中国教育杰出贡献奖”和“中国十大品牌教育集团”称号；并赢得
    19. 			“中国IT公众认知企业金奖”、“本土最具知名度认证奖”、“最佳就业认同奖”、“质量放心用户满意双优品牌”、“最佳实用课程奖”等数十个奖项。人民日报、光明日报、经济日报、解放日报、中国青年报、中国计算机报等几十家权威媒体对公司进行了多方面的报道。
    20. 		p>
    21.  
    22. 		<p>2000年，北大青鸟IT教育创造性地将特许经营模式引入到IT职业教育领域，在全国建立“北大青鸟APTECH计算机授权培训中心”。所有中心实行统一经营管理、严格保证教学质量，受到社会和业界的高度认可。发展速度之快、经营规模之大、学员人数之多，在全国众多IT职业培训机构中一枝独秀。成立至今，北大青鸟IT教育先后培养<span>45span>万名学员进入IT行业。
    23. 		p>
    24. 	body>
    25. html>

    附录：

            image文件夹中的照片为：

  • 相关阅读:
    基于.NET、Uni-App开发支持多平台的小程序商城系统 - CoreShop
    Dart 3.2 更新，Flutter Web 的未来越来越明朗
    BOM之location对象
    Spring的后处理器
    8、统一处理异常（控制器通知@ControllerAdvice全局配置类、@ExceptionHandler统一处理异常）
    docker-compose 网络配置- IP 主机名 hosts配置
    Docker systemctl 安装配置
    nvm多node版本windows版安装与使用（踩坑记）
    宠物品牌新媒体推广有哪些技巧和方法
    Window环境下安装VMware虚拟机来安装 CentOs7
  • 原文地址：https://blog.csdn.net/qq_42263859/article/details/126179093