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 | 过渡效果开始时间 |