狂神说——CSS3最新教程快速入门通俗易懂

已于 2022-05-26 12:31:45 修改
阅读量850 收藏 9
点赞数
分类专栏： Web 文章标签： css3 css vscode
于 2022-05-24 15:42:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_29431461/article/details/124799435
版权

参考资料

文章目录

1.CSS的简单介绍

在这里插入图片描述

2.什么是CSS和发展史

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.CSS的快速入门及优势

 <!-- 规范<style> 可以编写css代码，每一个声明，都用分号隔开。
        语法：
            选择器{
                声明1;
                声明2;
                声明3;
    }
    -->
  <!--方式一：-->
  <style>
        h2 {
            color: blue;
        }
  </style>
  <!--方式二：建议使用-->
    <link rel="stylesheet" href="css/style.css">

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

4.四种css导入方式

    <!-- 第一种方式： 行内样式 标签元素中直接编写style属性 -->
    <h1 style="color:red;">您好！</h1>
    
    <!--第二种方式： 内部样式 -->
    <style>
        h2 {
            color: green;
        }
    </style>
    
    <!-- 第三种方式：外部样式  -->
	<link rel="stylesheet" href="css/style.css"> 
	
	<!-- 样式优先级：就近原则 -->

扩展：外部样式：

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

5.三种基本选择器（重要）

选择页面某一个或者某一类元素

在这里插入图片描述

1.标签选择器：
  /* 标签选择器：选择页面中同类所有标签 */

在这里插入图片描述

在这里插入图片描述
VScode安装插件：颜色选择器：
在这里插入图片描述

在这里插入图片描述

2. 类型选择器
 /* 类选择器 .class名字{声明1;声明2;}
            好处：同类可以归类 */

在这里插入图片描述

在这里插入图片描述

3. id选择器
/* id选择器 #id名称{声明1;声明2;}
id必须保证全局唯一

三种选择器优先级：id>class>标签
 */

在这里插入图片描述

6.层次选择器

在这里插入图片描述
在这里插入图片描述

/* 后代选择器
空格表示 祖爷爷 爷爷 爸爸 儿子...
*/
body p{
    background-color:red;
}

在这里插入图片描述

/* 子选择器 
箭头表示 一代 儿子
*/
body>p{
    background-color: green;;
}

在这里插入图片描述

/* 相邻兄弟选择器  向下
加号表示 同辈 */
.active+p {
    background-color: blue;
}

在这里插入图片描述

/* 通用选择器
波浪号表示 向下所有兄弟 */
.active~p {
    background-color: yellow;
}

在这里插入图片描述

7.结构伪类选择器

/* ul li的第一个元素 */
ul li:first-child {
    background-color: brown;
}

/* ul li的最后一个元素 */
ul li:last-child {
    background-color: rgb(145, 190, 18);
}

/* 带冒号的就是伪类 : 链接悬停 */
a:hover{
    background-color: blue;
}

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

8.属性选择器（常用重要）

id+class结合
属性名[属性名=属性值（可以是正则）]
/* 选中 存在id的元素 a[]{}
 a[id] 
 = 绝对等于
 *= 包含
 ^= 以..开头
 $= 以..结尾
 */
 a[id=first] {
     background: yellow;
 }

在这里插入图片描述

9.CSS的作用及字体样式

在这里插入图片描述

<span> 突出重点字 使用span套起来

在这里插入图片描述

# 字体样式
/* 字体 */
font-family: 宋体;
/* 字大小 */
font-size: 100px;
/* 字体粗细 */
font-weight: bold;
/* 字体颜色 */
color:blue;

在这里插入图片描述

10.文本样式

在这里插入图片描述

/* 颜色：
单词
RGB ：0-F
RGBA：A:0-1
*/
color:rgba(255, 0, 0, 0.5);

/* 文本排版 居中 */
text-align: center;

/* 段落首行缩进：2em一般 */
text-indent: 2em;

/* 行高 和块的高度一样，就可以居中*/
height:300px;
line-height: 300px;

/* 下划线 */
text-decoration: underline;

