前言
之前已经讲完了HTML,没看的可以先回去看看便于理解,看过的小伙伴就可以直接进入css的学习了!
基础
网页分为三个部分
结构:html
表现:css
行为:javascript
css 层叠样式表:网页实际上是一个多层结构,通过css可以分别为网页的每一个层来设置样式,而最终我们能看到的只是网页的最上边一层,总之,css用来设置网页中的样式
使用css来修改元素的样式的方法:
- 第一种方式(内联样式,行内元素) 不推荐使用:
在标签内部通过style属性来设置元素的样式
问题:
使用内联样式,样式只能对一个标签生效,
如果希望影响到多个元素时必须在每一个元素中修改一遍
并且当样式发生改变时,我们必须要一个一个修改
开发时,绝对不要使用内联样式!!!!!! - 第二种方式(内部样式表):
将样式编写到head中的style标签里
然后通过css的选择器来选中元素并为其设置各种样式
可以同时为多个标签设置样式,并且修改时只需要修改一处即可全部应用
更加方便对样式进行复用
问题:
我们的内部样式表只能对一个页面起作用
他里面的样式不能跨页面进行复用 - 第三种方式(外部样式表):
可以将css样式编写到一个外部的css文件中
然后通过link标签来引入外部的css文件
将样式编写到外部的css文件中,可以使用到浏览器的
缓存进制,从而加快网页的加载速度,提高用户的体验
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style >
p1{
color:royalblue;font-size:60px;
}
</style>
// 上面是第二种方法
// 下面是第三种方法,通过link标签引入,rel属性默认就行,只需调整href属性
<link rel="stylesheet" href="./01style.css">
</head>
综上所述,如果只是写一个简单网页的话可以使用第二种方式,但随着学习的深入你会发现一个网页的css成千上万行,这个时候一定要用第三种方法来引入css样式表,不然你会崩溃的(别问我为什么知道。。)
所以现在统一用第三种方法是最好的!!!
css基本语法
主要分为两个方面:选择器和声明块
选择器:通过选择器可以选中页面中的指定元素,比如p的作用就是选中页面中所以的p元素
声明块:通过声明块设置元素样式
声明块由一个个声明组成
声明是一个名值对结构
一个样式名对应一个样式值,名和值通过:连接,以;结尾
例子如下:
p{
color: royalblue;
font-size: 50px;
}
h{
color: seagreen;
font-size: 50px;
}
结尾
这个就是最基础的了解,接下来我将对选择器进行着重讲解,这个可以说是css最重要的东西,有很多坑!!!