day5-李大人part1

day5

快捷键

​ 格式化文档：ctrl+shift+f

一：字体属性

1·1：字体大小

font-size：数值px
浏览器设置最小字体（设置—外观—自定义字体—最小字体设置为0）

1·2：字体类型

font-family：“微软雅黑”

​ 1·该字体类型必须要电脑本身有，否则就会显示出默认的微然雅黑
​ 2·一个单词的英文可以没有引号，多个单词或者中文需要加引号
​ 3·可以设置多个字体类型，之间用逗号隔开，依次适配

1·3：字体加粗

font-weight：属性值

• blod（加粗）
• normal（去掉加粗）

1·4：字体倾斜

font-style：属性值

• italic（倾斜）

• normal（去掉倾斜）

1·5：字体复合写法

font：加粗，斜体，大小，系统;

二：ps 快捷键

• 放大缩小：alt+滚轮
• 显示或者影藏标尺：ctrl+r
• 修改像素单位：ctrl+k—>单位与标尺—>标尺单位选择像素
• 显示信息面板 窗口—>信息勾选就行

三：文本属性

3·1：文本颜色

​ color：属性值

• —英文，
• —16进制，
• —rgb(0-255)

3·2：文本的对齐方式

​ text-align：属性值

• —left
• —right
• —center,
• —justify(两端对齐)

3·3：文本修饰

text-deraction：属性值：

• —underline（下划线）
• —overline（上划线）
• —line-through（删除线）
• —none(去掉下划线)

3·4：文本缩进

text-indent：属性值

• —数值+em（单位一般选择em，text-indent的大小随着font-size的改变，即就是文字大小的倍数）

3·5：文本大小写转换

text-transform：属性值

• —capitalize（首字母大写）
• —uppercase（全部大写）
• —lowercase（全部小写）

3·6：文本行高

line-height：数值+px
-量取：从一行的头到另一行的头
-应用场景：多行文本（加大行之间的距离）
单行文本（line-height=height时候，垂直居中）

3·7：字符间距

letter-spacing：数值+px

​ -中文：字之间的间距

​ -英文：字母之间的间距

3·8：字间距

word-spacing：数值+px（英文单词之间的距离）

四：网站设计的步骤

​ 1·先用标尺拉出版心的范围

2·从上往下写板块,分析板块

• 版心之外没有颜色，只写一个div,代表的是版心，设置宽/高/背景色/居中
• 版心之外有颜色，写两个div，外层是通栏，设置高度/背景色，里层是版心，设置宽/高/背景色/居中

块,分析板块

• 版心之外没有颜色，只写一个div,代表的是版心，设置宽/高/背景色/居中
• 版心之外有颜色，写两个div，外层是通栏，设置高度/背景色，里层是版心，设置宽/高/背景色/居中