css 导入方式
css 导入方式其实就是 css 代码和 html 代码的结合方式。CSS 导入 HTML有三种方式：
内联样式：在标签内部使用style属性，属性值是css属性键值对
<div style="color: red">Hello CSS~</div>此方式只能作用在这一个标签上，如果其他的标签也想使用同样的样式，那就需要在其他标签上写上相同的样式。复用性太差。
内嵌样式：定义<style>标签，在标签内部定义css样式
<style type="text/css">
div{
color: red;
}
</style>这种方式可以做到在该页面中复用
外部样式：定义link标签，引入外部的css文件
编写一个css文件。名为：demo.css，内容如下:
div{
color: red;
}在html中引入 css 文件。
<link rel="stylesheet" href="demo.css">这种方式可以在多个页面进行复用。其他的页面想使用同样的样式，只需要使用 link 标签引入该css文件。
项目目录结构如下
颜色表现形式
关键字：预定义的颜色名 eg：reg、green、blue……
rgb表示法：红绿蓝三原色，每项取值范围0-255 eg：egb(0,0,0)、egb(255,255,255)、egb(255,0,0)
十六进制表示法：#开头，将数字转换成十六进制表示 eg：#000000、#ff0000，简写：#000、#f00
这里推荐一个颜色选择器浏览器插件，可快速获取颜色的rgb表示或者十六进制表示法：
live color picker
CSS选择器
一下三种选择器，谁选的范围小，谁就优先生效
css 选择器就是选取需设置样式的元素（标签），比如如下css代码：
div {
color:red;
}如上代码中的 div 就是 css 中的选择器。我们只讲下面三种选择器：
元素选择器
元素名称{color: red;}
eg：
div {color:red} /*该代码表示将页面中所有的div标签的内容的颜色设置为红色*/id选择器
#id属性值{color: red;}
eg：
html代码：<div id="name">hello css2</div>
css代码：#name{color: red;}/*该代码表示将页面中所有的id属性值是 name 的标签的内容的颜色设置为红色*/类选择器
.class属性值{color: red;}
eg：
html代码：<div class="cls">hello css3</div>
css代码：.cls{color: red;} /*该代码表示将页面中所有的class属性值是 cls 的标签的内容的颜色设置为红色*/<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css选择器</title>
<style>
div{
color: red;
}
#name{
color: blue
}
.cls{
color: pink;
}
</style>
</head>
<body>
<div>div1</div>
<div id="name">div2</div>
<div class="cls">div3</div>
<span class="cls">span</span>
</body>
</html>CSS属性
太多了，推荐去w3school看
盒子模型
盒子：页面中所有的元素（标签），都可以看做是一个 盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）
CSS盒子模型，其实和日常生活中的包装盒是非常类似的，就比如：
布局标签：实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的布局标签。
标签：<div> <span>
特点：
div标签：
一行只显示一个（独占一行）
宽度默认是父元素的宽度，高度默认由内容撑开
可以设置宽高（width、height）
span标签：
一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高（width、height）
1059
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
