从零吃透CSS（一）：CSS基础语法与样式美化

一、前言

CSS是用来美化我们的网页的，文字颜色、大小、链接特效都依靠它实现。本文作为CSS入门篇，我们先了解CSS的基础概念、引入方式，再系统学习各类选择器、文字样式、伪类与列表美化，打好前端样式开发的基础。

二、CSS基础认知与三种引入方式

1、什么是CSS

HTML+CSS+JavaScript=结构+表现+交互，前面我们已经学习了HTML，CSS（Cascading Style Sheet 层叠级联样式表）是用来修饰HTML网页样式的语言，用来控制页面字体、颜色、边距、布局等所有视觉效果，让单调的网页变得美观规整

2、CSS发展史与优势

CSS的出现实现了结构与样式分离：

·HTML只负责搭建结构

·CSS统一管理样式：极大提升了网页维护效率，一改早期HTML标签内嵌样式杂乱、难以修改的问题

3、CSS三种导入方式

（1）行内样式（优先级最高，不推荐大量使用）

在标签元素内，编写一个style属性来编写样式

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!-- 行内样式 -->
<h1 style="color:red">我是标题</h1>

</body>
</html>

（2）内部样式（当前页面生效<head标签中，仅对当前html页面有效

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 内部样式 -->
    <style>
        h1{
            color: green;
        }
    </style>

</head>
<body>

<!-- 行内样式 -->
<h1 style="color:red">我是标题</h1>

</body>
</html>

注意❗优先级为行内样式>内部样式>外部样式

（3）外部样式（开发最常用）

单独创建.css文件，通过link/import导入，多页面可共用一套样式

css 复制代码

/*外部样式*/
h1{
    color: blue;
}

-链接式：html link

html 复制代码

<!-- 外部样式 -->
<link rel="stylesheet" href="css/style.css">

-导入式：css import

css 复制代码

<!-- 导入式 -->
<style>
    @import url("css/style.css");
</style>

link和import语法结构不同，前者<link>是html标签，只能放入html源代码中使用，后者可看作为css样式，作用是引入css样式功能。import再html使用的时候需要<style type="text/css">标签，同时可以直接"@import url(CSS文件路径地址);"放css文件或css代码里引入其它css文件。

本质上两者使用选择区别不大，但为了软件中编辑布局网页html代码，一般使用link较多，也推荐使用link。

三、各类选择器详解（基本、层次、属性、结构伪类）

选择器的核心作用：精准选中页面元素，给它加样式

1、基本三大选择器

（1）标签选择器：选中所有同名标签，统一改样式

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    /*标签选择器，会选择到页面上所有的这个标签的元素*/
    h1{
      color: red;
    }
  </style>

</head>
<body>

<h1>学习Java</h1>
<h1>学习Python</h1>
<p>正在学习</p>

</body>
</html>

（2）类选择器class：灵活复用，一个类可给多个标签，开发最常用

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style>
    /*类选择器的格式 .class的名称{}
    好处，可以多个标签归类，是同一个class，可以复用 */
    .Java{
      color: blue;
    }
    .Python{
      color: green;
    }
  </style>

</head>
<body>

<h1 class="Java">学习Java</h1>
<h1 class="Python">学习Python</h1>
<h1 class="C++">学习C++</h1>

</body>
</html>

（3）ID选择器：唯一标识，只能用一次，优先级最高

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style>
    /*ID选择器：ID必须保证全局统一
     #ID名称{}
     不遵循就近原则，固定的
     */
    #编程语言{
      color: red;
    }
    .Java{
      color: green;
    }
    .Python{
      color: yellow;
    }
  </style>

</head>
<body>

<h1 class="Java" id="编程语言">学习Java</h1>
<h1 class="Python">学习Python</h1>
<h1 class="C++">学习C++</h1>

</body>
</html>

优先级：ID>class>标签

2、层次选择器

