本文总结了CSS的学习，从选择器到盒子模型，再到CSS3的2D/3D转换和动画。内容包括标签选择器、类选择器、ID选择器、背景、字体、链接样式、表格、轮廓、定位、浮动、盒子模型详解以及CSS3的过渡、动画和用户界面等。
CSS技术梳理
CSS的基本语法结构
// h1 ——为选择器 大括号中编辑属性和值
// 设置字体颜色为红色，字体大小14px
h1 {
color : red;
font-size: 14px;
}
CSS 选择器
1. 标签选择器
如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a
// 选择器以标签名 命名，说明样式给那个标签加
html {color: black;}
p {color: gray;}
h2 {color: silver;}
h2 , p {font-size: 20px}
2. 类选择器
在HTML文档中的指定标签上 加class属性，给该标签加属性时就可以用 . class名来当选择器
// css样式书写
.size { font-size: 20px }
// html文档加class属性
<p class="size">类选择器</p>
3. ID 选择器
不同于类选择器，ID 选择器不能结合使用，ID 选择器会使用一次，而且仅一次
// css样式书写
#size { font-size: 20px }
// html文档加class属性
<p id="size">类选择器</p>
4. 后代选择器
后代选择器可以选择作为某元素后代的元素
// css 代码
h1 em {color:red;}
// 把h1 标签下的 em标签颜色改为红色
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
5. 子元素选择器
子元素选择器只能选择作为某元素子元素的元素
// css 代码
h1 > strong {color:red;}
// 规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
6. CSS 相邻兄弟选择器
相邻兄弟选择器 可选择紧接在另一元素后的元素，且二者有相同父元素。
// css 代码
h1 + p{color: red}
// 样式选中的是 与h1 同级的 第一个p元素
<body>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
</body>
7. 伪类
CSS 伪类用于向某些选择器添加特殊的效果
锚伪类：
| 伪类 | 链接的不同状态 |
|---|---|
| a:link { } | 未被访问状态 |
| a:visited { } | 已访问的链接 |
| a:hover { } | 鼠标移动到链接上 |
| a:active { } | 选定的链接 |
8. 属性选择器
争对某元素的固定属性的标签
| 结构 | 描述 |
|---|---|
| E[att] | 选择具有att属性的E元素 |
| E[att=“val”] | 选择具有att属性且属性值等于val的E元素 |
| E[att^=“val”] | 匹配具有att属性，且值以val开头的E元素 |
| E[att$=“val”] | 匹配具有att属性，且值以val结尾的E元素 |
| E[att*=“val”] | 匹配具有att属性，且值中含有val的E元素 |
9. 结构伪类选择器
选择父类元素中的某一个值
| 样式结构 | 描述 |
|---|---|
| E：first-child | 匹配父元素中的第一个子元素E |
| E：last-child | 匹配父元素中最后一个E元素 |
| E：nth-child（n） | 匹配父元素中的第n个子元素E 其中n可以为even偶数 |
| E：nth-last-child（n） | 定义某一个父元素的最后一个子元素开始计算 |
| E：first-of-type | 指定类型E的第一个 |
| E：last-of-type | 指定类型E的最后一个 |
| E：nth-of-type（n） | 指定类型E的第n个 |
| E ：nth-last-of-type(){} | 定义某一个父元素中某一种类型的最后一个元素 |
10. 伪元素
| 属性 | 描述 |
|---|---|
| :first-letter | 向文本的第一个字母添加特殊样式。 |
| :first-line | 向文本的首行添加特殊样式。 |
| :before | 在元素之前添加内容。 |
| :after | 在元素之后添加内容。 |
CSS样式
争对HTML文档添加特殊效果的语法
CSS 背景
对页面背景的一波操作
| 操作 | 代码示例 | 值的介绍 |
|---|---|---|
| 背景颜色 | background-color：red; | 默认值：transparent透明色 |
| 背景透明 | background：rgba（0，0，0，0.3） | 最后一个参数是透明度值 0-1 可直接写.3 |
| 背景图片 | background-image：url() | 括号中的图片地址不加引号 |
| 背景平铺 | background-repeat：repeat平铺 | no-repeat(不平铺) repeat-x / y(x / y 轴平铺) |
| 背景位置 | background-position：0 0 | 可写百分数 方位词 值 |
| 背景附着 | background-attachment：sroll / fixed | scroll：背景随内容一起滚动 fixed：背景图像固定 |
| 背景简写 | background：背景颜色 背景图片地址 背景平铺 | 背景滚动 背景位置； |
| 规定背景在盒子中的位置 | background-origin： | content-box、padding-box 或 border-box |
| 规定背景的绘制区域 | background-clip | content-box、padding-box 或 border-box |
CSS 字体
通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等
| 属性 | 描述 | 值 |
|---|---|---|
| text-indent | 缩进文本 | 负值 百分比 |
| text-align | 水平对齐 | left、right 和 center justify |
| word-spacing | 字间隔 | 默认值 0 px 、 em |
| letter-spacing | 字母间隔 | 默认值 normal ，px ，em |
| text-transform | 字符转换 | uppercase(全大写), lowercase(全小写) , capitalize(首大写) |
| text-decoration | 文本划线 | none, overline, line-through, underline |
| direction | 文本方向(行内元素有局限) | ltr(左) 和 rtl (右) |
| text-shadow | 文本阴影 | text-shadow: 5px 5px 5px #FF0000; |
| word-wrap | 文本自动换行 | break-word |
| white-space | 处理内容空白符 | 以下列举： |
| – | – | – |
| pre-line | 合并空白符 | 允许自动换行 |
| normal | 合并空白符 | 允许自动换行 |
| nowrap | 合并空白符 | 不允许自动换行 |
| pre | 保留空白符 | 不允许自动换行 |
| pre-wrap | 保留空白符 | 允许自动换行 |
CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）
| 属性 | 描述 | 值 |
|---|---|---|
| font-family | 指定文字的字体样式 | |
| font-style | 规定斜体文本 | normal - 文本正常显示 ， italic - 文本斜体显示 |
| font-variant | 设定小型大写字母 | small-caps |
| font-weight | 设置文本的粗细 | bold ，500，900 |
| font-size | 设置文本的大小 | 像素 |
CSS链接
我们能够以链接的不同状态为链接设置样式
| 属性 | 描述 |
|---|---|
| a:link { } | 未被访问的链接的样式 |
| a:visited { } | 已被访问的链接的样式 |
| a:hover { } | 鼠标指针移动到链接上的样式 |
| a:active { } | 正在被点击的链接的样式 |
CSS 列表
CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志
| 属性 | 描述 | 值 |
|---|---|---|
| list-style-type： | 修改用于列表项的标志类型 | circle(圆形) square(方块) |
| 有序的标志类型 | upper-roman(I II III) lower-alpha(a b c ) | |
| list-style-image | 列表项图像 | url(xxx.gif) |
| list-style-position | 列表标志位置 | inside(文本以内) ，outside(文本的左侧) inherit(继承父类该属性值) |
| list-style | 简写列表样式 | 图像 / 样式 / 位置 |
CSS 表格
表格属性可以帮助您极大地改善表格的外观
| 属性 | 描述 | 值 |
|---|---|---|
| border: 1px solid blue | 表格边框 | dashed(虚线) dotted(点线) |
| border-collapse: | 表格边框折叠为单一边框 | collapse |
| text-align: | 表格水平对齐 | left / right / center |
| vertical-align: | 设置垂直对齐方式 | 顶部对齐、底部对齐或居中对齐 |
| padding | 表格内边距 | px |
CSS 轮廓
绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
规定了 !DOCTYPE，则IE8支持该属性
| 属性 | 描述 | 值 |
|---|---|---|
| outline-color | 设置轮廓的颜色 | #000000 |
| outline-style | 设置轮廓的样式 | solid，dashed，dotted…… |
| outline-width | 设置轮廓的宽度 | px |
| outline | 所有的轮廓属性 | 颜色 样式 宽度 |
CSS盒子模型
概述
CSS 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式
提示：内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。
提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距。
兼容性：IE5.X和IE6 的浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
边框
边框有三部分组成 (边框颜色)，(边框宽度)，(边框样式)
| 属性 | 描述 | 值 |
|---|---|---|
| border-color | 边框颜色 | |
| border-width | 边框宽度 | |
| border-style | 边框样式 | solid dotted dashed |
| border-radius | 圆角边框 | lenght |
| box-shadow | 边框阴影 | box-shadow: 0 15px 30px rgba(0,0,0,.3) |
| border-image | 边框设置为图片 | url(border.png) |
还可以单独指定边框
// 要设置上边框的颜色 / 下边框的样式 根据需求设置
border-top-color: red;
border-bottom-style: dashed;
内外边距
内边距
边框和内容区之间的区域是内边距 padding
| 属性 | 描述 |
|---|---|
| padding-top | 设置元素的上内边距 |
| padding-right | 设置元素的右内边距 |
| padding-bottom | 设置元素的下内边距 |
| padding-left | 设置元素的左内边距 |
| padding | 简写属性 |
外边距
围绕在元素边框的空白区域是外边距， margin这个属性接受任何长度单位、百分数值甚至负值。
| 属性 | 描述 |
|---|---|
| margin-top | 上外边距 |
| margin-right | 右外边距 |
| margin-bottom | 下外边距 |
| margin-left | 左外边距 |
| margin | 简写属性 |
盒子水平居中的方法
方法一：margin-left：auto； margin-right：auto；
方法二：margin：auto；
方法三：margin：0 auto；
盒子与盒子坍塌解决方案
两个盒子相邻或嵌套外边框合并
| 解决方法 | 代码实现 |
|---|---|
| 1.可以给父元素定义上边框 transparent透明 | border-top：1px solid transparent； |
| 2.可以给父级指定一个上padding值 | padding-top：1px; |
| 3.可以给父元素添加overflow：hidden | overflow：hidden； |
盒子定位
CSS 定位属性允许你对元素进行定位
CSS 有三种基本的定位机制：普通流、浮动和绝对定位
定位
position ： 属性的使用：
| 属性值 | 描述 |
|---|---|
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
当一个父级下的子级有多个设置了绝对定位，设置堆叠顺序
z-index ：属性值正整数，负整数，0，没有单位
浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止
float：none / left / right
清除浮动
- 额外标签法：
在设置浮动的元素后加一个标签 设置一个 clear：both
< div style=“clear: both”>< /div> - 父级添加overflow属性方法
overflow： hidden || auto || scroll都可以实现 - 使用after伪元素清除浮动
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
// IE6,7专有
.clearfix {
*zoom: 1;
}
双伪元素清除浮动
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
问题
- 元素的显示与隐藏
| 属性 | 描述 |
|---|---|
| display： none | 隐藏元素位置不保留 |
| display： block | 除了转换为块级元素之外，同时还有显示元素的意思 |
| visibility： visible | 对象可视 |
| visibility： hidden | 对象隐藏位置保留 |
- 文字在边框溢出问题
| 属性 | 描述 |
|---|---|
| overflow: visible | 不剪切内容也不添加滚动条 |
| overflow: hidden | 不显示超过对象尺寸的内容，超过的部分隐藏掉 |
| overflow: scroll | 不管超过内容否，总是显示滚动条 |
| overflow: auto | 超过自动显示滚动条，不超出不显示滚动条 |
| white-space： normal | 当文字显示不开的时候，自动换行 |
| white-space： nowrap | 强制在同一行显示文本，直到文本遇到br才换行 |
| overflow： hidden | 超出的部分隐藏 |
| text-overflow： ellipsis | 文字用省略号替代超出的文本 |
- 鼠标样式
| 属性 | 描述 |
|---|---|
| cursor：default | 默认箭头 |
| cursor：pointer | 小手 |
| cursor：move | 移动 |
| cursor：text | 文本 |
| cursor：not-allowed | 禁止 |
| resize： none | 防止用户拖拽文本域 |
| outline： none | 取消轮廓线 |
- 去除图片底部空白缝隙
| 属性 | 描述 |
|---|---|
| vertical-align: middle / top / bottom | 让图片不要基线对齐 |
| display： block： | 转换为块级元素 |
- 如何用css代码实现一个三角形图案
- 宽度和高度为 0
- 三角形的角的方位的反方位设置边框颜色，其他边为 transparent透明色
- 为考虑兼容性问题 加上 font-size：0； lind-height：0
// 三角形代码实现
div{
width: 0;
height: 0;
border-style: solid;
border-width: 10px;
border-color: transparent transparent transparent red;
font-size:0;
line-height: 0;
}
CSS3
CSS3 是最新的 CSS 标准。
2D 转换
一个元素平面的移动 ，旋转，缩放
| 属性 | 代码示例 | 描述 |
|---|---|---|
| transform : | transform：translate（100px，100px）； | 移动 |
| transform : | transform：rotate（度数） | 旋转 |
| transform | transform-origin：x y； | 转换中心点 |
| transform : | transform：scale（x，y）； | 缩放 |
综合写法：transform : 移动 旋转 缩放
3D 转换
与2D相比思维上多了Z轴
| 属性 | 代码示例 | 描述 |
|---|---|---|
| transform | transform: translae3d(_ _ _) | 3D位移 |
| transform | transform: rotateX(45deg) | 3D旋转 |
| transform | transform-style: preserve-3d | 3D呈现 |
| perspective | 数值 | 透视 |
透视越大成像越小，透视越小成像越大
透视写在被观察元素的父盒子上面
动画
可以在许多网页中取代动画图片，Flash，JavaScript
- 定义动画
// An highlighted block
@keyframes 名{
内容为0%{ }； 100%{ }
关键字 from or 等价于百分百
}
- 调用动画
// 在元素上调用动画
animation-name: 名
animation-duration: _s
| 属性 | 值 | 描述 |
|---|---|---|
| animation-name | 自定义 | 规定 @keyframes 动画的名称 |
| animation-duration | _s | 规定动画完成一个周期所花费的秒或毫秒。默认是 0 |
| animation-timing-function | 规定动画的速度曲线。默认是 “ease”。 | |
| steps | 数值 | 分几步来完成我们的动画 |
| animation-delay | _s | 规定动画何时开始。默认是 0。 |
| animation-iteration-count | 数值 | 规定动画被播放的次数。默认是 1 |
| animation-direction | alernate 逆播放 | 规定动画是否在下一周期逆向地播放。默认是 "normal |
| animation-play-state | 运行 running， pause(暂停) | 规定动画是否正在运行或暂停。默认是 “running” |
| animation-fill-mode | 起始backwards，保持forwards | 规定动画结束后状态 |
简写：animation ：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反反向 动画起始或者结束的状态
过度
元素从一种样式变换为另一种样式时为元素添加效果
| 属性 | 值 | 描述 |
|---|---|---|
| transition-property： | 规定应用过渡的css属性的名称 | 要过度的属性 |
| transition-duration： | 定义过渡效果花费的时间，默认是0 | 花费的时间 |
| transtion-timing-function | linear(匀速)，ease(逐渐慢下来) ，ease-in(加速) / out /in-out | 运动曲线 |
| transtion-delay | 规定过渡效果何时开始，默认0 | 何时开始 |
浏览器私有前缀
浏览器私有前缀，是浏览器对于新CSS属性的一个提前支持
通过添加浏览器私有前缀方式来提前支持新属性
| 私有前缀 | 代表浏览器 |
|---|---|
| -moz- | 代表firefox浏览器 |
| -ms- | 代表ie浏览器 |
| -webkit- | 代表Safari，chrome |
| -o- | 代表opera |
用户界面
怎样在页面中使用特殊的字体样式
IE8之前版本浏览器
- 把需要的字体从网上下载下来
- 在css代码中用 @font-face{ }
- 在代码块中用font-family： 命名
- 在代码块中用src：url（‘ 字体路径 ’）
- 使用font-family：命名 来引入字体来用
<style>
@font-face
{
font-family: myFirstFont;
src: url('字体路径'),
url('字体路径');
}
div
{
font-family:myFirstFont;
}
</style>
扫一扫
9245
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
