CSS学习笔记(三) 样式声明

时间 2020-05-09

标签 css 学习笔记样式声明栏目 CSS 繁體版

原文原文链接

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

[TOC]学习

一、背景

（1）背景颜色

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

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

（2）背景图片

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

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

（3）背景重复

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

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

（4）背景位置

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

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

（5）背景大小

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

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>

二、文本

（1）文本颜色

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

（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>

三、字体

（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>

四、轮廓

（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学习笔记】