关于CSS的小结(一)之基础知识

对于CSS,我们要了解的基础知识也并没有很多,可能会有很多用CSS实现一些功能这样的零敲碎打的东西,例如说:文字溢出省略号代替等,这些我们在之后再说,这篇文章就总结一下基础知识,主要还是CSS的用法。

一、CSS简介

1、中文名:层叠样式表

2、英文名:Cascading Style Sheets

3、它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

4、CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页元素进行格式化。

二、CSS层叠次序(优先权从高至低)

1、内联样式(写在HTML标签中,位于元素的内部)

例如:<div style="color:red"></div>

2、内部样式表(位于<head>标签内部)

例如:<head>

                <style>

                    div{color:red}

                </style>

         </head>

3、外部样式表

将css代码写在一个.css文件中,在html中引入外部样式表

<link rel="stylesheet" href="aaa.css">

这里说一下,引用.css有两种方式:

①在html中引用,使用link标签

<link rel="stylesheet" href="aaa.css">

这种方式呢,link并行加载.css文件,在页面显示之前全部加载完。

②在.css文件中引用,使用import标签

@import url('aaa.css');

这种方式会导致样式表逐个加载,会产生闪烁(页面重绘)的现象。

综上,两种方式。

三、CSS的选择器

CSS的选择器也就是选择了哪个标签,要给哪个标签添加什么样的样式,我们可以给这个标签添加class或者id属性,他们对应的选择器就叫做类选择器和id选择器。还有一个很常用的就是伪类选择器,例如说: :hover、:first-child等。对于选择器我的建议就是使用这三种(当可能有其它特殊需求时再做其他选择)。

所代表类选择器的符号:'.',id选择器的符号:'#',伪类选择器就是在类选择器或者各种选择器后面加上,例如.nav:hover。

也有用符号连接两个选择器,我用的最多的就是‘,’,用逗号连接两个选择器,意思就是这两个选择器有共同的属性了,这样就可以简便代码。

选择器同样也有优先级,比如说<div class="aaa"></div> 我们写的有两种,.aaa{}和div{},那么这两个选择器的优先级,是.aaa>div,所以我们得到结论,类选择器的优先级要高于标签选择器,下面我们来说一说选择器权重优先级:

!important>内联>ID>类选择器>标签|伪类|属性选择器>伪对象>继承>通配符

这里面有几种选择器我没有一一概述,因为我觉得确实没什么用,等到用到的时候,再进行查阅就完全OK的。

四、CSS的规范

1、每一个属性的后面一定用";"结尾,为什么这样,“;”代表着一个属性的结尾,如果不加,计算机无法识别哪里是结束,也就无法展现在我们面前一个美腻的网页了。在一个选择器中最后一个属性可以不加,但是为了良好的代码规范,我们同样要养成良好的代码习惯,我们就都加上就好了。

2、注释:CSS的注释,不管是多行还是一行,都是/*内容*/

五、CSS的属性

CSS的属性太多太多了,我就不一一列举了,这个就需要我们去记了,当然不是死记硬背。接下来的文章就会根据CSS的属性实现一些功能。

猜你喜欢

转载自blog.csdn.net/Alberqing_/article/details/80217356