CSS学习笔记之样式声明

在这篇文章中你能看到有关于 CSS 样式设置的常用属性，文章的目录如下：

1、背景
2、文本
3、字体
4、轮廓

1、背景

（1）背景颜色

可以使用 background-color 属性为元素设置背景颜色，它接受任何合法的颜色值，默认是 transparent

注意，background-color 属性不能继承

（2）背景图片

可以使用 background-image 属性为元素设置背景图片，它接受任何合法的 URL，默认是 none

注意，background-image 属性不能继承

（3）背景重复

可以使用 background-repeat 属性对背景图像进行平铺，其可选值如下：

repeat：默认值，在水平方向和垂直方向上都平铺
repeat-x：在水平方向上平铺
repeat-y：在垂直方向上平铺
no-repeat：不允许图像在任何方向上平铺

（4）背景位置

可以使用 background-position 属性改变图像的位置，其可选值如下：

top：默认值，将背景图片定位到上方
bottom：将背景图片定位到下方
left：默认值，将背景图片定位到左方
right：将背景图片定位到右方
center：将背景图片定位到中间

（5）背景大小

可以使用 background-size 属性改变图像的大小，其可选值如下：

cover：背景图像完全覆盖背景区域，但是图像的某些部分可能无法显示
contain：背景图像完全适应内容区域
长度
百分数值

<!DOCTYPE HTML>

<html>

