如果将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先说这么多了,想到再来补充,总之这个需要多加练习,多打代码,只是看教程而不去实验是怎么也学不会的