当前位置:首页 > Web开发 > 正文

原因是因为外部内部内联

2024-03-31 Web开发

css3和css有什么区别?首先css33是css(层叠样式表)技术的升级版本,而css是一种用来表示HTML(标准通用符号语言的一个应用)或XML(标准通用符号语言的一个子集)等文件样式的计算机语言。然后是内容上css3主要包孕盒子模型、列表模块、超链接方法、语言模块、配景和边框、文字特效、多栏构造等模块。而css不只可以静态地修饰网页,还可以共同各类脚本语言动态地对网页各元素进行格局化。最后在特点上css3新特征有很多,例如圆角效果、图形化界限、块暗影与文字暗影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多配景图、文字或图像的变形措置惩罚惩罚(旋转、缩放、倾斜、移动)、多栏构造、媒体盘问等。css主要能够对网页中元素位置的排版进行像素级精确控制,撑持几乎所有的字体字号样式,拥有对网页东西和模型样式编纂的能力。(更多详情参考下百度官方给出的介绍:css css3)

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

1.html嵌套样式包罗内部、外部、内联,通过代码的可复用性,比对最后得出:不建议使用内联样式,内部样式其次,外部样式保举使用,比喻说下面这个最后展示功效字体的颜色是#f90,原因是因为外部<内部<内联,这个是单行的样式,如果页面样式数量过多,超过必然数值,还是建议将这个css的样式与代码相疏散,最后通过link链接,具体代码展示如下:

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta content="width=device-width, initial-scale=1.0"> 6 <title>简单了解css3样式设计和优先级</title> 7 <style type="text/css"> 8 div{ 9 color: rebeccapurple; 10 } 11 div.box{ 12 color: saddlebrown; 13 } 14 #box{ 15 color: blue; 16 /* color: blue!important; */ /*添加的important属性最后读取*/ 17 } 18 /*有意思的一点是当这个图片的宽高一致时,border-radius:50%的圆形属性和这个img2的图片直径500px一致*/ 19 .box1>img{ 20 border-radius: 50%; 21 }/*img尺寸1000x956px*/ 22 .box2>img{ 23 border-radius: 500px; 24 }/*img2尺寸500x500px*/ 25 </style> 26 <link href="http://www.mamicode.com/demo1.css"> 27 </head> 28 <body> 29 <div> 30 html嵌套样式包罗内部、外部、内联,通过代码的可复用性,比对最后得出:不建议使用内联样式,内部样式其次,,外部样式保举使用,代码展示如下: 31 </div><!--内联样式--> 32 <!-- 新建一个css样式表通过link链接控制这个页面的样式 --><!--外部样式--> 33 <p><img src="http://www.mamicode.com/images/timg.jpg" ></p> 34 <p><img src="http://www.mamicode.com/images/timg2.jpg" ></p> 35 </body> 36 </html>

小我私家看法是先将外部与内部整合起来,按照html代码从上至下读取,考虑下css优先级:标签<class类<id选择器<内联样式(行内样式),固然如果样式插手important属性值就又是此外一种情况了。

简单了解css3样式表写法和优先级

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/29913.html