一.添加样式

1.为网页添加样式

ctrl + ?:文本内容CSS中的注释。

术语解释

h1{
    color: red;
    background-color: lightblue;
    text-align: center;
}

CSS规则:选择器 + 声名块

选择器

选择器:用来选中元素。

  1. ID选择器:选中对应id值的元素。
  2. 元素选择器
  3. 类选择器:
    <p class="big-center red">Doloribus temporibus tempora odio iure.</p>

声名块

出现在大括号中,声名块中包含很多属性(声名),每个属性表达了每一个样式规则。

CSS代码书写位置

  1. 内部样式表

书写在style元素中。(写在head中)

  1. 内联样式表(元素样式表)
    <h1 style="color: red;background-color: blue;text-align: center;">
        中国军事网
    </h1>

直接写在元素的style属性中。

  1. 外部样式表(主流)

将样式写到独立的css文件中。

link元素为空元素,无结束标记。

    <link rel="stylesheet" href="./CSS/index.css">
<body>
    <div class="red-big-center">
        Lorem ipsum dolor sit amet.
    </div>
</body>
  1. 外部样式表可解决多页面样式重复的问题。
  2. 有利于浏览器缓存,从而提高页面响应速度。
  3. 有利于代码分离(HTML和CSS),更容易与阅读和维护。

2.常见样式声明

1.color

元素内部的文字颜色。

预设值:定义好的单词。

三原色,色值:(红,绿,蓝),每个颜色可以使用0–255之间的数字来表达。

rgb();hex();

淘宝红:#ff4400;黑色:#000000;白色:#ffffff;红色:#ff0000

紫色:#ff00ff;青色:#00ffff;黄色:#ffff00;灰色:#ccc

2.bankground-color

元素背景颜色

3.font-size

元素内部文字的尺寸大小

(1)px:是绝对单位,像素(文字的大小,所占的像素);

(2)em:是相对单位,相对于父元素的字体大小。

每个元素必须有字体大小,若没有声明,则直接使用父元素

的字体大小。如果没有父元素,则使用基准字号。

use agent(UA):用户代理(浏览器)

4.font-weight

文字粗细程度,可以取值数字,可以取值为预设值。

bold(700):加粗

normal:正常

strong元素默认加粗。

5.font-family

文字类型,计算机中存在的字体才会生效。

使用多个字体,以匹配不同环境。

        /* CSS规则 */
        div{
            font-family: 楷体,sans-serif;
        }

sans-serif:非衬线字体(边缘没有经过修饰)

6.font-style

字体样式,通常用来设置斜体

i元素,em元素默认字体是倾斜字体(表示特殊文本,专业术语等),实际使用中通常用它表示一个图标(icon)

7.text-decoration

文本修饰给文本加线

del元素:错误的内容。
s元素:过期的内容。

8.text-indent

首行文本缩进(像素,文字)

8.line-height

每行文本的高度(该值越大,行于行之间的距离越大)

设置行高为容器的高度,可以让文本垂直居中。

行高可以设置为纯数字,表示相对于当前元素的字体大小。

10.width

设置内容宽度

11.height

设置内容高度

12.letter-space

文字间隙

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*单行文本垂直居中*/
        p{
            background-color: #008c8c;
            color: white;
            height: 50px;
            width: 1920px;
            line-height: 50px;
            letter-spacing: 1em;
            text-align: center;
        }
    </style>
</head>
<body>
    <p>
        Lorem ipsum dolor sit amet.
    </p>

13.text-align

元素内部文字的水平排列方式

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页