CSS3超详细学习笔记

最新推荐文章于 2024-04-20 09:51:11 发布

Barry_kk

最新推荐文章于 2024-04-20 09:51:11 发布

阅读量690

点赞数 1

分类专栏：前端三件套文章标签： css html java css3

本文链接：https://blog.csdn.net/Barry_kk/article/details/112800336

版权

本文详细介绍了CSS3，从基础到高级特性，包括选择器、盒子模型、浮动和定位等。内容涵盖CSS3的起源、优势、导入方式，以及各种选择器的使用，如基本选择器、层次选择器和属性选择器。同时，深入讲解了如何美化网页元素，如字体样式、文本阴影、背景图像和渐变。此外，还讨论了浮动元素和定位技术，包括相对定位、绝对定位和固定定位，以及解决浮动引起的父级边框塌陷问题的方法。

摘要由CSDN通过智能技术生成

一.什么是CSS

前提

HTML+CSS+JavaScript=结构+表现+交互

1.CSS的简单介绍

如何学习?

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

2.什么是CSS和发展史

Cascading Style Sheet 层叠级联样式表

CSS：表现（美化网页）

字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动
在这里插入图片描述

发展史：

css1.0

css2.0 ：DIV（块）+CSS，HTML和CSS结构分离的思想，网页变得简单

css2.1：浮动，定位

css3.0：圆角，阴影，动画… 浏览器兼容性

3.CSS的快速入门及优势

在这里插入图片描述

建议使用内容和表现分离格式！

css的优势

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

4.三种css导入方式

优先级（就近原则）：行内样式；内部样式；外部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index.html</title>
<!--    内部样式-->
    <style>
        h1{
    
            color: green;
        }
    </style>
<!--    外部样式 link-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--行内样式：在标签元素中编写一个style属性，编写样式即可-->
<h1 style="color: red">我是标题</h1>
</body>
</html>

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

二.选择器

5.三种基本选择器-重要

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

标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器，会选择到页面上所有的这个标签的元素
        标签{}*/
        h1 {
    
            color: #16f563;
        }
        p {
    
            font-size: 80px;
        }

    </style>
</head>
<body>
<h1>学java</h1>
<h1>学java</h1>
<p>听kk说</p>
</body>
</html>

类选择器 cass

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器格式
        .class的名称{}
        好处,可以多个标签归类，是同一个class
        */
        .kk{
    
            color: aliceblue;
        }
        .kk1{
    
            color: aqua;
        }
    </style>
</head>
<body>
<h1 class="kk">标题一</h1>
<h1 class="kk1">标题二</h1>
<h1 class="kk1">标题三</h1>
<p class="kk1">P标签</p>
</body>
</html>

id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* id选择器:id必须保证全局唯一！
        #id名称{}
        不遵循就近原则，固定的
        id选择器>class选择器>标签选择器
         */
    #kk{
    
        color: red;
    }
        .kk1{
    
            color: #16f563;
        }
h1{
    
color: blue;
}
    </style>
</head>
<body>

<h1 id="kk">标题一</h1>
<h1 class="kk1">标题二</h1>
<h1 class="kk1">标题三</h1>
<h1 >标题四</h1>
<h1 >标题五</h1>
</body>
</html>

6.层次选择器（高级）（次要）

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

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

子选择器,一代，儿子

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

相邻兄弟选择器同辈

/*相邻兄弟选择器*/
       .active + p{
   
           background: aquamarine;
       }
    </style>

通用兄弟选择器

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       /* p{*/
         /*   background: #16f563;*/
   /*     }*/
   /* 后代选择器body*/
      /* body>p{
           background: red;
       }*/
/*相邻兄弟选择器*/
       /*.active + p{
           background: aquamarine;
       }*/
       /*通用兄弟选择器，当前选中向下所有元素*/
       .active~p{
    
           background: blueviolet;
       }
    </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>
</body>
</html>

7.结构伪类选择器

伪类：条件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*ul的第一个元素*/
        ul li:first-child{
    
            background: antiquewhite;
        }
        /*ul的最后一个元素*/
        ul li:last-child{
    
            background: aqua;
        }
        /*2代表第二个*/
        p:nth-child(2){
    
            background: deeppink;
        }
    </style>
</head>
<body>
<p>p0