CSS笔记

CSS基础

CSS样式

背景

CSS允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果
属性：

• background-color：设置元素的背景颜色
• background-image：把图片设置为背景
• background-repeat：设置背景图片是否及如何重复
• background-position：设置背景图片的起始位置（right包含right和center）
• background-attachment：背景图像是否固定或者随着页面的其余部分滚动

CSS3背景：

• background-size：规定背景图片的尺寸
• background-origin：规定背景图片的定位区域
• background-clip：规定背景的绘制区域

文本

CSS文本属性可定义文本外观，通过文本属性，可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本缩进
属性：

• color：文本颜色
• text-align：对齐元素中的文本
• text-indent：缩进元素中文本的首行
• text-transform：元素中的字母
• direction：文本方向
• line-height：行高
• letter-spacing：字符间距
• text-decoration：向文本添加修饰
• unicode-bidi：设置文本方向
• white-space：元素中空白的处理方式
• word-spacing：字间距

CSS3文本效果

• text-shadow：向文本添加阴影
• word-wrap：规定文本的换行规则

字体

CSS字体属性定义文本的字体系列、大小、加粗、风格和变形
属性：

• font-size：设置字体的尺寸
• font-family：设置字体系列
• font-style：设置字体风格
• font-variant：以小型大写字体或正常字体显示文本
• font-weight：设置字体的粗细

链接

CSS链接的四种状态：

• a:link：普通的、未被访问的链接
• a:visited：用户已访问的链接
• a:hover：鼠标指针位于链接的上方
• a:active：链接被点击的时刻

常见的链接样式：

• text-decoration：大多用于去掉链接中的下划线

设置背景颜色：
-background-color

列表

CSS列表属性允许你放置、改变列表标志，或者将图像作为列表项标志

• list-style-type：列表类型
• list-style-image：列表项图像
• list-style-position：列表标志位置
• list-style：简写列表项

id是唯一的，class是可重复的，id是先找到结构内容再加载样式，二class是先加重样式再找结构内容，一般id用在框架及的设计，class用于具体内部数据的构造来引用一些效果

表格

CSS表格属性可以帮助我们极大的改善表格的外观

• 表格边框
• 折叠边框
• 表格宽高
• 表格文本对齐
• 表格内边距
• 表格颜色

轮廓

CSS轮廓主要是用来突出元素的作用

• outline：设置轮廓属性
• outline-color：设置轮廓的颜色
• outline-style：设置轮廓的样式
• outline-width：设置轮廓的宽度

CSS定位

定位

CSS定位：改变元素在页面上的位置
CSS定位机制：普通流(元素按照其在HTML中的位置顺序决定排布的过程)、浮动、绝对布局
CSS定位属性：

• position：把元素放在一个静态的、相对的、绝对的、或固定的位置中
  – static、relative、absolute、fixed
• top：元素向上的偏移量
• left：元素向左的偏移量
• right：元素向右的偏移量
• bottom：元素向下的偏移量
• overflow：设置元素溢出其区域发生的事情
• clip：设置元素显示的形状
• vertical-align：设置元素垂直对齐方式
• z-index：设置元素的堆叠顺序

浮动

float属性：增加浮动属性，可用的值：

• left：元素向左浮动
• right：元素向右浮动
• none：元素不浮动
• inherit：从父级继承浮动属性

clear属性：去掉浮动属性(包括继承来的属性)，可用的值：

• left：去掉元素向左浮动
• right：去掉元素向右浮动
• both：左右两侧均去掉浮动
• inherit：从父级继承来clear的值

浮动的应用

瀑布流效果

CSS盒子模型

概述

盒子模型的内容范围包括：margin、border、padding、content部分组成，是w3c的标准盒子模型，不是IE的盒子模型

内边距

内边距在content外，边框外
CSS内边距属性：

• padding：设置所有边距
• padding-bottom：设置底边距
• padding-left：设置左边距
• padding-right：设置右边距
• padding-top：设置上边距

边框

CSS边框：我们可以创建出效果出色的边框，并且可以应用于任何元素。
边框的样式：

• border-style：定义了10个不同的非继承样式，包括none。

