本文详细介绍了CSS的引入方式、选择器、字体样式、文本样式、边框样式、列表样式、表格样式、图片样式、背景样式、超链接伪类、CSS盒子模型和浮动布局。重点讲解了各种样式属性的使用，如font-family、font-size、color、text-align、border、list-style-type等，并强调了在实际开发中的常见应用场景和技巧。
【Web前端学习系列02】—CSS
仅为博主自用学习笔记，本篇学习平台：http://www.lvyestudy.com/css
推荐的学习路线:
HTML→CSS→JavaScript→jQuery→HTML5→CSS3→ES6→Vue.js→webpack→Node.js
CSS
我们现在所说的CSS3，一般指的是相对于CSS2“新增加的内容”，并不是说CSS2被淘汰了。准确来说，你要学的CSS其实等于CSS2加上CSS3。本书介绍的是CSS2
CSS引入方式
想要在一个页面引入CSS，共有以下3种方式。
（1）外部样式表
（2）内部样式表
（3）行内样式表
还有一种是@import方式。
@import方式跟外部样式表很相似。不过在实际开发中，我们极少使用@import方式，而更倾向于使用link方式（外部样式）。原因在于@import方式会先加载HTML后加载CSS，而link是先加载CSS后加载HTML。如果HTML在CSS之前加载，页面用户体验就会非常差。因此对于@import这种方式，我们不需要去了解。
选择器
选中你想要的元素的方式，我们称之为“选择器”。说白了就是用一种方式把你想要的那个元素选中，然后使得我们可以操作这些元素的CSS样式。
在CSS中，有很多方式可以把你想要元素选中，这些不同的方式其实就是不同的选择器。
最实用的5种选择器。
（1）元素选择器
（2）id选择器
（3）class选择器
（4）后代选择器
（5）群组选择器
后代选择器
就是选择元素内部中所有的某一种元素，包括子元素和其他后代元素（如“孙元素”）。
#father1 div {color:red;}表示选择“id为father1的元素”下的所有div元素，然后定义它们的文本颜色为红色。
#father2 span{color:blue;}表示选择“id为father2的元素”下的所有span元素，然后定义它们文本颜色为蓝色。
群组选择器
对于群组选择器，两个选择器之间必须要用英文逗号（,）隔开，不然群组选择器就无法生效。
h3,div,p,span{color:red;}
字体样式
font-family 字体类型
font-size 字体大小
font-weight 字体粗细
font-style 字体风格
color 字体颜色
font-family
font-family可以指定多种字体。使用多个字体时，将按从左到右的顺序排列，并且以英文逗号（,）隔开。如果我们不定义font-family，浏览器默认字体类型一般是“宋体”。
<style type="text/css">
#div1{font-family: Arial;}
#div2{font-family: "Times New Roman";}
#div3{font-family: "微软雅黑";}
</style>
如果字体类型只有一个英文单词，则不需要加上双引号；如果字体类型是多个英文单词或者中文的，则需要加上双引号。注意，这里的双引号是英文双引号，而不是中文双引号。
为什么要为元素定义多个字体类型呢？
每个人的电脑装的字体都不一样，有些字体有安装，但也有些字体没有安装。p{font-family:Arial,Verdana,Georgia;}这一句的意思是：p元素优先使用“Aria字体”来显示，如果你的电脑没有装“Arial字体”，那就接着考虑“Verdana字体”。如果你的电脑还是没有装“Verdana字体”，那就接着考虑“Georgia字体”……以此类推。如果Arial、Verdana、Georgia字体都没有安装，那么p元素就会以默认字体（即宋体）来显示。
在实际开发中，比较美观的中文字体有微软雅黑、苹方，英文字体有Times New Roman 、Arial和Verdana（这个技巧对实际开发很重要）。
font-size
font-size属性取值有两种：
一种是“关键字”，如small、medium、large等；
另外一种是“像素值”，如10px、16px、21px等。
PX
px，全称pixel（像素），1像素指的是一张图片中最小的点，或者是计算机屏幕最小的点。
一张图片是由很多的小方点组成的。其中，每一个小方点就是一个像素（px）。如果说一台屏幕的分辨率是800px×600px，指的就是“屏幕宽是800个小方点，高是600个小方点”。
严格来说，px属于相对单位，因为屏幕分辨率的不同，1px的大小也是不同的。例如Windows系统的分辨率为每英寸96px，Mac系统的分辨率为每英寸72px。
如果不考虑屏幕分辨率，我们也可以把px当成绝对单位来看待，这也是为什么很多地方说px是绝对单位的原因。
font-weight
属性取值有两种：
一种是“100~900的数值”；
另外一种是“关键字”。
normal 正常（默认值）400
lighter 较细100
bold 较粗 700
bolder 很粗（其实效果跟bold差不多）900
对于实际开发来说，一般我们只会用到bold这一个属性值，其他的几乎用不上，这一点大家要记住。
在实际开发中，不建议使用使用数值（100~900）作为font-weight的属性取值。
font-style
定义斜体效果。
normal 正常（默认值）
italic 斜体
oblique 斜体
italic或oblique，页面效果是一样的
有些字体有斜体italic属性，但有些字体却没有italic属性。oblique是让没有italic属性的字体也能够有斜体效果。
color
属性取值有两种:
一种是“关键字”；
另外一种是“16进制RGB值”。
对于16进制颜色值，有两个我们需要知道的：#000000是黑色，#FFFFFF是白色。
CSS注释
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*这是CSS注释*/
p{color:pink;}
</style>
</head>
<body>
<!--这是HTML注释-->
<p>记忆之所以美，是因为有现实的参照。</p>
</body>
文本样式
字体样式针对的是“文字本身”的型体效果，而文本样式针对的是“整个段落”的排版效果。
字体样式注重个体，文本样式注重整体。
文本样式属性
text-indent 首行缩进
text-align 水平对齐
text-decoration 文本修饰
text-transform 大小写转换
line-height 行高
letter-spacing 字母间距
word-spacing 词间距
text-indent
p
{
font-size:14px;
text-indent:28px;
}
p元素的首行是不会自动缩进的，因此我们在HTML中往往使用6个“ ”来实现首行缩进两个字的空格。但是这种方式冗余代码很多。
text-align
left 左对齐（默认值）
center 居中对齐
right 右对齐
在实际开发中，我们只会用到居中对齐（center）这一个，其他两个几乎用不上。
text-align属性不仅对文本有效，对图片（img元素）也有效。
text-decoration
none 去除所有的划线效果（默认值）
underline 下划线
line-through 中划线
overline 顶划线
在前端开发中，对于外观控制一般用CSS来实现，而不是使用标签来实现，这更加符合结构与样式分离的原则，提高可读性和可维护性。
使用text-decoration:none;去除a元素的下划线，这个技巧我们在实际开发中会大量使用到。
text-transform
none 无转换（默认值）
uppercase 转换为大写
lowercase 转换为小写
capitalize 只将每个英文单词首字母转换为大写
间距
字间距
letter-spacing
词间距
word-spacing
一般来说，word-spacing只针对英文单词而言。
在实际开发中，对于中文网页来说，我们很少去定义字间距以及词间距这些东西。letter-spacing和word-spacing只会用于英文网页，这两个平常我们几乎用不上，因此只需简单了解即可。
边框样式
几乎所有的元素都可以定义边框。例如，div元素可以定义边框，img元素可以定义边框，table元素可以定义边框，span元素同样也可以定义边框。
border-width 边框的宽度
border-style 边框的外观
border-color 边框的颜色
想要为一个元素定义边框样式，必须要同时设置border-width、border-style、border-color属性才会有效果。
border-style
none 无样式
dashed 虚线
solid 实线
简写形式
border: 1px solid red;
局部样式
如果想要对某一条边进行单独设置，这该怎么实现呢？
以上边框为例：
border-top-width: 1px;
border-top-style: solid;
border-top-color: red;
简写形式：
border-top: 1px solid red;
特别地，
border-bottom:0px;这是一种省略写法，既然我们都不需要那条边框了，不需要设置边框的外观和颜色
与border-bottom:0;和border-bottom:none;是等价的。
列表样式
列表项符号
在CSS中，不管是有序列表还是无序列表，我们都是使用list-style-type属性来定义列表项符号。
list-style-type: 取值;
list-style-type属性是针对ol或者ul元素的，而不是li元素。
ol的list-style-type属性取值
decimal 阿拉伯数字：1、2、3…（默认值）
lower-roman 小写罗马数字：i、ii、iii…
upper-roman 大写罗马数字：I、II、III…
lower-alpha 小写英文字母：a、b、c…
upper-alpha 大写英文字母：A、B、C…
ul的list-style-type属性取值
disc 实心圆●（默认值）
circle 空心圆○
square 正方形■
使用list-style-type:none这个小技巧可以去除列表项默认的符号，在实际开发中，我们经常会用到。
我们只需要记住list-style-type:none;这一个就可以了，其他的不需要记住。
列表项图片
自定义列表项符号，也就是使用图片来代替列表项符号。
list-style-image: url(图片路径);
一般情况下我们都不会用list-style-image属性来实现，而是使用更为高级的iconfont图标技术来实现
表格样式
标题位置
caption-side: 取值;
top 标题在顶部（默认值）
bottom 标题在底部
如果想要定义表格标题的位置，在table或caption这两个元素的CSS中定义caption-side属性，效果是一样的。不过一般情况下，我们都只在table元素中定义就可以了。
表格边框合并
即：去除表格边框间距
表格加入边框后的页面效果中，单元格之间是有一定空隙的。
我们可以使用border-collapse属性来去除单元格之间的空隙，也就是将两条边框合并为一条。
border-collapse: 取值;
separate 边框分开，有空隙（默认值）
collapse 边框合并，无空隙
border-collapse属性也是在table元素中定义的。
表格边框间距
上一节介绍了如何去除表格边框间距，但是在实际开发中，有时候我们却需要定义一下表格边框的间距。
border-spacing: 像素值;
border-spacing属性也是在table元素中定义的。
图片样式
图片大小
使用width和height这两个属性来定义图片的大小（也就是宽度和高度）
width: 像素值;
height: 像素值;
在实际开发中，如果你需要多大的图片，就用Photoshop制作多大的图片。不建议使用一张大图片，然后再借助width和height来改变大小。因为一张大图片体积更大，会使页面加载速度变慢。这是性能优化方面的考虑，以后我们会慢慢接触。
图片边框
border: 1px solid red;
图片对齐
水平对齐
text-align: 取值;
text-align属性一般只用于两个地方：文本水平对齐和图片水平对齐。
很多人以为图片的水平对齐是在img元素中定义，其实这是错的。图片是在父元素中进行水平对齐，因此我们当然是在图片的父元素中定义啦。
垂直对齐
vertical-align: 取值;
top 顶部对齐
middle 中部对齐
baseline 基线对齐
bottom 底部对齐
vertical-align属性定义周围的行内元素或文本相对于该元素的垂直方式”。
文字环绕
在CSS中，我们可以使用给图片设置float属性来实现文字环绕图片的效果。
float: 取值;
left 元素向左浮动
right 元素向右浮动
背景样式
背景样式包括两个方面：背景颜色和背景图片。
定义“背景颜色”使用的是background-color属性。
而定义“背景图片”则比较复杂，往往涉及以下属性。
background-image 定义背景图片地址
background-repeat 定义背景图片重复，例如横向重复、纵向重复
background-position 定义背景图片位置
background-attachment 定义背景图片固定
color属性用于定义“文本颜色”，而background-color属性用于定义“背景颜色”，这两个要区分好了。
background-image: url(图片路径);
背景图片跟图片是不一样的，背景图片是使用CSS来实现，而图片是使用HTML来实现。两者的使用场合也不一样，大多数情况下都是使用图片(HTML)来实现，不过某些场合无法使用图片时我们再考虑背景图片形式。
下面这两种引入背景图片的方式都是正确的，一个给路径加上了引号，另外一个没加引号。不过在实际开发中，建议采用不加引号的方式，因为这种方式更加简洁。
/*方式1：路径加上引号*/
background-image: url("img/haizei.png");
/*方式2：路径没加引号*/
background-image: url(img/haizei.png);
使用background-repeat属性来定义背景图片的重复方式。
background-repeat: 取值;
repeat 在水平方向和垂直方向上同时平铺（默认值）
repeat-x 只在水平方向（x轴）上平铺
repeat-y 只在垂直方向（y轴）上平铺
no-repeat 不平铺
使用background-position属性来定义背景图片的位置。
background-position: 像素值/关键字;
常用取值有两种：一种是“像素值”；另外一种是“关键字”.
像素值
同时设置水平方向和垂直方向的数值。
例如，“background-position:12px 24px;”
表示背景图片距离该元素左上角的水平方向距离为12px，垂直方向距离为24px。
水平距离和垂直距离这两个数值之间要用空格隔开，两者取值都是像素值。
关键字
top left 左上
top center 靠上居中
top right 右上
center left 居中靠左
center center 正中
center right 居中靠右
bottom left 左下
bottom center 靠下居中
bottom right 右下
在实际开发中，background-position一般用于实现CSS Spirit
使用background-attachment属性来定义背景图片是随元素一起滚动还是固定不动。
background-attachment: 取值;
scroll 随元素一起滚动（默认值）
fixed 固定不动
在实际开发中，background-attachment这个属性几乎用不上
超链接
超链接伪类
在CSS中，我们使用“超链接伪类”来定义超链接在鼠标点击的不同时期的样式。
a:link{…}
a:visited{…}
a:hover{…}
a:active{…}
a:link 定义a元素未访问时的样式
a:visited 定义a元素访问后的样式
a:hover 定义鼠标经过a元素时的样式
a:active 定义鼠标点击激活时的样式
必须按照“link、visited、hover、active”的顺序进行，不然浏览器可能无法正常显示这4种样式。请记住，这4种样式定义顺序不能改变。
这里有一个挺好的记忆方法：“love hate”，爱恨原则
在实际开发中，我们只会用到两种状态：未访问时状态和鼠标经过状态。
a{…}
a:hover{…}
对于未访问时状态，我们直接针对a元素定义就行了，没必要使用a:link。
我们只需要记住a:hover这一个就够了，因为在实际开发中也只会用到这一个
hover
元素:hover{…}
“:hover伪类”应用非常广泛，任何一个网站都会大量地用到。EG:使用:hover为div元素定义鼠标经过时就改变背景色，使用:hover为img元素定义鼠标经过时就为其添加一个边框。
鼠标样式
对于鼠标样式的定义，我们有两种方式：浏览器鼠标样式和自定义鼠标样式。
浏览器鼠标样式
cursor: 取值;
在实际开发中我们一般只会用到3个：default、pointer和text
自定义鼠标样式
cursor: url(图片地址), 属性值;
这个“图片地址”是鼠标图片地址，其中鼠标图片后缀名一般都是.cur，我们可以使用Photoshop来制作。
而这个“属性值”一般为3种：default、pointer和text。
CSS盒子模型
页面中的所有元素都可以看成一个盒子，并且占据着一定的页面空间。
盒子模型的组成部分有4个：
content 内容，可以是文本或图片
padding 内边距，用于定义内容与边框之间的距离
margin 外边距，用于定义当前元素与其他元素之间的距离
border 边框，用于定义元素的边框
content
内容区是CSS盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区是盒子模型必备的组成部分，其他3个部分都是可选的。
内容区有3个属性：width、height和overflow。
使用width和height属性可以指定盒子内容区的高度和宽度。
在这里注意一点，width和height这两个属性是针对内容区content而言，并不包括padding部分。
只有块元素才可以设置width和height，行内元素是无法设置width和height的。
行内元素设置的width和height无法生效，它的宽度和高度只能由内容区撑起来。
padding
内边距，指的是内容区和边框之间的空间，可以看成是内容区的背景区域。
关于内边距的属性有5种：padding-top、padding-bottom、padding-left、padding-right以及综合了以上4个方向的简写内边距属性padding。（上右下左）
margin
外边距，指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。
外边距使得元素之间不必紧凑地连接在一起，是CSS布局的一个重要手段。
外边距的属性也有5种：margin-top、margin-bottom、margin-left、margin-right以及综合了以上4个方向的简写外边距属性margin。（上右下左）
同时，CSS允许给外边距属性指定负数值，当外边距为负值时，整个盒子将向指定负值的相反方向移动，以此可以产生盒子的重叠效果，这就是传说中的“负margin技术”。
当只有父元素时，该元素设置的margin就是相对于父元素之间的距离。
当既有父元素，也有兄弟元素时，该元素会先看看四个方向有没有兄弟元素存在。如果该方向有兄弟元素，则这个方向的margin就是相对于兄弟元素而言。如果该方向没有兄弟元素，则这个方向的margin就是相对于父元素而言。
border
边框跟之前学过的边框是一样的。
边框属性有border-width、border-style、border-color以及综合了3类属性的简写边框属性border。
div
{
display:inline-block; /*将块元素转换为inline-block元素*/
padding:20px;
margin:40px;
border:2px solid red;
background-color:#FFDEAD;
}
display:inline-block表示将元素转换为行内块元素（即inline-block），其中inline-block元素的宽度是由内容区撑起来的。我们之所以在这个例子中将元素转换为inline-block元素，也是为了让元素的宽度由内容区撑起来，以便更好地观察。
我们可以使用display属性来将行内元素转换为块元素，也可以将块元素转换为行内元素。
padding和margin的区别在于：padding体现的是元素的“内部结构”，而margin体现的是元素之间的相互关系。
浮动布局
文档流
正常文档流
文档流，就是指元素在页面中出现的先后顺序。
正常文档流，又称为“普通文档流”或“普通流”，也就是W3C标准所说的“normal flow”。
正常文档流，将一个页面从上到下分为一行一行，其中块元素独占一行，相邻行内元素在每一行中按照从左到右排列直到该行排满。
也就是说，正常文档流指的就是默认情况下页面元素的布局情况。
脱离文档流
脱离文档流，指的是脱离正常文档流。
正常文档流就是我们没有使用浮动或者定位去改变的默认情况下的HTML文档结构。
换一句话说，如果我们想要改变正常文档流，可以使用有两种方法：浮动和定位。
正常文档流指的就是从上到下依次显示这3个div元素。由于div是块元素，因此每个div元素独占一行。
设置浮动
当我们为第2、3个div元素设置左浮动时
由于设置了浮动，第2、3个div元素却是并列一行，并且跑到父元素之外，跟正常文档流不一样。也就是说，设置浮动使得元素脱离了正常文档流。
设置定位
当我们为第3个div元素设置绝对定位的时候
由于设置了定位，第3个div元素跑到父元素的上面去了。也就是说，设置了定位使得元素脱离了文档流。
浮动
float: 取值;
left 元素向左浮动
right 元素向右浮动
在这个代码中，定义了3个div块：一个是父块，另外两个是它的子块。如果两个子块都没有设置浮动，由于div是块元素，因此会各自向右延伸，并且自上而下排列。
由于box1设置为左浮动，box1变成了浮动元素，因此此时box1的宽度不再延伸，而是由内容宽度决定其宽度。接着相邻的下一个div元素（box2）就会紧贴着box1。
box1、box2都设置成浮动，因此box2也跟box1一样，宽度不再延伸，而是由内容确定宽度。如果box2后面还有其他元素，则其他元素也会紧贴着box2。
父元素变成一条线
浮动，可以使得元素移到左边或者右边，并且允许后面的文字或元素环绕着它。浮动最常用于实现水平方向上的并排布局，例如两列布局、多列布局。
清除浮动
动会影响周围元素，并且还会引发很多预想不到的问题。在CSS中，我们可以使用clear属性来清除浮动带来的影响。
clear: 取值;
left 清除左浮动
right 清除右浮动
both 同时清除左浮动和右浮动
在实际开发中，我们几乎不会使用clear:left或clear:right来单独清除左浮动或右浮动，往往都是直截了当地使用clear:both来把所有浮动清除，简单粗暴又省事！
<style type="text/css">
/*定义父元素样式*/
#father
{
width:300px;
background-color:#0C6A9D;
border:1px solid silver;
}
/*定义子元素样式*/
#father div
{
padding:10px;
margin:15px;
}
#son1
{
background-color:hotpink;
float:left; /*左浮动*/
}
#son2
{
background-color:#FCD568;
float:right; /*右浮动*/
}
.clear{clear:both;}
</style>
我们一般都是在浮动元素后面再增加一个空元素，然后为这个空元素定义clear:both来清除浮动。
清除浮动不仅仅只有clear:both，还有overflow:hidden，以及更为常用的伪元素。
定位布局
浮动布局比较灵活，但是不容易控制。
而定位布局的出现，使得用户精准定位页面中的任意元素成为可能，此时页面布局操作也变得更加随心所欲，但定位布局缺乏灵活性。
定位布局共有4种方式，都是通过position属性来实现的。
fixed 固定定位
relative 相对定位
absolute 绝对定位
static 静态定位（默认值）
fixed
被固定的元素不会随着滚动条的拖动而改变位置。
position: fixed;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;
top、bottom、left和right这4个属性不一定全部都用到，一般只会用到其中两个。注意，这4个值的参考对象是浏览器的4条边。
固定定位最常用于实现“回顶部特效”，这个效果非常经典。
relative
相对定位，指的是该元素的位置是相对于它的原始位置计算而来的。
position: relative;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;
在默认情况下，固定定位元素的位置是相对浏览器而言，而相对定位元素的位置是相对于原始位置而言！
absolute
绝对定位在几种定位方式中使用最为广泛，因为它能够很精确地把元素定位到任意你想要的位置。
一个元素变成了绝对定位元素，这个元素就完全脱离文档流了，绝对定位元素的前面或后面的元素会认为这个元素并不存在，此时这个元素浮于其他元素上面，已经完全独立出来了。
position: absolute;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;
总结：默认情况下，固定定位和绝对定位的位置是相对于浏览器而言，而相对定位的位置是相对原始位置而言。
static
在默认情况下，元素没有指定position属性时，这个元素就是静态定位的。也就是说，元素position属性的默认值是static。
一般情况下我们使用不到position:static的，不过在使用JavaScript来控制元素定位时，如果想要使得元素从其他定位方式变成静态定位，就需要使用position:static来实现。
扫一扫
706
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
