字体样式、文本样式

字体样式

 p {
        /* 字体大小
        浏览器默认文字大小是16px
        单位一定要设置，否则无效 */
        font-size: 24px;
        /* 字体粗细
        bold  加粗
        font-weight: lighter;
         纯数字：100-900的整百数
        */
        font-weight: lighter;
        /* 字体样式 
        normal （默认值） 正常
        italic  倾斜
        */
        font-style: italic;
        /* 字体
        "Microsoft YaHei" 微软雅黑  黑体 宋体 楷体....
        网页开发时，尽量使用系统常见自带的字体，保证不同用户浏览器都能正常显示
        */
        font-family: '楷体', '黑体';
      }
​
      .one {
        /* 复合写法  连写
        font:style weight size family;
​
        只能省略前两个，省略了相当于设置了默认值
        同时设置单写和连写形式：
        要把单写的样式写在连写的下面
        要么把单写的样式写在连写里面
        */
​
        /* font: italic bold 20px '楷体'; */
​
        font: italic 20px '楷体';
        /* font-style: italic; */
      }

样式层叠问题

/* 同一个标签设置了相同的样式  如何渲染?
      
      样式会层叠(覆盖)，写在最下面的会生效
      css  层叠样式表
      层叠就是叠加的意思，样式可以一层一层的叠加覆盖
      */
      p {
        color: red;
        color: brown;
      }

文本样式

缩进

<style>
      p {
        font-size: 24px;
        /* 文本缩进
        数字+px
        数字+em  (推荐  1em=当前标签的font-size的大小)
        */
        /* text-indent: 32px; */
        text-indent: 2em;
      }
    </style>

 

水平对齐方式

text-align 可以让 a img input span 这些行内块元素水平居中

<style>
      p {
        /* 
        如果需要让文本水平居中，text-align给文本所在的标签设置(文本父元素)
        文本水平对齐方式 
        left  居左
        center  居中
        right  居右
        */
        text-align: right;
      }
      .one {
        /* text-align 可以让 a img input span 这些行内块元素水平居中  ，
        给这些元素的父元素加text-align属性 */
        text-align: center;
      }
    </style>

文本修饰

 <style>
      p {
        /* 文本修饰
        underline 下划线 (常用)
        line-through 删除线(不常用)
        overline  上划线 (几乎不用)
        none 无装饰线  (最常用)
​
        开发中使用text-decoration: none; 清除a标签默认的下划线
        */
        text-decoration: overline;
      }
      a {
        /* 无装饰线  */
        text-decoration: none;
      }
    </style>

行高

控制一行的上下间距

<style>
      * {
        margin: 0;
      }
      /* 控制一行的上下间距 
      行高
      取值:  数字+px   倍数(当前标签font-size的倍数)
      应用:
      让单行文本垂直居中  line-height:文本父元素的高度
      网页精准布局，设置line-height:1取消上下间距
      */
      p {
        /* line-height: 30px; */
        /* line-height: 2; */
​
        /* 
         font:style weight size/line-height family;
        */
​
        font: italic bold 30px/40px '楷体';
      }
      .main {
        
        height: 40px;
        line-height: 40px;
      }
    </style>