/* 上划线 */
text-decoration:overline;

/* 中划线 */
text-decoration:line-through;

/* 去掉划线 */
text-decoration:none;
   
/* 文本图片 水平对齐：前提要有参照物
vertical-align :
*/
vertical-align:middle;

在这里插入图片描述

11.文本阴影和超链接伪类

/* 默认颜色 */
a{
  text-decoration :none;
  color:black;
}
/* 鼠标悬浮状态 */
a:hover{
  color:blue;
  font-size:20px;
}
/* 鼠标按住未释放的状态 */
a:active{
  color:orange;
}

在这里插入图片描述
在这里插入图片描述

12.列表样式练习

ul li {
  /* list-style 前面图标
  none：没有
  square：方块
  cicle：圆圈
  decimal:数字
   */
  list-style: none;
}

在这里插入图片描述
在这里插入图片描述

13.背景图像应用及渐变

/* 背景图片 */
background-image: url(images/19.png); 
/* x轴平铺 */
background-repeat: repeat-x;
/* y轴平铺 */
background-repeat: repeat-y;
/* 只有一个 */
background-repeat: no-repeat;

在这里插入图片描述

渐变色：https://www.grabient.com/
body {
  /* 渐变色背景 */
  background-color: #0093E9;
  background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}

14.盒子模型及边框使用（重要）

在这里插入图片描述

marging:外边距
border：边框
padding：内边距

border:边框
边框的粗细
边框的样式
边框的颜色 

body {
  /* body 默认外边距margin:8px */
  margin: 0px;
}

#app {
  /* border: 边框粗细 样式 颜色 */
  width: 250px;
  border: 1px solid red;
}

在这里插入图片描述

15.内外边距及div居中

/* margin 可以居中 */
margin:  0 auto;

form {
/* 页边距 上 */
margin-top: 100px;
/* 页边距 左 */
margin-left: 10px;
/* 页边距 右 */
margin-right: 50px;
/* 页边距 下 */
margin-bottom: 30px;
}

/* 内边距 */
padding: 5px;

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

16.圆角边框及阴影和经验分享

圆角边框
div{
      width: 100px;
      height: 50px;
      border: 1px solid red;
      background-color: red;
      /* 左上 右上 左下 右下  顺时针方向*/
      border-radius: 50px  50px 0px 0px;
  }
  
img{
    padding: 20px;
    /* 图片圆角 */
    border-radius: 100px;
}
  
阴影
/* 阴影 阴影的X轴(可以使用负值)    阴影的Y轴(可以使用负值)    阴影模糊值（大小）    阴影的颜色 */
 box-shadow: 0 0 10px green;

在这里插入图片描述
前端网站可以下载：
http://www.cssmoban.com/tags/55m75b2V/
下载下来自己分析CSS

17.display（重要）和浮动

在这里插入图片描述

/* display
  block 块元素
  inline 行内元素
  inline-block 是块元素，但是可以内联，在一行
  none 隐藏
*/

在这里插入图片描述
在这里插入图片描述

18.overflow及父级边框塌陷问题

/* clear
  left 左侧不允许右浮动元素
  right 右侧不允许右浮动元素
  both 两侧不允许右浮动元素
  none 什么都没用
*/


#main{
   width: 150px;
   height: 100px;
   border:1px solid red;
   /* 超出边界
   overflow: hidden 隐藏
             auto 自动
             scroll 滚动条
   */
   overflow:scroll;
}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

19. 相对定位的使用及练习

/* 相对定位：相对于原来的位置，进行指定的偏移 上下左右 仍然在标准流中 */
    position: relative;
    left:10px;
    top:-10px;
    right:10px;
    bottom:-10px;

在这里插入图片描述

20.方块定位练习讲解

在这里插入图片描述
在这里插入图片描述

21.绝对定位和固定定位

/* 绝对定位：相对于父级或者浏览器的位置，进行指定的偏移 上下左右 不在标准流中 */
position: absolute;
right: 20px;

在这里插入图片描述
在这里插入图片描述

