【狂神说】CSS_狂神说css-CSDN博客

本文链接：https://blog.csdn.net/memory_share/article/details/115038200

CSS

学习目标

在这里插入图片描述

1.什么是CSS
2.CSS应该怎么用 -
3.CSS选择器（重点难点）
4.美化网页（文字、阴影、超链接、列表、渐变…） -
5.盒子模型
6.浮位
-7.定位
8.网页动画（特殊效果）

1.初识CSS

1.1什么是CSS

层叠样式表：Cascading Style Sheets 是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)

等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
CSS:表现

（美化网页）：字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…

在这里插入图片描述

1.2 CSS的发展史

CSS1.0 :19912月W3 了第一个有关样式的标准CSS1.0。这个版本中，已经包含了的相关font的相关属性、颜色与背景的相关属

性、文字的相关属性、box的相关属性等。

CSS2.0 DIV（块）+ CSS, HTML 和CSS结构分离，网页变得简单 SEO 1985年5月，CSS2.0正式推出。这个版本推荐的是内容和表

现效果分离的方式，并开始使用样式表结构。

CSS2.1 浮动、定位 2004年2月，CSS2.1正式推出。它在CSS2.0的基础上略微做了改动，删除了许多不被浏览器支持的属性。

CSS3.0 圆角、阴影、动画…

1.3 快速入门

创建文件格式

在这里插入图片描述

基础入门

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

    <!--规范  <style> 可以编写css代码，每一个声明最好用分号结尾
            语法：
                选择器{
                声明一；
                声明二；
                声明三；
                }
      -->
    <style>
        h1{
    
            color: brown;
        }
    </style>


</head>
<body>

<h1>这个是标题</h1>

</body>
</html>

一般不建议使用，html与css相分离

一般单独写一个css文件，在html中使用link标签引入

在这里插入图片描述

CSS的优势：

1.内容和表现分离
2.网页结构表现统一，可以实现复用
3.样式十分丰富
4.建议使用独立于html的css文件
5.利用SEO，容易被搜索引擎收录

1.4、CSS的三种导入方式

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
   
    <!--  内部样式  -->
    <style>
        h1{
            color: brown;
        }
    </style>
    
    <!--  外部样式  -->
    <link rel="stylesheet" href="css/style.css">
    
</head>
<body>
    
<!--三种样式优先级：就近原则-->
<!--行内样式： 在标签元素中，编写一个style属性，编写样式即可-->
    
<h1 style="color: cornflowerblue">这是一个标题</h1>
    
</body>
</html>

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

链接式：

link标签通过URL路径引入外部的CSS文件到HTML中，是一种HTML标签，属于书写HTML的语法，只能放在HTML源代码中使用。

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

导入式：

CSS 2.1中的@import；@import是在样式表定义中再引入外部的CSS文件，相当于一种样式，属于书写CSS的语法。

<style>
    @import "css/style.css";
</style>

区别：

两者都是外部引用CSS的方式，但是存在一定的区别。

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

区别2：link引用CSS时，在页面载入时同时加载；@import需要页面完全载入后才加载。

区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1中提出的，低版本的浏览器不支持。

区别4：link支持使用JavaScript控制DOM去改变样式；@import不支持这样的操作（JavaScript可以获取link标签元素，但获取不到

@import，因为@import只是一种CSS语法）。

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

2.选择器

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

2.1、基本选择器

1.标签选择器：标签选择器会选择到页面上的的这个标签的元素; 选择一类标签

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

    <style>
        /* 标签选择器会选择到页面上的的这个标签的元素  */
        h1  {
    
           color: cornflowerblue;
            background: aqua;
            border-radius: 20px;
        }p{
    
            font-size: 30px;
                 }
    </style>
</head>
<body>

<h1>CSS</h1>

<p>基本选择器</p>

</body>
</html>

2.类选择器 class ：选择所有class标签属性一致的标签，可以跨标签

类选择器的格式：.class的名称
好处：可以多个标签归类，是同一个class 可以复用

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

    <style>
        /* 类选择器的格式：.class的名称
            好处：可以多个标签归类，是同一个class 可以复用
        */
        .孙悟空{
    
            color: gold;
        }
        .齐天大圣{
    
            color: #1c2862;
        }
    </style>

</head>
<body>

<h1 class="孙悟空">标题一</h1>
<h1 class="齐天大圣">标题二</h1>
<h1 class="孙悟空">标题三</h1>

<p class="孙悟空">p标签</p>

</body>
</html>

3.id选择器：

id选择器：id必须保证全局唯一
语法： # id名称{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*  id选择器 ：id必须保证全局唯一
          语法：  # id名称{}

            三种选择器优先级：
            不遵循就近原则 ，是固定的
            id选择器>类选择器>标签选择器
        */
        #wudi{
    
            color: #958825;
        }
        .nan{
    
            color: aqua;
        }
        h1{
    
            color: blueviolet;
        }
    </style>

</head>
<body>

<h1 id="wudi">标题一</h1>
<h1 class="nan">标题二</h1>
<h1>标题三</h1>

</body>
</html>

三种选择器优先级：

不遵循就近原则，是固定的

id选择器>类选择器>标签选择器

2.2、层次选择器

后代选择器：在某个元素的后面祖爷爷—>爷爷----->爸爸----->儿子

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

    <style>
       /*后代选择器*/
        body p{
   
           background: aquamarine;
       } 
       

    </style>

</head>
<body>


    <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>
</body>
</html>

子选择器 ：一代儿子

		/* 子选择器*/
           body >p{
   
               background: yellow;
           }

相邻兄弟选择器（弟弟选择器）同辈向下最近的一个

/*弟弟选择器：只能选择一个，相邻（向下的）*/
    .active +p{
   
  background