htlm5

文字常用

width ；宽度

height ； 高度

ol  有序列表   li

ul 无序列表   li

dl  ；自定义  dt   dd

p:段落；

i：斜体；

b：加粗；

br：换行；

hr：水平线；

&nbsp：空格；

dl : 自定义

text -indent:2em   首行缩进2个

text-align:center 文字居中

font-size:16px  段落文字大小

color 文字颜色

a 超链接 <a href=xxxx> xxx</a>

图像标记  格式 <img src=相片地址 alt=替换文本>
src 相片文件

alt  相片不能显示时替换文字

title 鼠标指针向相片的时候显示文字

width 相片宽度

height 相片高度

css基础
    link   链接css    <link rel="stylesheet" type="text/css" href=""/>

strong 直接在文案输出   <style type="text/css">

*  表示所有的元素外边距 和内边距  margin:0;padding:0;

CSS常用文字属性

font-family  设置字体  

font-size   设置字号

font-weight   设置字体的粗细

font-style     设置字体的倾斜

@font-face  用于定义服务器字体

text-decoration   设置文本是否添加下画线 ，删除线等

color  文字颜色

text-align   文字居中对其    left 左对齐  right 右对齐  center 居中对齐  justify 两端对齐 

text-indent    段落缩进

line-height   行高

text-shadow    文字的阴影效果 

texr-overflow    元素内溢出文本处理

CSS盒子模型
div 盒子  padding 边距之间的距离为"内边距"   border 边框  margin  外边距

边框属性 border-bottom:2px solid #f00;   下边框设置2px，实线，红色

border-top:   上边框宽度 样式  颜色       

border-right:   右

border-bottom:   下

border-left:   左

solid   单实线

dashed   虚线

dotted    点线

double   双实线

圆角边框 border-radius

radius   圆角可以设4个角

内边距 padding

padding-top   上

padding-right:   右

padding-bottom:   下

padding-left:   左

外边距 margin

margin-top   上

margin-right:   右

margin-bottom:   下

margin-left:   左

盒子阴影 box-shadow

box-shadow： 左右遍移 ，上下遍移，阴影模糊，阴影半径，阴影颜色，阴影类型

CSS设置背景   background

background-color  颜色

background-image   图像

background-repeat   如何重复图像

repeat     相片横向和纵向平铺

no-repeat   相片不重复

repeat-x   相片不横向重复

repeat-y   相片不纵向重复

space  相片已相图间距平铺  填充整个容器某个方向

round  相片自动缩放直到合适，填充整个容器

background-position  图像位置

center  居中

left  左 

rght  右

top  顶部

bottom  底部

background-attachment   图像是否固定或者滚动

scroll   滚动

fixed  相片固定

local   相片跟着文字一起滚动

background-size    图像大小 比例缩放

auto   真实大小 默认为

cover  会超出容器

contain  不会超出容器

background-clip   裁剪区域

background-origin 图像的参考原点

可以综合设置背景 background:背景色，相片，重复，位子，固定，大小，裁剪，原点  如果同时设置 大小和位子，需要 /   隔开

opacity   设置不透明度  0表示全部透明 ，1表示不透明，0.5表示半透明

opacity      opacity:0.3 半透明

浮动 float

float : left  左浮动 

float : right  右浮动

float : nane  清除浮动

元素定位 position

position : static  静态定位   默认定位方式。

position : relative 相对定位  相对于其原文档流的位置进行定位

position : absolute  绝对定位   相对于其上一个已经定位的父元素进行定位

position : fixed  固定定位   相对于浏览器窗口进行定位

z-index 当同时用多个元素的时候有可能发生重叠可以用z-index来调整

元素的 overflow 属性

visinie : 对元素内溢出内容不做处理，内容可能会超出容器。

hidden ： 溢出内容被修剪，并且被修剪的内容是不可见的。

auto ： 在需要时产生滚动条，并自适应所要显示的内容。

scroll : 溢出内容被修剪，且浏览器会始终显示滚动条。

css3动画 

过渡属性

指定应用过渡效果的CSS属性名称

transiton-property :none  没有属性会获取过渡效果

transiton-property ：all  全部属性都会获取过渡效果 

transiton-property ： property  定义应用过渡效果的CSS 属性名称，多个名称之间以逗号隔开 

transiton-duration：time 定义过渡效果花费的时间默认为0，常用单位是秒（s）或毫秒（ms）。

定义过渡效果的速度曲线

transiton-timing-function ： ease 平滑过渡。

transiton-timing-function ： linear  线性过渡。

transiton-timing-function ： ease-in  由慢到快。

transiton-timing-function ： ease-out 由快到慢

transiton-timing-function ：ease-in-out  由慢到快再到慢

transiton-timing-function ：cubic-bezier 特殊的立方贝塞尔曲线效果

transiton-delay :定义过渡效果延迟时间  属性值为 ： time 默认值为 0 ，常用单位是秒（s）或毫秒（ms）

transition：综合设置过渡的所有属性值    property  duration timing-function delay  按照各属性顺序用一行代码设置4个参数值，属性顺序不能颠倒。

变形属性 transform

transform-translate(x,y)  基于x和y坐标平移元素   x表示水平移动的距离，y表示垂直移动的距离

transform-scale（n1，n2） 放大或缩小元素  n1和n2表示基于元素的宽度和高度进行放大或缩小。大于1时为放大，小于1时为缩小元素。第二个参数省略时，等于第一个参数值

transform-skew（angle，angle） 倾斜元素   两个angle分别表示xzhou和y的轴上的倾斜的角度

transform-rotete(angle)旋转元素 angle表示旋转的角度，正数表示顺时针旋转，负数表示逆时针旋转