1. 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;

}

  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;

}

  1. float 的应用

float属性定义元素在哪个方向浮动。

Left 左浮动；

Right 右浮动；

None 默认，不浮动；

Inherit 继承父元素float属性。

浮动属性是把元素变成一个块级元素，通过边距可以控制它的位置。

  1. position 属性应用

relative 定义父级元素.

Absolute 定义子级元素。

Fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

Relative 生成相对定位的元素，相对于其正常位置进行定位。

Static 默认值。没有定位，元素出现在正常的流中

该属性可以让元素不按正常的流式布局进行排列，可以通过left ，top，right，bottom进行位置定位，通过z-index设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。可以使用负值，但是只能在定位元素中使用。

  1. 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 应用一的更多相关文章

  1. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

  3. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  4. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

  5. 理解CSS外边距margin

    前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...

  6. 理解CSS视觉格式化

    前面的话   CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...

  7. 谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  8. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章：利用模型类创建视图、控制器和数据库

    在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...

  9. 谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  10. 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

随机推荐

  1. 当fixed元素相互嵌套时chrome下父元素会影响子元素的层叠关系

    问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. demo(http://jsbin.com/qumah/1): <!DOCTYPE ...

  2. DbUtility-查询DataTable

    直接上源码 using System; using System.Data; using System.Threading.Tasks; using DbUtility; namespace Test ...

  3. nosql newsql

    http://www.cnblogs.com/end/archive/2011/10/19/2217244.html http://www.csdn.net/article/2011-09-26/30 ...

  4. WIN7笔记本显示连接不可用

    如图所示,找不到任何无线网络 解决方法: 不小心把无线关掉而已,笔记本键盘上F5~F12找看看有没有无线标志,有的话要先按下 Fn键不放,再按下那个有无线标志的Fn键.

  5. 九度oj 1482：玛雅人的密码

    题意:输入一个长度为n(2<=n<=13)的字符串(所有字符为'0','1'或'2'),通过交换相邻的两个字符,至少要交换多少次才能处出现字串"2012",输出这个值, ...

  6. [LeetCode] 45. Jump Game II 解题思路

    Given an array of non-negative integers, you are initially positioned at the first index of the arra ...

  7. POJ(2784)Buy or Build

    Buy or Build Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 1369   Accepted: 542 Descr ...

  8. socket中select的使用源码

    下面的代码来自IBM学习网站,是学习socket通信和select使用的一个很好的源码. server.c  服务器端 #include <stdio.h> #include <st ...

  9. OI生涯中三届NOIP（2012-2014）流水账

    NOIP2012: 才摸了三四个月OI就上阵当炮灰,果然一下就被轰得渣都不剩了. D1看到T1这道模拟水题时很激动,立马就把它A了.然后T2就不会了,果断写了个阶乘的暴力,根本没有想过什么排序贪心.T ...

  10. Java中的自动装箱与拆箱

    自动装箱和拆箱从Java 1.5开始引入,目的是将原始类型值转自动地转换成对应的对象.自动装箱与拆箱的机制可以让我们在Java的变量赋值或者是方法调用等情况下使用原始类型或者对象类型更加简单直接. 如 ...