CSS基础——CSS 基础(上)

目录

CSS语法

开发工具

块元素和内联元素

选择器

元素选择器

id选择器

类选择器

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

交集选择器(复合选择器)

通配选择器

元素间关系

后代元素选择器

子元素选择器


CSS语法

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

css语法:

        选择器        声明块

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

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

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

开发工具

开发工具:hbuilder

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

块元素和内联元素

<div>

块元素:

其实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;}

元素间关系

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

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

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

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

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

后代元素选择器

选中指定元素的后代元素

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

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

子元素选择器

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

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

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

猜你喜欢

转载自blog.csdn.net/ybb_ymm/article/details/130187795
今日推荐