前言
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
这个属性的定义必须在之后 , 并使用 '/' 符号分隔
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 默认值。不显示背景图像。
颜色
三种方式描述颜色
- 关键字：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 中的 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
- direction
属性规定文本的方向 / 书写方向
ltr 默认。文本方向从左到右。
rtl 文本方向从右到左。
问题
- 首行字母大写的长宽过大，布局变形
解答：利用伪元素 first-letter 针对整体第一行的首字母进行处理
/* 使每段开头的第一个字母变红变大 */
p::first-letter { /* 使用:first来兼容IE8- */
color: red;
font-size: 130%;
}
查看链接
- CSS 文本
- CSS 背景
- CSS 字体
- color