css.1

1.认识css
1.1什么是css?
css(cascading style sheets ) 层叠样式表
css3是css2的升级版本,3只是版本号,他在css2,1的基础上增加了很多强大的新
功能。目前主流浏览器chrome ,safari,firefox,opera,甚至360都已经支持了css3
大部分功能了,IE10以后也开始支持css3了。
不同浏览器可能需要不同的前缀。它表示该css属性或规则尚未成为W3C标准的一部
分,是浏览器的私有属性,虽然目前比较新的浏览器都是不需要前缀的,但是为了
更好的向前兼容前缀还是小不了的。
前缀 浏览器
-webkit chrome和safari
-moz firefox
-ms IE
-o opera

1.2css能做什么
1.css把很多以前需要使用图片和脚本来实现的效果,甚至动画效果,只需要
短短几行代码就能搞定。比如圆角,图片边框,文字阴影和盒子阴影,过渡,
动画等。
2.css简化了前端开发工作人员的设计过程,更灵活的页面布局,更快的页面
加载速度。
3.可以将站点上所有的网页风格都使用一个css文件进行控制,只要修改这
个css文件中相应的代码,那么整个站点的所有页面都会随之发生变动。
4.css可以支持多种设备,比如手机,pda,打印机,电视机,游戏机短。
5.目的:将表现与结构分离。

1.3css语法结构
css语法由三部分构成:选择符,属性和值
属性(property)是你希望设置的样式属性(style attribute).每个
属性有一个值。属性和值被冒号分开。
Selector{ Property:Value}
选择符 属性 值
列入<style type="text/css">
body{background-color:#cccccc}
</style>
1.4如何引入css
三种引入方式
1.行内引用
行内引用是指将css样式编码直接写在HTML标签的style属性里。
注意这种方式在引入css,是不需要写选择器的。
列:
<body style="background-color:#ccc">
<h1 style="font-size:12px;color:#ccc;">liu wen wu</h1>
2.页内引用
页内引用做为页面中的一个单独部分,由<style></style>标签定位在
<head></head>之中。
列:<head>
<style type="text/css>
body{background-color:#ccc;}
</style>
</head>
3.外部样式表
外部样式表是css应用中最好的一种形式,它将css样式代码单独
放在一个外部文件中,再由网页进行调用。
style.css:
body{background-color:#cccccc;}
index.html
<head>
<link rel="stylesheet" type="text/css href="style.css"/>
</head>
三中引入方式的优先级对比
优先级依次是:就近原则
行内应用》页内应用>页外应用
二。深入了解css
我们将从三个方面去学习

1,强大的选择符 2.丰富的样式属性 3.布局和浏览器的渲染原理
css的选择符可以分成:
通配,元素,群组,关系,ID及class,伪类(部分扩展学习),属性(扩展学习),伪对象(扩展学习)。
1.通配选择符*
*号表示所有的对象
所谓通配选择符,就是指可以使用模糊指定的方式来对对象进行选择,指定的样式。
列: *{cloror:blue;margin:0;padding:0:}
2.元素选择符
所谓元素选择符,指以网页中已有的标签名作为名称的选择符。
body{} span{} p{}
3.群组选择符
除了可以对单个标签进行指定外,还可以对一组标签进行相同的样式定义。
a,b,li,h1{font-size:12px;font-family:arial;}

posted @ 2016-08-09 10:41  刘文武  阅读(102)  评论(0编辑  收藏  举报