02 css基础选择器

# 1.css选择器作用 #

找到特点的HTML元素

css分为两件事 选对标签 做对事
选择器分为基础选择器 和 复合选择器


#  2.css基础选择器 ##

## 2.1标签选择器 ##

- 概念
    -  标签选择器（元素选择器）是指用**HTML标签名**称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

- 语法

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

- 作用

    - 把某一类标签全部选择出来 比如所有的div标签 和 所有的span标签

- 优点

    - 快速为页面中同类型的标签统一样式

- 缺点

    - 不能涉及差异化样式


## 2.2类选择器 ##


类选择器使用“.”（英文点号）进行标识，后面紧跟类名.

- 语法：

  - 类名选择器

HTML
 
      .类名  {   
      属性1:属性值1; 
      属性2:属性值2; 
      属性3:属性值3;     
      }
     
      - 标签
      
      <p class='类名'></p>
    

- 优点：

   - 可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签 

- 注意

   - 类选择器使用“.”（英文点号）进行标识，后面紧跟类名(自定义，我们自己命名的)
   - 长名称或词组可以使用中横线来为选择器命名。
   - 不要纯数字、中文等命名， 尽量使用英文字母来表示。

命名规范：  见附件（Web前端开发规范手册.doc）

命名是我们通俗约定的，但是没有规定必须用这些常用的命名。


## 2.3 类选择器特殊用法 - 多类名 ##

    html
   

  <span class="blue font100">G</span>
    
    css选择器
    .font100{
            font-size: 50px
        }
        .blue{
            color: blue;
        }

 

## 2.4 id选择器 ##

    区别于类选择器
    id选择器具有唯一选择性，只能选择一个元素

## 2.5 通配符选择器 ##

    通配符用*号表示， *就是选择所有的标签  他是所有选择器中作用范围最广的匹配所有的元素
    
        *{
    属性1:属性值1；
    属性2:属性值2；
    }
    
    
   

  * {
      margin: 0;                    /* 定义外边距*/
      padding: 0;                   /* 定义内边距*/
     }