1. CSS基础
1.1 什么是CSS
CSS(Cascading Style Sheets),用来定义页面元素的样式,可以用来:
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
1.2 CSS的使用方法
在页面中使用CSS有三种方法:外联,嵌入,内敛。
1.外联
html部分:
<body>
<div><span>我是一个span标签</span></div>
</body>
再新建一个.css的文件:
<body>
{
background-color:yellow;/*这里将body的背景颜色改为黄色*/
}
</body>
效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/1689c76da96c3d230092a2ec6cc77154.png)
2.嵌入
CSS部分:
<style>
body{
background-color: blue; /*这里将body的背景颜色改为蓝色*/
}
</style>
HTML部分:
<body>
<div>
<span>我是一个span标签</span>
</div>
</body>
效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/003298d0b1c711f0a1932dce2f0d466a.png)
3.内联
<body style="background-color: green;">/*这里将body的背景颜色改为绿色*/
<div>
<span>我是一个span标签</span>
</div>
效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/8d6b490bcb2cc0393e9b967e929d504b.png)
1.3 选择器
定义:选择器selector是用来找出页面中的元素,以便给它们设计样式。
常用的有标签选择器、ID选择器、类选择器、通配选择器和属性选择器。 并且选择器有优先级,优先级越高页面内容就会优先使用该选择器来控制页面内容.优先级从高到低的排序为:ID选择器>类选择器>标签选择器>通配选择器>属性选择器。
例如:
HTML部分:
<h1>
我是被通配选择器选择
</h1>
<h3>
我是被通配选择器选择
</h3>
<p>
我是被标签选择器选中的
</p>
<h1 id="app">
我是被ID选择器选中的
</h1>
<h2 class="qwe">
我是被类选择器选中的
</h2>
<input type="text" value="我是被属性选择器选中的" disabled>
css部分:
<style>
*{
color: red;
}
p{
font-size:18px;
color: blue;
}
#app{
font-size:23px;
color: rgb(255, 0, 212);
}
.qwe{
font-size:23px;
color: green;
}
[disabled]{
background-color: #eee;
color: #888;
border-radius: 15px;
}
</style>
效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/c6af89566fcdc06113ac31d864d85076.png)
其中有一种特殊的选择器---伪类,伪类分为状态伪类和结构性伪类,而伪类的组合方法也是多种多样。如图:
![](https://i-blog.csdnimg.cn/blog_migrate/776cce3b4111110dac695dd72f7955fa.png)
1.4 CSS是如何工作的
浏览器在打开页面时,是加载页面的HTML进行渲染,解析出HTML的DOM树,同时加载并解析CSS,然后浏览器解析DOM树的每个节点,再将相应的CSS样式添加到DOM节点,最后展示页面。
![](https://i-blog.csdnimg.cn/blog_migrate/2a3edc1ecbe0ad8e97fbc3dc91bdd6ee.png)
1.5 盒子模型
CSS 盒子模型本质上是一个盒子,盒子包裹着HTML 元素,盒子由四个属性组成,从内到外分别是: content 内容、padding 内填充、border 边框、外边距 margin
![](https://i-blog.csdnimg.cn/blog_migrate/baa4d395c8c404c5e073ec646cd386fd.png)