CSS基础知识总结(1)

1、CSS引入有哪几种方式?分别说说三种方式的使用方法和优缺点。

三种:元素选择器,类选择器,id选择器。

元素选择器就直接使用该HTML元素名称,在该元素名称下面写样式并进行应用。

类选择器在CSS样式中,需要在类名的前面加上.,在HTML元素当中,我们应用起来就是元素名 class="类名“。

Id选择器在CSS样式当中,需要在ID名字前面加上.,在HTML元素当中,我们应用起来就是元素名 id="id名称"。

它们之间的优先级为ID选择器>类选择器>类型选择器。

类型选择器的话,它有一个问题就是它覆盖范围很广,例如我们写P{ };那么所有的P元素都会应用上该样式,如果我们不想这样做的话,我们需要引入类选择器,这个也是应用最为广泛的选择器,他会在所有我么类名相同的元素上面应用它。这个对于id选择器来说,也是类似的,但是id选择器的优先级更高;

我们可以指向特定元素的类,或者多个类指定同一个元素;但是我们需要注意的地方在于,一篇文档中,一个id只能用到一次。

2、CSS的工作原理是什么》浏览器碰到无法解析的CSS会发生什么?

CSS的工作原理是首先把HTML文件进行载入,然后HTML文件会转换为一个DOM,接下来,浏览器会拉取该文件的大部分内容(包括CSS),然后浏览器会对拉取到的CSS内容进行解析,根据选择器类型的不同,把它们分到不同的地方集中存放,然后浏览器将它找到的不同的选择器的不同的规则应用到对应的DOM节点,并添加节点依赖的样式(渲染树),渲染树会依照应该出现的结构进行布局。然后网页显示出来(着色)。

浏览器碰到无法解析的CSS时,会直接跳过它,进行下一个样式的解析。

3、CSS当中的注释。

/**/

4、CSS中的边框属性,上下左右设置的顺序是?

按照顺时针的顺序,上右下左;

如果我们设置了一个值,那么四条边样式都是这个;

如果我们设置了两个值,那么上下的样式是第一个值,左右的样式是第二个值;

如果我们设置了三个值,那么上下的样式分别为第一个,第三个值,左右的样式均为第二个值。

5、CSS中实现文本首行空两格。

text-indent: 2em;
6、em和px单位的区别,em和rem的区别。
px是绝对单位,em是相对单位,其中em是相对于元素的字体大小。rem指的是相当于根元素的字体大小,它不会继承其父元素的字体尺寸。

 

posted @ 2024-07-05 12:05  Tomhard  阅读(10)  评论(0编辑  收藏  举报