CSS基础知识①

           CSS基础知识①

一、CSS概述

     CSS是Cascading Style Sheets的首字母缩写，意思为层叠样式表。CSS能使网页元素更加丰富，网页的内容和样式能拆分开，使得HTML变得更加简洁。

二、CSS的基础语法：

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

  

三、CSS引入方式

css引入页面的方式有三种：

 

①内联样式：通过标签的style属性，在标签上直接写入样式。

 

②嵌入式：通过style标签，在网页上创建嵌入的样式表。

 

③外链式：通过link标签，链接外部文件到页面中。

四、CSS的选择器

（1）标签选择器

      标签选择器，影响范围大，一般用来做一些通用的设置，或用在层级选择器中。

             

（2）类选择器

          通过类名选择元素，一个类可用于多个元素，一个元素上也可用多个类，应用灵活，可复用，是css中应用最多的一种选择器。

            

（3）层级选择器

         主要应用在标签嵌套的结构中，层级选择器，是结合上面的两种选择器来写的选择器，它可与标签选择器结合，减少命名，同时也可通过层级，限制样式的作用范围。

           

（4）Id选择器

          通过id名来选择元素，元素的id名称不能重复，一个样式设置项只能对应页面上一个元素，id名一般给程序使用，不推荐使用id作为选择器。

          

（5）组选择器

          多个选择器，如果有同样的样式设置，可以使用组选择器。

                

（6）属性选择器

             1.E[attribute]表示存在attr属性即可；div[class]

             2.E[attr=val]表示属性值完全等于val；div[calss=mydemo]

             3.E[attr*=val]表示属性值里包含val字符并且在“任意”位置；div[class*=mydemo]

             4.E[attr^=val]表示属性值里包含val字符并且在“开始位置”；div[class^=mydemo]

             5.E[attr$=demos]表示属性值里包含val字符并且在“结束”位置；div[class$=demos]

（7）伪类选择器—伪元素选择器

           1.以某元素相对于其父元素或兄弟元素的位置来获取元素的结构伪类

           2.n可有多种形式：nth-child(2n)、nth-child(2n+1)、nth-child(-n+5)等

          3.E:first-child:查找E元素的父元素的第一个子元素E

          4.E:last-child：最后一个子元素

          5.E:nth-child(n):第n个子元素，计算方法是E元素的全部兄弟元素。

          6.E:nth-last-child(n):同E:nth-child(n)相似，只是倒着计算

          7.E:nth-child(even)：所有的偶数

          8.E:nth-child(odd)：所有的奇数

          9.E:nth-of-type(n)：指定类型

         10.E:empty 选中没有任何子节点的E元素，注意：空格也算子元素

         11.E:target 结合锚点进行使用，处于当前锚点的元素会被选中

            重点说明：n遵循线性变化，其取值0、1、2、3、4……但是当n<=0时，选取无效。

                   

（8）伪元素选择器

             重点：E::before 、 E::after

          1.是一个行内元素，需要转换成块级元素 display:block 、 float:   、position:

          2. 必须添加content，哪怕不设置内容，也需要content:” ”

          3.E::after 、E::before在旧版本里是伪类，在新版本；里是伪元素，新版本下E::after、E::before会被自动识别为E::after、E::before，按伪元素来对待，这样做的目的是用来做兼容处理

          4.E::before ：定义在一个元素的内容之前插入content属性定义的内容与样式

          5.E::after ：定义在一个元素的内容之后插入content属性定义的内容与样式

           注意：①IE6、IE7与IE8（怪异模式Quirks mode）不支持此伪元素；

                      ②CSS2中 E::before或E::after，是属于伪类的，并且没有伪元素的概念；

                      ③CSS3中，提出伪元素的概念 E::before和E::after，并且归属到了伪元素当中，伪类里就不再存在E::before或者E::after伪类

          6.E::first-letter文本的第一字母或字（不是词组）

          7.E::first-line 文本第一行

          8.E::selection 可改变选中文本的样式