用于选择父子、兄弟、后代层级元素，精准控制局部样式，避免全局样式污染。包含：后代选择器、子代选择器、相邻兄弟、通用兄弟选择器。

（1）后代选择器：在某个元素后面祖爷爷爷爷爸爸你

html 复制代码

/*后代选择器*/
body p{
    background: red;
}

（2）子代选择器：一代儿子

html 复制代码

/*子代选择器*/
body>p{
    background: #3cbda6;
}

（3）相邻兄弟选择器同辈

html 复制代码

/*相邻兄弟选择器：只有一个，相邻（向下）*/
.active + p{
    background: #a13d30;
}

（4）通用选择器

html 复制代码

/*通用选择器，当前选中元素的向下的所有兄弟元素*/
.active~p{
    background: #02ff00;
}

3、属性选择器

根据标签身上的属性/属性值来选中元素，不用class、id，直接通过标签自带的属性筛选。

（1） $属性名$ 只要拥有这个属性就选中

选中所有带有title属性的标签

css 复制代码

[title]{
    color: red;
}

（2） $属性="值"$ 属性完全等于某个值（精准匹配）

选中type等于text的输入值

css 复制代码

input[type="text"]{
    border: 2px solid blue;
}

（3） $属性\^="开头"$ 值以指定字符开头

css 复制代码

a[href^="https"]{
    color: green;
}

所有外部链接文字变绿色

（4） $属性$="结尾"$ 值以指定字符结尾

css 复制代码

a[href$=".pdf"]{
    color: orange;
}

所有pdf文件链接变色

（5） $属性\*="包含"$ 值里面包含这段文字

css 复制代码

div[class*="box"]{
    background: pink;
}

只要class里面带有box就生效：box1、my-box全部匹配

4、结构伪类选择器

根据元素排列位置选择元素，例如选中第一个、最后一个、偶数行、奇数行元素，常用于表格隔行变色、列表特殊美化。

语法格式：父元素:伪类名{样式}

（1）:first-child

选中父元素里面的第一个子元素

css 复制代码

ul li:first-child{
    color: red;
}

效果：第一个li文字变红

（2）:last-child

选中父元素里面最后一个子元素

css 复制代码

ul li:last-child{
    color: blue;
}

效果：最后一个li文字变蓝

（3）:nth-child(n)

按序号选择，n从1开始

-:nth-child(2) → 第2个

-:nth-child(even) → 偶数行（2、4、6......）

-:nth-child(odd) → 奇数行（1、3、5......）

表格隔行变色最常用！！！

css 复制代码

/*奇数行灰色背景*/
tr:nth-child(odd){
    background: #eee;
}
/*偶数行白色*/
tr:nth-child(even){
    background: #fff;
}

（4）:nth-last-child(n)

倒着数，倒数第n个

:nth-last-child(1) = :last-child

四、字体、文本样式、阴影与超链接伪类

1、字体样式

常用核心属性：

-front-family：字体

-front-size：字体大小

-front-weight：字体粗细

-front-style：字体是否倾斜

2、文本样式

-颜色：color rgb rgba

-文本对齐的方式：text-align=center

-首行缩进：text-indent：2em

-行高：line-height：

-装饰：

下划线：text-decoration：underline；

中划线：text-decoration：line-through；

上划线：text-decoration：overline；

-文本图片水平对齐：vertical-align：middle

3、文本阴影

text-shadow 实现文字发光、阴影效果，提升文字层次感

4、超链接伪类

超链接四种状态顺序LVHA：

-link：未访问

-visited：已访问

-hover：鼠标悬浮（最常用）

-active：鼠标点击瞬间

利用伪类可以实现导航栏悬浮变色、按钮悬浮效果。

五、结语

本篇我们搞定了CSS的基础用法，学会了选中页面元素并且美化文字和链接。下一篇我们学习网页布局核心知识，掌握盒子模型、浮动和定位，实现完整页面排版。