css3和css有什么区别？首先css3是css（层叠样式表）技术的升级版本，而css是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。然后是内容上css3主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。而css不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。最后在特点上css3新特征有很多，例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理（旋转、缩放、倾斜、移动）、多栏布局、媒体查询等。css主要能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。（更多详情参考下百度官方给出的介绍：css css3)

下面言归正传，其实今天学习这个主要是想了解css3的transform动画效果，不过貌似第一节课没有提到，有点小失落，这个html5+css3+js不光可以实现动画，其次可以往这个游戏与建模方向发展,闲话不多扯，在第一节中笔记如下：

1.html嵌套样式包含内部、外部、内联，通过代码的可复用性，比对最后得出：不建议使用内联样式，内部样式其次，外部样式推荐使用，比方说下面这个最后展示结果字体的颜色是#f90，原因是因为外部<内部<内联，这个是单行的样式，如果页面样式数量过多，超出一定数值，还是建议将这个css的样式与代码相分离，最后通过link链接，具体代码展示如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <title>简单了解css3样式设计和优先级</title>

     <style type="text/css">

     div{

         color: rebeccapurple;

     }

     div.box{

         color: saddlebrown;

     }

     #box{

         color: blue;

         /* color: blue!important; */ /*添加的important属性最后读取*/

     }

     /*有意思的一点是当这个图片的宽高一致时，border-radius:50%的圆形属性和这个img2的图片直径500px一致*/

     .box1>img{

        border-radius: 50%;

     }/*img尺寸1000x956px*/

     .box2>img{

         border-radius: 500px;

     }/*img2尺寸500x500px*/

     </style>

     <link rel="stylesheet" href="demo1.css">

 </head>

 <body>

     <div class="box" id="box" style="font-size: 24px;font-weight: bold;color: #f90;">

     html嵌套样式包含内部、外部、内联，通过代码的可复用性，比对最后得出：不建议使用内联样式，内部样式其次，外部样式推荐使用，代码展示如下：

     </div><!--内联样式-->

     <!-- 新建一个css样式表通过link链接控制这个页面的样式 --><!--外部样式-->

     <p class="box1"><img src="data:images/timg.jpg" alt=""></p>

     <p class="box2"><img src="data:images/timg2.jpg" alt=""></p>

 </body>

 </html>

个人看法是先将外部与内部整合起来，根据html代码从上至下读取，考虑下css优先级：标签<class类<id选择器<内联样式(行内样式)，当然如果样式加入important属性值就又是另外一种情况了。

简单了解css3样式表写法和优先级的更多相关文章

  1. css三种样式表写法

    css三种样式表:1.内嵌样式表: <head>  <style type="text/css">   样式表写法  </style> < ...

  2. 从webkit内核简单看css样式和css规则优先级(权重)

    目录 webkit中样式相关类及类间关系 样式规则匹配 权重(优先级)计算 权重相同时的覆盖原则 webkit中样式相关类及类间关系 资料来源: <webkit技术内幕> 结构相关类: 1 ...

  3. CSS：CSS样式表及选择器优先级总结

    我们在写网页的时候经常会遇到同一个HTML文件,使用了外部样式.内部样式以及内联样式,那么如果发生冲突时浏览器是怎么抉择的呢? 也会遇到这样的情况,在样式表中,对同一个HTML元素,我们有可能既用到了 ...

  4. CSS标签类型和样式表继承与优先级

    标签类型 块级标签 什么是块级标签:在html中<div>. <p>.h1~h6.<form>.<ul> 和 <li>就是块级元素 块级标签 ...

  5. css3-1 css3游戏介绍、css3样式和优先级

    css3-1 css3游戏介绍.css3样式和优先级 一.总结 一句话总结:我们写外部css表的时候可以用class,那样使用的人用id修改的话优先级就比我们高,达到目的. 1.html嵌套css样式 ...

  6. CSS.02 -- 样式表 及标签分类（块、行、行内块元素）、CSS三大特性、背景属性

    样式表书写位置  内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head&g ...

  7. 如何只在IE上加载CSS样式表

    前言:IE一直是特殊的一个浏览器,我们可以使用一些方法来指定样式表只在IE浏览器下被加载. IE9以及低于IE9版本 : 可以使用条件注释语句来加载特定于ie的样式表.如下所示,使用外部css3样式表 ...

  8. Qt样式表的使用

    Qt中可以灵活的使用层叠样式表(CSS),其语法和CSS很相似.因为HTML CSS的灵活性,所以可以很方便的为QT界面设计自己需要的外观.除了子类化Style类,使用QT样式表(QStyleShee ...

  9. CSS中的层叠、特殊性、继承、样式表中的@import

    CSS中的层叠.特殊性.继承.样式表中的@import 层叠 CSS有一个机制是层叠,层叠可以理解为对样式的覆盖,优先性为: 网站开发者的样式表 用户样式(通过设置浏览器的显示选项) 浏览器默认的样式 ...

随机推荐

  1. Excel Application操作指南

    概述 Application对象是Microsoft Office Excel 2007对象模型中最高级别的对象,表示Excel程序自身.Application对象提供正在运行的程序的信息.应用于程序 ...

  2. 夜晚 暴力 十点钟 jQuery 的 extend 实现 原理

    jQuery 的 extend 是怎么实现的 一看代码 喉咙 就不爽 这是 jQuery JavaScript Library v1.6 一看代码 多的 屁股疼 , 排名 前三 的 文章 可以去参考下 ...

  3. 树莓派通过模数转换芯片ADC0832读取LM35温度传感器数据

    树莓派通过模数转换芯片ADC0832读取LM35温度传感器数据 今天和小朋友一起玩树莓派,打算来做一个测量室温的小实验.经过几个小时的研究和测试,终于能够成功读取LM35传感器的温度数据了.本文主要记 ...

  4. Kdenlive-简单的操作

    版权声明:原创文章,未经博主允许不得转载 前章:https://www.cnblogs.com/weilinfox/p/12246123.html 尽管是简单操作,但内容比较多.可以一边自己尝试编辑一 ...

  5. [ Python入门教程 ] Python中日志记录模块logging使用实例

    python中的logging模块用于记录日志.用户可以根据程序实现需要自定义日志输出位置.日志级别以及日志格式. 将日志内容输出到屏幕 一个最简单的logging模块使用样例,直接打印显示日志内容到 ...

  6. 用ES7解决异步回调地狱问题

    用了 Promise 其实并没有真正解决回调地狱问题,并且还新增了很多 .then(data => { .... }) 这些很没有意义的 “模板代码”.所以先人们又搞出了generator 和 ...

  7. 《高性能MySQL》之MySQL查询性能优化

    为什么查询会慢? 响应时间过长.如果把查询看做是一个任务,那么它由一系列子任务组成,每个子任务都会消耗一定的时间.如果要优化查询,实际上优化其子任务,要么消除其中一些子任务,要么减少子任务的执行次数, ...

  8. 搭建本地测试es集群

    需求 在本地搭建es+kibana+elasticsearch-head 搭建环境 mac本地,使用docker+docker-compose 方式搭建 设置docker 内存8G 搭建es和es+h ...

  9. day04_IDEA、方法

    day04_IDEA.方法 1.快捷输入 psvm:public static void main(String[] args){ } sout:System.out.print("&quo ...

  10. zabbix3.4搭建微信报警

    身为小白的我在历经被百度查到的资料坑了无数次之后,终于找到了一个正确的文档,下面是我自己的对于安装过程的理解与阐述. 一.申请微信企业号,获取以下数据. 企业ID:(在我们企业最下方可以看到) 应用的 ...