HTML-4-css
0301 css
网页设计者曾经对控制 网页元素非常苦恼
CSS诞生了
代码重用了
不要记什么,了解一下,然后IDE给你记忆
用VS,鼠标放 body 里
然后到 属性 窗口
点style ...
就可以看见'样式生成器'了
自动提示也不错哦
设置CSS的几个方法
★1
inline styles[内联样式表]
就是直接设置 元素的 style 属性
最新标准说,如果要这样设置,最好在
head里加
<meta http-equiv="Content-Style-Type"
content="text/css"/>
因为text/xsl也可以 修饰 XML了
inline styles这个缺点就是 输出什么屏幕 打印机
乱七八糟的时候,没有办法把CSS去掉,写死了!
写到其他地方么可以用
media [指定此网页输出到什么 煤体上 才用你的资源]
计算机屏幕
打印机
screen[默认] print projection aural braille[xiazi] tty tv all
过滤一下!!!!
★2
[潜入样式表][缺点就是没有办法用到整个网站,不是单张网页]
现在来了,可以解决上面的不足了
<head>
<style type="text/css" media="screen,projection">
<!--
P {....}
-->
</style>
说明:这里的样式只有此文档输出到screen,projection才有用
注释是怕老的 IE,把你写的样式 统统 输出来,呵呵
但是它看得懂注释,呵呵,
JS也是同样道理
CSS基本规则:
selector {property:value;property:value;.....}
如果某个属性有多个值 有空格 隔开
有三种选择器:
1.html tag
2. class
3. id
★3
[外部样式表]*.css
<html>
<head>
<link rel="stylesheet" href="tt.css" type="text/css" media="screen">
</head>
<body>
<p>ddd</p>
</body>
</html>
★4
[输入样式表]
@import
把一个CSS 输入到 另一个CSS
也可以把CSS输入到<style></style>里
e.g.
<style type="text/css" media="screen,projection">
<!--
@import url(http://www.ss.com/style.css);
@import url(/fold/styl.css);
p{xxx:yyy;xx....}
-->
</style>
注意:@import 必在前
还可以自己定义
自己定义可以覆盖 import
===========================
0302 css
CSS设置
1
HTML selector
P {....} 这个就不多说了
---------------------------------
2
class selector [class的名字要根据 功能来起]
这个呢?要换一下概念了
class是类,
第一层意思是:某个 标签 的类[这个是初衷]
第二层意思是:同属一个类的 标签[这个是先入我脑的记忆]
文字上肯定理解不了,看个例子:
<p >text here</span>
<style>
<!--
#yellowone { color:yellow;}
-->
</style>
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;}
逗号隔开!!
★伪元素选择器
这个是对同一个元素的各种状态和其所包含的部分内容的一种定义方式.
如:对于<a></a>的各种状态
对于段落首字母 和 首行
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!
应该用的!
=============
