W3C三剑客——CSS快速入门

W3C三剑客——CSS快速入门

尐不正经丶 2020-08-12 10:51:54

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年我花了一个月整理了一份最适合2020年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取

W3C3剑客—CSS

  • 万维网联盟（外语缩写：W3C）标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。
  • CSS3 作为变现层，其威力堪比整容。
  • 未加样式和加了样式做对比，淘宝：
W3C三剑客——CSS快速入门

 

  • 加上样式后
W3C三剑客——CSS快速入门

 

1.CSS该如何学习？

  • css的3种引入方式
  • CSS的选择器
  • CSS的基本样式
  • CSS几种布局方式
  • CSS响应式
  • 网页动画（专业的必修，非专业的了解）

1.1什么是CSS？

  • Cascading Style Sheets （层叠样式表）
  • CSS2 W3C组织于1998年推出的技术规范
  • CSS3 早在2001年W3C就完成了CSS3的草案规范。CSS3规范的一个新特点是被分为若干个相互独立的模块

1.2CSS如何使用

  • 行内式引入，通过Style属性(不推荐使用，结构与表现高度耦合难以维护)
 <h1 style="color: red">CSS行内式演示</h1>
  • 通过内部式Style引入
<style>
    /*这是在css中的注释  */
    h1{
        font-size: 100px;  
    }        
</style>
  • 外部样式表引入（推荐使用，结构与表现低耦合，方便维护）
<link rel="stylesheet" href="../CSS/index.css">
1
  • 在html中的位置一览
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*这是在css中的注释  内部样式*/
        h1{
          font-size: 100px;  
        }        
    </style>
    <link rel="stylesheet" href="../CSS/index.css">  <!-- 外部引入样式-->
</head>
<body>
    <!-- 行内样式 -->
 <h1 style="color:rgb(182, 17, 17)">CSS行内式演示</h1>
</body>
</html>
  • 样式优先级，html从上往下加载，后边的样式会覆盖先前的样式，样式变现为就近原则。
  • 除此之外还可以在Style内通过import导入，CSS2.1特有，使用较少，可以和 link 进行 替换

2.CSS选择器

  • 标签选择器
  • 层次选择器
  • id选择器（重点）
  • 类选择器（重点）
  • 伪类选择器（爱恨原则）
  • 属性选择器（重点）

2.1标签选择器

  • 标签选择器可以快速定位到html中的某一类标签。
<style>
        /*直接以标签名字作为选择器
    
    标签名{
    声明1;
    声明2;
    声明3;
    ...
    }
    
    */
        h1{
          font-size: 100px;  
        }        
 </style>

2.2 id选择器(重点)

  • id 选择器，通过标签的id属性快速定位，一般id就是元素的标识，是唯一的
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*
        id 选择器，通过标签的id属性快速定位，一般id就是元素的标识，是唯一的
        id 选择器：
        #id名{
         	声明1;
            声明2;
            声明3;
            ...
        }
        */
        #txt{
            color: red;
        }
    </style>
</head>
<body>
    <p id="txt">这是一行文字</p>
</body>
</html>

2.3 类选择器（重点）

  • 类选择器，通过标签的class属性进行定位，一般class属性可以付给多个元素，同一个元素也可以有多个class值
posted @ 2020-08-14 14:44  马云2002  阅读(147)  评论(0)  编辑  收藏  举报