1、CSS概述
CSS指层叠样式表
CSS样式极大提高了工作效率
2、CSS基础语法
属性大于1个之后，属性之间用分号隔开:
h1{
color:red; font-size:14px;
}
如果值大于一个单词，则需要加上引号:
p{
font-famil:"sans aerif"
}
派生选择器
1、通过依据元素在其位置的上下文关系来定义样式
css文件：
h1{
color: brown;
}
li strong{
color: red;
}
p strong{
color: saddlebrown;
}
html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="test01.css" type="text/css" rel="stylesheet">
</head>
<body>
<p><strong>p标签hello css</strong></p>
<ul>
<li><strong>li标签hello css</strong></li>
<li>hello</li>
</ul>
<h1>样式</h1>
</body>
</html>
CSSid选择器
1、id’选择器：
id选择器可以为标有id的HTML元素指定特定的样式
id选择器以"#"来定义
css文件：
#pID{
color: red;
}
#divID{
color: green;
}
#divID2 a{
color: blue;
}
html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="id.css" type="text/css" rel="stylesheet">
</head>
<body>
<p id="pID">红色</p>
<div id="divID">
绿色
</div>
<div id="divID2">
<a href="http://www.baidu.com">百度</a>
</div>
</body>
</html>
CSS类选择器
1、类选择器：
类选择器以一个点显示
2、class也可以用作派生选择器
css文件：
.pclass{
color: #b3d4fc;
}
.pclass a{
color: blue;
}
.divclass p{
color: red;
}
html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="class.css" type="text/css" rel="stylesheet">
</head>
<body>
<p class="pclass">搜索引擎<a href="http://www.baidu.com">百度</a></p>
<div class="divclass">
hello
<p>你好</p>
</div>
</body>
</html>
CSS属性选择器
1、属性选择器：
对带有指定属性的HTML元素设置样式
2、属性和值选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
[title]{
color: aqua;
}
[title=b]{
color: brown;
}
</style>
</head>
<body>
<p title="a">属性选择器</p>
<p title="b">属性和值选择器</p>
</body>
</html>
CSS背景
1、背景：
css允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。
| 属性 | 描述 |
|---|---|
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动 |
| background-color | 设置元素的背景 |
| background-image | 把图片设置为背景 |
| background-position | 设置图片的起始位置 |
| background-repeat | 设置背景图片是否及如何重合 |
| background-size | 规定背景图片的尺寸 |
| background-origin | 规定背景图片的定位区域 |
| background-clip | 规定背景的绘制区域 |
CSS文本
1、CSS文本
CSS文本属性可定义文本外观
通过文本属性，可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本缩进
| 属性 | 描述 |
|---|---|
| color | 文本颜色 |
| direction | 文本方向 |
| line-height | 行高 |
| letter-spacing | 字符间距 |
| text-align | 对齐元素中的文本 |
| text-decoration | 向文本添加修饰 |
| text-indent | 缩进元素中的文本的首行 |
| text-transform | 元素中的字母 |
| unicode-bidi | 设置文本方向 |
| white-space | 元素中空白的处理方式 |
| word-spacing | 字间距 |
| text-shadow | 向文本添加阴影 |
| word-wrap | 规定文本的换行规则 |
CSS字体
1、css字体：
css字体属性定义文本的字体系列、大小、加粗、分格和变形
| 属性 | 描述 |
|---|---|
| font-family | 设置字体系列 |
| font-size | 设置字体的尺寸 |
| font-style | 设置字体风格 |
| font-variant | 以小型大写字体或正常字体显示文本 |
| font-weight | 设置字体的粗细 |
CSS链接
1、css链接的四种状态
a:link 普通的、未被访问的链接
a:visited用户已访问的链接
a:hover 鼠标指针位于链接的上方
a:active链接被点击的时刻
1、常见的链接样式：
text-decoration属性大多用于去掉链接中的下划线
3、设置背景颜色：
background-color
CSS列表
css列表属性允许你放置、改变列表标签，或者将图像作为列表项标志
| 属性 | 描述 |
|---|---|
| list-style | 简写列表项 |
| list-style-image | 列表项图像 |
| list-style-position | 列表位置 |
| list-style-type | 列表类型 |
**CSS表格
| 属性 | 描述 |
|---|---|
| border | 设置外边框 |
| padding | 设置内边距 |
CSS轮廓
| 属性 | 描述 |
|---|---|
| outline | 设置轮廓属性 |
| outline-color | 设置轮廓的颜色 |
| outline-style | 设置轮廓的样式 |
| outline-width | 设置轮廓的宽度 |
CSS定位
1、css定位：
改变元素在页面上的位置
2、css定位机制：
普通流：元素按照其在HTML中的位置顺序决定排布的过程
浮动
绝对布局
3、css定位属性：
| 属性 | 描述 |
|---|---|
| position | 把一个元素放在一个静态的、相对的、绝对的、或固定的位置中 |
| top | 元素向上偏移量 |
| left | 元素向左的偏移量 |
| right | 元素向右的偏移量 |
| bottom | 元素向下的偏移量 |
| overflow | 设置元素溢出其区域发生的事情 |
| clip | 设置元素显示的形状 |
| vertical-align | 设置元素垂直对齐方式 |
| z-index | 设置元素的堆叠顺序 |
1、CSS position属性：
static
relative
absoulute
fixed
CSS浮动
1、浮动：
float属性可用的值：
left：元素向左浮动
right：元素向右移动
none：元素不浮动
inherit：从父级继承浮动属性
2、clear属性：
去掉浮动属性（包括继承来的属性）
clear属性值：
left、right：去掉元素向左、向右浮动
both：左右两侧均去掉浮动
inherit：从父级继承来clear的值
CSS盒子模型
1、盒子模型的内容范围包括：
margin（外边距）、border（边框）、padding（内边距）、content（内容）部分组成
CSS内边距
1、内边距：
内边距在content外，内边框内
2、内边框属性：
| 属性 | 描述 |
|---|---|
| padding | 设置所有边距 |
| padding-bottom | 设置底边距 |
| padding-left | 设置左边距 |
| padding-right | 设置右边距 |
| padding-top | 设置上边距 |
CSS边框
CSS外边距
1、外边距：
围绕在内容边框的区域就是外边距，外边距默认为透明区域外边距接受任何长度单位、百分数值
2、外边距常用属性：
| 属性 | 描述 |
|---|---|
| margin | 设置所有边距 |
| margin-bottom | 设置底边距 |
| margin-left | 设置左边距 |
| margin-right | 设置右边距 |
| margin-top | 设置上边距 |
CSS外边距合并
1、外边距合并：
外边距合并就是一个叠加的概念
CSS尺寸操作
1、属性：
| 属性 | 描述 |
|---|---|
| height | 设置元素高度 |
| link-height | 设置行高 |
| max-height | 设置元素最大高度 |
| max-width | 设置元素最大宽度 |
| min-height | 设置元素最小高度 |
| min-width | 设置元素最小宽度 |
| width | 设置元素宽度 |
分类操作
1、属性：
| 属性 | 描述 |
|---|---|
| clear | 设置一个属性的侧面是否与其他的浮动元素 |
| cursor | 规定当指向某元素之上时显示的指针类型 |
| float | 定义元素在哪个方向浮动 |
| position | 把一个元素放置到一个静态的、相对的、绝对的、固定的位置 |
| visibility | 设置元素是否可见或不可见 |
2D、3D转换
1、通过CSS3转换，我们能对元素 进行移动、缩放、转动、拉长或拉伸
转换是使元素改变形状、尺寸位置的一种效果
可以使用2D、3D来转换元素
2、2D转换方法：transform:转型
transform:translate() 平移
transform:rotate() 旋转
transform:scale() 按照比例增加
transform:skew() 歪斜
transform:matrix() 矩阵
3、3D转换方法：rotae旋转
transform:rotaeX()
transform:rotateY()
过渡
1、通过使用CSS3，可以给元素添加一些效果
2、CSS3过渡是元素从一种样式转换成另一种样式
动画效果的CSS
动画执行的时间
3属性
| 属性 | 描述 |
|---|---|
| transition | 设置四个过渡属性 |
| transition-property | 过渡的名称 |
| transition-duration | 过渡效果花费的时间 |
| transition-timing-function | 过渡效果的时间曲线 |
| transition-delay | 过渡效果开始时间 |
2264
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
