简单了解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链接，具体代码展示如下：
<!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样式表写法和优先级的更多相关文章
- css三种样式表写法
css三种样式表:1.内嵌样式表: <head> <style type="text/css"> 样式表写法 </style> < ...
- 从webkit内核简单看css样式和css规则优先级(权重)
目录 webkit中样式相关类及类间关系 样式规则匹配 权重(优先级)计算 权重相同时的覆盖原则 webkit中样式相关类及类间关系 资料来源: <webkit技术内幕> 结构相关类: 1 ...
- CSS：CSS样式表及选择器优先级总结
我们在写网页的时候经常会遇到同一个HTML文件,使用了外部样式.内部样式以及内联样式,那么如果发生冲突时浏览器是怎么抉择的呢? 也会遇到这样的情况,在样式表中,对同一个HTML元素,我们有可能既用到了 ...
- CSS标签类型和样式表继承与优先级
标签类型 块级标签 什么是块级标签:在html中<div>. <p>.h1~h6.<form>.<ul> 和 <li>就是块级元素 块级标签 ...
- css3-1 css3游戏介绍、css3样式和优先级
css3-1 css3游戏介绍.css3样式和优先级 一.总结 一句话总结:我们写外部css表的时候可以用class,那样使用的人用id修改的话优先级就比我们高,达到目的. 1.html嵌套css样式 ...
- CSS.02 -- 样式表 及标签分类（块、行、行内块元素）、CSS三大特性、背景属性
样式表书写位置 内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head&g ...
- 如何只在IE上加载CSS样式表
前言:IE一直是特殊的一个浏览器,我们可以使用一些方法来指定样式表只在IE浏览器下被加载. IE9以及低于IE9版本 : 可以使用条件注释语句来加载特定于ie的样式表.如下所示,使用外部css3样式表 ...
- Qt样式表的使用
Qt中可以灵活的使用层叠样式表(CSS),其语法和CSS很相似.因为HTML CSS的灵活性,所以可以很方便的为QT界面设计自己需要的外观.除了子类化Style类,使用QT样式表(QStyleShee ...
- CSS中的层叠、特殊性、继承、样式表中的@import
CSS中的层叠.特殊性.继承.样式表中的@import 层叠 CSS有一个机制是层叠,层叠可以理解为对样式的覆盖,优先性为: 网站开发者的样式表 用户样式(通过设置浏览器的显示选项) 浏览器默认的样式 ...
随机推荐
- tensorflow框架
一.tensorflow的工作流程,实际上它体现出来的是一个”懒性“方法论 (1)构建一个计算图. (2)初始化变量 (3)创建一个会话 (4)在会话中运行图的计算 (5)关闭会话 二.神经网络搭建八 ...
- HCNA网络技术学习指南
网络通信基础 网络与通信 OSI模型和TCP/IP模型 网络类型 传输介质及通信方式 2 VRP基础 VRP简介 VRP命令行 登录设备 基本配置 配置文件管理 通过Telnet登录设备 文件管理 基 ...
- 超越队西柚考勤系统——beta冲刺1
这个作业属于哪个课程 http://edu.cnblogs.com/campus/xnsy/GeographicInformationScience 这个作业的要求在哪里 https://www.cn ...
- .Net Core建站（1）：EF Core+CodeFirst数据库生成
emmm,本来想着用Core做一个小项目玩玩的,然后肯定是要用到数据库的, 然后想,啊,要不用CodeFirst,感觉很腻害的样子,于是,一脸天真无邪的我就踏入了一个深不见底的天坑... 本来想着,应 ...
- ios---图片缩放
1.设置scrollview的代理 2.实现如下方法 -(UIView )viewForZoomingInScrollView:(UIScrollView )scrollView{ return se ...
- flask插件全家桶集成学习---持续更新ing
不得不说flask的设计要比django要小巧精妙的多了,没有那么臃肿,只保留核心功能,其他的都需要自己引入,即各种各样的插件来满足我们的需求,我这里记录一下自己学习项目中用的插件使用方法和一些技巧总 ...
- js中函数this的指向
this 在面试中,js指向也常常被问到,在开发过程中也是一个需要注意的问题,严格模式下的this指向undefined,这里就不讨论. 普通函数 记住一句话哪个对象调用函数,该函数的this就指向该 ...
- c++中值传递，址传递，引用传递
概念详解 1. 值传递: 形参是实参的拷贝,改变形参的值并不会影响外部实参的值. 从被调用函数的角度来说,值传递是单向的(实参->形参),参数的值只能传入,不能传出: 当函数内部需要修改参数,并 ...
- 《 Java 编程思想》CH02 一切都是对象
用引用操纵对象 尽管Java中一切都看作为对象,但是操纵的标识符实际上对象的一个"引用". String s; // 这里只是创建了一个引用,而不是一个对象 String s = ...
- C语言宏的神奇写法：语句块作为参数，算半个函数式编程？
我想要写几个循环做测试代码,每次都写 `for(size_t i = 0; i < n; i++)` 很烦人,然后就灵机一动,能不能用宏实现,然后就写出了: #define repeat(n, ...