css3、html5学习笔记

2016/12/14　　　　----认真看完绝对对你有帮助

HTML5针对移动端,移动端的浏览器主要是chrome,是webkit内核;
app(applicatin):应用;
native app:原生的app
sadsadsadad
单标签可以省略结尾标记; 比如input和br, /可以不写;

H5新增的标签

header,nav,footer,section,video,audio···

功能性标签:video,audio,canvas···

结构标签:header,nav,footer,section···

页眉;不兼容IE8—；
页脚;不兼容IE8—;
标题的组合; 不兼容IE9—;
区块;不兼容IE8—;
文章;不兼容IE8—;
侧边栏;不兼容IE8—;
- 放到article之外,section之内,一般表达(推荐文章,热门评论,友情链接,广告位);
- 放到article之内,一般表达跟此文章相关的东西(相关文章,相关人物介绍,引用连接等);
用于对元素进行组合,一般用于图片或者视频;
figure的子元素,用于对figure的内容进行说明,一般配合figure使用;
用来表现时间或者日期;
选项(数据)列表,与input元素配合使用,来定义input可能的值;一般配合input使用,里面放各种option选项;
描述;展开状态：open,
简介;和detail配合使用;
对话框;默认隐藏,需要现实的话加open;
地址;
标记;
进度条;
进度条;IE完全不兼容;

如果想让标签支持IE低版本,需要引入html5shiv.js,下载地址:https://en.wikipedia.org/wiki/HTML5_shiv

JS新增选择器

document.querySelectorAll('.box ul li input');//返回一组元素; 注意前面要加选择符

document.querySelector('input');//返回一个元素;其实就是queryselectorall加完下标0的结果;注意前面要加选择符

自定义属性规范

实例:index就是自定义属性;之前没有规范,随便写;

    <input type="button" index="1" />

规范:以data-开头;获取和设置可以用getAttribute和setAttribute;

    <input type="button" index="1" /> --->  <input type="button" data-index="1" /> 

好处：

    使用方便：

        obj.dataset.index = 1;//设置;

        alert(obj.dataset.index);//获取自定义属性;

    方便循环：用for in循环,obj.dataset

class操作

obj.classList.add(className);添加className;

obj.classList.remove(className);删除className;

obj.classList.contains(clasName);判断有没有className,有的话返回true,否则返回false;

obj.classList.toggle(clasName);判断有没有className,有的话删除,没有的话增加;

本地存储

cookie:缺点：

        容量小,大约4KB;

        需要放到服务器环境;

        有过期时间;

HTML5本地存储: localStORage;仅仅不兼容IE6;

    没有过期时间;

    容量大(5MB);

localStroage三个操作:F12-->RESOURCES--->LOCALSTORAGE

    存储:

        方法1.localStorage.a = 12;

        方法2. localStorage.setItem(name,value);

    获取:

        方法1.alert(localstorage.a);

        方法2.alert(localstorage.getItem(name));

    删除:

        方法1.datele localstorage.a;

        方法2.localStorage.removeItem(name);

    删除多条localstorage：

        方法1.for(var name in localstroage){

            delete localstroage[name];

        }

        方法2.localstorage.clear();

    以上方法可以混合使用,但是不建议.

共同点:

    都不安全;不能跨域;不能夸浏览器;

sessionstroage

本地存储,和localstorage的区别就是关闭浏览器会消失,其他操作完全一样;

localstorage和sessionstorage和cookie的用法一样,能用cookie的地方都可以用localstorage和sessionstorage;

CSS3选择器

属性选择器
element[name=value];name=vlaue 的元素；
示例:input各种type
input[type=text]{background: red;}

    element[name]:只要包含name的元素；

        示例: <div type></div>

            *[type]{background:red}

    element[name~=vlaue]:包含value整个单词的元素;

        示例：<div title="apple banana"></div>

            div[title~=apple]{backgrund:red;}

    element[name*=vlaue]:包含value这个字母的元素;

        示例：<div title="apple a banana"></div>

            div[title*=apple]{backgrund:red;}

    element[name^=vlaue]:以value开头的元素;

    element[name$=value]:以value结尾的元素;

    element[name|=value]:以整个是value或者以value-开头的元素;

    element[name1][name2]{background:red;}拥有多个name的元素;

伪类选择器

element:nth-child(n){}:正着数第n个element;

element:nth-last-child(n):倒着数第n个element;

element:nth-child(2n):偶数行;--->element:nth-child(even)

element:nth-child(2n-1):奇数行;--->element:nth-child(odd)

element:first-child{}第一个元素;

element:last-child{}最后一个元素;

element:empty{}空元素;没有内容的元素;

element:disabled{}不可用的元素,一般指的是表单元素;

element:enabled{}:激活的可用的元素,一般指的是表单元素;

element:checked{}选中的元素,指的是表单元素，比如：radio

element:target{}被选中的元素;比如选项卡;

element:nth-last-child(n){}:倒数第N个元素;--->element:nth-last-child(1):倒数第一个元素;

element:nth-of-type(1):所有类型里面的第N个元素;

