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

参考资料

文章目录

1.CSS的简单介绍
2.什么是CSS和发展史
3.CSS的快速入门及优势
4.四种css导入方式
5.三种基本选择器（重要）
6.层次选择器
7.结构伪类选择器
8.属性选择器（常用重要）
9.CSS的作用及字体样式
10.文本样式
11.文本阴影和超链接伪类
12.列表样式练习
13.背景图像应用及渐变
14.盒子模型及边框使用（重要）
15.内外边距及div居中
16.圆角边框及阴影和经验分享
17.display（重要）和浮动
18.overflow及父级边框塌陷问题
19. 相对定位的使用及练习
20.方块定位练习讲解
21.绝对定位和固定定位
22.z-index及透明度
23.动画及视野拓展
24.CSS小结

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"> <!-- 样式优先级：就近原则 -->

扩展：外部样式：

外部样式链接式 html

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

外部样式导入式 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（重要）和浮动

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

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

/* clearleft 左侧不允许右浮动元素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

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

最简单的dubbo教程-快速入门《一》
最简单的dubbo教程-快速入门<一> 目录(?)[+] 所需环境 zookeeper作为dubbo的注册中心,dubbo服务提供方和消费方都需要在zookeeper注册中心注册. 可参考 ...
Spring MVC 教程,快速入门,深入分析
目录转载自:http://elf8848.iteye.com/blog/875830 资源下载: Spring_MVC_教程_快速入门_深入分析V1.1.pdf 点击打开链接 SpringMVC核 ...
struts2教程--快速入门
Struts2框架介绍 1.三大框架 : 是企业主流 JavaEE开发的一套架构 Struts2 + Spring + Hibernate 2. 什么是框架?为什么要学框架 ? 框架是实现部分功能 ...
狂神说——JavaScript最新教程通俗易懂
参考资料文章目录 01 练练JavaScript这个东西 02 基本使用及HelloWorld 03 浏览器控制台使用 04 数据类型快速浏览 05 严格检查模式strict 06 字符串类型详解 ...
【狂神说Java】SpringMVC最新教程IDEA版通俗易懂
目录狂神视频地址 1.什么是MVC 1.1.Model1时代 1.2.Model2时代 1.3.回顾Servlet 2.什么是SpringMVC 2.1.概述 2.2.中心控制器 2.3.第一个MV ...
Vue的快速入门通俗易懂(学习笔记)
本文是观看"[狂神说Java]Vue最新快速上手教程通俗易懂 "所记录的笔记,读者结合视频阅读更佳,文章包含了个人对相关知识点的粗略理解,借此进行分享,文中代码结构理解有误的地方, ...
工业机器人入门z50的含义_工业机器人基础教程——快速入门学习
六轴.水平关节(SCARA).DELTA等不同类型的机器人入门基础教程,学完这些,您将成为一名优秀的机器人应用工程师! 到2020年,工业机器人密度达到每万名员工使用100台以上.我国工业机器人市场将 ...
工业机器人基础教程——快速入门学习
想成为一名优秀的机器人应用工程师,从这里学起,六轴.水平关节(SCARA).DELTA等不同类型的机器人入门基础教程推荐. 1.<机器人学导论> 本书曾作为美国斯坦福大学机器人学导论的教材 ...
springmvc教程--快速入门教程
springmvc教程系列: springmvc史上最好教程(3) springmvc史上最好教程(2) 一. SpringMVC架构 1.1. Spring web mvc介绍 Spring web ...
hibernate教程--快速入门（增删改查）
一. Hibernate框架的概述: 1.1 什么是Hibernate: 框架:软件的半成品,完成部分功能代码. Hibernate:Hibernate是一个开放源代码的对象关系映射框架,它对JDBC ...