CSS第一天

来源：互联网发布：80c51单片机引脚图编辑：程序博客网时间：2024/06/05 03:02

撰稿人——负责内容(Content)

排版人——负责表现(Presentation)

内容是抽象的，必须以某种样式来呈现

样式：字体、前景色、背景色、背景图、间距、边框.......

1.HTML的历史

Netscape Navigator，Microsoft IE分别添加很多标签——彼此不兼容；W3C对HTML标签进行了统一。

HTML1.0

HTML2.0

HTML3.0

HTML4.0

XHTML1.0 XML eXtensiable

严格版(strict)：(1)使用严格XML语法(2)禁用样式相关的标签和属性

过渡版(transitional)：(1)使用严格的XML语法(2)允许使用废弃的样式相关标签和属性

HTML5

2.面试题：XHTML1.0对HTML4.0的改进

(1)借鉴了XML的写法，语法更加严格

(2)把页面的内容和样式分离了：废弃了HTML4中的表示样式的标签和属性，推荐使用CSS来描述页面的样式

HTML4.0中为了丰富显示效果，设计的很多标签和属性把页面的“内容”和“表现”混杂在一起：导致页面内容杂乱，不便于理解和修改。

3.CSS

Cascade Style Sheet 级联样式单/表，层叠样式表，一个元素若附加了某样式，其中的内容及其中的子元素/孙子元素都会施用此样式。

CSS样式可以在如下有如下三种编写方式：

(1) 内联样式(inline)：使用style属性声明在元素中

(2) 内部样式(inner)：

<head><style type=”text/css”>...</style></head

(3) 外部样式(outer)：创建一个独立的.css文件

<head>

<linkrel=”stylesheet” type=”text/css”href=”x.css”/>

</head>

使用原则：

·内联样式只对当前元素有效；内部样式对当前整个页面有效；外部样式对所有引用它的页面都有效(可用于控制全站的风格)

·内联样式尽量少用；内部样式可以适量使用(全站中只有一个页面中使用的样式)；推荐使用外部样式(外部文件不要太多)

4.CSS基本语法：

属性名: 属性值;

内部/外部CSS：

选择器{ /*该样式的作用*/

属性名:属性值;

...

属性名:属性值;

}

5.CSS选择器——重点

说明：JavaScript/jQuery中也可以使用类似于CSS中的选择器进行元素的选择。

(1)通用选择器： *{...} 选择页面中的所有元素

(2)元素选择器：元素名{...} 选择指定的元素如div{...}

(3)ID选择器：#ID值{...} 仅选择具有指定ID的元素如#p2{...}

(4)类别选择： .类名{...}选择具有指定class的所有元素 .mark{}

(5)并列/过滤选择器：选择器1选择器2{...} 选择可被两个选择器同时选定的元素如p.mark{...} 或 .product.mark{...}

(6)子元素选择器：选择器1 选择器2{...} 选择可被选择器1选择的元素下的所有子元素中可被选择器2选中的元素如div span{...} .product .mark{...}

(7)直接子元素选择器 选择器1>选择器2{...} 选中选择器1中的直接子元素中可被选择器2选中的如div > span{...}IE6不支持

(8)多选/群组选择器：选择器1,选择器2,...选择器n{...} 选择可被任何一个选择器选中的元素 h2,#main,.mark{...}

(9)伪类选择器： :伪类名{...}

a:link{...} 选择所有未访问过的超链接

a:visited{...} 选择所有访问过的超链接

元素:hover{...}当鼠标悬停于元素上方时 IE6只支持a:hover

元素:active{...}当元素被激活时

input:foucs{...}当元素获得输入焦点 IE7前都不支持

面试题：CSS样式的优先级

!important > 内联样式 > #ID选择器 >类选择器/伪类选择器 >元素选择器 > 浏览器预定义样式

6.CSS中的尺寸

相对尺寸：

%: 所占父元素的百分比如div{width: 50%;}

px: 像素，指屏幕上的一个点如div{width: 500px;}

em: 倍率，表示标准字体大小的倍率如div{height: 3em}

绝对尺寸：在屏幕上使用的Web页面尺寸几乎不用绝对尺寸

cm：厘米

mm：毫米

in：英寸

pt：磅(72磅=1英寸)

7.CSS中的颜色

(1)英文字符表示如red green silver

RGB表示法：

(2)三位整数 rgb(xxx, xxx, xxx) 如span{color:rgb(255,0,0);}

(3)三位百分比 rgb(xx%, xx%, xx%) 如span{color: rgb(30%,50%,0%);}

(4)六位十六进制数 #XXXXXX 如span{color:#FF0000;}

(5)三位十六进制数 #XXX 如span{color: #FC0;} =>#FFCC00

色彩理论：

原色：能够以一定的比例调配出其它颜色的颜色

加色系：以RedGreenBlue为原色的色彩体系。主动发光的物体发出来的颜色使用加色系，如太阳、火焰、灯、显示屏等。颜色越多越白。

减色系：以CyneMegatonYellow为原色的色彩体系。不会主动发光，而是发射其它光线的物体，使用减色系，如月亮、纸张、油画笔等。颜色越多越黑。

计算机中颜色表示法——加色系：

任意一个颜色都要使用Red、Green、Blue三个原色以一定的比例混合调配出来。

32位真彩色：使用8bit(0-255/00-FF)来描述一个原色的配比量

2^24

64位真彩色：使用16bit(0-65535/0000-FFFF)来描述一个原色的配比量

2^48

255,0,0 红色

0,255,0 绿色

0,0,255 蓝色

0,0,0 黑色

255,255,255 白色

10,10,10 深灰色

200,200,200 浅灰色

0,255,255 青色，红色的互补色

255,0,255 品红色，绿色的互补色

255,255,0 黄色，蓝色的互补色

230,180,10 土黄色

200,230,190

和谐色：

180 240 50

240 180 50

180 50 240

240 50 180

50 240 180

50 180 240

练习：配出下列颜色块：红色蓝青品黄白浅灰深灰黑，以及一个和谐色组

8.CSS常用属性——重点/难点

属性名

含义

可取值

版本/兼容性

width

指定元素的宽

block元素才能指定/IMG/TABLE

% px em

height

元素的高

block元素才能指定/IMG/TABLE

% px em

min-width

定义元素的最小宽

max-width

定义元素的最大宽

min-height

定义元素的最小高

max-height

定义元素的最大高

overflow

如何处理溢出的内容

hidden 隐藏

visible 可见

scroll滚动

auto自动

0 0