前端学习笔记

day03
1）文本规则：对文本进行加粗、倾斜、颜色的修改等等

1. 大小，字体的大小属性 font-size
   取值 数值+单位 默认16px。最小12px

    <style> 
	    .size{
	    font-size:20px;}
    </style>
   <p class="size">daxiao</p>

2. 字体，修改文字类型 font-family
   取值 : 字体 ( 宋体,隶书,楷体,黑体,微软雅黑等等 )
   默认字体大小 : 宋体;
   高版本浏览器 : 微软雅黑;

<style> 
	    .size{
	    font-family:宋体;}
</style>
 <p class="size">daxiao</p>

3. .加粗，font-weight
   取值 :
   1)数值类型
   100-900 (100-细体; 400-正常字体; 700-加粗字体; 900-更粗字体)
   2)关键词类型
   lighter-细体
   normal-正常字体
   bold-加粗字体
   bolder-更粗字体
   注意事项 : 900和700 以及bold和bolder 都能实现加粗效果, 但是900和bolder更加具有强调性 。

<style> 
	    .size{
	    font-weight:bold;}
</style>
 <p class="size">daxiao</p>

4. 颜色，color属性
   取值 :
   1)颜色单词 : red,green,blue,yellow,purple,plum,aqua,yellowgreen,greenyellow,transparent(透明颜色)
   2)#六位十六进制颜色 : 十六进制颜色取值0-9A-F
   color:#112233
   详解:第12位代表的是红色; 第34位代表的是绿色; 第56位代表的是蓝色
   如果:每个颜色相邻的两位都取值一样,则可以进行简写
   例如:#112233 简写:#123
   例如:#22ccdd 简写:#2cd
   例如:#112212 不能简写, 因为蓝色的取值不同
   3)rgb(red,green,blue) : rgb颜色也是开发中经常使用的一个颜色, 红绿蓝三个颜色取值范围为:0-255;包含0,包含255;

<style> 
	    .size{
	    color:red;}
	    .size1{
	    color:#252525;}
	    .size2{
	    color:rgb(255,255,255);}
</style>
 <p class="size">daxiao</p>
 <p class="size1">daxiao</p>
 <p class="size2">daxiao</p>

5. 大小写转换 text-transform
   含义 : 用来控制英文文本的修饰
   取值 :
   1)none;默认效果
   2)capitalize;英文文本每一个英文单词首字母大写
   3)uppercase;全都变成大写字母
   4)lowercase;全都变成小写字母

<style> 
	    .size{
	    text-transform:uppercase;}
	    .size1{
	     text-transform:capitalize;}
	    .size2{
	     text-transform:lowercase(255,255,255);}
</style>
 <p class="size">Adaxiao</p>
 <p class="size1">Adaxiao</p>
 <p class="size2">Adaxiao</p>

6. 小型大写字母，font-variant
   含义 : 小型大写指的是,让所有的小写字母都变成大写字母,并且这个转换后的大写字母占四线三个中的中间位置;
   取值 :
   1)normal;默认效果
   2)small-caps;用来实现小型大写

<style>
    .size{
        font-variant:small-caps;
    }
</style>
<p >原始:欢迎来到HarmonyOS, 我们开始学习了, My name is Harmony</p>
<p class="size">修饰:欢迎来到HarmonyOS, 我们开始学习了, My name is Harmony</p>

2)背景颜色：background-color
取值 :
1)颜色单词
2)#六位十六进制
3)rgb()颜色
4)rgba()颜色 a代表的是alpha透明度 取值0-1之间的小数, 经常保留1位, 可以取值为0, 可以取值为1; 0代表的是透明; 1代表的是不透明 ，opacity:0；区块所有的标签内容都变透明。

<style>
    div{
        width:200px;
        heght:200px;
        background-color:red
    }
</style>
<div>
	普通的div元素
</div>

3）浮动属性 : float
取值 :
1)left: 都添加左浮动, 解决元素横向显示问题, 代表的是从左向右依次显示
2)right: 都添加右浮动, 解决元素横向显示问题, 代表的是从右向左依次显示

<style>
    .box{
        width:600px;
        height:600px;
        border:10px solid gray;
    }
    .red{
        width:100px;
        height:100px;
        background-color:red;
        float:left;
    }
    .green{
        width:200px;
        height:100px;
        background-color:red;
        float:left;
    }
    .blue{
        width:150px;
        height:100px;
        background-color:red;
        float:left;
    }
</style>
<div class="box">
    <div class="red"></div>	
    <div class="green"></div>
    <div class="blue"></