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

扩展：外部样式：

1. 外部样式 链接式 html

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

2. 外部样式 导入式 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/
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/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/css3/css3-animations.html
less https://less.bootcss/

css 动画
canvas 动画

24.CSS小结

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

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