【第二部分 | CSS】2：点缀一下html元素

| 前言

| CSS字体属性

设置字体样式 font-family

设置字体大小 font-size

设置字体粗细 font-weight

设置字体风格 font-style （斜体）

上述四个属性合起来写

| CSS文本属性

设置字体颜色 color

设置水平对齐方式 text-align

设置文本装饰 text-decoration

设置文本缩进 text-indent

设置行间距 line-height

文本属性总结

| CSS背景

背景颜色

背景图片 · 基础

背景图片 · 平铺

背景图片 · 位置及坐标

背景图片 · 固定 or 滚动

上述 5 种属性连写的语法格式

背景透明、填充

总结

| CSS 的引入方式

内部样式表（嵌入式）

行内样式表（行内式）

外部样式表（链接式）

引入方式总结

| 前言

在本专栏中的【第一部分 | HTML】中，我们学习了HTML的基本用法。

默认的HTML自带部分CSS样式，但是那太丑了，我们本节学习一下给HTML内的元素加个皮肤。

| CSS字体属性

设置字体样式 font-family

在style中使用 font-family 设置字体的样式如 “宋体、雅黑”
若在 font-family 中定义了多个字体，则按照 从左到右，找到第一个找得到的字体样式 进行展示
该样式理论上是在 style 标签中定义，但是实际开发的时候我们也可以选择把 <body> 标签定义上字体样式

设置字体大小 font-size

不要忘记 size大小的单位为像素（px）
特例：标题标签比较特殊，需要特别指定大小

设置字体粗细 font-weight

设置字体风格 font-style （斜体）

注意：平时我们很少给文字加斜体，反而要给斜体标签（em，i）改为不倾斜字体。

上述四个属性合起来写

目前学过的所有字体属性小结

| CSS文本属性

字体属性：文字的样式、大小、粗细、风格等……

文本属性：文字的颜色、对齐方式、装饰文本、文本缩进、行间距等……

设置字体颜色 color

设置水平对齐方式 text-align

只能实现水平的对齐方式。

设置文本装饰 text-decoration

设置文本缩进 text-indent

文本缩进有两种单位：px（像素）和em（相对单位）

设置行间距 line-height

语法

文本属性总结

| CSS背景

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等

背景颜色

语法（默认颜色值为透明：transparent）

背景图片 · 基础

基本语法

background-image 属性描述了元素的背景图像。

实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)

背景图片 · 平铺

基本语法

background-repeat 属性规定了当 “图片大小” 小于 “容器大小” 的时候，图片平铺的方式（以何种方式重复）

背景图片 · 位置及坐标

基本语法

坐标位置 x y 的坐标值

第一类坐标值：方位名词 top center bottom left right
- 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
- 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
第二类坐标值：百分数，由浮点数字和单位标识符组成的长度值如以图片左上角为原点，距离左侧、右侧 20px 50px
- 如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
- 如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中

背景图片 · 固定 or 滚动

背景图片固定的话，可以制作视差滚动效果

上述 5 种属性连写的语法格式

相较于 []，背景的连写没有特定的属性书写顺序，但一般约定顺序为：

background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置;

背景透明、填充

语法: rgba( 3个rgb坐标，透明度 ) alpha数值越小越透明

注意:background: rgba( x1, x2, x3, x4, alpha透明度) 不能和 background-color 同用

总结

| CSS 的引入方式

内部样式表（嵌入式）

内部样式表（内嵌样式表）是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中

行内样式表（行内式）

行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式

外部样式表（链接式）

实际开发都是外部样式表. 适合于样式比较多的情况. 核心是:样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中使用.

引入外部样式的步骤

新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。
在 HTML 页面中，使用标签引入这个文件。《 link rel="stylesheet" href="css文件路径" 》

示例

<!--Html文件中写上 linke rel="stylesheet" href="url" 引入样式表，url为当前html文件的相对路径-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/6.外部样式表.css">
</head>
<body><p id="id01">使用外部样式表引入css文件</p>
</body>
</html>

/*css内的所有内容 等价于原先写在 <style> 标签中的内容*/
#id01{color: pink;
}

引入方式总结

【第二部分 | CSS】2：点缀一下html元素相关推荐

html设置按钮阴影效果,CSS如何设置文本和元素阴影效果？（代码示例）
CSS如何设置文本和元素阴影效果?下面本篇文章给大家介绍一下使用CSS设置文本阴影和元素阴影的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 文本阴影介绍在CSS中使用text ...
css4个伪元素,CSS_CSS3中的content属性使用示例，CSS中主要的伪元素有四个：befo - phpStudy...
CSS3中的content属性使用示例 CSS中主要的伪元素有四个:before/after/first-letter/first-line,在before/after伪元素选择器中,有一个conte ...
Web前端开发笔记——第三章 CSS语言第二节 CSS选择器
目录前言一.CSS选择器 (一)标签选择器 (二)id选择器 (三)类别选择器二.针对标签的选择器嵌套三.集体声明和全局声明 (一)集体声明 (二)全局声明结语前言 CSS代码由选择器和一 ...
html 响应式同一行,一行CSS实现各种响应式元素 – Fluidity
一行CSS实现各种响应式元素 – Fluidity 3月 31, 2014 评论 Sponsor FLUIDITY是一个极微小的CSS样式表,压缩版只有一行代码,大小只有115个字节,它能实现图像.文 ...
[css] 在页面上隐藏元素的方法有哪些？
[css] 在页面上隐藏元素的方法有哪些? position配合z-index; 或者 left/top/bottom/right : -100%:margin-left: -100%;width: ...
[css] 浏览器是怎样判断元素是否和某个CSS选择器匹配？
[css] 浏览器是怎样判断元素是否和某个CSS选择器匹配? 有选择器: div.ready #wrapper > .bg-red 先把所有元素 class 中有 bg-red 的元素拿出来组成 ...
[css] 请举例说明伪元素 (pseudo-elements) 有哪些用途？
[css] 请举例说明伪元素 (pseudo-elements) 有哪些用途? 可以不用再多写一个 dom可以用 content 搭配出很多效果例子:固定尺寸 2:1 的容器文本前后增加 icon 或 ...
[css] 如何让一个块元素绝对居中？
[css] 如何让一个块元素绝对居中? div{ position:fixed; right:0; left:0; bottom:0; top:0; margin: auto auto } 个人简介 ...
[css] padding会影响到元素的大小，那不想让它影响到元素的宽度应该怎么办？
[css] padding会影响到元素的大小,那不想让它影响到元素的宽度应该怎么办? box-sizing:border-box 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持 ...
你所不知的 CSS ::before 和 ::after 伪元素用法
CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思 ...

【第二部分 | CSS】2：点缀一下html元素

| 前言