前端HTML+CSS之网页排版(三)

    在对HTML和CSS有了一定的了解和结构之后,我们需要知道真正在网页排版中如何设定其属性值,如何得到我们想要的字体,文本以及背景属性的设置

    在正式说网页排版之前,由于我们需要在对每次代码修改之后看一下页面效果,每次自动刷新页面会比较的麻烦,所以我们有一个小技巧,在网页中
菜单栏 – 工具 – 自动刷新 – 勾选5秒
这样页面就会自动每过5秒刷新一次


一、字体属性

字体包括字体的风格,粗细,大小,文本行高属性

字体风格

其格式为:

font-style: normal | italic | oblique | inherit ;
属性值 描述
normal 默认值,标准字体风格
italic 斜体字体
oblique 倾斜的字体
inherit 继承父级字体的风格
字体粗细

设置语法为:

font-weigth: normal | bold | bolder | number | inherit;
属性值 描述
normal 默认值,标准字体粗细
bold 粗字体
bolder 更粗字体
lighter 继承父级字体的风格
100 200 300 … 900 由细到粗字体,400相当于normal,700相当于bold
inherit 继承父级字体粗细
字体大小

设置语法为:

font-size: medium | length | 百分数 | inherit ;
属性值 描述
medium 浏览器默认值,大小为16px, 若父元素也没设置字体大小,则使用该值
length 某个固定大小,常用单位为px(像素),em和pt(点)
% 相对值,基于父元素或默认值的一个百分比值
inherit 继承父级字体的尺寸

在具体的应用中,单位对于设定字体有重要的作用

  • px
    主要电脑屏幕媒体,一个像素为电脑上的一个点
    像素为固定大小的单元,不具有伸缩性
  • pt
    用于印刷媒体,一个点等于一英寸的1/72,不具可伸缩性
  • em
    用于web媒体,是相对长度单位,相对于父元素或默认值,可伸缩,适用移动设备
字体族属性

设置语法为:

font-family: 字体族1, 字体族2, 字体族3..通用字体族 | inherit ; 
属性值 描述
字体族1, 字体族2, 字体族3…通用字体族 值为1或1个以上的字体系列,默认字体由浏览器决定
inherit 继承父级字体系列

额外补充:
西方国家罗马字体分为sans-serif(无忖线体)和serif(忖线体),而sans-serif在显示器的显示效果更好,因此在设置的时候一般在末尾添加sans-serif
e.g.

font-family: tahoma, "Times New Roman", "微软雅黑", "宋体", "黑体",sans-serif ;
文本行高

即ine-height属性,即上下文的行间距,其不能为负数
设置语法为:

line-height: noraml | number | length | 百分数 | inherit
属性值 描述
noraml 默认值,行间距为当前字体大小的110%-120%
number 不带任何单位的数字,行间距等于此数字与当前字体尺寸相乘的效果,效果等效为em单位
length 以px
% 相当于当前字体大小的行间距,100%的行间距等于当前字体尺寸
inherit 继承父级元素的line-height属性

二、文本属性

修改文本的颜色,行高,对齐方式,字符间距,段首缩进位置

颜色属性

设置的为文本颜色
其语法为:

color: 颜色英文单词 | 颜色的十六进制数 | 颜色RGB值 | inherit;
属性值 描述
颜色英文单词 例如:red(红色),blue(蓝色)等
颜色的十六进制数 使用#加16进制数表颜色,例如红色 #ff00000,也可简写为#F00,(前提是两两分组数字相同),同时注意不区分大小写
颜色RGB值 例如红色为rgb(255, 0, 0)
inherit 继承父级元素的颜色

扩展
由于我们使用的是PS作为图片编辑器,其拾色器中的集中颜色表示就得清楚

模式 描述
HSB模式 色相,饱和度,亮度来表示颜色,H为色相,S为饱和度,B为亮度
Lab模式 明度,色彩通道表示亮度,L表示明度,a和b表示色相通道,其产生的颜色较明亮
RGB模式 红,绿,蓝三种颜色混合色来表示,R为红,G为绿,B为蓝,其各个值范围为(0~255)
CMYK模式 使用青色,洋红色,黄色和黑色来表示颜色,C为青色,M为洋红色,Y为黄色,K为黑色

有时我们会遇见像RGBA的描述
其中最后一个A代表alpha(透明度),alpha决定透过这个图像的像素,就是你可以看到多少背景
如果颜色的alpha为0,为不论RGB为多少,该颜色均不可见
e.g.全红表示(255,0, 0,255)
全绿为(0,255,0,255)

水平对齐属性

设置语法为:

text-align: left | right | center | inherit ;

即左对齐,右对齐,居中对齐或继承父元素的值

首行缩进属性

设置每段文本的首行字符的缩进距离,允许属性值为负,文字被缩到左边

text-indent: length | % | inherit ;
属性值 描述
length 某个具体的值,单位为px/pt/em,默认值为0
% 相当于父级元素宽度的百分比
inherit 继承父级的属性值
文本修饰属性

显示文本是否显示下划线或上划线或删除线等修饰样式,设置语法为:

text-decoration: none | underline | overline | line-through | inherit ;
属性值 Value
none 无任何修饰
underline 显示下划线
overline 显示上划线
line-through 显示删除线
inherit 继承
字符间距属性

增加或减少字符与字符之间的间隔

letter-spacing: normal | length | inherit ;

normal为正常默认值,length 仍以px/pt/em为单位,可为负数,inherit继承

字间距属性

增加或减少单词与单词之间的及间隔

word-spacing: normal | length | inherit ;

三、背景属性

背景颜色属性

设置的语法为:

background -color: 颜色英文单词 | 颜色的十六进制 | 颜色的RGB | transparent | inherit ;
背景图片属性
background-image: url(image_file_path) | inherit ;
属性值 描述
url(image_file_path) 参数用来指定背景图片的路径
inherit 继承父元素的属性
背景图片重复属性
background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit ;

即设定在
水平垂直方向均重复
或只在水平方向
或只在垂直方向
或只显示一次
或继承父元素

背景图片位置属性

元素的背景图片都是从左上角显示的,如果希望从特定的位置开始显示

background-position: 表示位置的关键字 | x% y% | xpos ypos ;

表示位置的关键字有
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

x y 分别表示水平位置和垂直位置,偏移量为相对于元素的宽度和背景图片宽度之差的百分数

xpos ypos 默认值为0 0 (表示元素边框内的左上角),偏移量是相对于左上角的一个数值,单位为px/em,为正则为从左往右或从上往下,为负则反之

背景图片滚动属性

默认情况下背景图片会随页面的滚动条滚动

background-attachment: scroll | fixed | inherit ;
属性值 描述
scroll 默认值,背景图片随页面滚动条而滚动
fixed 页面滚动条滚动时,背景图片不会动
inherit 继承父级元素

在进行了上述的学习,我们已经能做一个简单的界面了,我们可以自己动手创作一个自己喜欢的界面
像设计一个这样的网页和优惠券,你可能最开始只能将其设定在左上角而不能控制整个居中,故这就涉及到我们下一节的盒子模型了
前端HTML+CSS之网页排版(三)_第1张图片
前端HTML+CSS之网页排版(三)_第2张图片

该系列博客参考了聂常红 刘伟著的前端HTML+CSS修炼之道
第三篇HTML+CSS学习笔记到此结束 cheers! ?

你可能感兴趣的:(HTML+CSS)