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