day 6

CSS属性学习

一、 Fireworks

Fireworks是一款图形编辑阮籍，作用是用来绘制图形，对开发者而言，主要用来测量css的相关属性，和ps类似。

功能区域的介绍

 

 

 

 

1.1缩放工具

 

用来放大或者缩小画布

快捷键：ctrl+鼠标滚轮

 

1.2抓手工具

 

 

 

 

作用：移动画布

快捷键：按住空格键和按下鼠标后拖动

 

1.3滴管工具

 

 

 

 

作用：拾取文字或者图片的颜色

快捷键：I

使用方法：通过滴管工具拾取颜色后找到油漆桶，然后查看颜色面板

 

 

 

 

 

1.4文字工具

 

作用：量取图片文字的字号和字体以及行高等

 

 

 

 

1.5标尺和辅助线

 

 

 

 

作用：测量图形的宽高（大区域）

取消辅助线：第一种是直接将辅助线拖回标尺，第二种是视图工具辅助线-清除辅助线

 

1.6切片工具

 

作用：用来测量小的区域宽高

 

 

 

 

 

1.7注意事项

导入图片的时候需要锁定位图（点击图层锁定位图）

 

 

 

 

使用文字工具的时候选择不消除锯齿

 

 

 

 

如果绘制器功能展示不全，则点击展开模式

 

 

 

 

 

二、 CSS文字属性的深入

字体

颜色，字号以及字体

字体颜色

Color作用用来设置文字的颜色

属性值：分别是颜色名、颜色值

颜色值包含rgb和十六进制

 

Rgb模式是三原色（red green blue），书写方法：rgb（红色，绿色，蓝色）逗号分割每个颜色的色值，每个颜色的取值范围是0-255，一共组成了160万种颜色

红色：rgb（255,0,0）

绿色：rgb（0,255,0）

蓝色：rgb（0,0,255）

白色：rgb（255,255,255）

黑色：rgb（0,0,0）

例如：

 

 

 

 

 

 

 

 

 

十六进制：是将rgb颜色表示法进行了简化

将十进制的0-255颜色表示法替换成了十六进制的颜色表示法

0~00

255~ff

十六进制就是0~9，a~f

十六进制颜色值的写法：使用#后面加红绿蓝三个颜色的十六进制的二位数写法

红色：#ff0000

绿色：#00ff00

蓝色：#0000ff

白色：#ffffff

黑色：#000000

基本使用：

 

 

 

 

部分特殊的十六进制是可以简化的，比如黑色#000000可以简化为#000有些是不能简化的，比如#00ffab这种不能简化的

#ff00aa可以简化为#f0a

#aaffdd可以简化为#afd

 

字体：font-family

作用：设置文字使用哪种字体显示

属性值：必须要用引号包裹，值可以有多余，中间是用逗号隔开

中文字体：

微软雅黑的英文表示法：Miscrosoft Yahei

送一的英文表示法：SmiSun

英文字体：

Arial

Consolas

工作中，关于文字我们是通过设计图获取的，如果设计师没有给字体，可以自己通过FW获取

测量方法：使用FW书写文字，然后使用文字工具输入相同的两个或者多个文字，调整大小，调整字体，直到文字完全重合。

 

 

 

 

 

字号：font-size

作用是设置文字的大小

属性值：

px为单位：数字是几，表示字号显示多少像素

百分比为单位：参考继承的字号的百分比

 

 

 

 

em为单位：数字是几，表示继承来的字号的几倍

 

 

 

 

 

测量方法：通过FW测量

 

 

 

 

 

行高：line-height

定义：文字在一定的高度内垂直居中

属性值：

px为单位：数字是几表示行高就是几像素

百分比为单位：以自身字号为单位，继承字号的百分比

行高的测量：

 

 

 

 

 

利用行高的特点，可以设置文字在盒子内垂直居中

 

 

 

 

字体加粗：font-weight

作用：设置字体是否进行加粗显示

属性值：单词法，数值法

数值：100-700，以整百为单位表示

Eg：font-weight：700；

 

 

 

单词表示法：

normal：表示正常的，没有加粗的

bold：表示加粗的（bold对应加粗数值为700）

 

 

字体样式：font-style

用来设置文字是否有倾斜或者斜体

属性值：

normal:正规的，没有倾斜的

italic：斜体的，指的是文字斜体

oblique：倾斜的，与字体无关

例子：

 

 

 

 

 

 

 

 

工作中使用最多的是italic

font属性的综合写法：包含五个单一属性，前两个必须是字体样式或者字体是否加粗，书写时属性值之间用空格隔开，字号和行高使用斜杠分隔。字号、行高、字体必须连续书写，顺序不能颠倒。而且必须书写在倒数三个

 

 

 

 

 

 

 

文本

文本对齐：text-align

作用：用来设置段落的整体水平方向对齐

属性值：left、center、right

 

 

 

 

 

 

 

文本修饰：text-decoration

作用：设置文本整体是否有线条修饰

属性值：

none：没有修饰

overline：上划线

line-through：中划线（删除线）

underline：下划线

例子：

 

 

 

 

 

 

通常使用text-decoration属性取消a标签的默认下划线

 

文本缩进：text-indent

作用：设置段落首行缩进

属性值：

px为单位的数值表示法：数字是多少代表首行缩进多少像素

 

 

 

百分比表示法：参考标签的父级width属性值的百分比

 

 

 

 

 

 

以em为单位：数字是几，表示首行缩进几个中文字符(最常用)