CSS3基础知识通俗易懂

最新推荐文章于 2022-02-19 14:56:32 发布
最新推荐文章于 2022-02-19 14:56:32 发布
阅读量233 收藏 1
点赞数
分类专栏： 前端基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45366447/article/details/113242584
版权

一、概述

如何学习

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

1、什么是CSS

Cascading Style Sheet层叠级联样式表

CSS： 表现（美化网页）

字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动

css的优势：

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

2、快速入门

HTML与CSS写在同一个文件下：

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

<!--    规范： <style>  编写css代码    每一个声明最好使用分号结尾
        语法： 
            选择题{
                声明1;
                声明2;
                声明3;
            }
-->
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>

<h1>我是标题</h1>

</body>
</html>

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: red;
}

在这里插入图片描述

3、3种CSS导入方式

  • 行内样式
  • 内部样式
  • 外部样式–推荐使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--        内部样式-->
    <style>
        h1{
            color: blue;
        }
    </style>
<!--    外部样式-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<!--优先级：就近原则（距离标签最近的生效）-->

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

</body>
</html>

h1{
    color: green;
}

扩展： 外部样式两种写法

  • 链接式：html
<!--    外部样式-->
<link rel="stylesheet" href="css/style.css">
  • 导入式：css2.1特有
<style>
    @import url("css/style.css");
</style>

二、选择器

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

1、基本选择器

  • 标签选择器：选择一类标签 标签{}
  • 类选择器：选择所有class属性一致的标签，可跨标签 .类名{}
  • id选择器： 全局唯一！ #id名{}
  • 优先级： id选择器>类选择器>标签选择器
1.1 标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*标签选择器，会选择到页面上所有标签*/
        h1{
            color: #4414ff;
            background-color: wheat;
            border-radius: 10px;
        }
        p{
            font-size: 50px;
        }
    </style>

</head>
<body>

<h1>Java</h1>
<h1>Java</h1>
<p>上小破站</p>

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

    <style>
        /* 类选择器的格式： .class的名称{} */
        .ah1{
            color: wheat;
        }
        .ah2{
            color: #4ffffa;
        }
    </style>

</head>
<body>

<h1 class="ah1">标题1</h1>
<h1 class="ah2">标题2</h1>
<h1 class="ah1">标题3</h1>
<p class="ah1">P标签</p>
</body>
</html>
1.3 id选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* id选择器 ：  id必须保证全局唯一！！！
            #id名称{}
            优先级： id选择器>类选择器>标签选择器
        */
        #aaa{
            color: aquamarine;
        }
        .a{
            color: greenyellow;
        }
        h1{
            color: red;
        }
    </style>
</head>
<body>

<h1 id="aaa" class="a">标题1</h1>
<h1 class="a">标题2</h1>
<h1 class="a">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>

</body>
</html>

2、层次选择器

  • 后代选择器 在某个元素后面 祖爷爷 爷爷 爸爸 你
/* 后代选择器*/
body p{
    background-color: red;
}
  • 子选择器 一代 儿子
/* 子选择器*/
body>p{
    background-color: green;
}
  • 相邻兄弟选择器 只有一个（向下）
/* 兄弟选择器*/
.active+p{
    background-color: wheat;
}
  • 通用选择器 当前选中元素的向下的所有兄弟元素
/* 通用选择器*/
.active~p{
    background-color: wheat;
}

在这里插入图片描述

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

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

        /* 子选择器*/
        /*body>p{*/
        /*    background-color: green;*/
        /*}*/

        /* 兄弟选择器*/
        /*.active+p{*/
        /*    background-color: wheat;*/
        /*}*/

        /* 通用选择器*/
        .active~p{
            background-color: wheat;
        }
    </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>
</body>
</html>

3、结构伪类选择器

伪类： ---->条件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--避免使用.class #id-->
    <style>
       /* ul的第一个子元素*/
       ul li:first-child{
           background-color: #4414ff;
       }
       /* ul的最后一个子元素*/
        ul li:last-child{
            background-color: wheat;
        }
        /* 只选中p1:   定位到父元素，选择当前的第一个元素
        选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才会生效
        即： 若body中在p1前有个h1标签，则需要p:nth-child(2)  样式才能生效
        */
        p:nth-child(2) {
            background-color: red;
        }

        /* 选中父元素下的p元素的第二个*/
        p:nth-of-type(2) {
            background-color: yellow;
        }

    </style>

</head>
<body>
<h1>h</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
</body>
</html>

在这里插入图片描述

