CSS3 学习笔记
一 l CSS 基础
(一)CSS 介绍
CSS指层叠样式表,堆叠样式的工具
小范围的样式定义层级高于大范围的样式定义
1、CSS 教程
本文参考教程:[H5+CSS+JS视频教程]
一般当字典用:[CSS 教程(菜鸟教程)]
2、CSS 编写规范
[CSS 规范易读版]
[Google HTML/CSS 规范]
(二)CSS 基础语法
/* 单属性 */
selector {
property: value;
}
/* 多属性 */
selector {
property1: value1;
property2: value2;
}
二 l CSS 选择器
(一)元素选择器
选择页面的某种元素
body { }
示例解释:选择器选择了body元素
(二)选择器分组(多个选择器使用同一个样式)
selector1, selector2, selector3 { property: value; }
示例解释:这里选择了3个选择器
* { }
示例解释:这里使用通配符选择了所有元素 【规范代码中不允许使用】
(三)类选择器
类选择器以".类名"选择元素
类选择器可以和派生选择器一起用,将标签名换成".类名"就好
1、全选相同类名
<div class="divclass">hello css</div>
.divclass { color: #f00; }
2、结合元素选择器(选择指定标签下的指定类名)
<div class="classname">div</div> <a class="classname">a</a>
a.classname { color: #f00; }
示例解释:这里只选择了a标签的classname,没有选择div标签 【规范代码中不推荐使用】
3、多类选择器(通过多个类名选择)
<p class="p1">sthis is my web page</p> <p class="p2">this is my web page</p> <p class="p1 p2">this is my web page</p>
.p1 { color: blue; } .p2 { font-size: 30px; } .p1.p2 { font-style: italic; }
示例解释:当类定义为"p1 p2"时,会同时拥有两个类定义的效果,此时定义独属于自己的样式时要调用".p1.p2"
(四)id选择器
id选择器以"#id名"来定义,为标有id的HTML元素指定样式
id选择器可以和派生选择器一起用,将标签名换成"#id名"就好
<div id="divid">hello css</p>
#divid { color: #f00; }
(五)属性选择器
对带有指定属性的HTML元素设置样式
<div title="t">hello css</p>
[title] { } [title="te"] { } [title~="te"] { }
示例解释:
[title]
选择设置了title
属性的HTML元素;[title="te"]
选择设置了title="te"
属性的HTML元素;[title~="te"]
选择设置了title="X"且X包含"te"
属性的HTML元素
(六)补充与扩展
1、补充
补充1:继承(小标签如果没定义样式,会自动使用大标签的css配置)
body { color: #f00; }
示例解释:
<body>
内的标签如果没有定义,都会默认使用红色。
补充2:id选择器与class选择器差别
id选择器:名称 不可重复 ,通常在搭建框架时使用,先加载 内容 再加载 样式,不能结合使用,使用js时会用到id
class选择器:名称 可重复 ,通常在具体实现时使用,先加载 样式 再加载 内容,可以结合使用(指定有多个class的元素)
2、【扩展】派生选择器(后代选择器)(速度快)
通过依据元素在其位置的上下文关系来定义样式,选择某元素后代的元素,允许跨代
<p>a<strong>b<i>c</i>d</strong>e</p>
/* 查找子代,bcd会变为红色 */ p strong { color: #f00; } /* 跨代查找,c会变为红色 */ p i { color: #f00; } /* 等价于p i,c会变为红色 */ p strong i { color: #f00; }
3、【补充】子元素选择器
子元素选择器只能选择作为某元素子元素的元素,跨代需要查找多次
<p>a<strong>b<i>c</i>d</strong>e</p>
/* 查找子代,bcd会变为红色 */ p > strong { color: #f00; } /* 跨代查找,报错 */ p > i { color: #f00; } /* c会变为红色 */ p > strong > i { color: #f00; }
4、【补充】相邻兄弟选择器(不常用)
可选择紧接在另一个元素后的元素,且二者有相同父元素
<div> <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> </div>
li + li { font-weight: bold; }
示例解释:选择前面有<li>的<li>,所每个 List item 2 和 List item 3 都会加粗,因为它们之前都有<li>标签
三 l CSS 样式
样式是大括号中的内容
(一)CSS 常用样式
下文中几乎所有Xpx都可以改为Xem、X%、auto
常用样式属性 | 解释 |
---|---|
width: Xpx; | 设置样式宽度 |
heigth: Xpx; | 设置样式高度 |
padding: Xpx; | 设置样式外边框大小(内边距) |
margin: (四周Xpx) / (上下Xpx 左右Xpx); | 设置样式外边距大小 |
text-align: left / center / right; | 设置文本对齐方式(左 / 中 / 右) |
color: 颜色X; | 设置文本颜色(会继承给子标签) |
background-color: 颜色; | 设置背景颜色 |
(二)CSS 背景
允许纯色、图片等创建背景
背景样式属性 | 解释 |
---|---|
background-attachment: scroll(默认) / fixed; | 设置背景图像位置(固定页面绝对位置 / 固定浏览器绝对位置) |
background-color: 颜色; | 设置背景颜色 |
background-image: url(图片地址); | 设置背景图片 |
background-position: 显示位置 (显示中心); | 设置背景图片的起始位置 (只填写显示位置时,显示中心默认为center) 显示位置 (显示中心)表示法用英文如right top表示; 左上端点定位法用像素右下偏移量如100px 100px表示或50% 50%表示。 |
background-repeat: no-repeat / repeat(默认) / repeat-x / repeat-y; | 设置背景图片是否及如何重复(不允许 / 允许(默认) / 允许x轴 / 允许y轴) |
背景样式属性(CSS3) | 解释 |
---|---|
background-size: 宽度px 高度px; | 设置背景图片的尺寸 |
background-origin | 设置背景图片的定位区域 |
background-clip | 设置背景的绘制区域 |
(三)CSS 文字样式(字体、文本、链接)
1、字体
字体样式属性 | 解释 |
---|---|
font-family: 字体名; | 设置字体系列 |
font-size: Xpx; | 设置字体尺寸 |
font-style | 设置字体风格 |
font-variant | 以小型大写字体或正常字体显示文本 |
font-weight | 设置字体的粗细 |
外部引入字体(CSS3)【不推荐】:
@font-face {
font-family: 字体名(可以自定义);
src: url(字体链接);
}
2、文本
文本样式属性 | 解释 |
---|---|
color: 颜色X; | 设置文本颜色(会继承给子标签) |
text-align: left / center / right; | 设置文本的对齐方式(左 / 中 / 右) |
text-indent: Xem / X%; | 设置文本的首行缩进 |
text-transform: capitalize / lowercase / uppercase; | 设置字母大小写转换(首字母大写 / 全小写 / 全大写) |
direction | 设置文本方向 |
line-height | 设置行高 |
letter-spacing | 设置字符间距 |
text-decoration | 设置文本修饰 |
unicode-bidi | 设置文本方向 |
white-space | 设置元素中空白的处理方式 |
word-spacing | 设置字间距 |
文本样式属性(CSS3) | 解释 |
---|---|
text-shadow: 阴影向右偏移Xpx 阴影向下偏移Xpx 阴影模糊度Xpx 阴影背景颜色#ff0000; | 设置文本阴影 |
word-wrap | 设置文本换行 |
3、链接
(1)链接的四种状态(都是选择器名)
/* 普通的、未被访问的链接*/
a:link {
}
/* 用户已访问的链接 */
a:visited {
}
/* 鼠标指针位于链接的上方 */
a:hover {
}
/* 链接被点击的时刻 */
a:active {
}
(2)常见的链接样式
链接样式属性 | 解释 |
---|---|
text-decoration | 设置链接是否显示下划线(默认显示 / 不显示none) |
background-color: 颜色; | 设置背景颜色 |
(四)CSS 文字外样式(列表、表格、轮廓)
1、列表
CSS列表属性允许你放置、改变列表标志,或者将图像作为列表项标志
列表样式属性 | 解释 |
---|---|
list-style | 简写列表项 |
list-style-type | 设置列表项行头显示类型(实心圆、空心圆等) |
list-style-image: url(图片地址); | 设置列表项行头显示图片 |
list-style-position: inside / outside; | 列表标志位置(上一个元素缩进加一 / 一缩进) |
2、表格
CSS表格属性可以帮助我们极大的改善表格的外观。
表格样式属性 | 解释 |
---|---|
border: 粗细Xpx 外边框solid 边框颜色X; | 设置表格边框 |
border-collapse: collapse; | 设置折叠边框(将两条平行线合并) |
width: Xpx; heigth: Xpx; | 设置表格总宽高【非表格独有样式】 |
text-align: left / center / right; | 设置表格文本对齐(左 / 中 / 右)【非表格独有样式】 |
background-color: 颜色; | 设置表格颜色【非表格独有样式】 |
padding: Xpx; | 设置表格内边距【非表格独有样式】 |
3、轮廓
轮廓样式属性 | 解释 |
---|---|
outline | 设置轮廓属性 |
outline-color | 设置轮廓的颜色 |
outline-style | 设置轮廓的样式 |
outine-width | 设置轮廓的宽度 |
(五)CSS 定位
改变元素在页面上的位置。
CSS定位机制:
普通流:元素按照其在HTML中的位置顺序决定排布的过程
浮动:在单独的浮动层
绝对布局:固定在浏览器或网页的固定位置
1、定位属性
定位样式属性 | 解释 |
---|---|
position: static / relative / absolute / fixed; | 【定位】static静态的(不能重叠,偏移量不起效果)、 relative相对的(可以重叠,偏移量起效果)、 absolute绝对的(可以重叠,固定在页面绝对位置,不会与其他元素顺序排列)、 fixed固定的(固定在浏览器绝对位置,不会与其他元素顺序排列) |
top | 元素向上的偏移量 |
left | 元素向左的偏移量 |
right | 元素向右的偏移量 |
bottom | 元素向下的偏移量 |
overflow | 设置元素溢出其区域发生的事情 |
clip | 设置元素显示的形状 |
vertical-align | 设置元素垂直对齐方式 |
z-index: X; | 设置元素的堆叠顺序(X越大显示越在前面) |
2、浮动属性
浮动是将元素设置在浮动画布上(显示在其他元素之前),浮动元素会跟浮动元素排列,浮动元素的父元素也会有浮动性质,浮动可以用来实现文字环绕的效果。
浮动样式属性 | 解释 |
---|---|
float: left / right / none / inherit; | 【浮动】(向左浮动 / 向右浮动 / 不浮动 / 继承父级浮动设置) |
clear: left / right / both / inherit; | 【去除浮动】(去除左浮动 / 去除右浮动 / 去除两边浮动 / 继承父级去除浮动设置) |
(六)CSS 盒子模型
每一个元素外面包裹着由内到外为内边距padding(默认无值)、边框border(默认无值)、外边距margin(默值不同但透明)三层结构的盒子。
内边距样式属性 | 解释 |
---|---|
padding: Xpx; | 设置四周内边距,样式扩展 (设置上边距padding-top、设置下边距padding-bottom、 设置左边距padding-left、设置右边距padding-right) |
边框样式属性 | 解释 |
---|---|
border: 边框粗度Xpx 外边框solid 边框颜色X; | 设置边框粗细 |
border-width: 边框宽度Xpx; | 设置边框宽度,样式扩展: (设置上边框宽度border-top-width、设置下边框宽度border-bottom-width、 设置左边框宽度border-left-width、设置右边框宽度border-right-width) |
border-style: 边框样式; | 设置四周边框样式,样式扩展: (设置上边框样式border-top-style、设置下边框样式border-bottom-style、 设置左边框样式border-left-style、设置右边框样式border-right-style) |
border-color: 边框颜色X; | 设置四周边框颜色,样式扩展: (设置上边框颜色border-top-color、设置下边框颜色border-bottom-color、 设置左边框颜色border-left-color、设置右边框颜色border-right-color) |
border-radius: 圆角程度Xpx; | 设置圆角边框 |
box-shadow: 向右移动Xpx 向下移动Xpx 透明度Xpx 颜色X; | 设置边框阴影 |
border-image | 设置边框图片 |
外边距样式属性 | 解释 |
---|---|
margin: Xpx; | 设置四周外边距(单参数设置四周边距,双参数设置左右边距和上下边距),样式扩展: (设置上边距margin-top、设置下边距margin-bottom、 设置左边距margin-left、设置右边距margin-right) |
注意:
两元素间的外边距不会叠加,只会取两者外边距较大值。
四 l CSS 动画
(一)2D、3D转换
通过CSS3转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸
transform样式属性可以使用如下方法:
safari / chrome浏览器使用:
-webkit-transform: xxx;
IE浏览器使用:-ms-trans form: xxx;
opera浏览器使用:-o-transform: xxx;
Firefox浏览器使用:-moz-transform: xxx;
1、2D转换方法
转换方法 | 解释 |
---|---|
translate(右移Xpx, 下移Xpx) | 平移 |
rotate(顺时针旋转Xdeg) | 顺时针旋转(deg:度) |
scale(宽度倍数X, 高度倍数X) | 缩放 |
skew(x轴旋转角度Xdeg, y轴旋转角度Xdeg) | 倾斜 |
matrix() | 矩阵 |
2、3D转换方法
转换方法 | 解释 |
---|---|
rotateX(Xdeg) | X轴旋转 |
rotateY(Xdeg) | Y轴旋转 |
(二)过渡
CSS3过渡是元素从一种样式转换成另一种样式
过渡样式属性 | 解释 |
---|---|
transition: width Xs(水平过渡时间), height Xs(垂直过渡时间), transform Xs(平移时间); | 设置四个过渡属性 |
transition-property | 设置过渡的名称 |
transition-duration | 设置过渡效果花费的时间 |
transition-timing-function | 设置过渡效果的时间曲线 |
transition-delay: Xs(延时时间); | 设置过渡效果延时开始时间 |
/* 原矩形100px*100px,蓝色填充,动画时间2秒 */ div { width: 100px; height: 100px; background-color: #00f; -webkit-transition: width 2s,height 2s,-webkit-transform 2s; transition: width 2s, height 2s, transform 2s; } /* 鼠标放在矩形上后变为200px*200px;顺时针旋转360度 */ /* 鼠标挪走后,会执行相反的动画返回之前的状态 */ div:hover { width: 200px; height: 200px; transform: rotate(360deg); -webkit-transform: rotate(360deg); }
(三)动画
CSS3的动画需要遵循@keyframes规则,即需要规定动画的名称和时长
动画样式属性 | 解释 |
---|---|
animation: X(动画名称) Xs(动画时长) infinite(无限次) alternate(带反向动画); | 定义动画 |
animation-name | 设置需要绑定到选择器的keyframe名称 |
animation-duration | 设置完成动画所花费的时间,以秒或室秒计 |
animation-timing-function | 设置动画的速度曲线 |
animation-delay | 设置在动画开始之前的延迟 |
animation-iteration-count | 设置动画应该播放的次数 |
animation-direction | 设置是否应该轮流反向播放动画 |
定义完样式属性后需要定义一个@keyframes X
的选择器,具体示例如下:
/* 动画名为"anim",动画时间为5秒;-webkit-浏览器前缀 */
div {
width: 100px;
height: 100px;
background-color: #f00;
position: relative;
animation: anim 5s infinite alternate;
-webkit-animation: anim 5s infinite alternate;
}
@keyframes anim {
0%{
background: #0f0;
left: 0;
top: 0;
}
25%{
background: #00f;
left: 200px;
top: 0;
}
50%{
background: #cfc;
left: 200px;
top: 200px;
}
75%{
background: #0ff;
left: 0;
top: 200px;
}
100%{
background: red;
left: 0;
top: 0;
}
}
@-webkit-keyframes anim {
0%{
background: #0f0;
left: 0;
top: 0;
}
25%{
background: #00f;
left: 200px;
top: 0;
}
50%{
background: #cfc;
left: 200px;
top: 200px;
}
75%{
background: #0ff;
left: 0;
top: 200px;
}
100%{
background: red;
left: 0;
top: 0;
}
}
(四)多列
自动将行排布的元素改为列排布(即超过一定长度自动换列)
多列样式属性 | 解释 |
---|---|
column-count | 设置分列数量 |
column-gap | 设置列间距 |
column-rule | 设置列间隔线属性 |
<body>
<div class="div1">
假装有很多很多句子
</div>
</body>
/* 分为3列;列间隔50px;间隔线粗5px,颜色为红色 */
.div1 {
column-count: 3;
column-gap: 50px;
column-rule: 5px outset #f00;
}
五 l CSS 常用操作
(一)对齐操作
margin:
/* 居中对齐 */
selector {
margin-left: auto;
margin-right: right;
}
/* 居中对齐 */
selector {
margin: 0 auto;
}
position:
/* 向左对齐 */
selector {
position: absolute;
left: 0;
}
/* 向右对齐 */
selector {
position: absolute;
right: 0;
}
float:
/* 向左对齐 */
selector {
float: left;
}
/* 向右对齐 */
selector {
float: right;
}
(二)尺寸操作
尺寸样式属性 | 解释 |
---|---|
height | 设置元素高度 |
line-height | 设置行高 |
max-height | 设置元素最大高度 |
min-height | 设置元素最小高度 |
width | 设置元素宽度 |
max-width | 设置元素最大宽度 |
min-width | 设置元素最小宽度 |
(三)分类操作
分类样式属性 | 解释 |
---|---|
position | 把元素放置到一个静态的、相对的、绝对的、固定的位置 |
float | 设置元素向哪个方向浮动 |
clear | 设置一个元素的侧面是否允许其他的浮动元素 |
cursor | 设置指向某元素之上时显示的指针形状 |
display | 设置是否及如何显示元素(如将列表变为横向排布作为导航栏) |
visibility: visible / hidden; | 设置元素是否可见或不可见(可见 / 不可见) |
(四)导航栏简单示例
HTML代码:
<body>
<ul>
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
</ul>
</body>
垂直导航栏的CSS代码:
/* 内外边距为0,列表去除项头标记 */
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
/* 未点击和点击过时;展示为块;宽度为50px;字体颜色为白色,居中,去除下划线;背景颜色为红色 */
a:link, a:visited {
display: block;
width: 50px;
color: #fff;
text-align: center;
text-decoration: none;
background-color: #f00;
}
/* 鼠标放上选项后为蓝色 */
a:active, a:hover {
background-color: #00f;
}
水平导航栏的CSS代码:
/* 内外边距为0,列表去除项头标记 */
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
/* 未点击和点击过时;宽度为50px;字体颜色为白色,居中,去除下划线;背景颜色为红色 */
a:link, a:visited {
width: 50px;
color: #fff;
text-align: center;
text-decoration: none;
background-color: #f00;
}
/* 鼠标放上选项后为蓝色 */
a:active, a:hover {
background-color: #00f;
}
/* 水平摆放 */
li {
display: inline;
}
(五)图片页简单示例
HTML代码:
<body>
<div class="container">
<div class="image">
<!-- 跳转自己 -->
<a href="#" target="_self">
<!-- 注释为“风景” -->
<img src="1.jpg" alt="风景" width="200px" height="200px">
</a>
<!-- 文本为“8月份的维多利亚” -->
<div class="text">8月份的维多利亚</div>
</div>
</div>
</body>
CSS代码:
body{
margin: 18px auto;
width: 70%;
height: auto;
}
.image{
float: left;
border: 1px solid #f00;
margin: 5px;
width: auto;
height: auto;
text-align: center;
}
img {
margin: 5px;
opacity: 1;
}
.text {
margin-bottom: 5px;
font-size: 12px;
}
(六)图片页瀑布流简单示例
HTML代码:
<body>
<div class="container">
<div><img src="img/1.jpg"></div>
<div><img src="img/2.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/4.jpg"></div>
<div><img src="img/5.jpg"></div>
<div><img src="img/6.jpg"></div>
<div><img src="img/7.jpg"></div>
<div><img src="img/8.jpg"></div>
<div><img src="img/9.jpg"></div>
</div>
</body>
CSS代码:
/* 每列宽度为250px;列间距为5px */
.container {
column-width: 250px;
column-gap: 5px;
}
/* 每个图片固定宽度为250px;上下外边距5px,左右外边距0px */
.container div {
width: 250px;
margin: 5px 0;
}