CSS学习笔记

CSS

内容:

​ 1.CSS简述

​ 2.CSS选择器

​ 3.CSS样式

​ 4.CSS盒子模型

​ 5.CSS和HTML的结合方式


1.CSS简述

1.1 CSS是什么?

​ CSS (Cascading Style Sheets) :层叠样式表

​ 层叠:一层一层叠加

​ 样式表:存储样式的地方,多个样式

1.2 CSS与HTML的区别

​ HTML –> 页面的结构 –> 人的面部(素颜)

​ CSS –> 美化页面 –> 给人化妆

1558934192653

为什么使用CSS替代HTML属性设置样式?

因为HTML属性在单独使用时有一定的局限性,所以要配合CSS样式代码才可以展示更为丰富的效果。

1.3 CSS 的作用

​ CSS作用:修饰HTML页面,更丰富多彩地展示超文本信息

1.4 css的代码规范

放置规范:

​ 在标签方式

当某些样式在页面中被多个标签重复使用,为了编码更加灵活,避免书写重复代码,

我们将样式代码从标签style属性中抽取出来,统一写入到style标签中。

格式:

<style>
       css样式代码
</style>

应用环境:适合页面中进行样式复用

5.2 外部样式

1
2
3
4
5
6
7
8
9
<link/>标签方式
<link/>又称为链入式,是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过<link>标签将样式连接到HTML文档中。

格式:
<link rel="stylesheet" type="text/css" href="css文件路径"/>

 rel="stylesheet" ,固定值,表示样式表
 type="text/css",固定值,表示css类型
 href ,表示css文件位置

适合:不同页面进行样式复用。