4、属性选择器

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

    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 4px;
            background-color: wheat;
            text-align: center;   /* 水平居中*/
            color: red;
            text-decoration: none;
            margin-right: 10px;
            font: bold 20px/50px Arial; /* 粗体 大小 字体 */
        }

        /*
            属性名，    属性名=属性值（正则）
            =   绝对等于
            *=  包含等于
            ^=  开头

        */

        /* 存在id属性的元素    a[]{} */
        a[id=first] {
            background-color: green;
        }

        /* class中有links的元素*/
        a[class*="links"] {
            background-color: blue;
        }

        /* 选中href中以https开头的元素*/
        a[href^=http] {
            background-color: blue;
        }

        /* 选中href中以png结尾的元素*/
        a[href$=png] {
            background-color: blue;
        }

    </style>

</head>
<body>

<p class="demo">
    <a href="https://www.baidu.com" class="links item first" id="first">1</a>
    <a href="" class="links item active" target="_blank" title="test">2</a>
    <a href="image/123.html" class="links item">3</a>
    <a href="image/123.png" class="links item">4</a>
    <a href="">5</a>
    <a href="">6</a>
    <a href="">7</a>
    <a href="" class="links item last">8</a>

</p>

</body>
</html>
耳冉鹅
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
全栈之前端 | 1.CSS3必备基础知识学习
WeiyiGeek 唯一极客IT知识分享
08-26 230
什么是 CSS?答: 和 HTML 类似，CSS 也不是真正的编程语言，甚至不是标记语言，CSS 层叠样式表() 是一种用于描述网页的样式和布局的标记语言, 用来描述 HTML 或 XML（包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言）文档的呈现。总之，CSS是一种强大的样式表语言，能够使网页的外观更加美观和统一，提升用户的浏览体验。CSS 用来干什么？描述: 前文提到过，CSS 是用来指定文档如何展示给用户的一门语言，它可用于控制网页的。
Css经典笔记
热门推荐
飘
04-24 1万+
# 课程目标: &gt; 1. 学会使用CSS选择器 &gt; 2. 熟记CSS样式和外观属性 &gt; 3. 熟练掌握CSS各种选择器 &gt; 4. 熟练掌握CSS各种选择器 &gt; 5. 熟练掌握CSS三种显示模式 &gt; 6. 熟练掌握CSS背景属性 &gt; 7. 熟练掌握CSS三大特性 &gt; 8. 熟练掌握CSS盒子模型 &gt; 9. 熟练掌握CSS浮动 &gt; 10.熟练...
CSS3入门基础（详解）
qq_44709805的博客
10-03 3149
CSS3入门基础详解 一、基本概念 css:层叠样式表(Cascading Style Sheets) 样式定义如何显示html元素 样式是为了解决内容与表现分离的问题 多个样式定义可层叠为一 样式通常存储在css文件中 css3是最新上午css标准 二、样式定义形式 内联样式：嵌在元素的style属性中定义（局部） 内部样式：在<style>标签中定义（页面级） 外部样式：在css文件中定义（可被多个页面调用） 1. 内联样式 margin-left:20px，元素的左外边距 注：不要在
CSS3精选内容通俗易懂
qq_45366447的博客
01-29 238
三、美化网页元素 1、概述 有效的传递页面信息 美化网页，吸引用户 凸显页面主题 提高用户的体验 2、字体样式 font-family：字体（可以同时改变英文与中文字体） font-size：字体大小 font-weight：字体粗细 color：颜色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title&g
CSS3基本知识点总结
瘦肉的博客
08-05 1万+
这两天总结了一下CSS3中的基本知识点，没有做到很全面，因为之前也记过一些笔记，就没有再整理成文档。这里我会把之前的笔记拍照贴出来，基本都是一些很零碎的小知识点，需要大家平时多敲代码，多翻看笔记，以加深记忆，从而对CSS熟练运用。 本文档参考了以下网站，如详细了解，请移步： https://www.w3cschool.cn/css3/htkn4flf.html http://www.runo...
css基础知识plonk精心整理
04-22
css基础笔记，是css的基础部分 内容通俗易懂
HTML5+css3基础最新完整pdf
08-21
涵盖h5及css基础最新，且工作常用知识点；讲述明确，通俗易懂
CSS基础入门视频课程
06-11
本课程从零开始，以通俗易懂的方式讲解CSS技术，手把手教你掌握每一个知识点。课程中使用的所有英文单词都会逐一查询并记录，真正做到零基础入门学习，最适合初学者的教程，让你少走弯路！课程内容包括：1.CSS简介2....
python入门爬虫架构代码设计，新手入门通俗易懂
最新发布
12-14
在Python的世界里，爬虫是数据获取的重要工具，尤其对于新手来说，理解并构建一个基本的爬虫架构是学习过程中的重要一步。...记住，理解并实践这些基础知识是成长为一名熟练的Python爬虫开发者的关键。
零基础学HTML+CSS-f7d6.mobi
05-08
零基础学编程：零基础学HTML+CSS（第3版）站在零基础学习的角度，以通俗易懂的语言，结合丰富多彩的实例，来帮助初学者学习和掌握HTML语言和CSS样式设计。本书列举了大量的小型实例、综合实例，并包含3个项目案例，...
css3基础
weixin_59938047的博客
08-21 153
1.CSS简介 CSS3 是最新的 CSS 标准。 CSS3 已完全向后兼容，所以你就不必改变现有的样式设计。 增加了新的一些最重要 CSS3 模块如下： 选择器 盒模型 背景和边框 文字特效 2D/3D转换 动画 多列布局 用户界面 W3C 的 CSS3 规范仍在开发。但是，现在新的浏览器已经都支持 CSS3 属性。 2.圆角 使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"。 一个值：四个角的值相 四个值：第一个值为左上角，第二个值为右上角
CSS3基础知识
d1105260363的博客
07-30 328
CSS3相对于CSS2增加了很多动态的样式，最主要的是transform（变形） transition（过渡） animation（动画） 1、transform（变形） transform:rotate(度数);   //旋转的度数 单位deg transform:translate(位移)； //包括translateX translateY translateZ  移动的位移 单位px
CSS3(入门)
热爱编程、热爱生活、热爱探索
02-19 8236
目录一、CSS3基本概念和作用 一、CSS3基本概念和作用 Html5是网页的结构，css3是网页的表现（美化），javaScript是网页的交互。 菜鸟教程（学习的工具网站） 概念：CSS又叫层叠样式表( Cascading Style Sheets )是一种用来表现HTML或XML等文件样式的计算机语言，3是版本号。CSS于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块 作用：美化网页（字体
5天通俗易懂的HTML5核心技术教程（含资料）
01-03
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。本套视频录制的是最新HTML5教程； HTML5是定义 HTML 标准的最新的版本。 广义上我们应该认为HTML5是一套技术集合，允许更多样化和强大的网站和应用程序。主要包括语义，连通性，离线 & 存储，多媒体，2D/3D绘图 & 效果，性能 & 集成，设备访问，样式设计。
前端---css通俗易懂理解伪类和伪元素的区别
Nagile-zhou博客
10-10 560
在今天制作一个页面的时候碰到一个::after和::before的东西,以前只知道这是一种选择器,至于具体该怎么用忘记掉了,又通过这个找到一些伪类和伪元素的概念,看完觉得有点摸不着头脑,现在想给大家浅显的说明白什么是伪类,什么是伪元素以及分别有什么用? 首先,之前不太了解伪类和伪元素概念的同学可以详细的去看一下这篇博客: https://www.cnblogs.com/ammyben/p/80...
css基本知识
qq_40693662的博客
11-18 93
css(层叠样式表) 选择器的分类 id选择器(#id) class选择器（.class） 分组选择器(.class,.class) 类型选择器（标签名） 包含选择器（.class .class）在选择器前面加一个限制的选择器 css的链接方式 行内样式（在标签中添加style属性） 内部样式（在html页面中用style标签） 外部样式（在html页面使用link标签链接）link rel...
带你快速认识掌握CSS详解 (一)
每天进步一点点
06-27 349
今天这一篇, 让我们快速去认识一下CSS吧~~活不多说, 煌sir直接上货~~ CSS样式 javaEE程序员对CSS的最高要求： ①基本看懂美工人员写的CSS代码 ②拿着别人的CSS代码，可以进行简单修改 ③可以书写简单的CSS样式 一.简述及入门 HTML：肉体 CSS：给肉体穿衣服/给肉体化妆 CSS作用：修饰HTML页面，更丰富多彩地展示超文本信息 入门案例： <!-- CSS可以更加具体展示HTML效果 --> <...
CSS介绍
u010171577的博客
05-29 503
CSS是做什么的？ 1.全名叫做层叠样式表，Cascading StyleSheet 2.对页面的布局、字体、颜色、背景等效果进行精确的控制 这是360导航的一个小片段 如果没有css呢？ HTML负责生产，CSS负责加工。 CSS3基础介绍 CSS有别于C，JAVA之类程序语言——没有算法，没有复杂的逻辑，因此，css看起来更像是一双手。每一行代码，都像
CSS基础知识
成长日记的博客
06-02 743
CSS 指层叠样式表（Cascading Style Sheets） 用于html在我们的浏览器中显示的样式，而这些样式通常存储在样式表中 CSS还支持独立文件，这个文件的拓展名就是.css CSS能让相同的页面在不同的浏览器中呈现出相同的页面 解决内容与表现分离的问题 内容是指HTML中的元素，表现主要指内容在浏览器中呈现的样式（CSS） CSS声明 样式属性 操作符： 样式值...
网站设计基础教程html5+css3pdf
07-05
### 回答1： 网站设计基础教程html5 css3pdf是一份教授HTML5和CSS3的PDF教程。HTML5是一种用于构建和展示网页内容的标准，它不仅具有更丰富的语义化元素，还支持多媒体、图形和动画等功能。CSS3是用于控制网页样式和布局的样式表语言，它引入了许多新的特性，如过渡效果、阴影效果和动画效果等。 这份教程通过深入浅出的方式讲解了HTML5和CSS3的基本知识和技巧。首先，它介绍了HTML5的结构标签，如header、nav、section和footer等，这些标签使得网页更加语义化和可读性更强。然后，它解释了CSS3的各种选择器和样式属性，包括字体、颜色、背景和边框等。此外，教程还介绍了如何使用HTML5和CSS3创建响应式网页，以适应不同设备和屏幕尺寸。 这份教程还提供了丰富的实例和练习题，帮助读者巩固所学知识。通过实践，读者可以掌握HTML5和CSS3的应用技巧，并学会创建现代化且具有吸引力的网页设计。此外，教程还提供了一些常用的网站设计工具和资源，如图标、背景图片和颜色选择器，帮助读者更好地进行网页设计和美化。 总的来说，网站设计基础教程HTML5 CSS3 PDF是一份全面而实用的教程，适合初学者入门和有一定基础的设计师进阶学习。通过学习这份教程，读者可以掌握HTML5和CSS3的基本知识和技巧，并能够独立设计和开发出现代化的网页。 ### 回答2： HTML5和CSS3是网站设计的基础语言，它们是用于构建网页的代码。HTML5用于定义网页的结构和内容，包括标题、段落、链接、图像等。CSS3用于定义网页的外观和样式，包括背景、字体、颜色、布局等。因此，学习HTML5和CSS3是学习网站设计的第一步。 《HTML5和CSS3基础教程PDF》是一本教学材料，它提供了系统的学习内容和案例，帮助初学者掌握HTML5和CSS3的基本知识和技能。这本教程通常会介绍HTML5和CSS3的语法规则、常用标签和属性，以及常见的网页布局和样式设计。 通过学习这本教程，你可以了解如何使用HTML5创建网页的骨架和内容。你会学习到HTML5中常用的标签，如<html>、<head>、<body>等，以及如何使用这些标签来组织网页的结构。同时，你还会学习到如何在网页中插入图片、视频、音频等媒体元素，以及如何创建表单和处理用户输入。 此外，在这本教程中还会教授如何使用CSS3来美化网页的外观和样式。你将学习到CSS3中常用的样式属性和值，如颜色、背景、字体、边框等。你还会学习到如何使用CSS3来实现网页的布局，包括如何创建网格布局、响应式布局等。 总而言之，《HTML5和CSS3基础教程PDF》是学习网站设计的好资料，它提供了系统的学习内容和案例，可以帮助你快速入门HTML5和CSS3的基本知识和技能。阅读和实践这本教程，相信你会对网站设计有更深入的理解和掌握。 ### 回答3： 《网站设计基础教程HTML5 CSS3》是一本关于网站设计基础知识的教程，介绍了HTML5和CSS3两种技术的使用方法和应用场景。HTML5是目前最新的标记语言，用于创建网页结构，实现网页内容的排版和呈现。CSS3则是一种用于描述网页样式的语言，可以实现网页的美化效果、动画效果等。 这本教程从HTML5和CSS3最基础的语法入手，逐步介绍了网页的基本结构搭建以及常用的标签和属性的使用方法。同时，它还涵盖了一些常见的网页布局和排版技巧，如盒模型、浮动、定位等，帮助读者实现自己理想中的网页布局。 此外，教程还介绍了CSS3新增的一些强大特性，如过渡、动画、渐变等，可以帮助设计师实现更加出色的网页效果，并提升用户的交互体验。 整本教程内容通俗易懂，结构清晰，适合初学者入门。同时，它还配有详细的示例代码和实战案例，读者可以通过实践来巩固所学知识，提升自己的实际操作能力。 总体来说，《网站设计基础教程HTML5 CSS3》是一本很好的学习教材，它能够帮助读者系统学习HTML5和CSS3的使用，提升网页设计的基础能力。无论是想要成为一名网页设计师，还是对网页制作感兴趣的人，都可以从中获得很多实用的知识和技巧。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值