CSS权重

CSS权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式。

权重的等级

可以把样式的应用方式分为几个等级,按照等级来计算权重

1、!important,加在样式属性值后,权重值为 10000
2、内联样式,如:style=””,权重值为1000
3、ID选择器,如:#content,权重值为100
4、类,伪类和属性选择器,如: content、:hover 权重值为10
5、标签选择器和伪元素选择器,如:div、p、:before 权重值为1
6、通用选择器(*)、子选择器(>)、相邻选择器(+)、同胞选择器(~)、权重值为0

权重的计算实例

1、实例一:

<style type="text/css">
    div{
        color:red !important;
    }
</style>
......
<div style="color:blue">这是一个div元素</div>
<!--
两条样式同时作用一个div,上面的样式权重值为10000+1,下面的行间样式的权重值为1000,
所以文字的最终颜色为red
-->

2、实例二:

<style type="text/css">
    #content div.main_content h2{
        color:red;
    }
    #content .main_content h2{
        color:blue;
    }
</style>
......
<div id="content">
    <div class="main_content">
        <h2>这是一个h2标题</h2>
    </div>
</div>
<!--
第一条样式的权重计算: 100+1+10+1,结果为112;
第二条样式的权重计算: 100+10+1,结果为111;
h2标题的最终颜色为red
-->

CSS3新增选择器

1、E:nth-child(n):匹配元素类型为E且是父元素的第n个子元素

<style type="text/css">
    .list div:nth-child(2){
        background-color:red;
    }
</style>
......
<div class="list">
    <h2>1</h2>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

<!-- 第2个子元素div匹配 -->

2、E:nth-last-child(n):匹配元素类型为E且是父元素的倒数第n个子元素(与上一项顺序相反)
3、E:first-child:匹配元素类型为E且是父元素的第一个子元素
4、E:last-child:匹配元素类型为E且是父元素的最后一个子元素
5、E:only-child:匹配元素类型为E且是父元素中唯一的子元素
6、E:nth-of-type(n):匹配父元素的第n个类型为E的子元素
7、E:nth-last-of-type(n):匹配父元素的倒数第n个类型为E的子元素(与上一项顺序相反)
8、E:first-of-type:匹配父元素的第一个类型为E的子元素
9、E:last-of-type:匹配父元素的最后一个类型为E的子元素
10、E:only-of-type:匹配父元素中唯一子元素是E的子元素
11、E:empty 选择一个空的元素
12、E:enabled 可用的表单控件
13、E:disabled 失效的表单控件
14、E:checked 选中的checkbox
15、E:not(s) 不包含某元素

<style type="text/css">
    .list div:not(:nth-child(2)){
        background-color:red;
    }
</style>
......
<div class="list">
    <h2>1</h2>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

<!-- 第 3、4、5 子元素div匹配 -->

16、E:target 对应锚点的样式

<style type="text/css">
    h2:target{
        color:red;
    }
</style>
......
<a href="#tit01">标题一</a>
......
<h2 id="tit01">标题一</h2>

<!-- 点击链接,h2标题变红 -->

17、E > F E元素下面第一层子集
18、E ~ F E元素后面的兄弟元素
19、E + F 紧挨着的兄弟元素

属性选择器:
1、E[data-attr] 含有data-attr属性的元素

<style type="text/css">
    div[data-attr='ok']{
        color:red;
    }
</style>
......
<div data-attr="ok">这是一个div元素</div>

<!-- 点击链接,h2标题变红 -->

2、E[data-attr='ok'] 含有data-attr属性的元素且它的值为“ok”
3、E[data-attr^='ok'] 含有data-attr属性的元素且它的值的开头含有“ok”
4、E[data-attr$='ok'] 含有data-attr属性的元素且它的值的结尾含有“ok”
5、E[data-attr*='ok'] 含有data-attr属性的元素且它的值中含有“ok”

CSS3圆角、阴影、rgba

CSS3圆角

设置某一个角的圆角,比如设置左上角的圆角:
border-top-left-radius:30px 60px;

同时分别设置四个角: border-radius:30px 60px 120px 150px;

设置四个圆角相同:
border-radius:50%;

CSS3阴影

