CSS 基础教程、整理资料、笔记总结
CSS基础学习教程
非常好的文章推荐:http://www.w3cfuns.com/thread-5594274-1-1.html
在学习CSS教程之前,我希望大家先把html基础学好,如果基础不结实的话,在后面也你是不知道我写什么的。所以希望在学习这篇文章之前,如果没有懂html的可以看我之前写的上一篇html文章:http://www.cnblogs.com/yyman001/archive/2012/09/21/xhtml.html
步入正题,什么CSS?所谓CSS就是级联样式表(Cascading Style Sheet)简称“CSS”,通常又称为“风格样式表(Style Sheet)”,它是用来进行网页风格设计的。如果我们的页面不使用CSS,你会感觉到很丑陋,就想是一推纯文本,杂乱不整。同过CSS来美化页面,页面上大部分的元素都可以进行修饰。
如果文章中有某些字体是这样的话,如:测试
是不建议使用,而不是错误的或不存在!
那么关于CSS的语法,很简单
选择器类型{属性名称:属性值;属性名称2:属性值2;}
就是这一种结构,选择器的类型,后面跟上一对大括号{},一定要写完整,不然CSS解析会错误,在书写上,有人会一个属性占一行。这个书写格式迟点再说。
选择器类型
选择符 | 解析 | 例子 | 备注 |
ID选择符 | 唯一的,不可重复 <#sID > |
|
自定义名字前加个井(#),定义一个 |
类选择符 | 可以重复使用 <E1.className> |
|
自定义名字前加一个点(.) 最为常用,也是建议使用的 |
类型选择符 | 可重复 <E1> | a { text-decoration:none; } | 就是用标签元素的名字 |
选择符分组 | <E1,E2,E3> | .td1,div a{ font-size:14px; } | 也是常用的选择符,建议使用 |
包含选择符/后代选择器 | E1 E2 | table td { font-size:14px; } | 无论E2嵌套多深都会执行 |
子对象选择符 | E1 > E2 子对象提供了更精细的控制 | body > p { font-size:14px; } | 为了把E2范围缩小,更精确去找 |
属性选择符 | E1[attr] |
span[class=demo] { color: red; }
|
因为IE6不支持,所以不常用的属性,对于主流游览器是支持的,蛋是也不推荐使用 |
通配选择符 | * |
*{color:#fff}
|
非常不建议使用,会把每个元素都渲染一次, |
为什么不建议使用id选择符,而更推荐使用类选择器?
一、样式都用class而不用id
有三个理由:
1,id不可以重复,所以用class的话,可以肆无忌惮的用无数次。
2,id的优先级太高,若是写了一个#page_content a {color:#f60} ,那你完蛋了,里面要改链接颜色,都必须加上#page_content才能越过这个优先级。
3,id专门留给JS用,这样才符合表现与行为分离的原则。所以id我用驼峰式,也是为了体现这一点。
二、用class_name方式写类名
以前喜欢用class-name写,不过好像两样也没什么差别。但我比较反对用className写类名,因为始终对浏览器大小写敏感的问题抱有怀疑态度。但是id我会写成驼峰式,理由见第一条。
详细:http://www.haogongju.net/art/956386
注意:关于包含选择符和子对象选择符 一些新手可能会出现混乱下面举个列子就会明白它们之间的关系。
<div> <ul> <li>是要修饰我啊,哈哈</li> </ul> <div>
修饰li元素例子:
使用包含选择符
div li{样式} ,还可以这样写 ul li{样式}
解析:所谓包含,只要li是属于某个包含对象的里面,就可以使用这种方法,可以看到,不需要很精准找到 li 元素的 上级元素,可以是包裹在它外面的元素
使用子对象选择符
ul > li {样式}
解析:使用这种子对象选择符,只能是找到 li 元素的 上级元素(父元素),不然不会生效,不可以写成 div > li 这种形式,因为div不是它的父元素,所以不可以。
CSS在html页面应用方式
主要是3种方式:
一、行内样式
在标签中添加css代码,优先级是最高
如:
<span style="color:#fff">使用行内样式把我的文字设置为白色</span>
二、内嵌式
在html页面的head标签之间添加css代码,优先级排第二
如:
<head> ...省略 <style> span{color:#fff;} /*使用内嵌式把span里面的文字变成白色*/ </style> </head>
三、外部样式
独立的css文件写代码,在html引入文件,优先级最低,主要有2种,一种是是用关键之 @import,另一种则是使用 link 来引入css文件
由于@import 引入方式还有它的一些问题,所以很少人会使用,这里也不推荐使用,而是推荐使用 link 方式引入CSS文件
link 引入方式:
<link href="layout.css" rel="stylesheet" type="text/css" />
type:文件类型
href:css文件路径
rel:
CSS样式优先级
所谓优先级,就是谁的等级高,就优先使用谁的,而且低级的样式无法覆盖或修改优先级高设置的样式。
类型 |
优先级 | 备注 |
内联样式
|
1000
|
在页面里是最高,但我们不建议把css样式写在html文件结构中 |
ID选择器
|
100
|
这个也是不推荐使用的,重用性不高,一旦使用,再想修改样式必定要高过这个优先级 |
类,属性,伪类 选择器 |
10 |
推荐使用的 |
元素标签,伪元素 选择器 |
1 |
推荐使用 |
!important(CSS某个属性值) | 最高 | 这个并不属于类型范围,在支持这个属性的游览器上,在属性值后面加上这个,优先执行,比内联样式优先级还要高!用途一般是为了游览器兼容 |
CSS继承
CSS的继承里,子元素继承父元素或祖先元素的样式,但在CSS里,并不是全部属性都支持继承
一、字体
CSS盒子模型(重点)
其实html里面的每个元素都拥有一个盒子模型,在由于IE对盒子模型的理解不一样,所以一些新手在兼容方面就需要理解IE特有的盒子模型,但我们开发的时候,建议是使用遵循了3W标准的游览器作为测试,如:火狐和谷歌
如果认真讲,那只有块级元素才拥有完整的盒子模型,而行内元素则不完全拥有盒子模型(y方向没有外边距和内边距)
一个完整的盒子模型包括:外边距+边框+内边距+内容+内边距+边框+外边距 (x,y方向都有)
详细:http://www.qianduan.net/css-box-model.html
http://blog.csdn.net/xiaoduishenghuogo/article/details/7599586
http://learning.artech.cn/category/css-research/box-model
伪类(9个)
伪元素/伪对象(四个)
after
before
====在CSS2.0中以下2个只限于用于标记或段落的块级元素
first-letter
first-line
CSS学习手册、学习网站
我自己收藏的一些手册:http://pan.baidu.com/share/link?shareid=59316&uk=1207993962
css-javascript书籍:http://pan.baidu.com/share/link?shareid=59318&uk=1207993962
http://www.zhangxinxu.com/http://learning.artech.cn/
标准之路:http://www.aa25.cn/
网站的话,我很难列出,因为太多,我只能上传我的收藏夹分享给大家
一些资料
http://www.haogongju.net/art/1461349
持续更新....有错误请指出!