【页面设计】02.CSS
CSS：Cascading Style Sheets 层叠样式表
1.不是编程语言。
2.告诉浏览器如何指定样式、布局等
一、基本格式
效果：
二、三种方式添加CSS
1.外部样式表
（1）CSS保存在.css文件中
（2）在HTML的<head>中使用<link>引用
创建方法：
在同级目录下新建一个文件夹，命名为css，并在文件夹中新建一个style.css文件。
在head中输入如下代码即可将文件引入其中
<link rel="stylesheet" href="./css/style.css"/>2.内部样式表
（1）将CSS写在HTML文件里面，不使用外部CSS文件
（2）将CSS放在HTML的<style>里（<style>一般也在<head>里）
3.内联样式
（1）仅影响一个元素
（2）在HTML元素的style属性中添加
<h1 style="color:red">Hello World</h1>三、CSS选择器
对于html文件中的p：
有基本的三种选择方式：
id与class的区别：id是独一无二的，class不是。
示例1：对class操作
html文件内容：
css文件内容：
效果：
如果我们想让文字居中应该怎么做呢：加上margin:auto;就行了！
css代码修改如下：
效果：
示例2：对body操作
根据示例1的html文件，在body中再加上一段文章。
css代码如下：
效果如下：
注意：因为box1在body中，所以对box1的操作优先于对body的操作。
示例3：对box1里面的h1操作
css文件增添代码如下：
效果如下：
另：通过text-align属性可以修改文字的位置，如居中等。
示例四：对list操作
html代码如下：
css代码如下：
效果：List 1前面的点被替换成了图片
list-style属性即为List 1前面的样式。
另：对每行操作
对偶数行操作：
.list li:nth-child(even){
}对奇数行操作：
.list li:nth-child(odd){
}对第一行操作：
.list li:first-child{
}对第三行操作：
.list li:nth-child(3){
}示例五：对button操作
html代码如下：
css代码如下：
hover为鼠标放置在button上时的效果
active为鼠标点击button时的效果
注意：button{}这种写法应用于所有的button
示例六：对<a></a>操作
html代码如下：
css代码如下:
hover为鼠标放置在a上时的效果
visited为当该链接已经去过时显示的效果
示例七：使区块并排
html代码如下：
css代码如下：
效果如下：
ps：当加了边框后超出了100%而三段不为一行时，可以加上box-sizing:border-box;使其成为一行。
pps：一般情况下，当使用完float后要清除它。
html代码如下：
css代码如下：
注：clear:both;为clear left和right。
四、CSS里的颜色
五、CSS里的字体
关于第一个，为什么有两个字体名“Arial”和"Helvetica"呢？
这就涉及到了字体选择，在前面的字体会被优先选择，当找不到“Arial”时，系统则会用"Helvetica"。
关于第二个，为什么字体名会加引号呢？
当字体名由两个及以上的单词组成时，字体名在引用时要加引号。
关于第五个，monospace是什么意思？
等宽字体，我们可以看出，字母'L'与字母'i'是等宽的。
示例1：
六、盒子模型
当盒子们连接在一起时，如下图所示
外边距重叠：两个盒子之间的外边距只会取最大的那个外边距。
边距的多种表示
以margin为例
有另外如下三种表示方式：
第一种：上右下左（以顺时针的方向指定）边距
第二种：上下 左右 边距
（如果上下左右都是5px，那么直接margin:5px;就可以了）
第三种：上 左右 下 边距
七、CSS里的定位
以下图为例：
relative
给这个div加上如下css代码
就会发现它相对于它原来的位置往下移动了300px，覆盖到了它的下面的div的内容。
absolute
将上述的relative改为absolute，top改为30px试试：
效果如下：
可以看到它距整个页面的最上面30px，与上面的div重叠了。
因为absolute在没有上下文relative时，是参考当前视窗页面作偏移的。
请看下面这个例子：
html代码如下：、
css代码如下：
效果：
可以看到position-box里的h1和h2相对于position-box改变位置。
若把.position-box{}里的position:relative;删除，h1与h2的位置会相对于整个页面分别做出改变：
h1的top值相对于整个页面发生了改变：据页面最上方50px；
h2的right值相对于整个页面发生了改变：据页面最右端30px。
fixed
如果我们想将一个按钮始终固定在页面的右下角，无论页面如何滚动，我们要怎么做呢？
这个时候就用到了fixed
将button的id编辑为fixed
css代码如下：
浙公网安备 33010602011771号