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. Swift—默认构造函数-备

    结构体和类的实例在构造过程中会调用一种特殊的init方法,称为构造函数.构造函数没有返回值,可以重载.在多个构造函数重载的情况下,运行环境可以根据它的外部参数名或参数列表调用合适的构造函数.默认构造函 ...

  2. 一次awk脚本的重构

    # 脚本功能说明: # . 检查URL中的域名是否是指定版本的域名 # . 对访问bid,authorid的游客身份排重,并累加其pv # 全局变量说明 # DOMIAN_LIST 是数组,key是要 ...

  3. 实用C51编程的高级技巧(C51编程)

    一.C51热启动代码的编制 void main() { char data *HotPoint=(char *)0x7f; if((*HotPoint==0xaa)&&(*(--Hot ...

  4. /usr/lib64/python2.6/site-packages/pycurl.so: undefined symbol: CRYPTO_set_locking_callback

    [root@frontend01 yum.repos.d]# cd /etc/yum.repos.d;wget http://rpms.adiscon.com/v8-stable/rsyslog.re ...

  5. Linux系统编程(32)—— socket编程之TCP服务器与客户端

    TCP协议的客户端/服务器程序的一般流程 服务器调用socket().bind().listen()完成初始化后,调用accept()阻塞等待,处于监听端口的状态,客户端调用socket()初始化后, ...

  6. EA强大的画图工具---设计数据库表格

    http://blog.csdn.net/senior_lee/article/details/30272169?utm_source=tuicool 关于EA这个优秀的软件是从师哥哪里听来的,自己瞎 ...

  7. HDU_2039——判断三条边是否能组成三角形

    Problem Description 给定三条边,请你判断一下能不能组成一个三角形.   Input 输入数据第一行包含一个数M,接下有M行,每行一个实例,包含三个正数A,B,C.其中A,B,C & ...

  8. 型牌男装施春蕾:分拆让马云对淘宝定位更清晰--互联网 -- CCTIME飞象网

    型牌男装施春蕾:分拆让马云对淘宝定位更清晰--互联网 -- CCTIME飞象网 型牌男装施春蕾:分拆让马云对淘宝定位更清晰          2011年6月17日 13:16  CCTIME飞象网   ...

  9. Bonobos | IT桔子

    Trumaker | IT桔子 Trumaker trumaker.com

  10. IOS设计模式学习(19)策略

    1 前言 面向对象软件设计中,我们可以把相关算法分离为不同的类,成为策略.与这种做法有关的一种设计模式成为策略模式. 2 详述 2.1 简述 策略模式中得一个关键角色是策略类,它为所有支持的或相关的算 ...