1. 前言
学习CSS的基础：需要先学习HTML
如果想快速回顾一下HTML，可点此链接： 前端三剑客之HTML
2. CSS样式
2.1 背景
CSS是层叠样式表。我们在学习HTML的过程中不难发现，仅靠HTML的标签和属性，要做出比较美观的网页的，代码却可能非常冗杂，需要给每一个标签添加很多属性。而CSS的出现，就很好地解决了HTML设置样式属性麻烦的问题。
从功能上简单理解，HTML可看作是网页的骨架，CSS则对网页进行布局和美化。
2.2 CSS引入方式
即CSS添加的位置。
2.2.1 内联样式
内联样式的位置在具体标签内，通过style属性设置。
<div style="color: red">红色段落</div>
2.2.2 内部样式
内部样式的位置在html的head标签里，在style标签内设置。
<head>
<meta charset="UTF-8">
<title>三种引入方式</title>
<style>
#d1{
color: green;
}
</style>
</head>
<body>
<h1 id = "d1">内部样式，绿色标题</h1>
</body>
2.2.3 外部样式
外部样式即将各种样式写在一个CSS文件中，在head中引入。
<link rel="stylesheet" href="myCSS.css">
2.3 选择器
CSS主要通过选择器，对所选择的元素进行样式设置。
2.3.1 元素选择器
通过标签名选择元素。
h4{background: aqua}
<h4>h4的背景变成了水色</h4>
2.3.2 id选择器
通过"#id"选择元素
#p1{color: blue}
<p id="p1">苹果</p>
2.3.3 类选择器
通过".类名"选择元素
.c1{color: brown}
<p class="c1">香蕉</p>
2.3.4 其他选择器
CSS还提供了很多选择器的表达方式，伪类选择器、子元素选择器等，举个小例子：
/*伪类选择器*/
/*未访问*/
a:link{color: red;}
/*访问过*/
a:visited{color: pink;}
/*悬停状态*/
a:hover{color: green;}
/*点击状态*/
a:active{color: pink;}
<a href="http://www.baidu.com">超链接2</a>
篇幅有限，其余表达式可以在需要用到的时候再去查询。
2.4 常见样式
选择器的学习是告诉我们CSS怎么用，那么常见样式则是具体的样式效果。
2.4.1 元素的尺寸与背景
即元素的大小和背景色等样式。
(1)宽、高尺寸与背景色
p#d1{
width:30%;
height:30%;
background-color:red;
}
p#d2{
width:180px;
height:50px;
background-color:blue;
}
<p id="d1"> 按比例设置尺寸,背景红色</p>
<p id="d2"> 按象素设置尺寸,背景蓝色</p>
其中，背景颜色的赋值可以是16进制、三原色比例、具体颜色的英文单词。
(2)图片做背景
#img{
background-image: url("apple.png");
width: 473px;
height: 532px;
}
<div id = "img">图片背景</div>
2.4.2 文本样式
文本样式常见的有大小、字体、颜色、粗细等待，这里举一个例子，在注释中说明作用。
div{
width: 200px;
height: 50px;
/*边框*/
border: 1px solid red;
text-align: center;
/*行高*/
line-height: 50px;
/*文本修饰 overline上划线，underline下划线 line-through删除线*/
text-decoration: overline;
/*文本阴影：颜色 x偏移值，y偏移值， 浓度*/
text-shadow: red -5px 5px 10px;
/*字体大小*/
font-size: 20px;
/*字体加粗*/
font-weight: bold;
/*设置斜体*/
font-style: italic;
/*设置字体*/
/*font-family: Serif;*/
/*一起设置*/
font: 30px cursive;
<div>文本和字体测试</div>
}
2.4.3 边框
元素的边框样式设置，通过border设置：
<style>
.solid{
border-style:solid;
}
.dotted{
border-style:dotted;
}
.dashed{
border-style:dashed;
}
.double{
border-style:double;
}
.red{
border-color:red;
}
.radio{
width: 200px;
height: 200px;
border: 1px solid blue;
/*设置圆角,值越大越圆*/
border-radius: 100px;
}
</style>
<div> 默认无边框div </div>
<div class="solid"> 实线边框 </div><br/>
<div class="dotted"> 点状边框 </div> <br/>
<div class="dashed"> 虚线边框 </div> <br/>
<div class="double"> 双线边框 </div> <br/>
<div class="red"> 实线红色边框 </div><br/>
<div class="radio"> 边框圆角 </div><br/>
2.4.4 定位
(1)绝对定位
绝对定位将某个元素定位到某个特定位置，参照物可以是相对定位的上级元素。当没有上级元素时，上级元素为body。
<style>
#abs{
position: absolute;
left: 100px;
top: 10px;
}
</style>
<div id="abs">绝对定位段落</div>
<p class="abs">绝对定位的p元素</p>
(2)相对定位
相对定位是指将某个元素定位到特定位置，而又不影响“它原本应该有的位置”。参照位置是它的原本的位置
<style>
.abs{
position: relative;
left: 100px;
top: 10px;
}
</style>
<div >普通段落1</div>
<div id="abs">绝对定位段落</div>
<div >普通段落2</div>
<div >普通段落3</div>
(3)静态定位
默认的定位方式，无法实现层叠效果。
当不添加position，或者position：static时，即为静态定位。
默认的静态定位情况下，我们可以用盒子模型来控制元素的具体位置。
(4)固定定位
比如网页的顶部，很多不随滚动而发生相对窗口的位置变化，此时可用固定定位
#d1{
width: 1000px;
height: 100px;
background-color: red;
/*固定*/
position: fixed;
top: 0;
}
<div id = "d1"></div>
(5)浮动定位
浮动定位将向左或右浮动，当撞到其他元素时，停止。会像绝对定位一样离开原本的位置，其他元素补上。
浮动的效果很像该浮动的元素，移动过后和其他元素发生挤开、覆盖等结果
#d1{
width: 50px;
height: 50px;
background-color: red;
float: right;
}
#d2{
width: 50px;
height: 50px;
background-color: green;
float: left;
}
#d3{
width: 50px;
height: 50px;
background-color: blue;
float: left;
}
<div id = "d1"></div>
<div id = "d2"></div>
<div id = "d3"></div>
(6)显示层级
对非静态定位的元素，显示层级可由z-index控制。即当发生覆盖的时候，谁的z-index值越大，该元素则会在上方
#d1{
width: 50px;
height: 100px;
background-color: red;
position: absolute;
z-index: 3;
}
#d2{
width: 100px;
height: 50px;
background-color: blue;
position: absolute;
/*设置显示层级，值越大，显示越靠前*/
z-index:2;
}
<div id="d1"></div>
<div id="d2"></div>
2.4.5 display显示方式
元素的display显示方式主要有：隐藏、块级、内联、内联-块级。
(1)隐藏元素 display:none
原本这里有一个元素，但把它隐藏
div.d{
display:none;
}
<div class="d">隐藏了该元素</div>
(2)块级元素 display:block
块级元素会自动加上换行，可以加上宽高尺寸
.d{
display:block;
border: 1px solid lightgray;
margin:10px;
width:200px;
height:100px;
}
<span class="d">将span变成块级元素</span>
(3)内联元素 display:inline
前后没有换行，无法加上尺寸，大小由内容决定
.d{
display:inline;
border: 1px solid lightgray;
margin:10px;
width:200px;
height:100px;
}
<div class="d">将div变成内联元素</div>
(4)内联-块级元素 inline-block
元素将同处于同一行，并且能指定大小，将内联元素和块级元素的特点都整合在一起了
.d{
display:inline-block;
border: 1px solid lightgray;
margin:10px;
width:200px;
height:100px;
}
<div class="d">将div变成内联-块级元素1</div>
<div class="d">将div变成内联-块级元素2</div>
<div class="d">将div变成内联-块级元素3</div>
<div class="d">将div变成内联-块级元素4</div>
2.4.6 布局相关
(1)居中
<div align="center">
通过设置属性align="center" 居中的内容
</div>
(2)左侧固定
.left{
width:200px;
float:left;
background-color:pink
}
<div class="left">左边固定宽度</div>
2.5 盒子模型
盒子模型用来控制元素的显示效果，包括：元素内容
content + 外边距margin + 边框 border + 内边距 padding
元素内容content:控制元素的显示尺寸
外边距margin:控制元素的显示位置
边框border：控制边框效果
内边距：padding:控制元素内容的位置
2.5.1 外边距margin
作用：控制元素显示位置
赋值方式
margin-left/right/top/bottom : 单独某个方向赋值
margin:10px:四个方向赋值
margin:10px 20px 上下10，左右20
margin:10px 20px 30px 40 px 上右下左，顺时针赋值
行内元素上下外边距无效
上下相邻彼此添加外边距，取最大值
左右相邻彼此添加外边距，两者相加
粘连问题：
给上级元素添加overflow：hidden解决
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
width: 100px;
height: 100px;
border: 1px solid red;
/*默认左上为基准*/
/*margin-left: 100px;*/
/*margin-top: 100px;*/
/*margin-bottom: 100px;*/
/*上下相邻，彼此添加外边距，取最大值*/
/* margin-bottom: 50px;*/
}
#d2{
width: 100px;
height: 100px;
border: 1px solid red;
/*加入上边距，看效果*/
margin-top: 100px;
}
#s1{
/*行内元素上下边距无效*/
margin-bottom: 100px;
margin-right: 100px;
}
#s2{
/*左右相邻，彼此添加外边距，两者相加*/
margin-left: 100px;
}
#big{
width: 200px;
height: 200px;
background-color: green;
/*解决粘连问题*/
overflow: hidden;
}
#big>div{
width: 50px;
height: 50px;
background-color: red;
margin-left: 50px;
/*元素上边距与上级元素挨在一起时，需要用overflow解决粘连问题*/
margin-top: 50px;
}
#border_div{
width: 200px;
height: 200px;
border: 1px solid blue;
/*设置圆角,值越大越圆*/
border-radius: 100px;
}
</style>
</head>
<body>
<div id = "d1">外边距测试</div>
<div id = "d2"> div2</div>
<span id = "s1">span1</span>
<span id = "s2">span2</span>
<div id = "big">
<div></div>
</div>
<div id = "border_div"></div>
</body>
</html>
2.5.2 内边距hidden
作用：控制元素内容的位置
赋值方式：和外边距类似
padding-left/right/top/bottom : 10px; 单独某个方向赋值
padding: 10 px; 四个方向赋值
padding: 10px 20px; 上下左右赋值
padding: 10px 20px 30px 40 px; 顺时针循环赋值
给元素添加内边距会影响元素的显示宽高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 150px;
height: 150px;
border:1px solid red;
/*内边距会影响元素的宽高*/
padding-top: 50px;
padding-left: 50px;
}
</style>
</head>
<body>
<div>内边距</div>
</body>
</html>
2.6 优先级
到目前为止，我们已经知道了CSS的添加方式、常见样式，那么当用多种方式表达不同的样式，对象又是同一个元素时，优先级为：
作用范围越小，优先级越大。如果要越过优先级，加！important，举个例子：
#d1{
color: red;
}
div{
/*提升优先级: !important*/
color: green !important;
}
<div id = "d1" style="color: blue">
测试优先级
</div>
3.总结
本文先介绍了CSS的引入方式，了解了CSS怎么用，然后介绍了常见样式，了解了一些效果，最后介绍了盒子模型与CSS的优先级。
当然这里介绍的选择器、样式等都只是CSS的冰山一角，实际开发中我们可能需要更多地去查询，随查随用。
315
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
