• HTML连载13-CSS基本格式以及文字相关的属性


    一、CSS格式

    1.注意点:

    (1)style标签必须写在head标签的开始标签和结束标签之间(也就是必须和title标签师兄弟关系)

    (2)style标签中的属性type属性其实可以不写,默认就是type="text/css"

    (3)设置样式是必须按照固定格式来设置,key:value;其中不能省略冒号和分号(最后一个分号的时候可以省略,但是我们不提倡)

    二、CSS包括什么?

    CSS包括选择器和属性两部分

    其中选择器就是标签名称,属性就是属性名称和值

    <!--CSS的格式-->
    
    <head>
    
      <style type="text/css">
    
        标签名称:{
    
                  属性名称:属性值
    
                  ......
    
                  }
    
      </style>
    
    </head>

    三、常见的文字相关的属性

    1.规定文字样式的属性

    (1)格式:font:normal;

    (2)常见取值:i.normal:正常的文字;ii.italic:倾斜的文字

    (3)快捷键:(由于我们使用的是wbstorm,在企业开发过程中掌握某些软件的快捷键是很有必要的,可以达到事半功倍的效果)

    fs+table代表font-style:italic;

    fsn代表font-style:normal;

    2.规定文字粗细的属性

    (1)格式:font-weight:bolder;

    (2)常见的取值:

    i.单词取值:

    bold加粗;bolder更粗;lighter:细线(注意:默认是细线的格式,并且有的字体加粗是有上限的,并不是能变得更粗)

    ii.100-900之间整百的数字。

    (3)快捷键:

    fw代表font-weight::

    fwb代表font-weight:bold;

    fwbr代表font-weight:bolder;

    3.规定文字大小的属性

    (1)格式:font-size:30px;

    (2)单位:px,这里是以像素来显示的(pixel),并且这个单位是不能省略的。

    (3)常见的取值:数值加单位

    (4)快捷键:

    i.fz代表font-size:;

    ii.fz20代表font-size:20px;

    这里面是支持直接加个数字的

    4.规定文字字体的属性

    (1)格式:font-family;“”微软雅黑”

    (2)常见取值:微软雅黑、宋体(默认)、.......(word中有好多中字体)

    (3)注意:取值如果是中文的话,一定要用引号来括起来;使用到的取值必须是电脑中提前装好的字体

    (3)快捷键:

    ff代表:font-family:;(不过在我的webstorm不行,估计版本过低)

    <head>
        <meta charset="UTF-8">
        <title>d60&61_fixed_format_of_CSS&text_attribute</title>
        <style>
            p{
                font-style:italic;
                font-weight:900;
                font-size:50px;
                font-family:"微软雅黑";
            }
        </style>
    </head>
    <body>
    <!---->
    <p>我是一个段落</p>
    <hr>
    <hr>
    <i>被废弃的倾斜</i>
    <br>
    <b>被废弃的加粗</b>

    四、源码:

    d60&61_fixed_format_of_CSS&text_attribute

    地址:

    https://github.com/ruigege66/HTML_learning/blob/master/d60%2661_fixed_format_of_CSS%26text_attribute

    2.CSDN:https://blog.csdn.net/weixin_44630050(心悦君兮君不知-睿)

    3.​博客园:https://www.cnblogs.com/ruigege0000/

    4.欢迎关注微信公众号:傅里叶变换,后台回复“礼包”获取Java大数据学习视频礼包。​

  • 相关阅读:
    全局数据共享微信小程序开发(二十九 )
    使用 npm 包① Vant Weapp微信小程序开发(二十七 )
    自定义组件⑥组件的生命周期微信小程序开发(二十三)
    自定义组件⑧父子组件之间的通信微信小程序开发(二十五)
    Django服务器部署到腾讯云
    Windows虚拟环境在PyCharm中的使用
    JavaWeb使用教程
    二进制压缩算法
    Ubuntu+Windows双系统安装指南
    基于双目摄像头的障碍物检测
  • 原文地址:https://www.cnblogs.com/ruigege0000/p/11055825.html
Copyright © 2020-2023  润新知