一、CSS基础
1.CSS介绍
CSS指层叠样式表,可以极大提高工作效率。
2.CSS基础语法
selector{
property: value;
}
selector表示属性选择器;property表示属性名;value表示属性值,,属性值大于1个单词时,需要加上引号。
eg. h1 {color:red; font_size:14px;}
3.CSS高级语法
(1)选择器分组:在selector位置同时指定多个选择器,为其添加相同样式。
(2)继承:相当于设置优先级,若为body、h1同时设置样式,并将h1放入body中,则h1显示为h1样式,body中其他元素显示为body样式。
4.CSS派生选择器
通过依据元素在其位置的上下文关系来定义样式
eg.
<p><strong>p标签内CSS</strong></p>
<ul>
<li><strong>li内CSS</strong></li>
</ul>
为strong和li strong同时设置CSS,则“p标签内CSS”显示为strong的CSS,“li内CSS”显示为li strong的CSS。
5.CSSid选择器
id选择器可以为标有id的HTML元素指定特定的样式,以“#”来定义。
经常和派生选择器一起使用
6.CSS类选择器
类选择器以一个“.”定义,也可以用作派生选择器。
7.CSS属性选择器
(1)属性选择器,对带有指定属性的HTML元素设置样式
(2)属性和值选择器
<style type=”text/css”>
<!—此为属性选择器,改变所以带有title属性的元素颜色-->
[title]{
color: blue;
}
<!—这是一个属性和值选择器,title=“tel”时改变元素颜色-->
[title=te]{
color=red;
}
</style>
二、CSS样式
1.CSS背景
CSS允许使用纯色或背景图像等作为背景效果
常用属性:
background-attachment:背景图像是否固定或随页面的其余部分滚动
background-color:设置元素的背景颜色
background-image:把图片设置为背景
background-position:设置背景图片的起始位置
background-repeat:设置背景图片是否及如何重复
2.CSS文本
可定义文本外观,改变文本的颜色、字符间距、装饰文本、对文本缩进等。
常用属性:
color(文本颜色)
text-align(对齐方式)
text-indent(首行缩进)
text-shadow:向文本添加阴影,该属性有四个值,分别为:上方距离、左侧距离、清晰度、颜色
word-wrap:规定文本的换行规则
3.CSS字体
定义文本的字体系列、大小、加粗、风格和变形
常用属性:
font-family(设置字体系列)
font-size(设置字体尺寸)
font-style(设置字体风格)
4.CSS链接
(1)CSS链接的四种状态
a:link:普通的、未被访问的链接
a:visited:用户已访问的链接
a:hover:鼠标指针位于链接上方
a:active:链接被点击的时刻
(2)常见链接样式
text-decoration属性大多用于去掉链接中的下划线
background-color设置背景颜色
5.CSS列表
CSS列表允许放置、改变列表标志,获奖图像作为列表项标志
常用属性:
list-style-image(列表项图像)
list-style-position(列表标志位置)
list-style-type(列表类型)
6.CSS表格
CSS表格属性可以帮助我们极大的改善表格的外观
常用属性:
border(表格边框)
border-collapse(折叠边框)
weight、height(表格宽高)
text-align(表格文本对齐)
padding(表格内边距)
background-color(表格颜色)
7.CSS轮廓
主要用来突出元素
常用属性:
outline(设置轮廓属性)
outline-color(设置轮廓颜色)
outline-style(设置轮廓样式)
outline-width(设置轮廓宽度)
三、 CSS定位
1.CSS定位
改变元素在页面上的位置
定位机制:普通流、浮动、绝对布局
属性:positon、top、left、right、clip
positon:static(静态)
relative(相对)
absolute(绝对)
fixed(固定)
2.CSS浮动
float属性:
left(向左浮动)
right(向右浮动)
none(不浮动)
inherit(从父级继承浮动属性)
clear属性:
left、right(去掉元素向左、向右浮动)
both(左右两侧均去掉浮动)
inherit(从父季继承来的clear值)
3.CSS盒子模型
(1)盒子模型内容主要包括:margin、border、padding、content
padding(内边距):
padding(所有边距)
padding-bottom(底边距)
padding-left(左边距)
padding-right(右边距)
padding-top(上边距)
border(边框):
border-style(边框样式)
border-top-style、border-left-style、border-right-style、border-bottom-style(单边框样式)
border-width(边框宽度)
border-color(边框颜色)等
(2)外边距合并
外边距合并可以理解为叠加的概念。当两个盒子模型都具有外边距时,二者间距离以外边距的较大值为准
4.CSS常用操作
(1)对其操作
使用margin属性进行水平对齐
eg.居中操作可将margin-left、margin-right均设置为auto
margin: 100px auto;
(前一个设置上下边距,后一个设置左右)
使用position属性进行左右对齐
eg.position: absolute; left: 0px实现靠左
使用float属性进行左右对齐
(2)尺寸操作
height(设置元素高度)
line-height(设置行高)
max-height(设置元素最大高度)
max-width(设置元素最大宽度)
min-width(设置元素最小宽度)
min-height(设置元素最小高度)
width(设置元素宽度)
(3)分类操纵
clear(设置一个元素的侧面是否允许其他的浮动元素)
cursor(规定当指向某元素之上时显示的指针类型)
display(设置是否及如何显示元素)
float(定义元素浮动方向)
position(把元素放置到一个静态的、固定的位置)
visibility(设置元素是否可见或不可见)
(4)导航栏
利用<ul><li>并设置其属性进行设计,
(5)图片操作
四、CSS选择器
1.元素选择器
文档的元素就是最基本的选择器
eg. h1{}、 p{}
2.选择器分组
为多个选择器添加相同样式
eg. h1,h2{}
通配符”*”为所有标签添加相同样式: *{}
3.类选择器
允许以一种独立于文档元素的方式来指定样式:.class{}
结合元素选择器,为某元素中的类设置样式:a.class[]
多类选择器:.class1.class2{} (包含了CSS中设置的.class1 .class2 ,class1.class2三种样式)
4.ID选择器:#id{}
类选择器和ID选择器区别:
ID只能在文档中使用一次,而类可以多次使用
ID选择器不能结合使用
当使用js时,需要用到ID
5.属性选择器: [title]{}(title表示属性名称)
根据具体属性值选择:
除了选择拥有某些的元素,还可以进一步缩小选择范围,只选择有特定属性值的元素
属性和属性值必须完全匹配
根据部分属性值选择[title~=””]{}(包含引号内内容的均可)
6.后代选择器:ancestor son{}(可以隔代选择)
选择作为某元素后代的元素
7.子元素选择器:father>son{}(不可以隔代选择)
与后代选择器相比,子元素选择器只能选择作为某元素子元素的元素
8.相邻兄弟选择器:brother1+brother2{}
可选择紧接在另一个元素后的元素,且二者有相同父元素
改变的是后面元素brother2的样式
eg.<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
设置li+li{}样式后,只有item2、item3样式改变
五、CSS动画效果
1.2D、3D转换
通过CSS3转换,我们能够对元素进行移动、缩放、拉长或拉伸,转换实施元素改变形状、尺寸和位置的一种效果,可以使用2D、3D来转换元素
(1)2D转换方法(通过transform:调用)
translate(x,y)(移动)
rotate(degree)(旋转)
scale(width,height)(缩放)
skew(x-degree,y-degree)(倾斜)
matrix()
在使用浏览器中支持各方法
-webkit-transform: ; /* safari chrome*/
-ms-transform: ; /* IE*/
-o-transform: ; / * opera*/
-moz-transform: ; /* Firefox*/
(2)3D转换方法(通过transform:调用)
rotateX(Xdegree)、rotateY(Ydegree)
2.过渡
元素从一种样式转换成另一种样式,主要包括:动画效果的CSS和动画执行的时间
属性:
transition(设置四个过渡属性)
transition-property(过渡的名称)
transition-duration(过渡效果花费的时间)
transition-timing-function(过渡效果的时间曲线)
transition-delay(过渡效果开始时间)
3.动画
遵循@keyframes规则,规定动画的时长和名称
代码示例:
<!--index页面代码-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画效果</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div>动画效果</div>
</body>
</html>
<!--CSS样式代码-->
div {
width: 100px;
height: 100px;
background-color: brown;
position: relative;
animation: anim 5s infinite alternate;
-webkit-animation: anim 5s infinite alternate;
}
@keyframes anim {
0%{
background-color: brown;
left: 0px;
top: 0px;
}
25%{
background-color: chocolate;
left: 200px;
top:0px;
}
50%{
background-color: coral;
left: 200px;
top: 200px;
}
75%{
background-color: burlywood;
left: 0px;
top: 200px;
}
100%{
background-color: brown;
left: 0px;
top: 0px;
}
}
4.多列
对文本或区域进行布局
属性:
column-count(列的数量)
column-gap(列的间隔)
column-rule(间隔线及其颜色)
代码示例(CSS瀑布流效果):
<!--index页面代码-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div class="container">
<div><img src="图片/image1.jfif"></div>
<div><img src="图片/image2.jfif"></div>
<div><img src="图片/image3.jfif"></div>
<div><img src="图片/image4.jfif"></div>
<div><img src="图片/image5.jfif"></div>
<div><img src="图片/image1.jfif"></div>
<div><img src="图片/image2.jfif"></div>
<div><img src="图片/image3.jfif"></div>
<div><img src="图片/image4.jfif"></div>
<div><img src="图片/image5.jfif"></div>
<div><img src="图片/image1.jfif"></div>
<div><img src="图片/image2.jfif"></div>
<div><img src="图片/image3.jfif"></div>
<div><img src="图片/image4.jfif"></div>
<div><img src="图片/image5.jfif"></div>
<div><img src="图片/image1.jfif"></div>
<div><img src="图片/image2.jfif"></div>
<div><img src="图片/image3.jfif"></div>
<div><img src="图片/image4.jfif"></div>
<div><img src="图片/image5.jfif"></div>
<div><img src="图片/image1.jfif"></div>
<div><img src="图片/image2.jfif"></div>
<div><img src="图片/image3.jfif"></div>
<div><img src="图片/image4.jfif"></div>
<div><img src="图片/image5.jfif"></div>
<div><img src="图片/image1.jfif"></div>
<div><img src="图片/image2.jfif"></div>
<div><img src="图片/image3.jfif"></div>
<div><img src="图片/image4.jfif"></div>
<div><img src="图片/image5.jfif"></div>
</div>
</body>
</html>
<!--CSS样式代码-->
.container{
column-width: 300px;
-webkit-column-width: 300px;
-webkit-column-gap: 5px;
column-gap: 5px;
}
.container div{
width: 500px;
margin: 5px 0;
}
效果图