css基础选择器、文字、文本相关属性

一、css基础选择器

1.1 通配符选择器 * 表示

作用：能够选中所有标签

*{
            background-color: pink;
} 
​
​
​
​
/* 清除掉浏览器的默认样式 */
    *{
            padding: 0;
            margin: 0;
            list-style: none;
    }
​
面试题：为什么清除浏览器的默认样式
因为每个浏览器的默认样式不相同，为了页面能够在各个浏览器都能相同的展示，以及方便页面的布局，所以要清掉默认样式。
​

1.2 标签选择器 （元素选择器）

作用：能够选中当前页面的某个标签，比如div 就选中所有div

       /* 标签选择器    根据标签名 选中 */
        标签名字{
            样式
        }
​
        div{
            width: 50px;
            height: 50px;
            background-color: red;
        }
        p{
            width:100px;
            background-color: purple;
        }
        span{
            background-color: tomato;
        }

1.3 类选择器 （class选择器） 以. 表示

class="box" 选中所有类名叫box的标签

  <div class="box">div1</div>
    <div class="box wrap div2">div2</div>
    <p>p1</p>
    <p>p2</p>
    <h2 class="box">h2  111</h2>
    <h2>h2  222</h2>
    <span> span1 </span>
    <span class="box wrap"> span2 </span>
    <div>
        <div class="box">div3</div>
        <div>div4</div>
    </div>
    <strong class="box wrap">strong</strong>
​
<style>
    .box{
        
    }
    .wrap{
        
    }
</style>
​
​
​
/*结论：
            1、同一个类名  可以被多个标签使用 (不同的标签名也可以用)
            2、一个标签身上可以有多个类名 （多个时类名中间以空格隔开） 这种形式叫词列表
 */
​
​
类名 和 id 名的命名规则
1、类名以字母、数字、连字符-_ 组成
2、类名不能以数字开头
3、不能使用除了连字符之外的特殊字符
4、类名区分大小写

1.4 id选择器 用#表示

 <p id="p1">p1</p>
 
 <style>
    #p1{
            background-color: red;
        }
 </style>
 
   一个id名不可以应用给多个标签，id具有唯一性
   一个标签 不能设置多个id名 （id不支持词列表）

1.5 基础选择器优先级

  /*
         *通配符< 标签 < 类class < id 
            0      1      10      100
  */
                               
                               
                               
                               
           *通配符< 标签 < 类class < id < 行间样式
            0      1      10      100    1000

二、文字相关样式

2.1 font-size 文字大小

浏览器的默认字体大小是16px
浏览器支持的最小字体是12px / 8px  (看电脑情况)
​
如何测量字体大小，在ps里 量文字的高度  是多高就是多少px
​
ps：
测量时，如果单位是厘米换成像素   方法   编辑 -> 首选项 -> 单位与标尺 -> 把厘米换像素

2.2 font-style 文字样式

    p{
            font-style: italic / normal;  italic 倾斜  normal正常
    }

2.3 font-weight 文字加粗

      b{
           font-weight: normal; 不加粗
      }
  
      span{
            font-weight: bold;  加粗
            font-weight: 900;
        }
    支持 100-900 之间的取值  100 200 300 400 。。。。900
    100-500 相当于mormal
    600-900 相当于bold

2.4 color 文字颜色

p{
    color: yellow;
}
​
关于颜色的三种表示形式
1、英文单词 yellow  red  green  blue  purple  white  black...
2、十六进制  #ff5e8a;
            六位字符组成  每一位都是1-9 a-f 组成
           #ffffff  纯白  可以写成  #fff
           #000000  纯黑  可以写成  #000
           #ff0000  纯红  可以写成  #f00
           #00ff00  绿色   可以写成 #0f0
           #0000ff  蓝色 可以写成   #00f
3、rgb     rgb(255, 94, 138)
    color: rgb(255, 94, 138);   
            rgb(255,0,0) 红色
            rgb(0,255,0) 绿色
            rgb(255,255,255) 白
            rgb(0,0,0) 黑

2.5 line-height 行高

一行文字的高度

如果实现单行文本垂直居中，line-height：容器的高度；

 line-height: 2;  数字 倍数 不要加单位（是font-size的倍数）
 line-height: 30px;  具体测量的行高
 ps里多行文本测量行高的方式，从第一行文字的底下测量到第二行文字的底下，这段距离就是行高

2.6 font-family 字体 （楷体、宋体、黑体...）

字体分成两大类：衬线字体 serif 和 无衬线字体 sans-serif

    /* 如果写的是多个字体 中间用逗号分隔，使用的是浏览器所支持的第一个字体 */
     /* font-family: 火柴体,楷体,黑体,宋体,微软雅黑,sans-serif; */
     font-family: 微软雅黑;

2.7 font 复合写法

复合写法的顺序：
font:font-style font-weight font-size/line-height font-family;
 font:italic bold 30px/1.5 宋体;  一种字体
 font: italic bold 30px/1.5 宋体,楷体,sans-serif;  多种字体
​
如果要使用复合写法，必须要写两个属性  font-size   font-family
 font:30px 宋体;