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

admin管理员组

文章数量:1794759

狂神说——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;

渐变色：www.grabient/ 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;

前端网站可以下载： www.cssmoban/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.动画及视野拓展

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

css 动画 canvas 动画

24.CSS小结

渐变色网页 www.grabient/

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

本文标签： 易懂通俗入门快速教程