HTML & CSS - CSS入门 | 王富杰的博客

一、CSS初体验

当我们写了一个标题元素后，有增大增粗的效果，这是浏览器的默认样式，我们可以通过CSS来修改这个默认样式。CSS的代码可以写在html文档的<head>标签中，使用<style>标签包裹。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*  这是CSS的注释 */
        h1{
            color: yellow;
            background-color: red;
            text-align: center;
            font-size: 3em;
        }   
    </style>
</head>

<body>
    <h1>一级标题</h1>
</body>

</html>

如上所示，这是一段CSS代码，它修改了以及标题的颜色，背景色，居中显示和字体大小。其中 CSS 的注释使用 /**/ 。在 <style> 标签中这段代码称之为CSS规则。CSS规则由选择器和声明块组成。在这个实例中，h1就是选择器，它决定我们的样式应用到哪些元素上。

二、基础选择器

选择器的基本写法有三种，分别是元素选择器、id选择器，类选择器。

2.1、元素选择器

元素选择器是直接写上元素的名字，使用了元素选择器后，页面上所有的该元素都会应用这个CSS样式。

p{
    color: yellow;
}

如上，页面上所有的p元素的颜色都会被设置为红色。因此元素选择器的范围是很大的。

2.2、id选择器

id选择器是选择对应id值的选择。我们知道没有元素都可以有id属性，它在整个文档中是唯一的。

#debug{
         font-size: 2em;
    }

<body>
    <p>Lorem, ipsum dolor.</p>
    <p id="debug">Natus, nobis reprehenderit.</p>
    <p>Eos, vero fugit?</p>
</body>

如上所示，第二个段落的字体会被变大。这里注意，id是唯一的，但是你如果非要写成让它不唯一，浏览器会把这多个元素都应用CSS样式，但是你不应该这么做。另外 id选择器不能以数字开头，以数字开头的id选择器是无效的。

2.3、类选择器

当需求给两个不一样的标签设置同一个样式时，id选择器和元素选择器就做不到了，这时候就需要用到类选择器，它是给元素进行分类的。示例如下：

<head>
    <style>
        /*  这是CSS的注释 */
       .blue{
        color: blue;
       }
    </style>
</head>

<body>
    <h1 class="blue">一级标题</h1>
    <p>Lorem, ipsum dolor.</p>
    <p class="blue">Natus, nobis reprehenderit.</p>
    <p>Eos, vero fugit?</p>
</body>

如上这个代码会把标题和第二个段落的字体修改为蓝色。类属性使用class定义，如果想把一个元素字体改为蓝色，只需要给他加上class属性。一个元素还可以应用多个类选择器，多个类名使用空格隔开即可。如 <p class="blue center">Lorem, ipsum dolor.</p>

三、CSS的书写位置

第一种书写css的位置是内部样式表，写在html文档内部，使用<style>标签，我们一般他在写在<head>中，这样页面加载会先加载css代码，后面加载页面内容是就是美化后的效果。

第二种书写css的位置是内联样式表，它直接写在元素的style属性中,如下。

<h1 style="color: bule; font-size: 2em">一级标题</h1>

第三种书写css的位置是外部样式表，它写在独立的css文件中，在独立的css文件中直接写规则就可以了。然后在html文档中引用这个css文件。

<head>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <h1 class="blue">一级标题</h1>
</body>

如上所示，在link标签中就可以把css文件加载到页面中。link标签的rel属性代表的引用的哪种格式文件，stylesheet就是样式表。外部样式表是最推荐的方式，它可以解决样式重复的问题。这样不同的页面如果存在相同的样式，就都加载一个同一个css文件就行了。外联样式表还有两个好处是结构和样式分离、有利于浏览器缓存，缓存了css文件下次加载就可以直接使用缓存，提高了页面的响应速度。

四、基础样式声明

这里我们介绍几个常用的样式。

color: 设置元素内部文字的颜色，可以选择css的预设值，即设定好的颜色单词如 red blue等。更多颜色可以使用色值(三原色)如 rgb(255, 255, 255)就是白色。还可以使用16进制表示法如 #fffffff，如果十六进制是 ##aabbcc 的格式，就可以简写为 #abc
background-color: 设置元素的背景颜色
font-size: 设置元素内部文字大小，它有以下几种单位来表示。如果元素没有声明字体大小则使用父元素的字体大小，如果没有父元素则使用基准字号，即浏览器设置的字体大小。
- px: 像素，即文字高度所占的像素数量
- em: 相对父元素的字体大小
font-weight: 设置文字粗细效果，它有100~900的预设值，还有预设单词，例如normal相当于400，bold相当于700。有时会发现设置600~900是一样的，这是因为字体本身设计了就三种粗细程度。
font-family: 用来设置字体，如宋体、微软雅黑等，可以设置多个字体使用逗号隔开。浏览器会按照先后顺序来查找电脑上已有的字体。
- 非衬线字体，即文字边缘没有修饰的字体，因此font-family最后可以设置一个 sans-serif。即在电脑找找一个非衬线字体。操作系统都有自己默认的非衬线字体。
font-style: 设置字体样式，通常用于设置字体倾斜。
letter-spacing: 设置文字间隙
text-align: 设置文字内部水平对齐方式
text-indent: 设置首行缩进
text-decoration: 用来给文本加线，可以是上划线，中划线、下划线。
height: 设置元素的高
width: 设置元素的宽
line-height: 设置文本的行高，一般使用em单位，想对于当前元素的字体大小。当文本行高和元素高度一样时，文字就会垂直居中

以上均为一些常用样式，可以在浏览器中调试样式和查看计算后的最终样式。

「真诚赞赏，手留余香」

HTML & CSS - CSS入门

CSS入门