参考视频：【极客学院】Web前端开发教学 - 第一部分：H5+CSS+JS

参考文档：CSS 教程 W3school

文章目录

概述HTML引入CSS外部引入内部引入内联引入 语法形式继承选择器通配符关系：分组选择器关系：派生(后代)选择器元素选择器id选择器类(class)选择器属性(值)选择器子元素选择器相邻兄弟选择器 样式计量单位背景文本字体链接列表表格轮廓 定位定位浮动 常用操作对齐尺寸显示 盒子模型四部分内容详解内容content内边距padding边框border外边距margin 综合示例 CSS3动画浏览器兼容转换2D3D 过渡动画多列瀑布流效果

概述

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

HTML引入CSS

外部引入

作用域：所有源文件只要引用皆可使用

CSS： h1{ color: #b3d4fc; font-size: medium; } HTML： <link rel="stylesheet" type="text/css" href="mycss.css">

内部引入

作用域：单个源文件，只要引用后单个文件内有效

<style type="text/css"> h2{ color: aqua; } </style>

内联引入

作用域：单个标签有效

<h3 style="color: blueviolet"> 标题h3 </h3>

语法

形式

selector{ property：value } 例： p{ color:red; }

继承

继承的概念：A标签包含B和C。只有A和B有定义样式。那么B使用B的样式，C继承使用A的样式。

h1{ color: #999999; } body{ color: #888888; }

例子中，在body标签内部： h1标签使用h1的样式； 其他标签使用body的样式。

选择器

通配符

使用*。 指定区域内，凡是无定义CSS，均继承使用通配符格式。 可以用来统一定义边距、边框等。

*{ color: #b3d4fc; }

关系：分组选择器

使用,。

h1,h2,a,p{ color: #b3d4fc; font-size: medium; }

多个标签共用一个CSS样式.

关系：派生(后代)选择器

使用 space。

h1 p{ color: blue; }

多层标签嵌套时指定的CSS样式，和继承类似。

单标签多定义问题： h1 p{ color: blue; } p{ color: red; }

h1中的p使用第一种，其他情况的p使用第二种。

元素选择器

使用标签名。

p{ color: #888888; } a{ color: #888888; }

id选择器

使用#。

<style type="text/css"> #p1{ color: #888888; } #p2{ color: #999999; } #d1{ color: #AAAAAA; } </style> <p id="p1"></p> <p id="p2"></p> <div id="d1"></div> id选择器和派生选择器一起使用： <style type="text/css"> #p1 a{ color: #888888; } </style> <p id="p1"> <a href="index.html">text</a> </p>

id只可以唯一使用，不可重复使用，如果重复使用应该选择class。 在JS里有较多应用。

类(class)选择器

使用.。

<style type="text/css"> .p1{ color: #888888; } </style> <p class="p1">text</p> 类选择器和其他选择器共同使用： p.p1{ color: #888888; } 多类选择器：使用.class1.class2。 <style type="text/css"> .p1.p2{ color: #b3d4fc; font-size: large; } </style> <p class="p1 p2">内容</p>

属性(值)选择器

使用[]。

属性选择： [title]{ color: #888888; } 值选择： [title="t1"]{ color: #b3d4fc; } 值选择模糊匹配： [title~="t1"]{ / color: #b3d4fc; }

属性和值之间亦有继承效果。

IE6及之前不支持。

子元素选择器

使用>。

#p1>#p2{ color: #b3d4fc; }

和派生选择器最大的区别在于：

子元素选择器：#p1>#p2，只有在直接从属关系下生效，#p1直接包含#p2生效，#p1包含其它标签再包含#p2则无效。派生选择器：#p1 #p2，只要#p1包含#p2就生效。可以是直接从属关系，也可以是间接从属关系。

相邻兄弟选择器

使用+。

可以选择紧跟在一个元素后面的另一个元素，二者具有相同的父元素。使用较少。

<style type="text/css"> li+li{ color: #b3d4fc; } </style> <article> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </br> <ol> <li>21</li> <li>22</li> <li>23</li> <li>24</li> </ol> </article> 代码结果：

样式

计量单位

%表示相对于原来固有长度宽度的缩放比例。

px表示“绝对尺寸”（并非真正的绝对），实际上就是css中定义的像素（此像素与设备的物理像素有一定的区别，后续详细说明见文末说明1），利用px设置字体大小及元素宽高等比较稳定和精确。Px的缺点是其不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站。

em表示相对尺寸，其相对于当前对象内文本的font-size（如果当前对象内文本的font-size计量单位也是em，则当前对象内文本的font-size的参考对象为父元素文本font-size）。使用em可以较好的相应设备屏幕尺寸的变化，但是在进行元素设置时都需要知道父元素文本的font-size及当前对象内文本的font-size，如有遗漏可能会导致错误。

rem也表示相对尺寸，其参考对象为根元素html的font-size，因此只需要确定这一个font-size。

背景

p{ height: 100px; /*长*/ width: 50px; /*宽*/ background-color: #b3d4fc; /*背景颜色*/ } body{ background-image: url("myjpg.jpg"); /*背景图片*/ background-repeat: repeat-y; /*设置背景图片是否重复*/ background-position: center top; /*背景图片的起始位置*/ /*background-position: 100px 100px; */ background-attachment: scroll; /*是否随内容滚动*/ } CSS3背景： body{ background-image: url("myjpg.jpg"); background-size: 100px 200px; /*图片尺寸*/ background-origin: content-box; /*定位区域*/ background-clip: padding-box; /*绘制区域*/ }

文本

p{ color: #b3d4fc; /*颜色*/ direction: ltr; /*方向*/ line-height: 15px; /*行高*/ letter-spacing: 2px; /*字符间距*/ text-align: center; /*对齐*/ text-decoration: #888888; /*文本修饰*/ text-indent: 2em; /*首行缩进*/ padding-left: 2em; /*内边距向左*/ text-transform: lowercase; /*英文字母形式*/ unicode-bidi: embed; /**/ white-space: normal; /*空白的处理方式*/ word-spacing: 15px; /*字间距*/ } CSS3文本： p{ text-shadow: 15px 15px 1px #888888; /*阴影*/ /*距离左 距离上 偏离度 颜色*/ word-wrap: break-spaces; /*换行规则*/ /*需要先规定宽度width*/ }

字体

p{ font-family: Arial; /*字体*/ font-size: 50px; /*大小*/ font-style: normal; /*字体风格*/ font-variant: all-small-caps; /*字体类别：小型大写字体等*/ font-weight: lighter; /*粗细*/ } CSS3引入下载字体文件： @font-face{ font-family: my_font; /*自定义名称*/ src: url(""); /*url*/ }

链接

a:link{ /*普通的，未被访问的链接*/ color: #FF0000; } a:visited{ /*用户已访问的链接*/ color: #00FF00; } a:hover{ /*鼠标指针位于链接上方*/ color: #0000FF; } a:active{ /*链接被点击的时刻*/ color: #000000; } a{ /*链接下划线颜色 or 去除下划线*/ text-decoration: none; }

列表

ul li{ list-style: inside; /*简写列表项*/ list-style-type: armenian; /*列表项-内置类型*/ list-style-image: url("myjpg.jpg"); /*列表项-用本地图片*/ list-style-position: inside; /*列表标志位置*/ }

表格

参考文档：四款好看实用的CSS表格样式分享

table{ border: 10px; /*外边框长度 颜色*/ border-collapse: collapse; /*外边框折叠*/ padding: 15px; /*内边距*/ }

轮廓

p{ outline: black; /*轮廓属性*/ outline-color: #b3d4fc; /*轮廓颜色*/ outline-style: groove; /*轮廓样式*/ outline-width: 10px; /*轮廓宽度*/ }

定位

定位

参考文档：CSS position 属性

#d1{ position: absolute; /*位置布局*/ left: 50px; /*偏移量*/ right: 50px; top: 50px; bottom: 50px; z-index: 1; /*（有元素覆盖时的）覆盖顺序优先级*/ } 值描述absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。fixed生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。relative生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。static默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。inherit规定应该从父元素继承 position 属性的值。

浮动

<style type="text/css"> #d1{ width: 100px; height: 100px; background-color: #b3d4fc; float: inherit; /*浮动*/ /*取值有：左、右、继承、不浮动等*/ clear: inherit; /*浮动清除*/ /*取值和float一样*/ } </style> <div id="d1"></div>

常用操作

对齐

#d1{ margin: 100px 100px auto; /*外边框*/ /*auto为自适应，一般居中*/ position: absolute; /*位置*/ /*absolute为绝对布局*/ float: left; /*浮动*/ /*left为从左浮动*/ }

尺寸

#d1{ width: 100px; /*宽度*/ height: 100px; /*高度*/ max-height: 50px; /*元素最大高度*/ min-height: 10px; /*元素最小高度*/ max-width: 50px; /*元素最大宽度*/ min-width: 10px; /*元素最小宽度*/ line-height: 5px; /*行高*/ }

显示

#d1{ float: left; /*浮动方向*/ clear: left; /*清除浮动*/ position: absolute; /*位置*/ visibility: inherit; /*可见*/ display: block; /*显示模式*/ /*列表常用*/ cursor: cell; /*指向时显示的指针类型*/ }

盒子模型

通常使用div分块。 从内到外，依次是： content，内容。 padding，内边距。 border，边框。 margin，外边距。

四部分内容详解

内容content

其大小靠width和height属性指定。

内边距padding

#d1{ padding: 10px; /*直接设置所有内边距*/ padding-left: 5px; /*左*/ padding-right: 5px; /*右*/ padding-top: 5px; /*上*/ padding-bottom: 5px; /*下*/ }

边框border

#d1{ border-width: 10px; /*宽度*/ border-style: double; /*边框样式 多种类型*/ /*四个方向单独定义边框样式*/ border-left-style: double; border-right-style: double; border-top-style: double; border-bottom-style: double; border-color: #b3d4fc; /*颜色*/ /*颜色也可以使用四个方向单独定义*/ }

CSS3边框：

<style type="text/css"> #d1{ width: 200px; background-color: aquamarine; text-align: center; border-radius: 10px; /*圆角边框*/ box-shadow: 10px 10px 5px #b3d4fc; /*边框阴影*/ border-image: url("myjpg.jpg"); /*边框图片*/ } </style> <div id="d1">测试</div>

代码结果：

外边距margin

通常为透明区域。

#d1{ margin: 10px; /*设置所有外边距*/ margin-left: 5px; margin-right: 5px; margin-top: 5px; margin-bottom: 5px; } 外边距是可以覆盖的： A的右边距为100，B的左边距为100，则实际上A和B的距离为max(100, 100)。外边距和外边距之间是不冲突的，可以叠加/覆盖的。

综合示例

<style type="text/css"> .margin{ margin: 100px; color: #b3d4fc; } .border{ border-style: groove; width: 250px; color: #888888; } .padding{ padding: 20px; color: aquamarine; } .content{ background-color: blueviolet; width: 150px; } </style> <div class="margin"> <div class="border"> <div class="padding"> <div class="content"> 具体内容 </div> </div> </div> </div> 代码结果：

CSS3动画

浏览器兼容

大多数动画方法有针对不同浏览器的兼容方法。

方法前缀对应浏览器-webkit-Safari、Chrome-ms-IE-o-Opera-moz-Firefox

转换

2D

浏览器兼容方法-以2D移动操作为例： /*不同浏览器的兼容版本方法*/ -webkit-transform: translate(100px, 100px); /*Safari Chrome*/ -ms-transform: translate(100px, 100px); /*IE*/ -o-transform: translate(100px, 100px); /*Opera*/ -moz-transform: translate(100px, 100px); /*Firefox*/ 移动： transform:translate(100px, 100px); /*移动效果 (X轴, Y轴)*/ 旋转： transform:rotate(60deg) /*旋转效果 (角度deg)*/ 缩放： transform:scale(1,2); /*缩放效果 (X方向, Y方向)*/ 倾斜（仿射变换）： transform:skew(60deg, 60deg); /*倾斜效果 (X轴旋转, Y轴旋转)*/ Matrix：

参考文档：对CSS3中的transform：Matrix（）矩阵的一些理解

3D

旋转： transform: rotateX(50deg); /*X*/ transform: rotateY(50deg); /*Y*/

浏览器兼容性同上。

过渡

参考文档：CSS3 过渡

应用于宽度属性的过渡效果，时长为 2 秒： transition: width 2s; 规定当鼠标指针悬浮于元素上时： .d1:hover{ width:300px; } CSS3转换属性简介： 属性描述transition简写属性，用于在一个属性中设置四个过渡属性。transition-property规定应用过渡的 CSS 属性的名称。transition-duration定义过渡效果花费的时间。默认是 0。transition-timing-function规定过渡效果的时间曲线。默认是 “ease”。transition-delay规定过渡效果何时开始。默认是 0。 实例： .d1{ transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s; } 简写： transition: width 1s linear 2s;

动画

关键字animation，使用@keyframes接名称定义。

示例： <style type="text/css"> .d1 { width: 100px; height: 100px; background-color: blueviolet; position: relative; animation:a1 5s; /*指定名称 动画时间*/ } @keyframes a1{ /*动画时间节点 定义不同的颜色 和位置*/ 0%{background: #b3d4fc; left: 0; top: 0} 25%{background: #888888; left: 200px; top: 0px} 50%{background: black; left: 200px; top: 200px} 75%{background: #555555; left: 0px; top: 200px} 100%{background: #cccccc; left: 0px; top: 0px} } </style> <div class="d1"> </div>

代码结果：

状态1： 状态2： 状态3： 状态4：

多列

可以创建多列对文本或者区域进行布局。

<style type="text/css"> .d1 { column-count: 3; /*数量*/ column-width: 250px; /*宽度*/ column-gap: 50px; /*边距*/ column-rule: 5px outset #FF0000; /*规则*/ } </style> <div class="d1"> AAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAA </div> 代码结果：

瀑布流效果

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。

示意图片： 示例： <style type="text/css"> .d1{ column-width: 250px; /*宽度*/ column-gap: 5px; /*边距*/ } .d1 .d2{ width: 250px; /*宽度*/ margin: 5px 0; /*边缘长度*/ } </style> <div class="d1"> <div class="d2"> <img src="image/1.jpg "> <img src="image/2.jpg "> <img src="image/3.jpg "> <img src="image/4.jpg "> <img src="image/5.jpg "> <img src="image/6.jpg "> <img src="image/1.jpg "> <img src="image/2.jpg "> <img src="image/3.jpg "> <img src="image/4.jpg "> <img src="image/5.jpg "> <img src="image/6.jpg "> </div> </div>

其核心是采用多列、只定义宽度不定义长度。

代码结果：