基础选择器+文本相关设置

基础选择器

分类

• 标签选择器
• 类选择器
• id选择器
• 通配符选择器

用法

标签选择器

标签名{
    属性1:值1;
    属性2:值2;
}

类选择器

.类名{
    属性1:值1;
    属性2:值2;
}

id选择器

#id名{
    属性1:值1;
    属性2:值2;
}

通配符选择器[实际开发用的很少]

*{
    属性1:值1;
    属性2:值2;
}

css引入方式

分类

• 内嵌式
• 外链式
• 行内式

用法

内嵌式

写在style标签中

<style>
    选择器{
        属性1:值1;
        属性2:值2;
    }
</style>

外链式

写在link标签中，link标签一般写在head标签中，也可以写在body标签中。

<link rel="stylesheet" href="你自己的css的路径">

行内式

写在标签的style属性中

<标签名 style="属性1:值1;属性2:值2;"></标签名>

字体文本样式

分类

• 字体大小[谷歌浏览器默认16px]
  

  • font-size:16px;
    

• 字体粗细
  • 关键字
    • 正常粗细

      font-weight:normal;
      

    • 加粗

      font-weight:bold;
      

  • 数值
    • 100~900的整百数

    font-weight:400;
    

    
    

注意：不是所有字体都提供了九种粗细，因此部分取值页面中无变化 实际开发中以:正常、加粗两种取值使用最多

• 字体样式(是否倾斜)
  • 正常

    font-style:normal;
    

  • 倾斜

    font-style:italic;
    

• 字体系列

  font-family: "微软雅黑", "Microsoft YaHei", sans-serif;
  

  • 优先使用 “微软雅黑”，如果没有则尝试 “Microsoft YaHei”，最后使用系统默认的无衬线字体。

文本样式

分类

• 文本颜色

  • color:red;
    

• 水平缩进

  • text-indent:2em;<!-- 2em 表示当前元素的字体大小的两倍-->
    text-indent:20px;<!-- 20px 表示20像素-->
    

• 文本对齐方式

  text-align:left;<!-- 左对齐-->
  text-align:right;<!-- 右对齐-->
  text-align:center;<!-- 居中对齐-->
  text-align:justify;<!-- 两端对齐--> 
  

• 居中对齐
  • text-align : center 能让哪些元素水平居中?
    
    1. 文本
    
    2. span标签、a标签
    
    3. input标签、img标签
    
    如果需要让以上元素水平居中， text-align : center 需要给以上元素的 父元素 设置
  • div居中对齐

    <div style="width:500px;height:500px;background-color:red;margin:0 auto;">
        <p>我是div中的文本</p>
    </div>
  

• 划线(上划线 下划线 删除线)

text-decoration:underline;<!-- 下划线-->
text-decoration:line-through;<!-- 删除线-->
text-decoration:overline;<!-- 上划线-->
text-decoration:none;<!-- 取消下划线、删除线、上划线-->  

• 行间距

    line-height:1.5;<!-- 1.5 表示当前元素的字体大小的1.5倍-->
    line-height:20px;<!-- 20px 表示20像素-->

• 常用作用：
  让单行文本垂直居中可以设置 line-height : 文字父元素高度
  
  网页精准布局时，会设置 line-height : 1 可以取消上下间距