目录
序
在学习vue之前，默认大家已经掌握了html的初级知识，如果对这些还不是很清楚的话，建议先学习一下下面这些内容：
web系列之HTML5_Nicholson07的博客-CSDN博客
如何使用css
css引用方式
外部样式表、内部样式表和内联样式表
<!DOCTYPE html>
<html>
<head lang="zn">
<meta charset="UTF-8">
<title>样式、链接和表格</title>
<link rel="stylesheet" type="text/css" href="mystyle.css"> <!--外部样式表，h1{color:red}-->
<style type="text/css"> <!--内部样式表-->
h2{
color:blue
}
</style>
</head>
<body>
<h1>red</h1>
<h2>blue</h2>
<p style="color:green">green</p> <!--内联样式表-->
</body>
</html>css文件形式如下:
selector{
property: value;
}
e.g.
h1 {
color: red;
}效果如下：
css作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS_TEST</title>
<link rel="stylesheet" type="text/css" href="hello.css">
</head>
<body>
<p class="paragraph" id="para1">Lorem</p>
</body>
</html>
p {
color: red;
}
.paragraph {
font-size: 40px;
}
#para1 {
font-weight: bold;
}
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS_TEST</title>
<link rel="stylesheet" type="text/css" href="hello.css" />
</head>
<body>
<div class="container">
<div class="box1">
<h1>Hello world!</h1>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto
nostrum reiciendis accusantium vel. Obcaecati placeat sapiente
doloribus amet iure tempore porro soluta, est eaque modi laboriosam
suscipit sed rerum ut libero animi labore dolorum deserunt?
Consequatur eaque nam, magni tenetur facere dolorum adipisci earum,
accusantium quisquam voluptate dolore nulla. Harum ullam quidem alias
vel magnam hic, repellendus quas placeat sapiente corporis ratione
inventore ducimus deleniti maiores quia ipsa impedit tempora! Rem iure
modi non dolorum ab, ipsam quas. Assumenda consequatur repellendus a
ad, incidunt quisquam consectetur eveniet porro quibusdam. Totam
incidunt corrupti ex magni doloribus a voluptate? Distinctio, amet
cum.
</p>
</div>
<div id="box2">
<h1>Hello world!</h1>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto
nostrum reiciendis accusantium vel. Obcaecati placeat sapiente
doloribus amet iure tempore porro soluta, est eaque modi laboriosam
suscipit sed rerum ut libero animi labore dolorum deserunt?
Consequatur eaque nam, magni tenetur facere dolorum adipisci earum,
accusantium quisquam voluptate dolore nulla. Harum ullam quidem alias
vel magnam hic, repellendus quas placeat sapiente corporis ratione
inventore ducimus deleniti maiores quia ipsa impedit tempora! Rem iure
modi non dolorum ab, ipsam quas. Assumenda consequatur repellendus a
ad, incidunt quisquam consectetur eveniet porro quibusdam. Totam
incidunt corrupti ex magni doloribus a voluptate? Distinctio, amet
cum.
</p>
</div>
</div>
</body>
</html>
body { /*第一种作用域形式*/
background-color: #f4f4f4; /*背景颜色*/
color: #555555; /*字体颜色*/
font-family: Arial, Helvetica, sans-serif; /*字体格式： 字体， 备用字体， 字体属性（这里指无衬线字体）*/
font-size: 20px; /*字体大小*/
font-weight: bold; /*字体粗细*/
line-height: 1.5em; /*行高*/
}
.box1 { /*第二种作用域形式*/
background-color: antiquewhite;
color: royalblue;
}
#box2 h1 { /*第三种作用域形式*/
font-family: 'Times New Roman', Times, serif;
font-weight: 800;
font-style: italic; /*字体样式，normal正常，italic斜体等*/
text-decoration: underline; /*文本装饰，underline下划线，overline上划线，line-through删除线等*/
text-transform: uppercase; /*文本转换，uppercase全大写，capitalize每个单词首字母大写等*/
letter-spacing: 1em; /*字符间空隙*/
word-spacing: 2em; /*单词间空隙*/
}
.contatiner {
width: 80%; /*占整个页面宽度的百分比*/
margin: auto; /*页边距*/
}
盒子模型
单个盒子
- content： 图片、文字等内容，包含宽度width和高度height
- border：边框
- padding：内边距
- margin：外边距
多个盒子
组合的时候外边距取相邻两个盒子外边距的最大值。 多个padding相邻时也是类似的。
设置盒子参数
这里以Margin举例，其他也是类似的。
p {
margin-top: 5px; /*上*/
margin-bottom: 5px; /*下*/
margin-left: 20px; /*左*/
margin-right: 20px; /*右*/
}
p {
margin: 5px 20px 5px 20px; /*上，右，下，左*/
}
p {
margin: 5px 20px; /*上下，左右*/
}
p {
margin: 5px; /*上下左右*/
}
p {
margin: 5px 20px 5px; /*上，左右，下*/
}示例
body { /*第一种作用域形式*/
background-color: #f4f4f4; /*背景颜色*/
color: #555555; /*字体颜色*/
font-family: Arial, Helvetica, sans-serif; /*字体格式： 字体， 备用字体， 字体属性（这里指无衬线字体）*/
font-size: 20px; /*字体大小*/
font-weight: bold; /*字体粗细*/
line-height: 1.5em; /*行高*/
}
.box1 { /*第二种作用域形式*/
background-color: antiquewhite;
color: royalblue;
border-radius: 35px; /*圆角*/
border: 5px blue solid;
border-top: 5px red double; /*修改个别边框*/
border-right: 20px yellow; /*不设置边框类型的话会显示不出来*/
border-left-width: 20px; /*修改个别边框宽度*/
border-left-style: groove; /*修改个别边框类型*/
border-left-color: green; /*修改个别边框颜色*/
padding: 30px; /*设置内边距*/
margin-top: 40px; /*设置外边距*/
margin-bottom: 20px; /*设置外边距*/
}
#box2 { /*第二种作用域形式*/
border: 5px blue solid;
margin: 40px 0px 20px 10px; /*设置外边距*/
}
#box2 h1 { /*第三种作用域形式*/
font-family: 'Times New Roman', Times, serif;
font-weight: 800;
font-style: italic; /*字体样式，normal正常，italic斜体等*/
text-decoration: underline; /*文本装饰，underline下划线，overline上划线，line-through删除线等*/
text-transform: uppercase; /*文本转换，uppercase全大写，capitalize每个单词首字母大写等*/
letter-spacing: 1em; /*字符间空隙*/
word-spacing: 2em; /*单词间空隙*/
}
.contatiner {
width: 80%; /*占整个页面宽度的百分比*/
margin: auto; /*页边距*/
}
这里有两个细节：
- box1的border-right没有显示出来，这是因为没有设置Border-style;
- box1的Margin-bottom是20px，等于box2的margin-top（40px）的一半。从图上可以发现视觉上看来Margin-bottom正好占了两个box间隙的一半，其实也就是box2的margin-top的一半，所以说Margin较小的那部分就被覆盖掉了。
其他一些常用功能示例
触发式的css效果
这里演示两个触发方法：hover和active。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS_TEST</title>
<link rel="stylesheet" type="text/css" href="hello.css" />
</head>
<body>
<div class="container">
<div class="box3">
<button>点击我</button>
<p><a href="https://blog.csdn.net/Nichlson?spm=1011.2124.3001.5343">nicholson的主页</a></p>
</div>
</div>
</body>
</html>body { /*第一种作用域形式*/
background-color: #f4f4f4; /*背景颜色*/
color: #555555; /*字体颜色*/
font-family: Arial, Helvetica, sans-serif; /*字体格式： 字体， 备用字体， 字体属性（这里指无衬线字体）*/
font-size: 20px; /*字体大小*/
font-weight: bold; /*字体粗细*/
line-height: 1.5em; /*行高*/
}
.box3 button{
background-color: black;
color: white;
}
.box3 button:active { /*:后是触发的行为，这里是点击时*/
background-color: gray;
}
.box3 a{
text-decoration: none; /*超链接不显示下划线*/
color: blue;
}
.box3 a:hover { /*:后是触发的行为，这里是鼠标放上去时*/
color: green;
}
原始网页：
点击“点击我”按钮：
鼠标移到“nicholson的主页”上：
浮动布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS_TEST</title>
<link rel="stylesheet" type="text/css" href="hello.css" />
</head>
<body>
<div class="container">
<p>text1</p>
<div class="text1">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo rem nisi
rerum deleniti impedit nesciunt mollitia suscipit amet?
</p>
</div>
<div class="text1">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo rem nisi
rerum deleniti impedit nesciunt mollitia suscipit amet?
</p>
</div>
<div class="text1">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo rem nisi
rerum deleniti impedit nesciunt mollitia suscipit amet?
</p>
</div>
<div class="clearfix"></div>
<p>text2</p>
<div class="text2">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo rem nisi
rerum deleniti impedit nesciunt mollitia suscipit amet?
</p>
</div>
<div class="text2">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo rem nisi
rerum deleniti impedit nesciunt mollitia suscipit amet?
</p>
</div>
<div class="text2">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo rem nisi
rerum deleniti impedit nesciunt mollitia suscipit amet?
</p>
</div>
<div class="clearfix"></div>
<p>text3</p>
<div class="text3">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo rem nisi
rerum deleniti impedit nesciunt mollitia suscipit amet?
</p>
</div>
<div class="text3">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo rem nisi
rerum deleniti impedit nesciunt mollitia suscipit amet?
</p>
</div>
<div class="text3">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo rem nisi
rerum deleniti impedit nesciunt mollitia suscipit amet?
</p>
</div>
<div class="clearfix"></div>
<p>text4</p>
<div class="text4">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo rem nisi
rerum deleniti impedit nesciunt mollitia suscipit amet? Repudiandae
recusandae saepe eaque itaque.
</p>
</div>
<div class="text4">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo rem nisi
rerum deleniti impedit nesciunt mollitia suscipit amet? Repudiandae
recusandae saepe eaque itaque.
</p>
</div>
<div class="clearfix"></div>
</div>
</body>
</html>
body { /*第一种作用域形式*/
background-color: #f4f4f4; /*背景颜色*/
color: #555555; /*字体颜色*/
font-family: Arial, Helvetica, sans-serif; /*字体格式： 字体， 备用字体， 字体属性（这里指无衬线字体）*/
font-size: 20px; /*字体大小*/
font-weight: bold; /*字体粗细*/
line-height: 1.5em; /*行高*/
}
.clearfix{
clear: both; /*每次用完float格式后都应该马上清除，避免影响后续内容的布局*/
}
.text1{
float: left; /*向左浮动*/
width: 33.3%; /*三个div平分*/
}
.text2{
float: left; /*向左浮动*/
width: 33.3%; /*三个div平分*/
border: 1px grey solid; /*加了border后每个Box的尺寸变了，无法保持在一行*/
}
.text3{
float: left; /*向左浮动*/
width: 33.3%; /*三个div平分*/
border: 1px grey solid;
box-sizing: border-box; /*根据border-box的尺寸来平分，保持三个box仍可以保持在一行*/
}
.text4{
float: right; /*向右浮动*/
width: 50%;
margin: 5px 0px; /*margin的左右边距如果不设为0，则不能保持在一行*/
border: 1px green solid;
box-sizing: border-box;
}
定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS_TEST</title>
<link rel="stylesheet" type="text/css" href="hello.css" />
</head>
<body>
<div class="container">
<div class="box1">
<p>box1</p>
</div>
<div class="box2">
<p>box2</p>
</div>
<div class="box3">
<p>box3</p>
</div>
<div class="box4">
<p>box4</p>
</div>
</div>
</body>
</html>
body { /*第一种作用域形式*/
background-color: #f4f4f4; /*背景颜色*/
color: #555555; /*字体颜色*/
font-family: Arial, Helvetica, sans-serif; /*字体格式： 字体， 备用字体， 字体属性（这里指无衬线字体）*/
font-size: 20px; /*字体大小*/
font-weight: bold; /*字体粗细*/
line-height: 1.5em; /*行高*/
}
.container {
background-color: grey;
width: 100%;
height: 1200px;
}
.box1{ /*不使用position的样子*/
border: 5px red solid;
text-align: center;
width: 80%;
height: 100px;
}
.box2{
border: 5px green solid;
text-align: center;
position: relative; /*使用relative会相对于他本身的位置做偏移*/
width: 80%;
height: 100px;
top: 200px;
left: 50px;
}
.box3{
border: 5px blue solid;
text-align: center;
position: absolute; /*使用absolute，就是相对于整个页面了，所以偏移和width的百分比都是相对于整个页面*/
width: 80%;
height: 100px;
top: 200px;
left: 50px;
}
.box4{
border: 5px yellow solid;
text-align: center;
position: fixed; /*使用fixed，就是相对于浏览器的显示窗口了，所以看上去是固定在一个位置*/
width: 30%;
height: 50px;
right: 10px;
bottom: 10px;
}显示效果
这里注意，由于box2是相对的，而box3是绝对的，偏移量相同的情况下，导致box3显示在了box2前面，还有一个细节是，两个box的width都是80%，但是box3显示的宽度大于box2，这也是因为box2是相对于自身的，他自身是被包含在了body中，所以是body的80%，而box3是相对于整个页面的，是整个页面的80%，这里body默认有一个margin=8px，这才导致了实际显示的宽度不同。如果我们将body的margin设为0px，就是下面的效果了 。
滚动页面，右下角box位置不变
资源
颜色
<color> - CSS: Cascading Style Sheets | MDN (mozilla.org)
字体
字体名称
Fundamental text and font styling - Learn web development | MDN (mozilla.org)
字体占有率
CSS Font Stack: Web Safe and Web Font Family with HTML and CSS code.
6966
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