边框的单边样式：

• border-top-style
• border-left-style
• border-right-style
• border-bottom-style

边框的宽度：

• border-width

边框单边的宽度：

• border-top-width
• border-left-width
• border-right-width
• border-bottom-width

边框的颜色：

• border-color

边框单边的颜色：

• border-top-color
• border-left-color
• border-right-color
• border-bottom-color

CSS3边框：

• border-radius：圆角边框
• box-shadow：边框阴影
• border-image：边框图片

外边距

外边距：围绕在内容边框的区域就是外边距，外边距默认为透明区域，外边距接受任何长度单位、百分数值。
外边距常用属性：

• margin：设置所有边距
• margin-bottom：设置底边距
• margin-left：设置左边距
• margin-right：设置右边距
• margin-top：设置上边距

外边距合并

合并多的那个外边距

盒子模型应用

极客学院官网布局

CSS常用操作

对齐

• 使用margin属性进行水平对齐
• 使用position属性进行左右对齐
• 使用float属性进行左右对齐

尺寸

尺寸操作属性：

• width：设置元素宽度
• height：设置元素高度
• line-height：设置行高
• max-width：设置元素最大宽度
• max-height：设置元素最大高度
• min-width：设置元素最小宽度
• min-height：设置元素最小高度

分类

分类操作属性：

• clear：设置一个元素的侧面是否允许其他的浮动元素
• float：定义元素在哪个方向浮动
• position：把元素放置到一个静态的、相对的、绝对的、固定的位置
• cursor：规定当指向某元素之上时显示的指针类型
• display：设置是否及如何显示元素
• visibility：设置元素是否可见或不可见

导航栏

垂直导航栏
水平导航栏
导航栏效果

图片

通过具体示例展示

选择器

选择器详解

元素选择器：最常见的选择器就是元素选择器，文档的元素就是最基本的选择器：h1{}，a{}
选择器分组：h1,h2{}；通配符*{}
类选择器：

• 类选择器允许以一种独立与文档元素的方式来指定样式：.class{}
• 结合元素选择器： a.class{}
• 多类选择器：.class.class{}

ID选择器：ID选择器类似于类选择器，不过也有一些重要差别：#id{}
类选择器和ID选择器区别：

• ID只能在文档中使用一次，而类可以多次使用
• ID选择器不能结合使用
• 当使用js时候，需要用到id

属性选择器：

• 简单属性选择：[title]{}
• 根据具体属性值选择：除了选择拥有某些元素，还可以进一步缩小选择范围，只选择有特定属性值的元素：a[href=“http://www.jikexueyuan.com”]{}
• 属性和属性值必须完全匹配
• 根据部分属性值选择

后代选择器：后代选择器可以选择作为某元素后代的元素，h1 strong{}，h1 strong i{}，h1 i{}
子元素选择器：与后台选择器相比，子元素选择器只能选择作为某元素子元素的元素，h1>strong{}
相邻兄弟选择器：可选择紧接在另一个元素后的元素，且二者有相同父元素：h1+p{}

CSS动画

2D、3D转换

通过CSS3转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸
转换是使元素改变形状、尺寸和位置的一种效果
可以使用2D、3D来转换元素
2D转换方法：

• translate()
• rotate()
• scale()
• skew()
• matrix()

3D转换方法：

• rotateX()
• rotateY()

过渡

通过使用CSS3，可以给元素添加一些效果
CSS3过渡是元素从一种样式转换成另一种样式
动画效果的CSS
动画执行的时间
属性：

• transition：设置四个过渡属性
• transition-property：过渡的名称
• transition-duration：过渡效果花费的时间
• transition-timing-function：过渡效果的时间曲线
• transition-delay：过渡效果开始时间

动画

通过CSS3，也可以进行创建动画了
CSS3的动画需要遵循@keyframes规则
规定动画的时长
规定动画的名称

多列

在CSS3中，可以创建多列来对文本或者区域进行布局
属性：

• column-count
• column-gap
• column-rule

瀑布流

图片瀑布流，有的带标签，有的不带标签

HTML与CSS简单页面效果实例

简单页面搭建