box-shadow:h-shadow v-shadow blur spread color inset;
分别设置阴影:水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影

<style type="text/css">
    .box{
        width:200px;
        height:50px;
        background-color:gold;
        /* box-shadow:10px 10px 5px 2px pink inset; */
        box-shadow:10px 10px 5px 2px pink;
    }
</style>
......
<div class="box"></div>

<!-- 给盒子加上了粉红色的阴影 -->

rgba(新的颜色值表示法)

1、盒子透明度表示法:opacity:0.1;filter:alpha(opacity=10)(兼容IE);
2、rgba(0,0,0,0.1) 前三个数值表示颜色,第四个数值表示颜色的透明度

CSS3 transition动画

1、transition-property 设置过渡的属性,比如:width height background-color
2、transition-duration 设置过渡的时间,比如:1s 500ms
3、transition-timing-function 设置过渡的运动方式

  • linear 匀速
  • ease 开始和结束慢速
  • ease-in 开始是慢速
  • ease-out 结束时慢速
  • ease-in-out 开始和结束时慢速
  • cubic-bezier(n,n,n,n)

4、transition-delay 设置动画的延迟
5、transition: property duration timing-function delay 同时设置四个属性

举例:

<style type="text/css">
.box{
    width:100px;
    height:100px;
    background-color:gold;
    transition:width 300ms ease,height 300ms ease 300ms,background-color 300ms ease 600ms;
}
.box:hover{
    width:300px;
    height:300px;
    background-color:red;
}
</style>
......
<div class="box"></div>

CSS3 transform变换

1、translate(x,y) 设置盒子位移
2、scale(x,y) 设置盒子缩放
3、rotate(deg) 设置盒子旋转
4、skew(x-angle,y-angle) 设置盒子斜切
5、perspective 设置透视距离
6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示
7、translateX、translateY、translateZ 设置三维移动
8、rotateX、rotateY、rotateZ 设置三维旋转
9、scaleX、scaleY、scaleZ 设置三维缩放
10、tranform-origin 设置变形的中心点
11、backface-visibility 设置盒子背面是否可见

举例:(翻面效果)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻面</title>
    <style type="text/css">
        .box{
            width:300px;
            height:272px;
            margin:50px auto 0;
            transform-style:preserve-3d;
            position:relative;
        }
        .box .pic{
            width:300px;
            height:272px;
            position:absolute;
            background-color:cyan;
            left:0;
            top:0;
            transform:perspective(800px) rotateY(0deg);
            backface-visibility:hidden;
            transition:all 500ms ease;
        }
        .box .back_info{
            width:300px;
            height:272px;
            text-align:center;
            line-height:272px;
            background-color:gold;
            position:absolute;
            left:0;
            top:0;
            transform:rotateY(180deg);
            backface-visibility:hidden;
            transition:all 500ms ease;
        }
        .box:hover .pic{
            transform:perspective(800px) rotateY(180deg);
        }
        .box:hover .back_info{
            transform:perspective(800px) rotateY(0deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="pic"><img src="data:images/location_bg.jpg"></div>
        <div class="back_info">背面文字说明</div>
    </div>
</body>
</html>

CSS3 animation动画

1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线

  • linear 匀速
  • ease 开始和结束慢速
  • ease-in 开始是慢速
  • ease-out 结束时慢速
  • ease-in-out 开始和结束时慢速
  • steps 动画步数

5、animation-delay 动画延迟
6、animation-iteration-count 动画播放次数 n|infinite
7、animation-direction

  • normal 默认动画结束不返回
  • Alternate 动画结束后返回

8、animation-play-state 动画状态

  • paused 停止
  • running 运动

9、animation-fill-mode 动画前后的状态

  • none 不改变默认行为
  • forwards 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)
  • backwards 在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)
  • both 向前和向后填充模式都被应用

10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性

举例:(人物走路动画)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>走路动画</title>
    <style type="text/css">
        .box{
            width:120px;
            height:180px;
            border:1px solid #ccc;
            margin:50px auto 0;
            position:relative;
            overflow:hidden;
        }

        .box img{
            display:block;
            width:960px;
            height:182px;
            position: absolute;
            left:0;
            top:0;
            animation:walking 1.0s steps(8) infinite;
        }
        @keyframes walking{
            from{
                left:0px;
            }

            to{
                left:-960px;
            }
        }
    </style>
