基础

基础

颜色

teal蓝绿色 grey灰色 olive橄榄绿 orange橙色

字体

  • font-family:

    PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;

  • font-style:

    • normal 文本正常
    • italic 文本斜体
    • oblique 文本倾斜

文本

  • text-decoration:
    • none没有，
    • underline下划线，
    • overline上划线，
    • line-throuth中间线，
    • blink闪烁文本；
      • line-height:
      • normal
      • number:设置数字，当前字体尺寸相乘
      • lenght:固定的行间距
      • %:当前支持
      • inherit：继承父元素line-height
      • letter-spacing(字母) word-spacing(字与字)
      • normal字符无间隔
      • length:可以为负值
      • inherit:父元素letter-spacing

背景

  • background-image:url();
  • background-repeat: no-repeat;
  • background-attachment: fixed;
  • background-position: right top;
  • background: #fff url(“ “) 10px 10px no-repeat fixed right top;

单位

px/16 = em

百分比：相对16px

动作

link 正常
visited 已阅
hover 停留
active 正点

列表

列表：
list-style-type 标号类型
list-style-position 标号位置
list-style-image 图标url(“”)

表格

表格

  • caption 表名

  • border-collapse: collapse table合并边框

  • cellspacing=”0” 合并边框

  • 合并行rowspan=”2” 和并列colspan=”2”

  • cellpadding=”10” td内边距

边框

  • border-style: dotted点状，solid实线，double双线，dashed虚线
  • border-width
  • border-color
  • border: 1px solid black

选择器

选择器
tr:nth-child(odd奇|even偶)

tr:nth-child(2n)

div:nth-child(1);

第1个元素并且是div

div:first-child;

注意

margin垂直方向会合并

清除图片、a标签空隙
font-size:0;

块状行内

1、块状元素：
独占一行
div/p/h1/ol/ul/table/form
2、行内元素inline：
width、height不能设置
span/a

3、行内块状元素inline-block：
都可以设置
img

clear:both; 左右都不会有浮动元素

盒子

盒子大小：

box-sizing: border-box;

居中

margin: 0px auto;

vertical: middle;

text-align: justify; 水平对齐，改变单词之间的差距，使所有文本行的宽度相同

定位

  • position:

     static默认    z-index无效

  • fixed 相对浏览器窗口

  • relative 保留原位置

                 相对直接父元素
  • absolute 不保留原位置
                 相对static定位以外的第一个父元素或者body

三层定位：relative、absolute、absolute
两层定位：relative、absolute
z-index:-999

css3

圆

border-top-left-radius:40px 20px; 左上角,
border-radius:20px;

阴影

box-shadow:
inset 水平偏移、垂直偏移、模糊距离、颜色
insct 可选、内部阴影
outset 默认值、外部阴影
traf + ctrl + e
chrome -webkit-
firfox -moz-
opera -o-
ie -ms-

2D

text-shadow:2px 2px 8px #ccc; 水平，垂直，阴影大小，颜色

长单词、URL强行换行

word-wrap:break-word;normal;

字体

@font-face{
font-family:myname;
src:url(‘fonts/myname.ttf’),
url(‘fonts/myname.eot’)
}
p{
font-family:myname;
}

3D动作

  • 旋转
    #rotataDiv{

    tranform:rotate(30deg);    //正30deg

    }

  • 缩放
    tranform:scale(1, 0.5);

  • 平移

    transform:translateX(150px);

  • all

    0%{

        transform:translateZ(0px) scale(1) rotateZ(0deg);
}

过渡

transition:属性名(all)，持续时间，过渡方法
transition-property:all; 对哪个属性进行变换
transitioin-duration 持续时间
transition-timing-function 过度使用的方法(函数)
linear匀速，ease慢快慢，ease-in

animation动画

@keyframes mycolor{
0% {background-color:red;}
30% {background-color:bule}
60% {background-color:yellow;}
100%{background-color:green;}
}
div:hover{
animation:mycolor 5s linear; // n或infinite无数次
//animation-play-state:running|paused;可以设置鼠标悬停时播放和移除暂停
}

