前端--css基础 01

css基础笔记01

1. css概念

1. css: 层叠样式表[ Cascading Style Sheets]

2. css与网页之间的关系 :

   css 是依赖于网页的,依赖于HTML的页面

3. CSS的写法：
   ☞ 内嵌式写法： 将CSS代码写到html页面中，通过style标签

   ☞ 外联式写法：将CSS代码单独放到一个CSS文件中，然后通过link标签在HTML页面中引入即可。（项目中推荐使用外联式）

   注意：一个网页中可以同时引用多个css文件

   ☞ 行内式写法： 直接将CSS代码写到标签内部，通过style属性直接设置css代码

   例如<p style="color:red; font-size:50px;">段落标签</p>

4. css语法结构: 通过css语法用来选中页面中对应的标签
   选择器 {
   属性: 值;
   属性: 值;
   …
   } 选择器: 用来选中标签。
   `属性和值： 用来设置标签样式的。

2. 常用选择器

• 2.1 基础选择器

  ✔ 标签选择器：通过HTML标签名选中对应的标签✔ HTMl 标签名 {
          属性：值;
          属性：值;
          ...
                  }
  特点：
     1. 与标签的结构无关。
     2. 标签选择器可以将页面中所有符合标签选中器条件的标签选中
  ✔ 类选择器: 通过标签类名选中对应的标签[必须掌握]
  
      .自定义类名 {
          属性: 值;
          属性：值;
      }  
       <div class="自定义类名"></div>
                  
     命名规范：
  
          1. 类名不能以纯数字或者以数字开头定义类名。
  
          2. 不推荐使用汉字定义类名。
  
          3. 不能使用特殊符号或者以特殊符号开头定义类名
  
          4. 推荐设置具有语义的类名
  
      特点：
          1. 同一个类样式可以同时被多个标签使用
          2. 一个标签可以同时调用多个类样式
  
          例如：  <div class="abc big">第二个div</div>
          
  ✔ ID选择器: 通过标签的ID名选中对应的标签[了解]
  
      #自定义ID名 {
          属性: 值;
          ...
      }
      总结：
          1. ID选择器和类选择器在用法上一样的。
          2. 推荐使用类选择器
          3. 标签的ID值必须保持唯一性
          4. 一个标签只能一次调用一个ID样式。
          5. ID命名规范与类命名规范一样。
  
  ✔ 通配符选择器：将页面中所有的标签都选中
  
      * {
          属性: 值;
      }
  一般在网页中，要给网页中所有的标签设置一个基本的统一样式时候可以使用通配符选择器
  

• 2.2 复合选择器

• 1.后代选择器：【重点】
  语法：
  选择器 选择器 {
  属性: 值;
  …
  }

  特点：
  ☞ 后代选择器只能用在嵌套结构中

    ☞ 在后代选择器中，第一个选择器就是父元素，第二个选择器就是其对应的后代元素
  
    ☞ 后代选择器只能选中所有的子元素（后代元素），不能选中父元素
  
    ☞ 后代选择器中，选择器与选择器之间必须有空格。
  

• 2.子代选择器：

  语法：

    选择器>选择器 {
        属性： 值；
        ...
    }
  

  特点：
  ☞ 子代选择器必须在嵌套结构中使用

    ☞ 第一个选择器是父元素，第二个选择器是子元素
  
    ☞ 子代选择器只能选中父元素中直接的子元素，间接子元素选不中。
  
    ☞ 子代选择器中无法选中父元素
  

• 3.标签指定式选择器

  语法：
  选择器+类名（ID名） {
  属性： 值;
  。。。
  }

  特点：
  既 。。。。 又 。。。

• 4.并集选择器: 将页面中指的标签选中（类似于标签选择器或者类选择器）

  语法：
  选择器,选择器,选择器 {
  属性： 值；
  。。。
  }

  特点：
  ☞ 并集选择器与HTML结构无关

    ☞ 将页面中指的的标签选中，设置一个相同的样式。
  

• 2.3 扩展选择器

  • 属性选择器:
    [ 元素的属性 ]{
    属性： 值；
    。。。
    }

• 伪类选择器
  

• 常用的一些选择器(W3Cschool有很多)

• input的属性选择器