前端基础二--CSS的玩法

如果将HTML比作网页的骨架,那么CSS就是网页的皮肤,让我们的网页外表看上去更好看

说CSS之前呢,先要说一下id和class:id就是类似于变量的概念,是唯一的,class则是一个变量组,可以指定多个,通常在HTML中定义,利用CSS的选择器来查找它们,之后修改它们的属性值.

例如:

<div id="post"></div>

<div class="post-content"></div>

<div class="post-content"></div>/*这里class包括了两个部分*/

再来说下CSS的选择器,,id的查找方式为#id名,class的查找方式为.class名,而基本的HTML标签直接用标签名表示:

例如:#post 和.post-content 和a

CSS的选择器利用的是层次结构,分层查找

例如#post .post-conten就是在post内容里的post-content

CSS的结构也非常简单:

选择器{

属性:属性值;/*备注*/

}

就是这么简单的结构,却可以让我们的网页看起来形形色色.

接着我们借用开发者工具(按F12弹出)讲一下每一个网页,每一个网页里的内容都具有的结构

margin(外补),border(边框),padding(内补),height(高度),width(宽度)

这种结构就像我们的快递,外补就像是包装盒外的一层包装纸,边框就是我们的包装盒,内补就是内补用来保护的填充物,而长度和宽度就构成了我们实际买到的东西.(形容非常恰当)

通过这些属性我们可以调节我们内容的位置,大小等等等等属性

注意当两个东西放在一起时,他们的外补会重合在一起

最后讲一下几个常用的伪类:

:active 当前鼠标点下链接的时候

:hover 当鼠标悬浮在元素上方时

:link 当链接还未被访问过时

:visited 当链接被访问过之后

把他们加在选择器后面就是想要的结果了

例如:一个按钮可以通过伪类使我们的鼠标放在上面时有相应的变化

#button:hover{

background:blue;

}

CSS先说这么多了,想到再来补充,总之这个需要多加练习,多打代码,只是看教程而不去实验是怎么也学不会的