第三章 CSS入门

目录

一、css的引入方式

1、外部样式表

2、内部样式表

3、内联样式表

4、引入其他的样式表

5、各样式表的优先级

二、css背景色

三、css背景图

1、background-size

2、background-position

3、background-repeat

四、文本标签

1、font-size 字体大小

2、text-family 文字字体

3、text-align 文字居中

4、line-height 行高

5、text-indent 首行缩进

6、letter-spacing 字体间距

7、text-decoration 文本装饰线

8、text-transform 字母大小写转换

---

一、css的引入方式

1、外部样式表

<link rel="stylesheet" href="css/test.css">

写在head标签中，链入外部样式表。

2、内部样式表

/* 内部样式表 */
<style>
    img {
        width: 200px;
    }
</style>

直接写在style标签中。

3、内联样式表

<!-- 内联样式表 -->
<div style="width:30px"></div>

直接在标签中设置css样式。

4、引入其他的样式表

@import url('css/test2.css');

也是直接写在style标签中，链入其他的样式。

5、各样式表的优先级

内部与外部样式表优先级取决于哪一个先引入，内联样式表的优先级最高。

二、css背景色

网页的三原色构成：红、绿、蓝。

背景颜色的三种表示方式：英文单词、二进制、rgba(red,green,blues,透明度)或者rgb。

设置网页背景透明：background-color 设置属性transparent。

三、css背景图

1、background-size

背景图的大小尺寸，基本属性：width、height。

两个特殊属性：contain 图片高占满父级，图片等比例变化

                         cover 图片宽占满父级，图片等比例变化

2、background-position

通过坐标轴设置图片的位置，x,y。网页的坐标轴原点在左上角，向右为x轴，向下为y轴。

3、background-repeat

设置图像平铺，三个属性：repeat-x 在x轴方向平铺；repeat-y 在y轴方向平铺；no-repeat 不平铺。

设置图片居中全屏：

background-size: cover;
background-position: center center;
background-repeat: no-repeat;

四、文本标签

1、font-size 字体大小

它有两个单位：px、em；em是指相对大小，相对于父元素的大小，相当于倍数，对父类设置字体大小为3px，则子类设置3em实际大小为9px，一般可以用作响应式开发，使得图片能够随屏幕大小的变化而变化。

2、text-family 文字字体

设置文字的字体样式。

3、text-align 文字居中

实现文本居中对齐显示。

4、line-height 行高

撑开文本标签的高度，当设置文本框高度等于行高时文字会垂直居中

/* 设置文本框高度 */
height: 20px;
/* 设置行高，使文本居中对齐 */
line-height: 20px;

5、text-indent 首行缩进

通常采用2em实现首行缩进两个字符。

6、letter-spacing 字体间距

直接设置具体像素值是设置文字的间距，word-spaing设置单词之间的间距。

7、text-decoration 文本装饰线

它有四个属性：underline 下划线、none 没有装饰线、overline上划线、line-through 删除线

对a标签设置none属性可以清除下划线。

8、text-transform 字母大小写转换

uppercase 转化为大写、lowercase转化为小写、capitalize首字母大写。