CSS 01：基础

.CSS 介绍

CSS 可以对网页（html）进行修饰,美化，改变字体大小颜色，间距和加入边框等。

1.使用方法

（1）直接写在标签里（行列样式）

<p style="color: blue;font-size: 2px">我是天才</p>

（2）写在 style 标签内（内部样式）

将 style 写在 head 内

<style>
        span {
            color:gold;
            font-size: 24px;
        }
    </style>

（3）使用外部 .css 文件（外部样式）

<link rel="stylesheet" href="css_1.css">

再创建一个 css 路径，保存字体颜色

span {
    color:skyblue;
}

（4）使用方式的优先级

行列样式 > 内部样式=外部样式

而内部样式和外部样式采用就近原则，谁离得近就采用哪种方法

二.CSS 选择器

1.简单选择器

（1）标签选择器

在样式前加上标签

 p {
        color:blue;
    }

（2）id 选择器（ id 是唯一的）

给标签命名，并在样式前加上 #

<p id="p2">五一去哪玩</p>

#p2 {
       color:green;
    }

（3）class 选择器（ class 不是唯一的）

先将标签赋予 class 后，再在样式前加上 .

<p class="p3">五一去哪玩</p>
<p class="p3">五一去哪玩</p>

.p3 {
        color:red;
    }

（4）全选选择器（*）

样式前加 *

* {
        font-size: 24px;
   }

注：选择器都是在 head 中的 style 中

2.复杂选择器

<div id="box">
    <p> 晚上去玩 </p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            晚上去玩 </p>
    <p id="p1">
        不然就睡觉
        <span>
            打王者
        </span>
    </p>
    <p> 晚上去玩 </p>
    <p> 晚上去玩 </p>
    <span>
        我是结尾
    </span>

</div>
<p name="p2">我是结尾</p>

（1）群组选择器（逗号）

可以同时使用 id ，class 等等多种选择器，只需在中间加上逗号

<style>
        div,p {
            color:yellow;
        }
</style>

（2）子代选择器（>）

子代就是盒子里的 p,p,span 标签

div>span {
            color:red;
        }

对盒子里的子代进行修改，美化

（3）后代选择器（空格）

后代是指 div 盒子中的所有后代

div span {
            color:yellow;
        }

（4）兄弟选择器（~）

兄弟选择器是指 id 为 p1 的 p 标签兄弟，而代码从上往下执行，所以只会让在下面的字体颜色改变

#p1 ~ p {
            color:pink;
        }

（5）相邻选择器（+）

只会改变代码以下字体的样式

#p1 + p {
            color:purple;
        }

（6）属性选择器（【】）

 p[name="p2"] {
            color:blue;
        }

3.伪类选择器

（1）未访问时的状态（link）

a:link {
            color:yellow;
        }

（2）鼠标悬浮时的状态（hover）

a:hover {
            color:blue;
        }

（3）鼠标激活时状态（active）

a:active {
            color:green;
        }

（4）访问过后的状态（visited）

a:visited {
            color:red;
        }

三.CSS 字体，文本和背景

1.字体样式

（1）字体大小（font-size）

p {
      /*字体大小*/
      font-size: 24px;
  }

（2）加粗（font-weight）

font-weight: bold;

或

font-weight:700;

（3）斜体（font-styl）

font-style: italic;

（4）字体（font-famil）

font-family: 楷体;

（5）字母大小写（font-variant）

font-variant: all-small-caps;

（6）复合样式

一次性将需要改变的进行改变（需要就写，不需要就不用写），且格式有所规定，

字体样式-字体加粗-字体大小-字体类型

font: italic bold 24px '宋体';

2.文本样式

（1）对齐方式（text-align）

text-align: center;

（2）首行缩进（text-indent）

text-indent: 2em;

（3）下划线（text-decoration）

text-decoration: underline;

（4）删除线（text-decoration）

text-decoration: line-through;

（5）字体间距（letter-spacing）

letter-spacing: 10px;

（6）词距（word-spacing）

word-spacing: 10px;

（7）行高（line-height）

line-height: 20px;

3.背景样式

（1）背景颜色（background-color）

background-color: blue;

（2）背景图片（background-image）

background-image: url("../image/03.jpg");

（3）背景大小（background-size）

第一个表示宽度，第二个表示高度

background-size: 100px 50px;

（4）背景平铺（background-repeat）

background-repeat:no-repeat ;

（5）背景定位（background-position）

background-position:center ;

（6）复合样式（background）

规范顺序为：颜色背景图是否平铺定位大小

background: skyblue url("../image/03.jpg") no-repeat center/100px 50px;

附（今日学习）：

简单选择器：

复杂选择器：

伪类选择器：

字体样式：

文本样式：

背景：

1.后代选择器

用于选取元素内部的元素。

语法：选择器选择器

例，选择并设置位于 <div> 元素内部的每个 <p> 元素的样式：

div p{color:yellow;}

2.子选择器:

用于选择指定标签元素的第一代子元素。

语法：选择器>选择器

div>p{color:yellow;}

注意：

派生选择器与子选择器的区别：

子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。

3.通用选择器

通用选择器:是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，

例：html中任意标签元素字体颜色全部设置为红色：

* {color:red;}

4.群组选择器

当你想为html中多个标签元素设置同一个样式时，可以使用群组选择器。

例：h1、span标签同时设置字体颜色为红色：

h1,span{color:red;}

它相当于下面两行代码：

h1{color:red;}

span{color:red;}

5.属性选择器

依据标签属性来选择标签元素，<=IE6不支持

实例:

HTML：

复制代码

CSS：

h1[title]{color:red}/*第二个第三个h1字体为红色*/

h1[title="head"]{color:green}/*第二个h1字体为绿色*/

h1[title="head2"][align="center"]{color:blue}/*第三个h1字体为蓝色*/

lt;!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>vh / vw 与字体图标</title>

<link rel="stylesheet" href="my_ico.css" />

<link rel="stylesheet" href="font_ico/iconfont.css">
<style>
/* 视口：可视窗口，手机端为了显示全PC页面，默认为980px */
/* 布局视口，只页面底层的设置，看不见 */
/* 视频视口，只页面上的设置，直观可见 */
/* 完美视口，只页面完美配置设备窗口大小1：1显示 */
/* vh: 1vh=视口高度的 1 / 100 ，vh(view height) */
/* vh: 1vw=视口宽度的 1 / 100 ，vw(view width) */
.box {
background-color: seagreen;
width: 50vw;
height: 25vh;
margin: auto; /* 页面盒子始终在页面中间，高度无法实现居中 */
}
.iconfont2 {
color: seagreen;
font-size: 55px;
/* background-color: slateblue; */
}
.icon-auto{
color: rgb(255, 0, 212);
font-size: 55px;
}
</style>
</head>
<body>
<div class="box"></div>

<span class="iconfont2"></span>
<br><p></p>

<span class="iconfont icon-auto"></span>
</body>
</html>

vh / vw 居中布局

字体图标使用方法

在线咨询

上一篇：GitHub 上竟然也能画流程图了？
下一篇：用 CSS 实现平行四边形分页导航

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS 01：基础

.CSS 介绍

二.CSS 选择器

三.CSS 字体，文本和背景

您的项目需求