通过学习CSS3游戏介绍、CSS样式和优先级章节，了解到html5+css3+js不光可以实现动画，其次可以往这个游戏与建模方向发展，更多css3特效访问Gerard Ferrandez on CodePen其次html嵌套css样式分为3种：内联、内部、外部、写法上推荐的是外部，便于代码复用性；样式表的写法是选择器{设置样式}；css中常见的注释为/**/；css的优先级：内联style>id选择器>class选择器>标签；在css中，文本默认字体大小16px，长度单位分为px像素与em倍数；除此之外，颜色写法形式如下：#ffff16进制、yellow英文单词、rgb(216, 17, 173)其中当#ff0000可以简写为#f00,闲话不多扯，直接代码展示：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

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

     <title>学习CSS3游戏介绍、CSS3样式和优先级</title>

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

     <style type="text/css">

     div{

         color: aqua;

     }/*css内部*//*css注释标记*/

     img{

         /* width: 256px;

         height: 256px; */

         border-radius: 256px;

         background-color: #ccc;

     }

     .divcls{

         color: blue;

     }

     #divdid{

         color: brown;

     }

     /* css优先级如何:1.内联style2.id选择器3.class选择器4.标签 */

     </style>

 </head>

 <body>

     <!-- <link rel="stylesheet" href="demo.css"> 新建一个demo.css样式表 外部链接-->

     <!--写在行内的样式是css内联样式-->

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

     <img src="data:images/xs.png" alt="">

 </body>

 </html>

学习了解CSS3发展方向和CSS样式与优先级的更多相关文章

  1. [程序猿入行必备]CSS样式之优先级

    专业玩家请移步:http://www.w3.org/TR/CSS2/cascade.html 使用CSS控制页面样式时,常常出现设定的样式被"覆盖",不能生效的情况. 浏览器是根据 ...

  2. CSS样式的优先级

    1.相同权值情况下,CSS样式的优先级总结来说,就是--就近原则(离被设置元素越近优先级别越高): 内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中). 2.权 ...

  3. css !important用法以及CSS样式使用优先级判断

    之前一直看到很多css中都有!important这个样式,一直不知道有什么作用的,今天在网上详细了解了一下,看了别人的博客,顺便转载收藏一下 css !important用法CSS样式使用优先级判断 ...

  4. Web前端面试指导(十三)：css样式的优先级是怎么样的？

    题目点评 CSS样式的优先级规则给人的感觉总是摸不透,更不用说怎么去表达了,在网络上流传着很多版本,描述的都很复杂也不全面,看了之后还是不满意.我来给大家介绍一个比较系统.全面有比较容易记住的规则吧! ...

  5. html学习第二天—— 第七章——CSS样式基本知识

    外部式css样式,写在单独的一个文件中外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<s ...

  6. CSS样式之优先级

    说到到css的样式优先级,今天偶再来回顾下,从css的样式优先级可分为两个部分: 1.从CSS代码放置的位置看权重优先级:     内联样式 > 内部嵌入样式 >外联样式 2.从样式选择器 ...

  7. CSS样式选择器优先级

    CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...

  8. CSS 样式的优先级

    1. 同一元素引用了多个样式时,排在后面的样式属性的优先级高 例如,下面的 div,同时引用了 [.default] 和 [.user] 中的样式,其中 [.user] 样式中的 width 属性会替 ...

  9. CSS样式表优先级

    使用CSS样式表一共有2种方式:内部和外部,其中内部分为行内样式和嵌入式,外部分为导入式和链接式. 如果需要在不同的方式中设定同一个属性的时候,样式的优先级别就出现了. 测试代码如下: red.css ...

随机推荐

  1. java小心机(3)| 浅析finalize()

    每天进步一丢丢,连接梦与想 如果你停止就是谷底,如果你还在努力就是上坡 系列文章 java"小心机"(1)[资源彩蛋!] java小心机(2)| 重载和构造器的小细节 预备知识 J ...

  2. 文件上传二：FormData上传

    介绍三种上传方式: 文件上传一:伪刷新上传 文件上传二:FormData上传 文件上传三:base64编码上传 Flash的方式也玩过,现在不推荐用了. 真正的异步上传,FormData的更多操作,请 ...

  3. HttpClient介绍和使用

    HttpClient介绍和使用 今天有一个需求:后台访问一个接口,获取返回的数据.于是找到了HttpClient 1.介绍 SpringCloud中服务和服务之间的调用全部是使用HttpClient, ...

  4. Windows10 企业版激活

    今天同大家分享一个Windows自带的激活方法(注:适用于win10 企业版 2019长期服务版,其他版本自行测试) 1.首先确保电脑网络通畅(不需要梯子) 2.以管理员方式运行cmd输入: slmg ...

  5. 关于 JavaSrcipt 前端开发的建议：模块化开发

    JavaScript 是一种优秀的脚本语言. 在 JavaScript 的诞生之初,便于 浏览器 密不可分,如今它更是到了服务器中大展身手. 但是这里不叙述服务端的开发建议. Script 翻译过来就 ...

  6. TLS使用指南（一）：如何在Rancher 2.x中进行TLS termination？

    引 言 这是一个系列文章,我们将在本系列中探索Rancher使用TLS证书的不同方式.TLS,安全传输层协议,是用于保护网络通信的加密协议.它是目前已经弃用的安全套接层(SSL)的继任者. 你可以从本 ...

  7. 使用npm发布、查看、引用、删除自己的包[小白推荐]

    前言  怎么使用npm发布自己的组件包呢?博主看了不少相关的文章,都没有一个好的讲述.要么丢三落四,要么就是复杂到外行人根本看不懂,甚至无从下手.于是,在博主的潜心钻研下,终于成功了!所以,我打算写一 ...

  8. GAN tensorflow 实作

    从2014年Ian Goodfellow提出GANs(Generative adversarial networks)以来,GANs可以说是目前深度学习领域最为热门的研究内容之一,这种可以人工生成数据 ...

  9. The 2019 University of Jordan Collegiate Programming Contest

    链接:https://codeforc.es/gym/102267 A. Picky Eater 直接比较 int main(){ int x ,y; scanf("%d %d" ...

  10. 用反射、泛型 改造SqlHelper

    1.  数据准备 public class BaseModel { public int Id { set; get; } } public class Company : BaseModel { p ...