前端基础02：CSS

Liangxt1997

已于 2022-11-07 23:50:52 修改

阅读量486

点赞数

分类专栏：前端入门文章标签： css 前端 css3

于 2022-10-15 22:04:37 首次发布

本文链接：https://blog.csdn.net/m0_61467488/article/details/127231944

版权

学习路线

什么是CSS
CSS怎么用 (快速入门)
CSS选择器 (重点 + 难点)
美化网页 (文字，阴影，超链接，列表，渐变…)
盒子模型
浮动
定位
网页动画 (特效效果)

一、什么是CSS

CSS：Cascading Style Sheets 层叠样式表
发展史
- CSS 1.0
- CSS 2.0
  - DIV (块) + CSS
  - HTML 与 CSS 结构分离的思想，网页变得简单
  - SEO (搜索引擎优化)
- CSS 2.1
  - 浮动、定位
- CSS 3.0
  - 圆角、阴影、动画…
  - 浏览器兼容性
作用：美化网页
- 字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…
CSS的优势
1. 内容和样式分离。
2. 网页结构表现统一，可以实现复用。
3. 样式非常丰富。
4. 利于SEO，容易被搜索引擎收录。(使用Vue前端框架就很难被搜索引擎收录)

二、快速入门

1. 练习格式

在这里插入图片描述

2. 基本入门

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

    <!--style：可以编写css的代码
        规范：在head标签中，每一个声明最好使用分号结尾。
        语法：
            选择器{
                    声明1;
                    声明2;
                    声明3;
            }
    -->
    <style>
        h1{
     
            color: blue;
        }
    </style>

</head>
<body>

	<h1>我是标题</h1>

</body>
</html>

3. HTML、CSS结构分离 (推荐使用)

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

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

</head>
<body>

	<h1>我是标题</h1>

</body>
</html>

h1{
   
    color: blue;
}

4. CSS的三种导入方式

内部样式
外部样式
行内样式

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

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

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

</head>
<body>

	<!--行内样式：在标签元素中，添加一个style属性，编写样式即可。-->
	<h1 style="color: red">我是标题</h1>

</body>
</html>

/*外部样式：css/style.css*/
h1{
   
    color: yellow;
}

优先级
- 就近原则：即谁离目标更近，就执行哪种样式。
- 也可理解为覆盖原则：离目标最近的样式覆盖了前面的样式。

拓展：外部样式的两种写法

链接式 (推荐)

<!--链接式-->
<link rel="stylesheet" href="css/style.css">

导入式

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

三、选择器 (重点)

作用：选择页面上的某一个或者某一类元素。

1. 基本选择器 (重点)

标签选择器

标签{}
选择一类标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>

    <style>
        /*标签选择器，会选择到页面上此标签的所有元素。*/
        h1{
       
            color: #ff0000;
            background: bisque;
            border-radius: 10px;
        }
        p{
       
            font-size: 80px;
        }
    </style>

</head>
<body>
	
	<h1>学Java</h1>
	<h1>学Java</h1>
	<p>听狂神说</p>

</body>
</html>

类选择器

.class{}
选择所有class属性一致的标签。
可跨标签使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>

    <style>
        /*类选择器的格式；.class的名称{}
          好处：可以将多个标签归类为同一个class，使用同一种格式。
            */
        .qinjiang{
       
            color: aqua;
        }
        .kuangshen{
       
            color: chartreuse;
        }
    </style>

</head>
<body>
	
	<h1 class="qinjiang">标题1</h1>
	<h1 class="kuangshen">标题2</h1>
	<h1>标题3</h1>
	
	<p class="kuangshen">正文</p>

</body>
</html>

id选择器

#id{}
全局唯一，不能重复使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>

    <style>
        /* id选择器的格式：#id名称{}
           id必须保证全局唯一！不能重复使用！
         */
        #qinjiang{
       
            color: pink;
        }
        .style1{
       
            color: green;
        }
        h1{
       
            color: blueviolet;
        }
    </style>

</head>
<body>

	<h1 class="style1" id="qinjiang">标题1</h1>
	<h1 class="style1">标题2</h1>
	<h1 class="style1">标题3</h1>
	<h1>标题4</h1>
	<h1>标题5</h1>

</body>
</html>

优先级
- 不遵循就近原则，精准度越高优先级越高。
  即，id选择器 > 类选择器 > 标签选择器。

2. 层次选择器

后代选择器
- 选择此标签下的所有标签。
子选择器
- >
- 选择此标签下一级的所有标签。
相邻兄弟选择器
- +
- 选择此标签同级的下一个标签。
通用兄弟选择器
- ~
- 选择此标签同级的后面的所有标签。

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

    <style>
        /*后代选择器*/
        body p{
     
            background: red;
        }
        /*子选择器*/
        body>p{
     
            background: blue;
        }
        /*相邻兄弟选择器*/
        .active+p{
     
            background: blueviolet;
        }
        /*通用兄弟选择器*/
        .active~p{
     
            background: bisque;
        }
    </style>

</head>
<body>

	<p>p0</p>
	<p class="active">p1</p>
	<p>p2</p>
	<p>p3</p>
	<ul>
	    <li>
	        <p>p4</p>
	    </li>
	    <li>
	        <p>p5</p>
	    </li>
	    <li>
	        <p>p6</p>
	    </li>
	</ul>
	<p class="active">p7</p>
	<p>p8</p>
	<p>p9</p>

</body>
</html>

3. 结构伪类选择器

是针对HTML层次“结构”的伪类选择器，通过元素的特定位置从而进行定位，减少 HTML文档对ID或者类名的定义。
伪类：在:后添加一些条件。

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

    <style>
        /*ul的第一个子元素*/
        ul li:first-child{
     
            background: red;
        }
        /*ul的最后一个子元素*/
        ul li:last-child{
     
            background: chartreuse;
        }

        /*p:nth-child(n)：定位到父元素，再选择第n个子元素。
          如果父元素的第n个子元素不是p标签，则不生效。*/
        p:nth-child(3){
     
            background: blueviolet;
        }
        /*p:nth-of-type(n)：定位到父元素，再选择第n个类型为p的子元素*/
        p:nth-of-type(2){
     
            background: pink;
        }

        /*hover：鼠标悬停效果*/
        a:hover{
     
            background: black;
        }

    </style>

</head>
<body>

    <a href="">123123</a>
    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>

</body>