/* 固定位置 */
 position:fixed;
 right:0;
 bottom:0;

在这里插入图片描述

22.z-index及透明度

/* 设置图层 默认是0 最高无限  */
z-index:  1;
/* 透明度 */
opacity: 0.5;

在这里插入图片描述

23.动画及视野拓展

菜鸟教程 https://www.runoob.com/css3/css3-animations.html
less https://less.bootcss.com/

css 动画
canvas 动画

24.CSS小结

渐变色网页 https://www.grabient.com/

笔记代码下载地址：https://download.csdn.net/download/weixin_29431461/85464940

淡水瑜
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS+CSS3超详细教程
liu_to_liu的博客
05-09 2545
CCS31、CSS简介1.1 HTML的局限性1.2 CSS--网页的美容师1.3 CSS语法规范 1、CSS简介 CSS的主要使用场景就是没话网页，布局网页的。 1.1 HTML的局限性 1.2 CSS–网页的美容师 总结 1.3 CSS语法规范
CSS3使用教程
index0000001的博客
06-29 531
圆角边框的属性 css3边界图片 2.背景 3.渐变 线性渐变 径向渐变 4.文本效果 5.二D转换 6.过渡 7.动画 8.多列 9.弹性盒子 10.网络布局
CSS3入门基础（详解）
qq_44709805的博客
10-03 3152
CSS3入门基础详解 一、基本概念 css:层叠样式表(Cascading Style Sheets) 样式定义如何显示html元素 样式是为了解决内容与表现分离的问题 多个样式定义可层叠为一 样式通常存储在css文件中 css3是最新上午css标准 二、样式定义形式 内联样式：嵌在元素的style属性中定义（局部） 内部样式：在<style>标签中定义（页面级） 外部样式：在css文件中定义（可被多个页面调用） 1. 内联样式 margin-left:20px，元素的左外边距 注：不要在
【CSS】实现元素水平垂直居中布局（七种方法）
qq_45677671的博客
01-03 1961
css水平垂直居中六大方法
CSS3学习狂神说
浮生若梦
02-23 189
前言 1.css是什么 2.CSS怎么用（快速入门） 3.CSS选择器（重点 + 难点） 4.美化页面（文字、阴影、超链接、列表、渐变…） 5.盒子模型 6.浮动 7.定位 8.网页动画（特效） 1.什么是CSS 1.1、什么是CSS Cascading Style Sheet 层叠样式表 CSS：表现（美化网页） 字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动 1.2、发展史 CSS1.0 CSS2.0：DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简
狂神说——HTML完整教学通俗易懂
05-20
"狂神说——HTML完整教学通俗易懂"这个教程旨在为初学者提供一个全面且易于理解的HTML学习资源，帮助他们掌握网页设计的基础。 1. HTML基本结构：HTML文档通常由<!DOCTYPE>声明开始，定义了文档类型。接着是标签，...
狂神Java学习笔记————前端入门——html、css、JavaScript学习代码
06-17
【狂神Java学习笔记——前端入门——HTML、CSS、JavaScript学习代码】是针对初学者的一份详实的学习资料，这份笔记记录了跟随B站知名up主“遇见狂神说”的java系列视频中关于前端开发的基础内容。笔记内容不仅与视频...
JAVA入门教程，通俗易懂，狂神重要解读，适合小白！
最新发布
02-26
JAVA入门教程，通俗易懂，狂神重要解读，适合小白！ Java语言的诞生是为了反抗C语言帝国的统治，C语言帝国已经统治了二十多年，给我们带来了很多福利，但是也给我们带来了两个沉重的枷锁：指针和内存管理。Java语言...
狂神笔记，b站狂神说课程笔记大全(最新)
09-19
b站狂神说课程笔记大全，每个部分都有 狂神说java系列笔记（java基础+javaweb+ssm+微服务）全套 狂神说上课笔记未删减 Java基础到技术升级 1、JavaSE：Java入门 2、JavaSE：基础语法 3、JavaSE：流程控制 4、JavaSE...
HTML5+CSS3网站设计基础教程_动手实践源代码
08-01
HTML5+CSS3网站设计基础教程_动手实践源代码
html5+css3从入门到精通视频教程讲解
xrl2012的专栏
01-23 386
第1讲：HTML的发展史 第2讲：HTML标签的改变(上) 第3讲：HTML标签的改变(下) 第4讲：HTML音视频介绍 第5讲：canvas标签介绍 第6讲：智能表单的应用 第7讲：canvas实例1-时钟 第8讲：canvas实例2-太阳系1 第9讲：canvas实例2-太阳系2 第10讲：canvas实例3-在线画图工具-功能介绍+页面布局 第11讲：canvas实例3...
CSS3基础教程总结
斯维特哈特
10-25 1057
（一）什么是CSS3 CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。 在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器
CSS3（三）Animation 入门详解
CSDN前端知识共享
04-17 7万+
Animation 前言 好的前端工程师，会更注重用户的体验和交互。那么动画就是将我们的静态页面，变成具有灵动性，为我们的界面添加个性的一种方式。 下面是七喜的官方主页，它就是很好的富交互样例。鼠标移动到导航栏，就会播放多种动效，给用户一种酷炫的体验。我觉得用户体验，才是前端工程师更加关注的问题，而不是一味追求Javascript的编码技能。 七喜官方网站 A...
Grafana3.1.0的使用
热门推荐
Tony_bo的博客
01-05 28万+
Grafana是一个开源的度量分析与可视化套件。经常被用作基础设施的时间序列数据和应用程序分析的可视化，它在其他领域也被广泛的使用包括工业传感器、家庭自动化、天气和过程控制等。 Grafana支持许多不同的数据源。每个数据源都有一个特定的查询编辑器,该编辑器定制的特性和功能是公开的特定数据来源。  官方支持以下数据源:Graphite，InfluxDB，OpenTSDB，Prometheus，
CSS3(入门)
热爱编程、热爱生活、热爱探索
02-19 8255
目录一、CSS3基本概念和作用 一、CSS3基本概念和作用 Html5是网页的结构，css3是网页的表现（美化），javaScript是网页的交互。 菜鸟教程（学习的工具网站） 概念：CSS又叫层叠样式表( Cascading Style Sheets )是一种用来表现HTML或XML等文件样式的计算机语言，3是版本号。CSS于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块 作用：美化网页（字体
HTML5+CSS3速成实战课程【7天学会，上手实战没问题】视频教程
10-27
课程通俗易懂，7天学会，上手实战没问题； 建议有HTML、DIV+CSS基础技能的学员来学习！适合人群：非常适合初级学员、在校大学生、实习生，亦或是上班族，对网页制作有浓厚兴趣的极客们。
CSS3教程
qq_38266792的博客
05-31 1055
CSS31.边框图片 border-image: url(test.png) 10/10px;  outline:10px solid #ff0;outline-offset:15px;边框的边框，两边框之间距离2.三角形   span{display:inline-block;border:50px solid transparent;border-top-color:red;border-le...
CSS3快速入门，你想了解的这篇文章都有哦
weixin_46088557的博客
02-04 110
1. CSS 1.1 什么是CSS Cascading Style Sheet 层叠样式表 美化网页 字体 颜色 浮动 网页定位 高度 宽度 1.2 发展史 CSS1.0 CSS2.0 DIV(块)+CSS HTML与CSS结构分离的思想，网也变得简单，SEO：搜索引擎优化 CSS2.1 浮动，定位 CSS3.0 圆角边框，阴影，动画… 浏览器兼容问题 1.3 快速入门 style基本入门： <!DOCTYPE html> <html lang="en"> &l
"狂神说视频-CSS笔记.pdf：CSS入门与进阶全解析
CSS3.0是目前最新的版本，引入了更多的新特性和功能。它支持圆角、阴影、动画等效果，使得网页设计更加炫酷和吸引人。然而，由于各浏览器对CSS3.0的支持程度不同，开发者需要注意浏览器的兼容性，以确保网页在各种...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

淡水瑜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值