Css 应用一
- Placeholder使用
CSS3里有相应的通用的对Placeholder提示信息美化的方法。你可以设置提示信息文字的颜色，透明度，背景色等。
为了最大化的兼容所有浏览器，给CSS里的placeholder属性添加浏览器引擎前缀还是有必要的。
示例：修改文字颜色。
/* WebKit browsers */
::-webkit-input-placeholder {
color: #fff;
opacity: 1;
}
/* Mozilla Firefox 4 to 18 */
:-moz-placeholder {
color: #fff;
opacity: 1;
}
/* Mozilla Firefox 19+ */
::-moz-placeholder {
color: #fff;
opacity: 1;
}
/* Internet Explorer 10+ */
:-ms-input-placeholder {
color: #fff;
opacity: 1;
}
- background 背景设置
background-image 设置背景图片；
background-repeat 设置背景图片平铺顺序；
background-position 定位背景图片；
background-size 设置背景图片的大小；
background-color 设置背景的颜色。
背景可以连写，也可以分开写。
如：
{ background:url(路径) no-repeat/repeat-x/repet-y 20px 20px;}或
{
Background-image: url(路径);
Background-repeat: no-repeat/repeat-x/repet-y;
Background-position: 20px 2px;
Backgjround-size: 20px 20px;
}
- float 的应用
float属性定义元素在哪个方向浮动。
Left 左浮动；
Right 右浮动；
None 默认，不浮动；
Inherit 继承父元素float属性。
浮动属性是把元素变成一个块级元素，通过边距可以控制它的位置。
- position 属性应用
relative 定义父级元素.
Absolute 定义子级元素。
Fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
Relative 生成相对定位的元素，相对于其正常位置进行定位。
Static 默认值。没有定位，元素出现在正常的流中
该属性可以让元素不按正常的流式布局进行排列，可以通过left ，top，right，bottom进行位置定位，通过z-index设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。可以使用负值，但是只能在定位元素中使用。
- css样式的优先级顺序
css样式的调用分为：内部样式，外部样式，内联样式；
内联样式的级别最高>内部样式>外部样式。
Css样式选择器的优先级：
内联样式表的权值最高 1000；
ID 选择器的权值为 100
Class 类选择器的权值为 10
HTML 标签选择器的权值为 1
CSS 优先级法则
选择器都有一个权值，权值越大越优先；
当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
继承的CSS 样式不如后来指定的CSS 样式；
<body>
<div id=”span”>
<p class=”spanCon”>
<span>123</span>
</p>
</div>
</body>
上面例子我们来定义123的字体颜色；
A <span style=”color:#000”>123</span> 此时颜色为#000，且级别最高。
B .spanCon span{ Color:#000;}
C #span .spanCon span{ Color:#000;}
D span{Color:#000;}
顺序为A > B > C > D 。
使用脚本添加样式
IE 浏览器下载或者渲染的顺序可能如下：
IE 下载的顺序是从上到下；
JavaScript 函数的执行会阻塞IE 的下载；
IE 渲染的顺序也是从上到下；
IE 的下载和渲染是同时进行的；
在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（但并不是说所有相关联的元素都已经下载完。）
在下载过程中，如果遇到某一标签是嵌入文件，并且文件是具有语义解释性的（例如：JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。并且在下载后进行解析，如果JS、CSS中如有重定义，后面定义的函数将覆盖前面定义的函数。
解析过程中，停止页面所有往下元素的下载。样式表文件比较特殊，在其下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行样式渲染。并以此方式一直渲染下去，直到整个页面渲染完成。
Firefox 处理下载和渲染的顺序大体相同，只是在细微之处有些差别，例如：iframe 的渲染。
Css 应用一的更多相关文章
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- CSS的未来
仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- 前端css兼容性与易混淆的点
一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...
- 理解CSS外边距margin
前面的话 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...
- 理解CSS视觉格式化
前面的话 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...
- 谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章：利用模型类创建视图、控制器和数据库
在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...
- 谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
随机推荐
- 找不到请求的 .Net Framework Data Provider。可能没有安装。
解决方法: 安装Microsoft SQL Server Compact 4.0. 安装Microsoft SQL Server Compact 4.0之后,程序运行正常. 问题的原因就是程序连接.s ...
- The initialize list of C++ Class
性能问题之外,有些时场合初始化列表是不可或缺的,以下几种情况时必须使用初始化列表 常量成员,因为常量只能初始化不能赋值,所以必须放在初始化列表里面 Error1(constchar* constmsg ...
- Hive是什么！
Hive是什么! 一直想抽个时间整理下最近的所学,断断续续接触hive也有半个多月了,大体上了解了很多Hive相关的知识.那么,一般对陌生事物的认知都会经历下面几个阶段: 为什么会出现?解决了什么问题 ...
- spark Association failed with [akka.tcp:sparkMaster@ip:7077]
今搭建spark集群, conf/spark-env.sh 配制如下 export SPARK_MASTER_IP=masterexport SPARK_MASTER_PORT=7077export ...
- 基于 USB 传输的针式打印机驱动程序开发
1．引言 针式打印机曾经在相当长的一段时间占据打印机市场的主导地位,但是近年来由于喷墨.激光等非击打式打印机的冲击,针式打印机的市场份额逐年下降.即便如此,由于针式打印机在票据打印领域的不可取代性,同 ...
- 【HDOJ】4544 湫湫系列故事——消灭兔子
贪心,普通贪心两层循环TLE了,然后用优先级队列维护内层. #include <iostream> #include <cstdio> #include <cstring ...
- 关于NAT穿透的一些理解
前些天在知乎回答了一个智能家居远程控制方面的问题,感觉自己对无公网IP地址环境下的穿透问题有些了解.昨天同事拿来一个网络摄像头,安装在ADSL路由器上网的环境下,可以远程查看视频,效果还挺不错,问我厂 ...
- my dup2
#include <fcntl.h>#include <stdio.h>#include <unistd.h> int mydup(int i_OldFd, int ...
- POJ3294--Life Forms 后缀数组+二分答案 大于k个字符串的最长公共子串
Life Forms Time Limit: 500 ...
- HTML5迷你游戏作验证码
验证码最常见的是各种变形的字符,因为识别程序进化得越来越聪明,验证码也变得越来越难以识别,给用户造成了很多的麻烦和反感. 已经有很多人尝试过各种改进的验证码,比如动画的验证码,做题目的验证码,要回答问 ...