</head>
<body>
    <div class="box"><img src="data:images/walking.png"></div>
</body>
</html>

动画中使用的图片如下:

CSS浏览器前缀

浏览器样式前缀

为了让CSS3样式兼容,需要将某些样式加上浏览器前缀:

-ms- 兼容IE浏览器
-moz- 兼容firefox
-o- 兼容opera
-webkit- 兼容chrome 和 safari

比如:

div
{
    -ms-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    transform: rotate(30deg);
}

自动添加浏览器前缀

目前的状况是,有些CSS3属性需要加前缀,有些不需要加,有些只需要加一部分,这些加前缀的工作可以交给插件来完成,比如安装: autoprefixer

Sublime text 中安装 autoprefixer 执行 preferences/key Bindings-Users 设置快捷键 { "keys": ["ctrl+alt+x"], "command": "autoprefixer" } 通过此工具可以按照最新的前缀使用情况给样式自动加前缀。

HTML5新结构标签

h5新增的主要语义化标签如下:

1、header 页面头部、页眉
2、nav 页面导航
3、article 一篇文章
4、section 文章中的章节
5、aside 侧边栏
6、footer 页面底部、页脚

页面使用标签布局示意图:

PC端兼容h5的新标签的方法,在页面中引入以下js文件:

<script type="text/javascript" src="//cdn.bootcss.com/html5shiv/r29/html5.js"></script>

HTML5 新增表单控件

新增类型:网址 邮箱 日期 时间 星期 数量 范围 电话 颜色 搜索

<label>网址:</label><input type="url" name="" required><br><br>
<label>邮箱:</label><input type="email" name="" required><br><br>
<label>日期:</label><input type="date" name=""><br><br>
<label>时间:</label><input type="time" name=""><br><br>
<label>星期:</label><input type="week" name=""><br><br>
<label>数量:</label><input type="number" name=""> <br><br>
<label>范围:</label><input type="range" name=""><br><br>
<label>电话:</label><input type="tel" name=""><br><br>
<label>颜色:</label><input type="color" name=""><br><br>
<label>搜索:</label><input type="search" name=""><br><br>

新增常用表单控件属性:
1、placeholder 设置文本框默认提示文字
2、autofocus 自动获得焦点
3、autocomplete 联想关键词

HTML5 音频和视频

html5增加了audio和video标签,提供了在页面上插入音频和视频的标准方法。

audio标签 
支持格式:ogg、wav、mp3

对应属性:
1、autoplay 自动播放
2、controls 显示播放器
3、loop 循环播放
4、preload 预加载
5、muted 静音

举例:

<audio src="source/audio.mp3" autoplay controls loop preload></audio>

<!-- 或者用如下方式:  -->

<audio  autoplay controls loop preload>
    <source src="source/audio.mp3" type="">
    <source src="source/audio02.wav" type="">
</audio>

source标签的作用是提供多个媒体文件地址,如果一个地址的文件不兼容,就使用下一个地址。

video标签

支持格式:ogg、mp4、webM

属性:
1、width
2、height
3、Poster

可选第三方播放器:
1、cyberplayer
2、tencentPlayer
3、youkuplayer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<audio autoplay controls loop preload>
    <source src="myMusic.mp3" type="">
</audio>
<video src="mov.mp4" controls preload="auto" width="400" height="300">
</video>
</body>
</html>

