HTML-4-css

HTML-4-css
2011年08月01日
　　 0301 css
　　网页设计者曾经对控制 网页元素非常苦恼
　　CSS诞生了
　　代码重用了
　　不要记什么,了解一下,然后IDE给你记忆
　　用VS,鼠标放 body 里
　　然后到 属性 窗口
　　点style ...
　　就可以看见'样式生成器'了
　　自动提示也不错哦
　　设置CSS的几个方法
　　★1
　　inline styles[内联样式表]
　　就是直接设置 元素的 style 属性
　　最新标准说,如果要这样设置,最好在
　　head里加
　　
　　因为text/xsl也可以 修饰 XML了
　　inline styles这个缺点就是 输出什么屏幕 打印机
　　乱七八糟的时候,没有办法把CSS去掉,写死了!
　　写到其他地方么可以用
　　media [指定此网页输出到什么 煤体上 才用你的资源]
　　计算机屏幕
　　打印机
　　screen[默认] print projection aural braille[xiazi] tty tv all
　　过滤一下!!!!
　　★2
　　[潜入样式表][缺点就是没有办法用到整个网站,不是单张网页]
　　现在来了,可以解决上面的不足了
　　
　　
　　
　　
　　说明:这里的样式只有此文档输出到screen,projection才有用
　　注释是怕老的 IE,把你写的样式 统统 输出来,呵呵
　　但是它看得懂注释,呵呵,
　　JS也是同样道理
　　CSS基本规则:
　　selector {property:value;property:value;.....}
　　如果某个属性有多个值 有空格 隔开
　　有三种选择器:
　　1.html tag
　　2. class
　　3. id
　　★3
　　[外部样式表]*.css
　　
　　
　　
　　
　　
　　ddd
　　
　　
　　★4
　　[输入样式表]
　　@import
　　把一个CSS 输入到 另一个CSS
　　也可以把CSS输入到里
　　e.g.
　　
　　
　　
　　注意:@import 必在前
　　还可以自己定义
　　自己定义可以覆盖 import
　　===========================
　　0302 css
　　CSS设置
　　1
　　HTML selector
　　P {....} 这个就不多说了
　　---------------------------------
　　2
　　class selector [class的名字要根据 功能来起]
　　这个呢?要换一下概念了
　　class是类,
　　第一层意思是:某个 标签 的类[这个是初衷]
　　第二层意思是:同属一个类的 标签[这个是先入我脑的记忆]
　　文字上肯定理解不了,看个例子:
　　paragraph1
　　paragraph2
　　paragraph3
　　这就是一个标签 的三个类
　　
　　p.stop {color:red;}
　　p.warning {color:yellow;}
　　p.normal {color:green;}
　　
　　第二层意思
　　
　　.blueone {color:blue;}
　　
　　xxxx
　　xxxx
　　-----------------------------------
　　3
　　ID selector
　　class是说一类,这个呢?是说某一特点的元素
　　用的不是很多,但是也有人非常喜欢用
　　ID在IT里都是指唯一的
　　例如:
　　text here
　　
　　
　　
　　ID 选择器的经验:
　　只能为单个HTML标签元素设置样式规则,
　　因此有一定的局限性,在CSS里应该少用.
　　但是,JS和CSS-P[主要用里定位的]可以根据
　　ID来操纵和定位这个HTML元素,所以,
　　ID属性在JS里会广泛使用
　　什么时候用ID,什么时候用内联 样式呢??
　　---------------------------------------------
　　最主要的就是上面三类
　　还有三类不常用，了解一下好了
　　★关联选择器
　　看那个 类选择器的第一层意思!
　　对应的 第二层叫 独立选择器!
　　这个还有情况:
　　p em {color:red;}
　　[ p em ] 就是关联选择器
　　就是说,出现在 p 里的em 会红色显示,其他地方em就不知道了
　　这个的优先权比单一选择器高![这话看不懂正常,看例子]
　　假如已经有上面的定义
　　再定义了
　　em {color:yellow;}
　　这个没有上面的厉害,出现在 p 里的em 会红色显示,其他地方em就应该是黄色的了
　　★组合选择器
　　这个非常简单
　　减少重复声明而已
　　h1,h2,h3,h4,h5,h6,td {color:red;}
　　逗号隔开!!
　　★伪元素选择器
　　这个是对同一个元素的各种状态和其所包含的部分内容的一种定义方式.
　　如:对于的各种状态
　　对于段落首字母和 首行
　　HTML元素:伪元素{属性:值}
　　a:active [点饥]
　　a:hover [移上去]
　　a:link [正常状态]
　　a:visited [点过的状态]
　　p:first-line
　　p:first-letter
　　first-line
　　first-letter
　　这两个可以用在 任何 块级元素上!!
　　最后:
　　类选择器和 伪元素 一起使用的格式
　　HTML元素.类名:伪元素 {属性:值}
　　这个应该可以理解吧!!!
　　=========================
　　0303 css
　　注释 有效范围
　　注释就一种 /**/
　　看看范围
　　所有潜逃的某个HTML标签的HTML标签都会继承外
　　层标签设置的样式规则
　　样式规则的优先级
　　1就近原则!
　　2 ID选择器 > CLASS选择器 > HTML选择器
　　3 内联样式表 > 潜入样式表 > 外部样式表
　　=======================
　　0303 css
　　CSS样式分类
　　1
　　字体
　　2
　　背景
　　3
　　文本
　　4
　　位置
　　这个就是CSS-P
　　position: absolute relative static
　　left
　　top
　　width
　　height
　　z-index 值大在上
　　5
　　布局
　　6
　　边缘
　　7
　　列表
　　8
　　其他
　　太多了,没有人可以记得的,还是在电脑上安装VS吧!
　　里面有个样式生成器的
　　=======================
　　0304 css
　　CSS filter
　　太多了,没有必要去记得，
　　MSDN
　　search filter
　　还有演示呢!
　　也可以去弄个 chm文件看看!
　　没有必要去记得!
　　在MSDN里,有个'同步内容'的按牛,很好!
　　可是我的2005里找不到!!
　　我崇拜的一个IT界的老师张肖像说了这样一句话:
　　苦干不如巧干,最聪明的人,是最会用工具的人,
　　我要补充说,最聪明的人,是自己发明工具,自己用的人!
　　也要会 获取 优秀网页的CSS和JS!
　　应该用的!
　　=============