2017IFE-通过HTML及CSS模拟报纸排版

前言

2017-百度前端技术学院编码任务：通过HTML及CSS模拟报纸排版

任务目的

• 深入掌握CSS中的字体、背景、颜色等属性的设置
• 进一步练习CSS布局

任务描述

• 参考 PDS设计稿（点击下载），实现页面开发，要求实现效果与 样例（点击查看） 基本一致
• 页面中的各字体大小，内外边距等可参看 标注图（点击查看）
• 页面宽度固定（定宽）

实现

DEMO

项目地址

---

字体

• font
  简写字体属性

 /* font简写声明顺序：style | variant | weight | size/line-height | family */

• font-style
  定义字体风格

.normal {
  font-style: normal; //选择 font-family常规字体
}
.italic {
  font-style: italic; //选择斜体，如果当前字体没有可用的斜体版本，会选用倾斜体（oblique ）替代
}
.oblique {
  font-style: oblique; //选择倾斜体，如果当前字体没有可用的倾斜体版本，会选用斜体（ italic ）替代
}

• font-variant
  定义小型大写字母的字体

p.small
  {
  font-variant:small-caps; //设置为小型大写字母的字体
  }

• font-weight
  定义字体的粗细

/* normal   默认值。定义标准的字符。
bold    定义粗体字符。
bolder  定义更粗的字符。
lighter 定义更细的字符。
100
200
300
400
500
600
700
800
900
定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
*/
p.normal {font-weight:normal;} //默认正常
p.thick {font-weight:bold;}         //字体为粗体
p.thicker {font-weight:900;}      //可设置数字，由小到大设置粗细

• font-size
  定义字体的尺寸

/*
smaller 把 font-size 设置为比父元素更小的尺寸。
larger  把 font-size 设置为比父元素更大的尺寸。
length  把 font-size 设置为一个固定的值。
%   把 font-size 设置为基于父元素的一个百分比值。
*/
h1 {font-size:18px;}
h2 {font-size: smaller;}
p {font-size: larger;}

• font-family
  定义元素的字体系列

浏览器会使用识别的第一个字体系列，如果没有就使用浏览器默认字体

/*amily-name
generic-family
用于某个元素的字体族名称或/及类族名称的一个优先表。
默认值：取决于浏览器。*/

p
  {
  font-family:"Times New Roman",Georgia,Serif;
  }

---

背景

• background
  简写背景属性

background-size
这个属性的定义必须在 <position> 之后, 并使用 '/' 符号分隔

background-color
background-position/background-size
background-repeat
background-origin
background-clip
background-attachment
background-image 

body
  { 
  background: #00FF00 url(bgimage.gif) no-repeat fixed top;
  }

• background-color
  设置背景颜色

/**
color_name  规定颜色值为颜色名称的背景颜色（比如 red）。
hex_number  规定颜色值为十六进制值的背景颜色（比如 #ff0000）。
rgb_number  规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。
transparent 默认。背景颜色为透明。
**/
body
  {
  background-color:yellow;
  }
h1
  {
  background-color:#00ff00;
  }
p
  {
  background-color:rgb(255,0,255);
  }

• background-position
  设置元素背景图片的位置

 默认左上角
- 关键词：left,top
- 百分比：25%，50%，如果只设置一个值，另外自动为50%
- 像素：24px,40px,     

• background-size
  设置元素背景图片的尺寸

background-size: length|percentage|cover|contain;
length: 固定的像素
percentage：百分比设置
cover：缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
contain：缩放背景图片以完全装入背景区，可能背景区部分空白

• background-repeat
  设置背景图片的平铺模式

repeat  默认。背景图像将在垂直方向和水平方向重复。
repeat-x    背景图像将在水平方向重复。
repeat-y    背景图像将在垂直方向重复。
no-repeat   背景图像将仅显示一次。

• background-origin
  background-origin 属性规定 background-position 属性相对于什么位置来定位。

padding-box
(默认)背景图像相对于内边距框来定位。

border-box
背景图像相对于边框盒来定位。

content-box
背景图像相对于内容框来定位。

• background-clip
  设置背景的绘制区域

border-box
(默认)背景被裁剪到边框盒。

padding-box
背景被裁剪到内边距框。

content-box
背景被裁剪到内容框。

• background-attachment
  设置背景图片是否固定或者随着页面滚动

scroll  默认值。背景图像会随着页面其余部分的滚动而移动。
fixed   当页面的其余部分滚动时，背景图像不会移动。

• background-image
  设置元素的背景图片

url('URL')  指向图像的路径。
none    默认值。不显示背景图像。

颜色

<color>
三种方式描述颜色

• 关键字：red
• RGB系统： rgb(255,0,51) rgba(255,0,51,.5)
• HSL系统：hsl(240,100%,50%)或hsla(240,100%,50%,0.05)

currentColor 关键字
表示和当前元素的color一样的颜色

文本

• text-indent
  文本缩进

length  定义固定的缩进。默认值：0。
%   定义基于父元素宽度的百分比的缩进。

// 文本缩进2字符
text-indent：2em;
em默认父元素字体大小的倍数，

• text-align
  规定文本水平对齐方式

left    把文本排列到左边。默认值：由浏览器决定。
right   把文本排列到右边。
center  把文本排列到中间。
justify 实现两端对齐文本效果。

• word-spacing
  字（单词）间距；

象形文字的语言或非罗马书写体往往无法指定字间隔，注意对中文无效

normal  默认。定义单词间的标准空间。
length  定义单词间的固定空间。
p
  {
  word-spacing:25px;
  }

• letter-spacing
  字母间距

与word-spacing类似，区别在于它是对字母或单个字符产生影响

h1 {letter-spacing:2px}
h2 {letter-spacing:-3px}

• text-transform
  文本大小写

none    默认。定义带有小写字母和大写字母的标准的文本。
capitalize  文本中的每个单词以大写字母开头。
uppercase   定义仅有大写字母。
lowercase   定义无大写字母，仅有小写字母。

• text-decoration
  文本的装饰

• 一个规则中结合多种装饰
• text-decoration属性是一种简写属性，并且可以使用普通属性三个值中的任何一个。普通属性如下：text-decoration-line
  ，text-decoration-color和text-decoration-style

none    默认。定义标准的文本。
underline   定义文本下的一条线。
overline    定义文本上的一条线。
line-through    定义穿过文本下的一条线。
blink   定义闪烁的文本。

• white-space
  处理元素内的空白

normal  默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap  文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap    保留空白符序列，但是正常地进行换行。
pre-line    合并空白符序列，但是保留换行符。

• direction
  属性规定文本的方向 / 书写方向

ltr 默认。文本方向从左到右。
rtl 文本方向从右到左。

---

问题

• 首行字母大写的长宽过大，布局变形
  解答：利用伪元素 first-letter 针对整体第一行的首字母进行处理

/* 使每段开头的第一个字母变红变大 */

p::first-letter {  /* 使用:first来兼容IE8- */
  color: red; 
  font-size: 130%; 
}

---

查看链接

• CSS 文本
• CSS 背景
• CSS 字体
• color