CSS层叠样式表
在网面中使用CSS
在行内书写CSS样式
<div style=""></div>
在当前页面头部书写CSS样式
<style type="text/css">
/*CSS样式*/
</style>
引入外部CSS文件
<link rel="stylesheet" type="text/css" href="css/index.css" />
语法
选择器{属性:属性值;属性:属性值;}
基本选择器
元素选择器(标签) div{color:#f00;}
类选择器,重复使用
<div class="className">指定元素的类开</div>
.className{color:#f00;} 给className添加CSS样式
ID选择器
<div id="div1">指定元素的id名，id是唯一</div>
#div1{color:#f00;}
通配符，选择网页中所有的元素*
*{color:#f00;}
多条件选择器，同时选择多个元素
div,p{color:#f00;}
一个元素可以同时调用多个类样式,类样式之间用空格隔开
<div class="test fontColor"></div>
层次选择器
div p{color:red;}选择div里的所有p标签
div>p{color:red;}选择div里的子p标签
div+p{color:red;}选择div后紧邻的p标签，选择一个元素
div~p{color:red;}选择div后的所有p标签
即…又包含…
div.test{color:red;}选择到div标签中包含test类的元素
<div class="test"></div>
常用的字体样式
color:#ff0000;字体颜色
font-size: 50px;字体大小
font-family: “microsoft yahei”;字体
font-weight: bold;字体加粗
text-indent: 50px;文本缩进
letter-spacing: 10px;字符间距
font-style: italic;斜体
text-decoration: none;去掉下划线 underline添加下划线 line-through删除线 overline上划线
line-height: 40px;行高
字体设置
font:斜体 加粗 字体大小/行高 字体;
font:italic bold 20px/50px “microsoft yahei”;
text-align:center;left,right文本对齐方式
背景
background:背景颜色 背景图片 平铺方式 水平位置 垂直位置 是否固定背景;
background:#000 url(img/index_05.jpg) no-repeat center center fixed;
平铺方式
不平铺no-repeat
平铺repeat
横向平铺repeat-x
纵向平铺repeat-y
水平位置 left center right 值 如100px -100px
垂直位置 top center bottom 值
是否固定背景 fixed;
background-color背景颜色
background-image背景图片
background-position:x y;背景的位置
background-repeat平铺方式
background-attachment: fixed;固定背景
设置元素的宽高
width:10px;宽
height:10px;高
元素的显示方式
块，占满一行
行内，根据内容呈现大小，对行内元素设置宽和高是无效的
行内块，自身大小的区域是块级，但是又不会进行换行
改变元素的显示方式
将元素改变为块级 display:block;
将元素改变为行内块 display:inline-block;
将元素改变为行内 display:inline;
隐藏元素 display:none;
margin: 0 auto;容器居中，一定要指定容器的宽
text-align:center;文本居中
伪类
:link网页加载时超链接的样式
.nav ul li a:link{ color:#f00;};
.nav ul li a{color:#f00;}
:hover鼠标移入时的样式
.nav ul li a:hover{color:#f00;}当鼠标移入a标签时，字体颜色改变为红色
解决display:inline-block出现间距的兼容问题，给父元素加样式font-size:0;
:active鼠标单击超连接时触发的样式
:visited已访问过的超链接的样式
:focus取得焦点时的样式,input
更改列表样式
list-style:list-style-type list-style-position list-style-image;
列表符 位置 图片列表符
list-style-type
list-style-position: inside;列表符放置内部
list-style-image
list-style:none;无列表符
盒子模型外边距margin，内填充padding，边框border
边框
border:大小 样式 颜色;
border:2px solid #f00;设置容器的四边为2px，实线，红色; dotted
|dashed
虚线
上边框
border-top:大小 样式 颜色;
border-top:1px solid #f00;
下边框
border-bottom:大小 样式 颜色;
左边框
border-left:大小 样式 颜色;
右边框
border-right:大小 样式 颜色;
使用边框制作三角型
外边距margin
margin:10px;四周外边距为10px *
margin:10px 20px;上下 左右
margin:0px auto;容器居中
margin:10px 20px 30px;上 左右 下
margin:10px 20px 30px 40px;上 右 下 左 顺时针方向 *
margin-left:20px;
margin-right:20px;
margin-top:20px;
margin-bottom:20px;
padding填充的使用方法与margin相同
padding:10px;
padding:10px 20px;
padding:10px 20px 30px;
padding:10px 20px 30px 40px;
padding-left
padding-right
padding-top
padding-bottom
css优先级
行内>页面级>外部引入文件
important > 内联 > ID > 伪类|类 | 属性选择 > 标签 > 伪对象 > 通配符 > 继承
div{color: green !important;}
浮动float 块级元素显示在一行可以使用浮动，用完之后立即清除浮动
浮动会影响后面的元素以及父级
float:left;左浮动float:right;右浮动
设置浮动后父级会受影响，不能获取到float层的高，可能会出现0px
在浮动后清除浮动
定位
定位:绝对定位position: absolute;显示在页面的最上层，根据父级的定位来进行定位，如果父级没有设置定位，那么根据浏览器进行定位,相对于父级进行定位,定位方式：left,top,right,bottom,改变显示层次z-index: 2;数值越大显示越上层
相对定位position:relative;,相对于自身原本的位置进行定位，不会跳出页面文档流,会占用宽高
固定定位 position: fixed;固定在浏览器窗口可显示区域 弹出页面
文本水平对齐方式text-align:center;left;right
垂直对齐vertical-align，行内块，影响同级元素
vertical-align: middle;垂直居中
vertical-align:sub;下标
vertical-align:super;上标
overflow:hidden;溢出隐藏
cursor: pointer;更改光标为手型
尺寸
width宽
height高
max-width最大宽度
min-width最小宽度
max-height最大高
min-height最小高
opacity: 0.1;取值0-1，1不透明，0完全透明
伪元素选择器
:before 在元素内前置添加内容
:after 在元素内后添加内容
content结合:before :after来使用
p:before{centent:‘信息’}在p标签内的前面添加“信息”
<p>信息sdfgfgdfh</p>
css3.0 选择器 圆角 阴影 背景 变形 过渡 自定动画 多列 媒体查询
基本选择器
标签 div p body
类 .className{样式}
<div class="className"></div>
ID #div{}
<div id="div"></div>
通配符 *
多条件 ， div,p{}
层次选择器
div p{color:red;}选择div里的所有p标签
div>p{color:red;}选择div里的子p标签
div+p{color:red;}选择div后紧邻的p标签，选择一个元素
div~p{color:red;}选择div后的所有p标签
div.test{}<div class="test"></div>
子元素选择器
:first-child 选择第一个子元素
:last-child 选择最后一个子元素
<div 属性名="属性值" 属性名="属性值"></div>
属性选择器
[attr]选择包含此属性名的元素
div[id]{color: #f00;}选择到div包含id属性名的元素
[attr=val]选择属性名=某值的元素
<div class="div div1 div2"></div>
[attr~=val]选择到组合类
[attr^=val]以某属性值开头的元素
[attr$=val]以某属性值结尾的元素
[attr*=val]包含某属性值的元素
[attr|=val]属性值中包含-的值 title-
设置颜色
background: rgba(111,50,50,0.5);red green blue 透明度0-1
圆角
border-radius:10px;同时设置四个角
border-radius:左上 右上 右下 左下;顺时针
border-radius:50%;圆
文字阴影
text-shadow:水平阴影位置 垂直阴影位置 模糊度 颜色;
text-shadow: 10px 10px 1px #000;
盒子阴影
box=shadow:水平阴影位置 垂直阴影位置 模糊度 阴影尺寸 颜色 内阴影;
box-shadow: 0px 0px 10px 5px #000000 inset;内阴影
box-shadow: 0px 0px 10px #000000;外阴影
css3背景
同时设置多个背景
background-img:url(img.jpg),url(img1.jpg);添加多个图片
background-position:left top,right bottom;设置图片的位置
background-repeat:repeat-x,no-repeat;图片平铺方式
background-size:宽 高;设置背景图片的大小
background-size:cover;完全覆盖容器的区域（最小的大小）
background-size:contain;适合容器区域(最大的大小)
background-origin图片的定位区域
padding-box填充的位置开始
border-box边框的位置开始
content-box内容的位置开始
background-clip背景的绘制区域
padding-box绘制在填充内
border-box绘制在边框内
content-box绘制在内容内
CSS3渐变
线性渐变linear gradient
径向渐变radial gradient
linear-gradient(top|bottom|left|right|left top|0deg,颜色值,颜色值，颜色值);
background:linear-gradient(left,#000,#fff);
-webkit- 谷歌 Safar
-moz- 火狐
-ms- IE
-o- Opera
渐变透明
background:-webkit-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,1))
径向渐变
background:-webkit-radial-gradient(center,颜色值，颜色值);径向渐变默认为椭圆
circle圆形，将渐变改为正圆
background:-webkit-radial-gradient(center,circle,rgba(0,0,0,0),rgba(0,0,0,1));
变形：旋转 移动 缩放 扭曲
旋转rotate(角度)
设置角度使元素相对原点进行旋转，值为正数据，顺时针旋转，负数，逆时针旋转
transform:rotate(45deg);
移动translate()设置元素向指定方向移动
transform:translate(水平位置，垂直位置);
transform:translateX(水平位置)
transform:translateY(垂直位置)
缩放scale()相对原点进行放大或缩小,大于1是放大，小于1是缩小
transform:scale(x,y);
transform:scaleX(x);
transform:scaleY(y);
transform:scale(1.5,1);
扭曲skew()倾斜显示
transform:skew(x,y);
transform:skewX(x);
transform:skewY(y);
transform:skew(30deg,10deg);
过渡
transition:执行过渡动画的样式属性|all 动画执行时间单位秒s 动画函数 延迟时间;
transition: all 1s ease 1s;
transition-property:all;执行过渡动画的样式属性
transition-duration: 1s;执行时间
transition-timing-function: ease;动画函数
transition-delay: 1s;延迟时间
transition-timing-function过渡函数
ease速度由快到慢
linear匀速
ease-in越来越快
ease-out越来越慢
ease-in-out先加速再减速
自定义动画
语法
@keyframes 自定义动画名{
from{/样式/}
to{/样式/}
}
@keyframes 自定义动画名{
0%{}
50%{}
100%{}
}
常用百分比设置自定义动画
调用动画
animation:自定义动画名 执行时间 动画函数 延迟时间;
animation-name自定义动画名
animation-duration执行时间
animation-timing-function动画函数
animation-delay延迟时间
animation-iteration-count: infinite;动画执行的次数，n,infinite重复播放
nimation-direction: alternate;动画是否反向播放
alternate奇数次正向播放，偶数次反向播放
reverse反向播放
alternate-reverse奇数次反向播放，偶数次正向播放
animation-play-state: paused;动画是否暂停，running播放，paused暂停
animation-fill-mode动画执行前后的状态
forwards停留在最后一帧
transform-origin;更改元素的中心原点
css3的3D
transform-style:preserve-3d;设置为3维空间，将元素放置在3D空间中
perspective:300px;透视 值越大3D效果越明显
图片轮播
html,body{ margin: 0; padding: 0;}
ul,li{ margin: 0; padding: 0; list-style: none;}
.main{ width: 400px; height: 400px; transform-style: preserve-3d; perspective: 600px;}
.test{ margin: 100px; width: 200px; height: 200px; background: red; transition: all 1s;}
.test:hover{ transform: rotateY(50deg);}
.banner{ width: 500px; height: 300px; overflow: hidden;/溢出隐藏/ position: relative; margin: 0 auto;}
.pic{ height: 300px; width: 3000px; position: absolute; animation: name 10s ease; animation-iteration-count: infinite;}
.pic li{ float: left; width: 500px; height: 300px;}
.pic li img{ width: 500px; height: 300px;}
@keyframes name{
0%,10%{ left: 0;}
20%,30%{ left: -500px;}
40%,50%{ left: -1000px;}
60%,70%{ left: -1500px;}
80%,90%{ left: -2000px;}
100%{ left: -2500px;}
}
<div class="main">
<div class="test"></div>
</div>
<div class="banner">
<ul class="pic">
<li><img src="img/pic1.jpg"/></li>
<li><img src="img/pic2.jpg"/></li>
<li><img src="img/pic3.jpg"/></li>
<li><img src="img/pic4.jpg"/></li>
<li><img src="img/pic5.jpg"/></li>
<li><img src="img/pic1.jpg"/></li>
</ul>
</div>
3D效果
html,body{margin: 0; padding: 0;}
.layout{ width: 300px; height: 300px; perspective:800px; transform-style:preserve-3d;margin: 300px auto;}
.box{width: 300px; height: 300px; position: relative;transform-style: preserve-3d; animation: name 5s ease; animation-iteration-count: infinite;}
.pic{ width: 300px; height: 300px; position: absolute;}
.left{ background: pink; transform: rotateY(-90deg) translateZ(150px);}
.right{ background: burlywood; transform: rotateY(90deg) translateZ(150px);}
.top{ background: yellowgreen; transform: rotateX(90deg) translateZ(150px);}
.bottom{ background: aquamarine; transform: rotateX(-90deg) translateZ(150px);}
.before{background: indianred; transform:translateZ(150px);}
.after{ background: crimson; transform:translateZ(-150px);}
@keyframes name{
0%{transform: rotateY(0deg);}
50%{ transform: rotateY(360deg);}
70%{ transform: rotateX(0deg);}
100%{ transform: rotateX(360deg);}
}
<div class="layout">
<div class="box">
<div class="before pic"></div>
<div class="after pic"></div>
<div class="left pic"></div>
<div class="right pic"></div>
<div class="top pic"></div>
<div class="bottom pic"></div>
</div>
</div>
多列
columns:宽度 列数;
column-count:3;列数
column-width: 100px;宽度
column-gap: 30px;间距
column-rule: 1px solid red;列之间的边线
自定义字体
@font-face {
font-family:自定义字体名;
src: url(字体路径);
}
引入字体
body{font-family:自定义字体名;}
使用样式插件
<link rel="stylesheet" href="font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css" />
<i class="fa fa-camera"></i>
伪类选择器
:first-child第一个子元素
:last-child最后一个子元素
:root根元素
:nth-child(n)指定选择第n个子元素，odd奇数 2n-1，even偶数2n
n每次自增的一个数
<li></li> 2*1
<li></li>
<li></li> 2*2
:nth-last-child(n)倒数第n个子元素
:nth-of-type(n)同类型的子元素
<ul>
<p>p</p>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
ul li:nth-child(2){/*
<li>1</li>*/
background: red;
}
ul li:nth-of-type(2){/*
<li>2</li>*/
background: red;
}
:nth-last-of-type(n)倒数同类型的子元素
:last-child最后一个子元素
:first-of-type第一个同类型的子元素
:only-child选择包含唯一子元素
:only-of-type同类型唯一子元素，可以有多个元素
ul p:only-of-type{
background: red;
}
<ul>
<p>被选择到</p>
<li>1</li>
<li>2</li>
</ul>
:empty空元素
273
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
