CSS和CSS选择器

时间:2022-03-13 20:38:28

一:CSS

CSS有三种书写形式(优先级从高到低)

1)行内样式:(内联样式)直接在标签style属性中书写

2)内页样式:在本网页的style标签中书写

3)外部样式:在单独的CSS文件中书写,然后在网页中用link标签引用

二:CSS选择器:

CSS选择器作用:选择对应的标签,为之添加样式

标签选择器:根据标签名找到标签

类标签选择器:书写规范  以class=“类名”分类  .类名的方式选择

id选择器:书写规范 id=“id名称”划分id #id名称的方式选择

群组选择器:把要选择的类型用,隔开

选择器组合:ex:div.first(就是标签和类标签的组合选择)

后代选择器:ex:div p(div空格p的意思是选择div下的所有p)

 

子标签选择器:针对于直接子标签,ex:div>p(意思是div下面的第一个直接子标签)

相邻兄弟选择器:div+p(意思是找到div相邻的p)  注:不是div里面的子标签p

属性选择器:div name="属性”    选择的话就是div [属性] 属性选择器可以多选,ex:div [属性] [属性]意思是要同时有A和B属性的才选择。

伪类:有很多元素可以是用,有不同的功能,其实元素符号和伪元素之间用:连接

 

三、选择器的优先级

important>内联>id>类>标签、伪类、属性选择>伪元素>通配符>继承

说明:针对性越强优先级越高

 

注:*是通配符,意指所有标签

     !important标签是最优先级的意思

 

四、HTML标签类型

根据显示的类型,主要分为两大类:

块级标签:独占一行的标签 ex:div  块级标签的宽高是可以设定的

行内标签(内联标签):多个行内标签能同时显示在一行 ex:span   行内标签的尺寸取决于里面的内容

看一个标签是什么标签直接设置标签背景色,如果块状的话就是独占一行,能和其它标签处在同一行的就是行内标签

 

修改标签的显示类型

CSS中有个display的属性,能修改标签的显示类型

1)none,隐藏标签

2)block,块级类型,独占一行

3)inline,行内类型(内联类型),多个行内标签可以显示在同一行

4)inline-block,行内-块级类型(内联-块级类型),多个行内块级标签可以显示在同一行,并且能够设置宽高

 

五:CSS属性

根据继承性,主要可以分为两大类

1)可继承属性:父标签的属性值会传递给子标签,一般是文字控制属性

2)不可继承属性:父标签的属性不能传递给子标签,一般是区块控制属性