天天看点

C1认证学习二十、二十一、二十二(CSS背景属性、CSS文本属性)

C1认证学习二十、二十一、二十二(CSS背景属性、CSS文本属性)

文章目录

  • ​​C1认证学习二十、二十一、二十二(CSS背景属性、CSS文本属性)​​
  • ​​二十​​
  • ​​任务背景​​
  • ​​任务目标​​
  • ​​background-color​​
  • ​​background-image​​
  • ​​background-size​​
  • ​​background-repeat​​
  • ​​background-position​​
  • ​​二十一​​
  • ​​任务背景​​
  • ​​任务目标​​
  • ​​color​​
  • ​​font-size​​
  • ​​font-weight​​
  • ​​font-family​​
  • ​​text-align​​
  • ​​line-height​​
  • ​​text-indent​​
  • ​​letter-spacing​​
  • ​​word-spacing​​
  • ​​text-decoration​​
  • ​​text-transfer​​
  • ​​writing-mode​​
  • ​​white-space​​
  • ​​二十二​​
  • ​​任务背景​​
  • ​​任务目标​​
  • ​​盒子模型​​
  • ​​注意​​
  • ​​END​​

二十

任务背景

在前段开发的过程中,为了使得页面美观,往往会进行HTML的元素的背景的添加,使用CSS背景属性可以在页面美化的同时,实现页面的表现以及内容的分离。

任务目标

掌握使用CSS设置背景。

background-color

背景颜色,使用rgb或者rgba

background-image

设置背景的图像,url或者none

background-size

设置背景图片的尺寸大小

background-repeat

设置背景图片的重复的方法

background-position

设置背景图片的位置。

二十一

任务背景

通过CSS的文本属性可以给文本设置颜色、字号、行间距、对齐、段落缩进等等的样式,将页面的正文与标题区分开来,同时是能够实现丰富整个页面布局的笑过

任务目标

掌握CSS的文本属性的使用

color

设置文本的颜色

font-size

设置文本的字体的大小

font-weight

设置文本的粗细

normal

bold

bolder

light

font-family

用于规定文本的使用的字体或者是字体的族名列表,字体名在列表越往前面优先级是越高的,如果浏览器不支持某一个字体,那么,就会直接向下继续搜索知道有一个是允许的字体。

text-align

用于设置文本的水平对齐的方法,

center

left

right

line-height

用于设置行间距,可以设置的如下所示;

数字

固定值

百分比

text-indent

用于指定首行缩进的值,

letter-spacing

用于设置字间距

word-spacing

用于指定文本中的单词的间距

text-decoration

用于设置文本的装饰线,属性如下所示:

C1认证学习二十、二十一、二十二(CSS背景属性、CSS文本属性)

text-transfer

用于设置文本的大小写字母。

writing-mode

设置文本在水平或者垂直方向上的排布。

white-space

用于设置文本的空白的符号的处理:

C1认证学习二十、二十一、二十二(CSS背景属性、CSS文本属性)

二十二

任务背景

所有的HTMl元素都可以看作是一个盒子模型,每一个盒子模型都包含有外边距、内边距、边框、实际内容这四个部分,通过以上的四个部分的属性的设置可以极大的丰富盒子模型乃至整个HTML文档的表现效果以及布局结构。‘

任务目标

1、理解什么是盒子模型

2、掌握盒子模型的组成部分

3、掌握标准盒子模型的特征以及怪异模型的特征还有二者之间的区别。

盒子模型

注意

END