CSS基础-属性

CSS属性

前言

上一节主要介绍了CSS的选择器，而在CSS选择器中出现了xx:xx;格式的一行代码，我们称之为CSS的属性。

通过前面的学习，我们了解到选择器的作用是帮我们找到对应的html标签，而这一节中属性的作用毫无疑问就是对html标签进行美化的效果。

这一节，主要是学习一些在开发中常用的属性。

目标：熟练掌握每一个属性的使用场合。

1.字体大小

属性名：font-size

取值：数字+px

注意点：

• 谷歌浏览器默认字体大小为16px
• 单位需要设置，否则无效(这里单位是px)

2.字体粗细

属性名：font-weight

取值：

• 关键字：

  效果	关键字
  正常	normal
  加粗	bold
  加粗	bolder

• 纯数字：100~900的整百数

  效果	数字
  正常	400
  加粗	700

注意点：

• 不是所有字体都提供了九种粗细，因此部分取值页面中无变化。
• 实际开发中以：正常、加粗两种取值为最多。

3. 是否倾斜

属性名：font-style

取值：

• 正常(默认值):normal
• 倾斜:italic

4.字体系列

属性名：font-family

常见取值：具体字体1，具体字体2，具体字体3，具体字体4....

• 具体字体："Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等....
• 字体系列：sans-serif、serif、monospace等....

渲染规则：

1. 从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
2. 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体

注意点：

1. 如果字体名称中存在多个单词，推荐用引号包裹
2. 最后一项字体系列不需要用引号包裹
3. 网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示

系统	默认字体
Windows	微软雅黑
macOS	苹方

常见字体系列(了解)

无衬线字体(sans-serif)

1. 特点：文字笔画粗细均匀，并且首尾无装饰
2. 场景：网页中大多采用无衬线字体
3. 常见该系列字体：黑体、Arial

衬线字体(serif)

1. 特点：文字笔画粗细不均，并且首尾有笔锋装饰
2. 场景：报刊书籍中应用广泛
3. 常见该系列字体：宋体、Times New Roman

等宽字体(monospace)

1. 特点：每个字母或文字的宽度相等
2. 场景：一般用于程序代码编写，有利于代码的阅读和编写
3. 常见该系列字体：Consolas、fira code

知道一些字体的基本知识后，肯定也要会CSS中字体是怎么设置的，关于字体系列的CSS使用示例：

   /* 如果用户电脑没有安装微软雅黑，就按黑体显示文字 */
   /* 如果电脑没有安装黑体，就按任意一种非衬线字体系列显示 */
   font-family: 微软雅黑, 黑体, sans-serif;

5.复合属性font

属性名：font

取值：

font：style weight size family;

省略要求：

• 只能省略前两个，如果省略了相当于设置了默认值

注意点：如果需要同时设置单独和连写形式

• 要么把单独的样式写在连写的下面
• 要么把单独的样式写在连写的里面

6.文本缩进

属性名：text-indent

取值：

• 数字+px
• 数字+em(推荐：1em = 当前标签的font-size的大小)

案例：

css样式：

   /* text-indent */
   /* 首行缩进2个字的大小 */
   /* 默认字号：16px 。32px */
   p {
      text-indent: 32px;
   }

html代码:

  <p>
        HTML5开发语言简单，而且兼容性好，现在越来越多的开发者都喜欢使用这种开发语言。基于HTML5开发的WebApp的核心优势有两点:第一，HTML5技术的优势让开发者以后在做APP应用时不需要写边框、画界线，只需要用一个模板就能够起到界面显示的作用;第二，WebAPP具有卓越的互联互通特性。但对于高校一线教师来说，存在技术门槛较高，掌握起来效率低下等问题。
    </p>

效果：

但是这样写会有一个缺点，那就是当字体大小font-size改变时，text-indent也需要跟着改变。

因此，我们在开发的时候，经常使用em或rem作为单位来设置缩进。但这里你要记住，em是相对父标签字体大小决定的(如果父标签字体大小为20px ，则1em=20px)，rem是由根标签html下字体的大小决定的(默认1rem=16px)。

7.文本对齐方式

属性名：text-align

取值：

属性值	效果
left	左对齐
center	居中对齐
right	右对齐

注意点：

• 如果需要让文本水平居中，text-align属性给文本所在标签(文本的父元素)设置

7.1 水平居中方法总结 text-align：center

text-align：center能让那些元素水平居中？

1. 文本
2. span标签、a标签
3. input标签、img标签

注意点：

如果要让以上元素水平居中，text-align:center需要给以上元素的父元素设置，不限于center，其他的都行。

8.文本修饰

属性名：text-decoration

取值：

属性值	效果
underline	下划线(常用)
line-through	删除线(不常用)
overline	上划线(几乎不用)
none	无装饰线

注意点：

• 开发中会使用text-decoration:none;用来清除a标签默认的下划线

9.行高

作用：控制一行的上下间距

属性名：line-height

取值：

• 数字+px
• 倍数(当前标签font-size的倍数)

应用：

1. 让单行文本垂直居中可以设置line-height:文字父元素高度
2. 网页精准布局时，会设置line-height：1 可以取消上下间距

行高与font连写的注意点：

• 如果同时设置了行高和font连写，注意覆盖问题
• font: style weight size/line-height family;

行高由下面几个部分构成：

9.1设置行高

以px为单位设置行高:

p{line-height:50px;}

9.2 按倍数设置行高

如果是按倍数设置行高，我们不需要给数字加上单位px:

p{line-height:1.5;}

表示行高为1.5倍，为自己字号的1.5倍。

10.颜色的常见取值

属性名：

• 如：文字颜色：color
• 如：背景颜色：background-color

属性值：

颜色表示方式	表示含义	属性值
关键词	预定义的颜色名	red，green，yellow，blue...
rgb表示法	红绿蓝三原色，每项取值0-255	rgb(0,0,0)、rgb(255,255,255),rgb(255,0,0)
rgba表示法	红绿蓝三原色+a表示透明度，取值范围是0~1	rgba(255,255,255,0.5)、rgba(255,0,0,0.3)
十六进制表示法	#开头，将数字转换成十六进制表示	#000000，#ff0000,#e02322，简写:#000,#fff

11.标签水平居中方法

margin:0 auto;

如果需要让div、p、h(大盒子)水平居中，可以通过上面这行css代码实现。

注意点：

1. 如果需要让div、p、h(大盒子)水平居中，直接给当前元素本身设置即可
2. margin:0 auto 一般针对固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度

12、综合案例

用上面所学的html标签和css样式属性，完成下图的效果：