Python开发【前端篇】HTML5+CSS3的更多相关文章

  1. 《python开发技术详解》|百度网盘免费下载|Python开发入门篇

    <python开发技术详解>|百度网盘免费下载|Python开发入门篇 提取码:2sby  内容简介 Python是目前最流行的动态脚本语言之一.本书共27章,由浅入深.全面系统地介绍了利 ...

  2. 大话ASP.NET开发(第一章 html5+css3+解耦问题的探讨)

    一.拉近我们的距离 我想,很多人会问,如今IE6还占据颇多份额的中国,html5.css3是否还很遥远?我会很直接告诉他们:其实就在你的眼前.我们来看两个图:                      ...

  3. python开发第一篇:初识python

    一. Python介绍 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为AB ...

  4. day46 前端基础HTML5+CSS3

    编辑器 pycharm,sublime,hbuild,webstorm,atom 前端概念 广义:用户能看见并且交互的显示页面 狭义:运行在浏览器上的页面 学习的语言 html5 => (h5架 ...

  5. 10款web前端基于html5/CSS3应用特效

    1.jQuery百叶窗效果焦点图 多种百叶窗动画方式 对于百叶窗动画效果,我们介绍的不是很多,目前就介绍过一款CSS3百叶窗图片切换.这次要给大家带来一个基于jQuery的多种百叶窗动画效果焦点图,焦 ...

  6. Python开发第一篇

    Python 是什么? 首先他可能是比较好的一个编程开发语言!

  7. Python开发 第一篇 python的前世今生

    Python前世今生 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC ...

  8. python开发[第二篇]------str的7个必须掌握的方法以及五个常用方法

    在Python中 基本数据类型有 str int boolean list dict tuple等 其中str的相关方法有30多个 但是常用的就以下7个 join  # split # find # ...

  9. python开发第二篇 :python基础

    python基础a.Python基础      -基础1. 第一句python       -python后缀名可以任意?     -导入模块时如果不是.py文件,以后的文件后缀名是.py.2.两种 ...

  10. Python开发 基础篇

    2019-02-01 产生验证码: 用户输入的值和显示的值相同时显示Correct,否则继续生成随机验证码等待用户输入 def check_code(): import random checkcod ...

随机推荐

  1. 推荐几个Spring Cloud学习资料

    研究Spring Cloud也有一段时间了,手头上有一点收集的资料,分享给小伙伴们学习. 博客 1.跟我学Spring Cloud 2.周立|Spring Cloud 3.Spring Cloud基础 ...

  2. [Leetcode]112. Path Sum -David_Lin

    Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding up all ...

  3. .netcore2.0+pgsql 脚手架

    mystaging介绍 这是一个 .netcore+pgsql 的脚手架,可以一键生成实体对象和业务层接口,让开发人员无需关注底层变动,专注编写业务代码,它可以让你使用 .netcore2.0的新特性 ...

  4. 磊哥测评之数据库SaaS篇:腾讯云控制台、DMC和小程序

    本文由云+社区发表 作者:腾讯云数据库 随着云计算和数据库技术的发展,数据库正在变得越来越强大.数据库的性能如处理速度.对高并发的支持在节节攀升,同时分布式.实时的数据分析.兼容主流数据库等强大的性能 ...

  5. REST API设计指导——译自Microsoft REST API Guidelines(四)

    前言 前面我们说了,如果API的设计更规范更合理,在很大程度上能够提高联调的效率,降低沟通成本.那么什么是好的API设计?这里我们不得不提到REST API. 关于REST API的书籍很多,但是完整 ...

  6. C#杂记-自动实现的属性(自动属性)

    基础知识: 普通属性:可读或可写并将值存储到一个私有变量中的属性,不对数据做任何加工,没有自定义代码. private string name public string Name { get{ret ...

  7. python爬虫之静态网页——全国空气质量指数(AQI)爬取

    首先爬取地址:http://www.air-level.com/ 利用的python库,最近最流行的requests,BeautifulSoup. requests:用于下载html Beautifu ...

  8. Dynamics 365测试和启用邮箱时候一直显示“安排电子邮件配置测试”怎么办?

    摘要: 本人微信公众号:微软动态CRM专家罗勇 ,回复284或者20181125可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!我的网站是 www.luoyong.me ...

  9. 广州.NET微软技术俱乐部提技术问题的正确方式

    这是 北京.NET微软技术俱乐部 里一个人问问题的方式, 很赞, 所以希望大家问问题也采用这种方式. 耗时少, 使用12月8日活动上董志强先生介绍的windows 10 Snip&Sketch ...

  10. 国外线下技术俱乐部建设(1) - Belgrade Python技术俱乐部2019-01-25活动感悟

    这是<国外线下技术俱乐部建设>系列文章之一.   虽然之前接触过Belgrade的.NET技术俱乐部,但是它最近活动要春节后了. 出于观摩别人是怎么搞线下社区的心态,还有自己也有在用Pyt ...