一. CSS基本概念
CSS Cascade Style Sheet 意思是层叠样式表,简称样式表。
作用主要是让页面的内容呈现不同的颜色,大小,位置,动画等。
二. 基本语法:行内(内嵌)样式 > 内部样式 > 外部样式。
color: red; 样式的名称: 样式的值; (key/value键值对) 符号都是英文的,不能使用中文符号。
使用行内样式
<p style="color: red;">
你好,我的国
</p>
使用内部样式 (此处使用的是标签选择器)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
p{
color: red;
}
</style>
</head>
<body>
<p>
你好,我的国
</p>
</body>
</html>
使用外部样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/common.css" />
</head>
<body>
<p>
你好,我的国
</p>
</body>
</html>
样式的优先级:
行内(内嵌)样式 > 内部样式 > 外部样式。
三. CSS选择器:ID选择器>类选择器>标签选择器
CSS中的选择器是指页面上元素引用CSS效果的方式。
标签选择器
标签选择器会应用到页面上所有的该名称的标签。
类选择器
可以使用.来定义某一类元素需要使用的样式,名称可以自定义,元素使用class属性来引用此样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.c{
color: greenyellow;
font-size: 30px;
}
</style>
</head>
<body>
<p class="c">
你好,我的国
</p>
<p class="c">
Hello, world
</p>
<p>
Hello, wangliang
</p>
</body>
</html>
ID选择器
当需要给某一个元素单独定义一个样式时,可以给该元素定义一个id属性,然后在样式中使用#ID形式来定义样式。
注意:页面上元素ID必须是唯一的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#p1{
color: greenyellow;
font-size: 30px;
}
</style>
</head>
<body>
<p id="p1">
你好,我的国
</p>
<p>
Hello, world
</p>
<p>
Hello, wangliang
</p>
</body>
</html>
四. CSS基本属性:尺寸相关,文字相关,背景相关,列表相关
尺寸相关:
width 宽度
height 高度
单位:px像素、占父标签的百分比
文字相关:
color 文字颜色
颜色值:
单词,如:red、green等
代码,十六位的代码,红绿蓝三原色,#xxxxxx ,前两位是红,中间两位是绿,最后两位是蓝。
red-->#ff0000 green-->#00ff00 blue--> #0000ff yellow-->#ffff00
white-->#ffffff black-->#000000
十六位数字:0~9 A~F
font-weight 文字权重
值:bold 加粗
font-size 文字大小
值:px am
font-family 文字字体
font 缩写
font: 权重 大小 字体;
<style>
#p1{
color: red;
font: bold 40px "宋体";
border-width: 1px;
border-style: dashed;
border-color: blue;
}
</style>
text-align 文字水平对齐
值:left、center、right
line-height 文字行高
小技巧:内容垂直居中对齐,把行高设置成和高度一致
vertical-align 垂直对齐
图片和文字的对齐方式
值:top、middle、bottom
text-decoration 文字修饰
值:none(无)、underline(下划线)、line-through(删除线)
## 标题 一. CSS基本概念
背景相关:
background-color 背景颜色
background-image 背景图片
值:url(图片路径)
background-repeat 背景重复
值:
repeat 水平和垂直都重复,默认
no-repeat 不重复
repeat-x 水平重复
repeat-y 垂直重复
background-position 背景位置
background-position: 水平偏移量 垂直偏移量;
background 缩写
background: url(地址) 重复方式 水平偏移量 垂直偏移量;
<style>
#p1{
color: red;
font: bold 20px "宋体";
border-width: 1px;
border-style: dashed;
border-color: blue;
width: 600px;
height: 200px;
background: url(img/11.jpg) no-repeat 200px 80px;
}
</style>
列表相关: ul-li
list-style 列表风格
值:none(无)
设置ul
float 浮动
值:left 从左往右排列,right 从右往左浮动
margin和padding的用法:
margin: 指当前元素与其他元素的距离(上右下左)
如果没有写下,等同上,如果没有写左,等同于右,如果只写了一个,表示4个都一样。
<style>
#div1{
margin:0px 0px 0px 0px;
}
</style>
padding:指当前元素内部的子元素的距离(上右下左)
建议在编写页面时去掉所有的默认距离:*表示所有的元素
<style>
*{
margin: 0px;
padding: 0px;
}
</style>
五. float作用和图片效果
float: 浮动,特点是不占据空间,会导致后面的元素来占据其空间。
display: flex,是指让当前容器内部的布局为flex方式,简单说,就是让其内部元素以列的形式呈现。
图片的特效:
padding: 可以让图片边缘留白
box-shadow: 边缘阴影,rgba(红色值,绿色值,蓝色值,透明度) x(横向偏移), y (纵向偏移), 虚化宽度
border-radius: 边缘的圆边的宽度,若宽度等同于整个正方形图片的宽度的一半,则图片会变成圆形。
<img style="padding: 5px; background-color: white; box-shadow: rgba(0,0,0, 0.5) 10px 10px 10px;" src="img/3.jpg" width="400px"/>
六. position具体作用和z-index
位置
position(定位方式)
设置网页元素的定位方式
取值:
static(静态,默认)
文档流:默认情况下网页元素流水式,块级元素从上到下,行级元素从左到右。
一旦设置position的非static属性值或设置浮动,就会破坏原有的文档流,该元素会脱离文档流。
fixed(固定) 固定在浏览器的某个位置,参照物是浏览器
relative(相对) 相对定位,参考物是自身,如left:10px是在自身原有的left坐标基础上+10px;
absolute(绝对) 绝对定位,固定在父元素的某个位置,参考物是父元素,left:10px在父元素的left坐标上加10px;
注意:绝对定位的元素,如果父元素没有设置相对定位,就会以浏览器为参照物,如果父元素设置相对定位,就以父元素为参照物。
坐标类型:
left 左
right 右
top 上
bottom 下
如果容器中的内容超出了容器的大小,需要隐藏超出的部分,可以添加overflow:hidden
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}
div{
border: 1px solid red;
}
#content{
width: 520px;
height: 280px;
margin:60px auto;
position: relative;
overflow: hidden;
}
#leftImg{
left: 0px;
top: 0px;
position: absolute;
}
#centerImg{
left: 520px;
top: 0px;
position: absolute;
}
#rightImg{
left: 1040px;
top: 0px;
position: absolute;
}
</style>
</head>
<body>
<div id="content">
<img id="leftImg" src="img/1.jpg" />
<img id="centerImg" src="img/2.jpg" />
<img id="rightImg" src="img/3.jpg" />
</div>
</body>
</html>
<script>
setInterval(move, 50);
var i = 0;
function move(){
var leftImg = document.getElementById("leftImg");
var centerImg = document.getElementById("centerImg");
var rightImg = document.getElementById("rightImg");
i+=10;
leftImg.style.left = -i + "px";
centerImg.style.left = (-i + 520) + "px";
rightImg.style.left = (-i + 1040) + "px";
}
</script>
display: 显示或呈现方式。
值:
none: 表示不显示,即隐藏元素
inline: 以行级元素方式显示
block: 以块级元素显示
flex: 里面的子元素按列的形式显示,自身还是按原来的方式显示,例如div还是按块级显示
inline-flex:里面的子元素按列的形式显示,自身按行级元素显示
z-index: 当元素为绝对定位时,可以相互叠层,当z-index值较大时,呈现在较上方。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
background-color: blue;
width: 100px;
height: 50px;
position: absolute;
left: 50px;
top: 20px;
z-index: 99;
}
#div2{
background-color: red;
width: 120px;
height: 60px;
position: absolute;
left: 120px;
top: 30px;
z-index: 999;
}
#div3{
background-color: greenyellow;
width: 120px;
height: 60px;
position: absolute;
left: 100px;
top: 60px;
z-index: 9999;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
七. 变形
变形
transform
语法:
transform:变形函数
变形函数:
translate(x,y) 移动
示例:translate(100px,100px)
rotate(角度) 旋转
示例:rotate(180deg)
3D旋转:rotateX(45deg) rotateY(45deg) rotateZ(45deg)
scale(倍数) 缩放
示例:scale(1.5) 注意:分辨率不会变化
skew(翻转) 翻转
示例:skew(40deg);
八. 动画
动画效果:
transition 过渡
原理:
定义元素的某一个属性,如:颜色,两个状态:默认状态、鼠标悬停的状态
从一个状态到另一个状态的属性值,慢慢进行修改
如:
#div1{
width:100px;
transition:width 2s;
}
#div1:hover{
width:300px;
}
缩写形式:
transition: 属性名 时长 时间曲线 延迟时间
同时过渡多个属性或所有属性:
transition 属性1 时长,属性2 时长...
transition all 时长
案例:相片墙
自定义动画:
animation 动画
原理:
分为多个帧,多个帧连续切换实现动画。
@keyframes用于定义动画:
@keyframes 动画名称
{
from{样式}
to{样式}
}
或者
@keyframes 名称
{
百分比{样式}
百分比{样式}
...
}
启动动画:
animation:动画名称 时间;
案例:同心圆