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

发布时间:2020-11-19 发布网站:脚本之家
前端之家收集整理的这篇文章主要介绍了简单了解css3样式表写法和优先级前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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链接,具体代码展示如下:

 1 <!DOCTYPE html>
 2 <html lang="en" 3 head 4     meta charset="UTF-8" 5     name="viewport" content="width=device-width,initial-scale=1.0" 6     title>简单了解css3样式设计和优先级</ 7     style type="text/css" 8     div{
 9         color: rebeccapurple;
10     }
11     div.box12  saddlebrown13     14     #box15  blue16         /* color: blue!important; */ 添加的important属性最后读取*/
17     18     有意思的一点是当这个图片的宽高一致时,border-radius:50%的圆形属性和这个img2的图片直径500px一致19     .box1>img20        border-radius 50%21     }img尺寸1000x956px22     .box2>img23         border-radius 500px24     img2尺寸500x500px25     style26     link rel="stylesheet" href="demo1.css"27 28 body29     div class="box" id style="font-size: 24px;font-weight: bold;color: #f90;"30     html嵌套样式包含内部、外部、内联,通过代码的可复用性,比对最后得出:不建议使用内联样式,内部样式其次,外部样式推荐使用,代码展示如下:
31     div><!--内联样式-->
32      新建一个css样式表通过link链接控制这个页面的样式 --><!--外部样式33     p ="box1"><img src="images/timg.jpg" alt=""></p34     ="box2"="images/timg2.jpg"35 36 html>

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

总结


以上是前端之家为你收集整理的简单了解css3样式表写法和优先级全部内容,希望文章能够帮你解决简单了解css3样式表写法和优先级所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。