CSS基础——CSS 基础（上）

目录

CSS语法

开发工具

块元素和内联元素

选择器

元素选择器

id选择器

类选择器

选择器分组(并集选择器）

交集选择器（复合选择器）

通配选择器

元素间关系

后代元素选择器

子元素选择器

---

CSS语法

css 注释：作用和HTML注释类似，只不过他必须编写在style标签中，或者是css文件中

css语法：

        选择器        声明块

        选择器：通过选择器可以选中页面中指定的元素，并且将声明块中的样式应用到选择器对应的元素上。（元素就是标签，标签就是元素）

        声明块：声明块紧跟在选择器后面，使用一对大括号括起来。声明块中实际上就是一组一组的名值对结构，这一组组的名值对就称之为声明。一个声明块中可以写多个声明，多个声明之间使用分号；隔开。

声明的样式名和样式值之间使用冒号：来连接

开发工具

开发工具：hbuilder

之所以选择它，是因为他是免费的， 而且是国人开发的， 支持全中文模式。

块元素和内联元素

块元素：

其实diva就是一个块元素，所谓的块元素就是会独占一行的元素。

div这个标签没有任何意义，就是一个纯粹的块元素，并且不会和他里面的元素设置任何的默认样式。

div元素主要是用来对页面进行布局的

常用的块元素有p/h1/h2/h3等等

内联元素：

span是一个内联元素（行内元素），所谓行内元素，指的是只占自身大小的元素，不会占用一整行，当一行容不下了，会自动换行

常用的内联元素：a/img/iframe/span

span没有任何意义，span是专门用来选中文字，然后为文字设置样式的

块元素主要用来页面的一个布局，内联元素，主要为选中的文本设置样式，一般情况下只是用块元素包含内联元素，不会使用内联元素包含块元素

a元素可以包含任意元素，除了它本身自己不可以

p元素不可以包含任何其他的块元素

选择器

元素选择器

通过元素选择器可以选中所有的指定元素

语法：标签名：{ }

例：p{ color:red; }      

        h1{ color:red; }      

id选择器

通过元素的id属性选中唯一的一个元素

语法：#id属性值{}

例：#idp{font-size:20px；}

类选择器

通过元素的class属性值选中一个元素

class属性和id属性类似，只不过class属性可以重复，拥有相同的class属性值的元素，我们说他们是一组元素，可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开

语法：.class{}

选择器分组(并集选择器）

通过选择气氛组可以同时选中多个选择器对应的元素

语法：选择器1，选择器2，选择器N{ }

例：#p1,.p2,h1{ background-color:red;}

交集选择器（复合选择器）

可以选中同时满足多个选择器的元素,对于id选择器不建议使用此交集选择器

语法：选择器1选择器2选择器N{ }

例：span.p3{background-color:red;}

通配选择器

选中页面中所有的元素

语法：*{ }

例：*{color:yellow;}

元素间关系

父元素：指的是直接包含子元素的元素

子元素：指的是直接被父元素包含的元素

祖先元素：指的是直接或者间接包含后代元素的元素。所以父元素也是祖先元素

后代元素：指的是直接或间接呗祖先元素包含的元素。所以子元素也是后代元素

兄弟元素：指的是拥有同一个父元素的元素被叫做兄弟元素

后代元素选择器

选中指定元素的后代元素

语法：祖先元素 后代元素{}

注意：和交集选择器不同的是  祖先元素和和后代元素中间的空格

子元素选择器

选中指定父元素的指定子元素

语法：父元素>子元素{}

注意：不同浏览器的支持不同