3d

transform-style:preserve-3d;

tranform:rotateY(60deg);
x,y,z: z大拇指指向自己
perspective:100px; //舞台,眼睛到舞台的距离，远近不同

<style type="text/css">
    p&#123;
        -webkit-transform: ;
        -ms-transform: ;
        -o-transform: ;
        transform: ;
    &#125;
</style>

方向

x向右，y向下，z向前

块级和行内元素

（1）块级元素会独占一行，其宽度自动填满其父元素宽度；
行内元素不会独占一行，相邻的行内元素会排列在同一行，直至一行排不下才会换行，其宽度随元素的内容而变化。
（2）块级元素可以包含行内元素和块级元素；行内元素不能包含块级元素。
（3）行内元素设置width、height、margin-top、margin-bottom、padding-top、padding-bottom无效。

行内元素（可以并排）

块级元素（不可以并排）

可变元素

根据上下文语境决定该元素为块元素或内联元素：

HTML5

新页面

<header>头部</header>
<nav>导航</nav>
<aside>边栏</aside>
<content>
    <section>
        <header>文章标题</header>
        <article>文章内容</article>
        <footer>文章版权</footer>
    </section>
    <section>
        <header>文章标题</header>
        <article>文章内容</article>
        <footer>文章版权</footer>
    </section>
</content>
<footer></footer>

音频、视频

音频
<audio src=" " controls="controls">
    不支持audio，controls控制条
</audio>

视频
<video id="id" width="420">
    <source src="" type="video/mp4" />
    浏览器不支持它
</video>
<button onclick="playPause">播放/暂停</button>
<script>
    var v = document.getElementById("id");
    function playPause()&#123;
        if(v.paused)
            v.play();
        else
            v.pause();
    &#125;
</script>

Canvas

步骤

  1. 定义画布
  2. 设置画布样式
  3. JS准备绘图上下文环境
  4. JS绘图

定义画布

#myCanvas&#123;
    border:1px solid black;
&#125;

<canvas id="myCanvas" width="860" height="480">
    浏览器不支持画布,单位没有px
</canvas>

<script>
    function draw(event)&#123;
        var canvas = document.getElementById("myCanvas");
        var pen = canvas.getContext("2d");
        pen.moveTo(50,50);
        pen.lineTo(300,300);
        pen.lineWidth = 5;
        pen.strokeStyle = "red";
        pen.stroke(); 
    &#125;
    window.onload = draw;
</script>

自由绘图

css:
#myCanvas&#123;
    border:1px solid black;
&#125;


html:
<canvas id="myCanvas" width="860" height="480"></canvas>

js:
<script>
    var canvas, pen, mousePress = false, last= null;
    canvas = document.getElementById("myCanvas");
    pen = canvas.getContext("2d");
    pen.lineWidth = 1;
    pen.strokeStyle = "blue";
    /*获取点的坐标*/
    function position(event)&#123;
        var x,y;
        x = event.clientX;
        y = event.clientY;
        return &#123;
            x:x,
            y:y
        &#125;;
    &#125;
    /*点击*/
    function start(event)&#123;
        mousePress = true;
    &#125;
    /*绘图*/
    function draw(event)&#123;
        if(!mousePress) return;
        var xy = position(event);
        if(last != null)&#123;
            pen.beginPath();
            pen.moveTo(last.x, last.y);
            pen.lineTo(xy.x, xy.y);
            pen.stroke();
        &#125;
        last = xy;
    &#125;
    /*结束*/
    function finsh(event)&#123;
        mousePress = false;
        last = null;
    &#125;
    canvas.onmousedown = start;
    canvas.onmousemove = draw;
    canvas.onmouseup = finsh;

</script>

语义化

让页面具有良好的结构和含义，人和机器都能快速理解网页内容；SEO

nav、header、article、aside、footer

斜体em、强调strong

dl、dt、dd

html
超文本标记语言

工具

布局：https://cssgr.id

简单样式：csslayout.io