html -- 使用CSS修改样式01

    1.通过标签来修改样式的缺点:
    1.1 需要记忆那些标签又那些属性,如果该标签没有这个属性,那么设置了也没有什么效果
    1.2 当需求变更时我们需要修改大量的代码才能满足现有的需求
    1.3 html只有一个作用就是用来添加语义
    
    所以在企业开发中修改样式都交给css来做
    2.通过CSS来修改样式的好处:
    2.1 不用记忆那些属性属于那些标签
    2.2 当需求变更时不需要修改大量的代码就可以满足需求
    2.3 在前端开发中CSS只有一个作用,就是用来修改样式

     <style type="text/css">

    h1{
        text-align: center;
        color: red;
        font-family: "微软 雅黑";
    }
    p{
        text-align: center;
        color:green;
        font-family: "微软 雅黑";
        font-size: 30px;

    }


</style>
  
  <h1 >成功的法则</h1>

<p >迟到毁一生</p>
<p >早退穷三代</p>
<p >按时上下班</p>
<p >必成高富帅</p>

    3.注意点:
    3.1 style标签必须写在head标签的开始标签和结束标签之间,(也就是必须和title标签是兄弟关系)
    3.2 style标签中的type属性其实可以不用写,默认就是type="text/css"
    3.3 设置样式时必须按照固定的格式来设置,key: value 其中不能省略,分号大多数情况下不能省略(无论是否可以省略,但是都不要省略)

     <style>
    p{
       font-style: italic;
        font-weight: bold;
        font-size: 30px;
        font-family: "楷体";


    }
</style>
<!--1.规定文字样式的属性
  font-style: italic;
  normal: 正常的,默认就是正常的
  italic: 倾斜的样式
  快捷键: fsi 然后按下table
         fsn 然后按下table
2.规定文字粗细的属性

   字母取值
bold:加粗
bolder:比加粗还要粗
lighter:细线,默认就是的细线
快捷键:
fwb 然后按下table   font-weight: bold;
fwbr 按下table    font-weight: bolder;

 数字取值
 100 ~ 900 之间整百的数字

3.规定文字大小的属性
font-size: 40px;
单位:px(像素 pixel)
注意点:通过font-size设置大小一定要带单位,也就是一定要写px

快捷键:
fz  font-size:

fz30 font-size:30px;

4.规定文字字体的属性
   font-family: "楷体";
   注意点:
    1.如果取值是中文的话,需要使用单引号或者双引号括起来
    2.设置的字体必须使用户电脑里面安装的字体
    3. ff 然后按下table
-->

    <!--设置的字体就是不存在
    怎么办?
1.如果设置的字体不存在,那么系统会使用默认的字体来显示
2.如果设置的字体不存在,而我们又不想使用默认字体怎么办?

 font-family:"发件方垃圾分类","微软雅黑",,,,;备选方案

3.如果想给中文和英文设置不同的字体怎么办?

但凡中文字体,里面都包含了英文
但凡英文字体,里面都没有包含中文

注意点:如果想给界面中的英文单独设置字体,必须把英文写在前面
补充:在企业开发中最常见的字体有以上几个:
中文:宋体,黑体,微软雅黑          系统自带
英文:Times New Roman  /Arial  系统自带

还需知道:就是并不是名称是英文就一定是英文字体,
因为中文字体其实都有自己的英文名称,所以是不是
中文字体主要看能不能处理中文

宋体 SimSum
黑体 SimHei
微软雅黑 Microsoft YaHei


-->


<style>
    p{
        /*font-family:"发件方垃圾分类","微软雅黑";*/

        font-family:"Times New Roman","微软雅黑";//备选方案用与中文

    }


</style>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容