如何学习
Cascading Style Sheet 层叠级联样式表
CSS：表现（美化网页）
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动
基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范，<style>可以编写css的代码，每一个声明最好使用分号结尾
语法：
选择器{
声明1：
声明2：
声明3：
}
-->
<style>
h1{
color:red;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
<!--行内样式，在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color:red">我是标题</h1>
<!--内部样式-->
<style>
h1{
color:green;
}
</style>
<!--外部样式-->
h1{
color:yellow;
}
优先级：就近原则
扩展：外部样式两种写法
链接式
<link rel="stylesheet" href="./css/style.css">
导入式
<style>
@import url(./css/style.css)
</style>
<style>
/* 标签选择器，会选择到页面上所有的这个标签的元素*/
h1{
color: red;
}
</style>
<style>
/* 类选择器 .class名称
好处，可以多个标签归类，是同一个class，可以复用*/
.xu{
color: green;
}
</style>
<h1 class="xu">我是标题</h1>
<!--内部样式-->
<style>
/* id选择器 id保证全局唯一
#id */
#xu{
color: green;
}
</style>
<h1 id="xu">我是标题</h1>
优先级：ID选择器>class选择器>标签选择器
在某个元素的后面，子子孙孙
<style>
body p{
background:green;
}
</style>
只有一代，第一代才有
<style>
body>p{
background:green;
}
</style>
向下相邻，只有一个
<style>
.nab + p{
background:green;
}
</style>
<p>p1</p>
<p class="nab">p2</p>
<p>p3</p>
向下所有兄弟元素
<style>
.nab~p{
background:green;
}
</style>
<style> #ul的第一个元素
ul li:first-child{
background:green;
}
</style>
<style> #ul的最后一个元素
ul li:last-child{
background:green;
}
</style>
<style> #选择当前p元素的父级元素，选中父级元素的第一（可改）个元素，并且是当前元素才生效
p:nth-child(1){
background:green;
}
</style>
<style> #选择当前p元素的父级元素的p元素的第二个
p:nth-of-type(1){
background:green;
}
</style>
<style>
.demo a{
float:left;
display:block;
height:50px;
width:50px;
border-radius:10px;
background:#2700ff;
text-align:center;
color:gainsboro;
text-decoration:none;
margin-right:5px;
font:bold 20px/50px Arial;
}
/*存在id属性
属性名，属性名=属性值（正则）
=绝对等于
*=包含
^=以这个开头
$=以这个结尾
*/
a[id]{
background:yellow;
}
a[id=second]{
background:green;
}
a[class*=links]{
background:black;
}
span标签：重点要突出的字，使用span套起来
<style>
#n{
font-size:50px
}
</style>
欢迎学习<span id="n">Java</span>
颜色
文本对齐的方式
首行缩进
行高
装饰
文字图片水平对齐：a,b{vertical-align:middle}
伪类
阴影
ul li{
height:30px;
list-style:none;//去掉圆点
}
none:去掉圆点
circle:空心圆
decimal:数字
square：正方形
<div id="nav">
</div>
<style>
#nav{
weight:50px;
height:80px;
}
</style>
嵌套在div标签里，设置大小
背景颜色
背景图片
<style>
div{
width:1000px;
height:600px;
border:1px solid red;
background-image:url("images/tx.jpg")//默认是全部平铺的
background-repeat:repeat-x;水平平铺
background-repeat:repeat-y;竖直平铺
background-repeat:no-repeat;不平铺
background-position:240px 39px;
}
</style>
//合在一起写 颜色 图片 位置 平铺方式
background:red url("") 270px 10px no-repeat;
渐变 径向渐变 圆形渐变
background-color: #4158D0;
background-image: linear-gradient(30deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
margin：外边距
padding：内边距
border：边框
/*border 粗细 样式 颜色*/
body{
/*总有一个默认的外边距*/
margin:0;
padding:0;
text-decoration:none;
}
#box{
width:300px;
border:1px solid red;
}
h2{
font-size:16px;
background-color:green;
line-height:30px;
}
form{
background:#3cdba6;
}
div:nth-of-type(1) input{
border:3px solid black;
}
div:nth-of-type(2) input{
border:3px dashed yellow;
}
/*外边距的妙用 居中 必须是块元素，有固定的宽度*/
/*
margin:0 上下左右
margin:0 1px 上下 左右
margin:0 1px 2px 3px 左上 右上 右下 左下 顺时针
*/
padding:
与外边距用法一样
盒子计算：
margin+border+padding+内容宽度
border-radius:50px 50px 20px 60px; 顺时针
div{
width:100px;
height:100px;
border:10px solid red;
border-radius:50px 50px 20px 60px; /*左上 右下*/
}
div{
width:100px;
height:100px;
border:10px solid red;
box-shadow:10px 10px 1px yellow; /* 长 宽 模糊半径 颜色*/
}
标准文档流
块级元素：独占一行
行内元素：不独占一行，可以被包含在块级元素中
/*
block 块内元素
inline 行内元素
inline-block 是快元素但是可以内联，在一行
none 不显示
float:left;左右浮动
right
*/
div{
width:100px;
height:100px;
border:1px solid red;
}
span{
width:100px;
height:100px;
border:1px solid red;
display:block;
float:left;
clear:both;//
}
clear:
父级边框塌陷问题
解决方案
overflow:hidden;多余的隐藏
overflow:scroll;滚动条
#father:after{
content:‘‘;
display:bock;
clear:both;
}
相对于原来的位置偏移，相对定位的话，仍然在标准文档流中，原来的位置会被保留
#first{
background-color:red;
border:1px dashed #666;
position:relative;/*相对定位*/
top:-20px; /*上移 距离上*/
left:20px; /*右移 距离左边*/
}
position:absolute
没有父级元素定位的前提下，相对于浏览器定位
假设父级元素存在定位，父级元素position：relative，我们通常会相对于父级元素进行偏移
在父级元素范围内移动，绝对定位后，位置不保留
position:fixed
z-index:100
opacity:0.5 透明度
z-index:默认是0，最高无限 999
HTML5 canvas
CSS动画
javascript动画
原文：https://www.cnblogs.com/uxquan/p/13758972.html