<head>

    <style>

        body {

            background-image: url(https://cdn.pixabay.com/photo/2015/06/08/14/52/wave-801752_960_720.jpg);

            background-repeat: no-repeat;

            background-position: top left;

            background-size: cover;

        }

    </style>

</head>

<body>

    <h3>面朝大海，春暖花开</h3>

</body>

</html>

2、文本

（1）文本颜色

可以使用 color 属性设置文本颜色，它接受任何合法的颜色值

（2）行间间隔

可以使用 line-height 属性设置行间的距离，其可选值如下：

normal：默认值，定义标准的行间间距
长度：设置固定的行间间距
数字：将此数字与当前字体尺寸相乘来确定行间间距
百分数值：规定基于当前字体尺寸的百分比行间间距
inherit：从父元素继承

（3）字间间隔

可以使用 letter-spacing 属性改变字间的间隔，其可选值如下：

normal：默认值，定义标准的字间间距
长度：设置固定的字间间距，接受一个正或负的长度值，若为正，则增大字间距离；若为负，则减小字间距离
inherit：从父元素继承

（4）文本对齐

可以使用 text-align 属性控制元素中的文本对齐方式，其可选值如下：

left：左对齐，即把文本排列到左边，默认值
right：右对齐，即把文本排列到右边
center：居中对齐，即把文本排列到中间
justify：两端对齐，常用于设置打印格式
inherit：从父元素继承

（5）处理空白

可以使用 white-space 属性定义处理空白的规则，这里的空白指的是空格和回车，其可选值如下：

normal：默认值，合并空格，忽视回车，允许自动换行
nowrap：合并空格，忽略回车，不允许自动换行
pre：保留空格，保留回车，不允许自动换行
pre-wrap：保留空格，保留回车，允许自动换行
pre-line：合并空格，保留回车，允许自动换行
inherit：从父元素继承

<!DOCTYPE HTML>

<html>

<head>

    <style>

        .title {

            color: deeppink;

            text-align: center;

            letter-spacing: 3px;

        }

        .author {

            color: hotpink;

            text-align: right;

            line-height: 28px;

            white-space: nowrap;

        }

        .contain {

            color: cornflowerblue;

            text-align: left;

            line-height: 28px;

            white-space: pre-line;

        }

    </style>

</head>

<body>

    <h3 class="title">面朝大海，春暖花开</h3>

    <p class="author">

        —— 海子

    </p>

    <p class="contain">

        从明天起，做一个幸福的人

        喂马，劈柴，周游世界

        从明天起，关心粮食和蔬菜

        我有一所房子，面朝大海，春暖花开

        从明天起，和每一个亲人通信

        告诉他们我的幸福

        那幸福的闪电告诉我的

        我将告诉每一个人

        给每一条河每一座山取一个温暖的名字

        陌生人，我也为你祝福

        愿你有一个灿烂的前程

        愿你有情人终成眷属

        愿你在尘世获得幸福

        我只愿面朝大海，春暖花开

    </p>

</body>

</html>

（6）文本阴影

可以使用 text-shadow 属性设置文本阴影效果，其可选值如下：

h-shadow：必需，水平阴影的位置
v-shadow：必需，垂直阴影的位置
blur：可选，模糊距离
color：可选，阴影颜色

<!DOCTYPE HTML>

<html>

<head>

    <style>

        h1 {

            text-shadow: 5px 5px 5px #888888;

        }

    </style>

</head>

<body>

    <h1>你好，世界</h1>

</body>

</html>

（7）文本修剪

可以使用 text-overflow 属性规定当文本溢出时发生的动作，其可选值如下：

clip：直接修剪文本
ellipsis：显示省略符号来代表被修剪的文本
string：显示给定的字符串来代表被修剪的文本

<!DOCTYPE HTML>

<html>

<head>

    <style>

        div {

            width: 300px;

            white-space: nowrap;

            overflow: hidden;

            text-overflow: ellipsis;

            border: 1px solid black;

        }

    </style>

</head>

<body>

    <div>如果这是一段很长很长的文字，那么就会溢出</div>

</body>

</html>

3、字体

（1）字体系列

可以使用 font-family 属性指定字体系列，在 CSS 中存在两种字体系列：

通用字体系列：serif、sans-serif、monospace、cursive、fantasy
特定字体系列：例如 Times、Courier 等等

（2）字体风格

可以使用 font-style 属性设置字体风格，其可选值如下：

normal：文本正常显示
italic：文本斜体显示
oblique：文本倾斜显示
inherit：从父元素继承

（3）字体加粗

可以使用 font-weight 属性设置字体粗细，其可选值如下：

normal：默认值，定义标准字符
bold：定义粗体字符
bolder：比父元素更粗
lighter：比父元素更细
inherit：从父元素继承
从 100 到 900 的整百数字

（4）字体大小

可以使用 font-size 属性设置字体大小，其可选值如下：

xx-small
x-small
small
medium
large
x-large
xx-large
smaller：比父元素更小
larger：比父元素更大
长度
百分数值

<!DOCTYPE HTML>

<html>

<body>

    <p>正常文本</p>

    <p style="font-family: cursive">草书</p>

    <p style="font-style: italic">斜体</p>

    <p style="font-weight: bold">粗体</p>

    <p style="font-size: large">大字</p>

</body>

</html>

4、轮廓

（1）颜色

可以使用 outline-color 属性设置轮廓颜色，它接受任何合法的颜色值

（2）样式

可以使用 outline-style 属性设置轮廓样式，其可选值如下：

none：无轮廓，默认值
dotted：点状轮廓
dashed：虚线轮廓
solid：实线轮廓
double：双线轮廓
inherit：从父元素继承

（3）宽度

可以使用 outline-width 属性设置轮廓宽度，其可选值如下：

thin：细轮廓
medium：中等轮廓
thick：粗轮廓
长度：指定固定的轮廓粗细
inherit：从父元素继承

（4）简写属性

为了方便，我们可以只在 outline 属性中设置所有有关轮廓的属性，它们的排列顺序如下：

outline-color
outline-style
outline-width

<!DOCTYPE HTML>

<html>

    <style>

    h1 {

        color: deeppink;

        text-align: center;

        outline: cornflowerblue solid thin;

    }

    </style>

<body>

    <h1> 面 朝 大 海 ， 春 暖 花 开 </h1>

</body>

</html>

【阅读更多 CSS 系列文章，请看 CSS学习笔记】