【CSS】学习笔记2 字体设置 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置字体</title>
<!--字体 font-family
语法： font-family: "字体1","字体2",...
从前往后选择字体，如果不支持字体1就选择字体2以此类推，如果都没有，那么选择系统默认字体
-->
<!--字号 font-size
语法：font-size:大小的取值
-->
<!--字体风格 font-style
语法：font-style:样式的取值
取值有3种：
normal:正常的字体
italic:斜体
oblique:中间状态，以偏斜体显示
-->
<!--字体加粗 font-weight
语法：font-weight:字体粗细值
-->
<!--小写字母转换为大写 font-variant
语法：font-variant:取值
值有2个：一个是normal 正常显示 另一个是small-caps 小写字母转换为大写字母且字体较小
-->
<!--字体复合属性
语法:font:字体取值
可以取值字体族科、字体大小、字体风格、加粗字体等...
-->
<!--颜色属性 color
语法 color:颜色取值
可以是颜色关键字，比如red\blue\green,还可以是16进制数，比如#ff0000\#000099\#ffff00
-->
<!--背景颜色 background-color
语法：background-color：颜色取值
-->
<!--背景图像 background-image
语法：background-image：url（图像地址）
-->
<!--背景重复 background-repeat
语法：background-rapeat:取值
取值说明：no-repeat:背景图像不平铺，repeat：背景图像平铺
repeat-x：背景图像只在水平方向上平铺 repeat-y：背景图像只在水平方向上平铺
-->
<!--背景附件 background-attachment
语法：background-attachment:scroll/fixed
说明：scroll表示背景图像随着对象滚动而滚动，是默认选项
fixed表示背景图像固定在页面上不动，只有其他的内容随滚动条滚动
-->
<!--背景位置 background-position
语法：background-position：位置取值
-->
<!--背景复合属性 bcakground
语法：background:取值
-->
<style type="text/css">
    <!--
    .body{
        /*background: #049C4E;背景颜色*/
        /*background-image: url(https://dss1.bdstatic.com/kvoZeXSm1A5BphGlnYG/skin_zoom/19.jpg);/*背景图像*/
        /*background-repeat: no-repeat;*/
        background: url(https://dss1.bdstatic.com/kvoZeXSm1A5BphGlnYG/skin_zoom/19.jpg) no-repeat left top;/*背景复合属性*/
        
    }
    .h{
        font-family: "宋体";
        font-size: 12px;
        font-style: italic;    /*字体风格*/
    }
    .h3{
        font-family: "宋体";
        font-size: 18px;
        font-weight: bold;/*字体加粗*/
    }
    .h2{
        font-family: "宋体";
        font-size: 16px;
    }
    .h1{
        font-family: "宋体";
        font-size: 14px;
    }
    .h4{
        font-family: "宋体";
        font-size: 24px;
    }
    .j{
        font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
        font-size:12px;
        font-variant: small-caps;/*小写字母转换大写字母*/
    }
    .k{font: bold italic "宋体"}/*字体复合属性*/
    .gh{
        font-family: "宋体";
        font-size:12px;
        color: #9900ff;/*颜色属性*/
        background-color: #FFEB3B;/*背景颜色*/
    }
    .smpimg p{
        font-family: 12;
        font-size: 15px;
        background-attachment: fixed;/*背景附件*/
        background-image: url(smp.jpg);
        background-repeat: repeat;/*背景重复*/
        background-position: center;/*背景位置*/
        color: white;
    }
    .smpimg img{width:600px;height:325px} 
    -->
    </style>
</head>

<body class="body">
    <span class="h">样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。</span>
    <p>通过使用 CSS 我们可以大大提升网页开发的工作效率！</p>
    <p class="h1">通过使用 CSS 我们可以大大提升网页开发的工作效率！</p>
    <p class="h2">通过使用 CSS 我们可以大大提升网页开发的工作效率！</p>
    <p class="h3">通过使用 CSS 我们可以大大提升网页开发的工作效率！</p>
    <p class="h4">通过使用 CSS 我们可以大大提升网页开发的工作效率！</p>
    <p class="j">you are backit with all the good things in this world.</p>
    <p class="k">HTML学习</p>
    <p class="gh">这是一段有颜色的文字</p>
    <div class="smpimg">
    <p>树莓派由注册于英国的慈善组织“Raspberry Pi 基金会”开发，Eben·Upton/埃·厄普顿为项目带头人。<br>2012年3月，英国剑桥大学埃本·阿普顿（Eben Epton）正式发售世界上最小的台式机，又称卡片式电脑，外形只有信用卡大小，却具有电脑的所有基本功能，这就是Raspberry Pi电脑板，中文译名"树莓派"。<br>这一基金会以提升学校计算机科学及相关学科的教育，让计算机变得有趣为宗旨。基金会期望这 一款电脑无论是在发展中国家还是在发达国家，会有更多的其它应用不断被开发出来，并应用到更多领域。<br>在2006年树莓派早期概念是基于Atmel的 ATmega644单片机，首批上市的10000“台”树莓派的“板子”，由中国台湾和大陆厂家制造。</p>
    
    <img src="smp.jpg"/>
    </div>
</body>
</html>

 

posted @ 2021-01-28 11:04  木子欢儿  阅读(163)  评论(0)  编辑  收藏  举报