参考视频：【极客学院】Web前端开发教学 - 第一部分：H5+CSS+JS
参考文档：CSS 教程 W3school
文章目录
概述
层叠样式表(英文全称：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：
- 状态1：
多列
可以创建多列对文本或者区域进行布局。
<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>
其核心是采用多列、只定义宽度不定义长度。
- 代码结果：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
