> 文档中心 > Web学习笔记13:CSS代码块1

Web学习笔记13:CSS代码块1

目录

sorry

回归正题~

怎么写

一些常见的属性

1.font-size:设置字体大小

2.font-weight:设置字体粗细

3.font-style:斜体

4.font-family:设置字体

 5.color:设置字体颜色

后记


sorry

非常抱歉,也不知道是之前的脑汁短路了,之前写了三个“Web百课斩10”,服了自己了。

另外,我们又回来更新了。

回归正题~

今天讲的——CSS代码块,听起来很难的鸭子?

但是,这个东西不仅不难,而且还是在css当中最简单的!

怎么写

用花括号包裹起来的代码叫做代码区;

css代码就是由代码区构成.

这就是一个标准的定义。当然,肯定是不好懂的,所以,看一下实例:

我们以一个

为例。看一下下面这个程序:

css代码块div{background-color: red;font-size: 100px;}
123

接着,我们将部分提取出来,也就是把我们的css代码提取出来:

div{background-color: red;font-size: 100px;}

我们可以看到,这个div的css部分使用一个花括号包围起来的。并且,每条语句结束后都要加一个分号(英文状态下的)。

另外,我们将"backgrond-color"、"font-size"这类的叫做属性名,即冒号前头的部分。类似"red"、"100px"这些东西我们叫做属性值,即冒号后面的部分(不包含分号)。

一些常见的属性名

刚刚说到的属性名,大家都不陌生了。接下来,就来介绍几个属性名吧!

font-size 设置字体大小
font-weight 设置字体的粗细程度
font-style 设置字体的样式(例如斜体)
font-family 设置字体(例如宋体、楷体等)
color 设置字体颜色

我们来一个一个详细介绍吧!

1.font-size:设置字体大小

当我们在word文档中的时候,是不是要调整字体的大小?

这里的font-size,就是干这个用的!

css代码块div{font-size: 24px;}
123

例如上面这段程序中,

div{font-size: 24px;}

这里就是使用了font-size函数。这里干的,就是把字体调到24。非常简单的一个小“东西”,由于具有更高的灵活性,在开发中有时会替代

这些标签。

需要特别注意的是,在使用它的时候,后头必须要由单位,可以是px,也可以是其他的(我们大部分时候用px,即像素)。如果不加单位的话,哈哈,自己试试吧(肯定会报错,不用试了)。

2.font-weight:设置字体粗细

还记得我们之前学的了吗?这里的font-weight,基本上就可以是说干这个用的。但是,font-weight可以变换不同的粗细,而strong标签只能够变幻出一种粗细。

font-weight只有四个属性值,这一点和font-size有着很大的不同。

lighter 细体
normal 正常值(平常显示的)
bold 加粗(和完全一样)
bolder 超级加粗

 这里需要注意的是,有的字体包不能支持bolder,所以在开发中尽量不用。这里和字体包有一点关系。

css代码块div{font-weight: bold;}
123

例如上面的程序,

div{font-weight: bold;}

和之前的类似,这里也是这样设置的。这里的属性有一点多,可能需要记忆一下。

3.font-style:斜体

此函数共有仨属性,分别为:

font-style属性值

说明

normal

默认值,正常体

italic

斜体,这是一个属性

oblique

将字体倾斜,将没有斜体变量(italic)的特殊字体,要应用oblique

细心的人会发现,italic和oblique似乎确凿有那么一点有点类似,可以上网查一下这两个的差异。如果真的没搞懂,那就算了,只要在日常使用italic就可以了。 

css代码块div{font-style: italic;}
123

这里,

div{font-style: italic;}

和之前一样的定义形式,还是那样熟悉的味道······

4.font-family:设置字体

不讲,直接上代码体会。

css代码块div{font-family: arial;}
123
div{font-family: arial;}

这里强调一点,可以设置的字体太多了,不好列举,所以我们需要一个助手:

www. css88.com

上网搜搜,一定会有不一样的收获。

 5.color:设置字体颜色

代码没有什么好讲的:

css代码块div{color: red;}
123
div{color: red;}

但是,这里的属性就有的一说了。

属性分为三大种:英文单词、RGB色模、颜色代码

英文单词,即red,green,yellow这类的词汇。我们可以用这些作为属性值,可是这样的操作在实际中并不常见。因为在每个人的心中,不同的颜色有不同的样式,这样就不好统一,过于死板。

颜色代码,其实就是十六进制数,例如#ff5533这类的.大家可以在网上搜索颜色代码,就可以查到在线查询器,在乎使用的时候查询即可,这个东西没有必要牵强自己背下来,太多了。

最后,就是RGB色模。这个东西不好解释,暂不解释,直接偷懒一下:RGB(颜色系统)_百度百科

后记

以上就是今天的内容了,如果有什么不明白的,可以在评论区提出来,我会第一时间解答哦!

那么,goodbye,下期再见!


The End

神唱ktv下载