CSS基础内容

说明：      

       CSS是一门定义文档如何展示给用户的语言，包括它们的样式、布局等。

       这里的文档通常是用一种标记语言进行结构化了的文本文件。

       标记语言中HTML是最常被使用的，除了HTML，文档标记语言还有SVG、XML。

       一个CSS规则是由一组属性和选择器组成。

       CSS的属性和值都是大小写敏感的。如果一个属性和一个属性值不匹配，这个属性将完全被忽略。

一、CSS（正式的）说明，声明（statemetn）

     At-rules  在CSS中是用于传递元数据、条件信息、或者其他的信息。格式为：以 @ 开始，后跟标识符（用于说明是什么规则），然后是一个语法块，最后以 “； ”结尾。

      元数据：@charset  和 @import

      条件信息，也称为嵌套语句：@media   和 @document

       描述信息：@font-face

例如：

导入另一个css文件到当前的css文件。

@import 'custom.css';      

嵌套声明

        嵌套声明是At-rules的子集。其语法是一个嵌套块，只有当一个特定的条件匹配的时候，CSS的规则才会被应用到文档中。

@media   当运行的浏览器设备匹配了陈述条件，@media下面的at-rule内容会被应用；

@supports   当浏览器实际上支持测试性能，@support下面的at-rule内容会被应用；

@document  当当前的页面匹配了一些条件，@document下面的at-rule内容会被应用；

例如：  仅仅当页面的宽超过800px像素，@media里面嵌套的像素会被应用

@media (min-width: 801px) {
  body {
    margin: 0 auto;
    width: 800px;
  }
}

 

二、让CSS更具可读性

       2.1  将每一个css声明放到一行上；

       2.2 应当确保至少用一个空格将不同的值分开，但是应当将一个属性的名称作为一个完整的字符串放在一起；

       2.3 css注释，以“/*”开始 ，以“*/”结果。

三、选择器

3.1 简单选择器

        它们基于元素的类型（例如：class、id），直接匹配文档中一个或多个元素。

         3.1.1 类型选择器（又称为，元素选择器）

               选择器的名字匹配元素的名字，是大小写敏感的。

         3.1.2 类选择器

                一个“.”后面跟上类名。类名是任意的非空格的值，位于class属性里面。一个class属性里面可以有多个值，值之间用空格分开。

         3.1.3 id选择器

                一个“#”符号，后面跟给定元素id的名称。任何元素都可以有一个唯一的id。

注意：id属性在浏览器中必须唯一，不唯一将导致难以预测的行为。例如，一些浏览器只计算第一个实例，忽略其他的。

         3.1.4 全体的选择器

         全体选择器用“ * ”表示，这个选择器是极端的小丑。能够选择页面上的所有元素。这个选择器很少被使用。这个选择器能够带来一个可察觉的巨大的性能影响：让web页面比预期的慢。

3.2 属性选择器

      3.2.1 存在和值属性选择器

           试着去匹配精确的属性值。

           [attr]  这个选择器将匹配所有带有属性attr的元素，无论其值是有什么；

           [attr=val] 这个选择器将匹配所有带有属性attr,并且仅当其属性值为val的元素；

           [attr~=val] 这个选择器将匹配所有带有属性attr，并且val为attr的值中庸用格分割列表属性中的一个值。

      3.2.2 字字符串值选择

           [attr^=val]   带有attr属性，并且属性值以val开头

           [attr$=val]    带有attr属性，并且属性值以val结尾

          [attr*=val]      带有attr属性，并且属性值包含val

           [attr|=val]      带有attr属性，并且属性值以val开头  或以  val- 开头。常用于匹配  lang=“US” 或lang=“en-US”  属性。

3.3  伪选择器

       3.3.1  伪类选择器

           是一个关键词跟在一个选择器后面，关键词的前面添加 " : " (冒号)。当被选择的元素处于某种状态时，对其进行样式设置。例如：当光标置于<a>链接之上的时候，设置下划线，并将文本变成红色。

 a:hover {
    text-decoration: underline;
    color: red;
  }

      3.3.2 伪元素

        一个关键词，放在选择器的后面，关键词的前面放两个冒号“ :: ”。

::after
::before
::first-letter
::first-line
::selection
::backdrop

例如：将段落的第一行字体加粗

p::first-line {
    font-weight: bold;
}

3.4  关联选择器和选择器列表 

关联选择器和选择器列表

名称	语法	描述
选择器列表	A, B	任何匹配A和（或）B的元素
子孙 关联选择器	A B	任何匹配B的元素，并且它是匹配A的元素的后代（即，子元素2，或子元素的子元素）
孩子 关联选择器	A>B	任何匹配B的元素，并且它是匹配A元素的直接孩子
相邻兄弟 关联选择器	A+B	任何匹配B的元素，并且它是匹配A元素的下一个（紧挨着A下一个）兄弟元素
一般兄弟 关联选择器	A~B	任何匹配B的元素，并且它是匹配A元素的下面（紧挨着A下面所有）的所有元素

       注意：  如果浏览器不支持选择器列表中的一个，整个选择器列表将被忽略。