element:nth-last-of-type(1):所有类型里面倒数第1个元素;

element~obj{}选择element下面的兄弟元素;

element>obj{}选择子元素;

element:not(.class){}不包含某个class的元素;

element:first-line{}第一行文字;

element:first-letter{}:第一个文字;

element::selection{}选中的文本，文字;

::selection{}所有选中的文字,--->*selection{}所有选中的文字;

element::after{}文本的前面添加东西，配合content:'asd'

element::before{}文本的后面的添加东西;配合content:'adsa'

CSS3新的样式

css3新的样式有些浏览器不兼容,需要加浏览器前缀:

    -webkit-:chrome,opera,safari,

    -moz-:firefox,

    -ms-:microsoft,

    -o-:opera,

    s

transform:rotate(30deg)—->deg:角度;

案例:点击div旋转;
```
obj.style.transform = "rotate(30deg)";

js封装;
```

动画

运动形式：

    linear

    ease

    ease-in

    ease-out

    ease-in-out

基础动画：transition,想运动谁,就把动画加给谁;

    transition: 时间 要运动的属性[width,height,background···] 运动形式;

    运动多个属性,以逗号隔开;transition:1s width ease,1s height ease, 1s background ease-in;

高机动画:

   定义动画： @keyframes 动画名称{

        form {}

        to{}

   }

   执行动画：animation： 时间  动画名称 运动形式

圆角

   border-radius: 10px | 50%;

   border-radius: 10px 20px; 上下10px，左右20px；

   border-radius:100px 20px 50px ;上100px 左右20px，下50px；

   border-radius: 100px 50px ;上下100px，左右50px；

   border-radius: 10px/30px--->x/y: x轴[水平]，y轴[垂直]；

颜色的表达方式

rgba(0,0,0,.5);//黑色半透明;

文字阴影

text-shadow: 1px 1px 4px red;

             x轴  y轴 模糊度 颜色;

文字描边
```
text-stroker: 1px red;
```

块阴影

box-shadow: 1px  1px   4px   red;

            x轴  y轴    模糊度 颜色;

box-shadow: insert 1px  1px   4px   red;内阴影;

box-shadow: outer 1px 1px 4ps red ;外阴影;

box-shadow: 1px   1px   4px   5px   red;

            x轴    y轴   模糊度  扩展  颜色;

box-shadow: [insert]  x轴  y轴  blur  [spread]  color  ---->[]中的参数可有可无,insert为内阴影,spread为扩展;如果需要叠加多个颜色,以逗号隔开;

渐变

   线性渐变：

           background:linear-gradient(color1,color2···):

           background:linear-gradient(left,top,right,bottom,color1,color2···)方向:left,right,top,bottom, left top···

           background:linear-gradient(left,top,right,bottom,color1,color2···)方向:0deg:left,90deg:bottom;

           渐变区域大小：

               -webkit-gradient(方向,color 大小,color2 大小····);

   径向渐变：

       background:-webkit-radial-gradient(x y,color1,color2····)x,y代表的是形状,也可以用英文单词代替,圆形[circle]和椭圆形[ellipse];

       background:-webkit-radial-gradient(x y,x y,color1,color2····):第一个xy代表的是圆心的位置,可以用left,right,top,bottom代替，也可以使用数值加单位的形式代替,第二个x y 代表的是形状,也可以用单词代替,圆形[circle]和椭圆形[ellipse]

   重复渐变:

       background:-webkit-repeating-liinear-gradient(red 0px,blue 10px):

蒙版

-webkit-mask:url(1.png);—->特点:有颜色的地方会显示出来,跟颜色无关;用PS做一个透明的图片,覆盖到div上就可以了.

倒影

   -webkit-box-reflext: 方向  距离  渐变;

       方向取值：

               下：below, 上above  右right  左left

文字排列

   direction: ltr | rtl |;left to right | right to left;

   此样式需要配合Unicode-bidi:bidi-override才可以生效;

变形

   transform:

       rotate(30deg):旋转

       scale(x,y):缩放--->scaleX();--->scaleY();

       translate(x,y):平移--->translateX();--->translateY();

       skew(x,y):倾斜度

       以上样式,物体的本身并没有发生变化,盒子模型也没有发生变化,位置信息也没有发生变化;也就是说并不会引起浏览器重绘重排,性能比较高;只是视觉上发生了变化;

       案例:CSS3时钟;

   transform-origin: 旋转中心点;也可以理解成绕着哪个坐标开始转;

       center center

       left center

       rigth center

    ***transform多个值同时写的时候,先写的后生效,比如:旋转60deg,缩放2倍,横向平移300px应该写成:

           transform:translateX(300px) sclae(2) rotate(deg);

3D

坐标:

    x:

    y:

    z:

    **面朝坐标轴,顺时针旋转;

transform:

    rotateX():

    rotateY():

    rotateZ():

3D需要配合透视(景深)来使用,透视/景深:观察物体的远近程度;

    perspective:取值number+单位;此属性加给要变化的物体;比如:perspective(800px)

css3、html5学习笔记

CSS3选择器

3D

相关文章