初遇CSS+快速入门

什么是CSS:

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

如何学习CSS:

在这里插入图片描述

学习CSS的重点:CSS选择器(重点+难点)


CSS发展史

在这里插入图片描述

快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--规范,<style>可以编写CSS代码,每一个声明最好是以分号结尾
    语法:
        选择器{
    
    
            声明1;
            声明2;
            声明3}
    -->
    <style>
        h1 {
    
    
            color: orange;
        }
    </style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>

运行结果:
在这里插入图片描述
推荐HTML与CSS相分离(结构与样式相分离)。<link rel="stylesheet" href="../css/01.css">
01.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--规范,<style>可以编写CSS代码,每一个声明最好是以分号结尾
    语法:
        选择器{
    
    
            声明1;
            声明2;
            声明3}
    -->
    <link rel="stylesheet" href="../css/01.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>

01.css

h1 {
    
    
    color: orange;
}

CSS的优势

  • 结构与样式相分离。
  • 网页结构表现统一,可以实现复用。
  • 样式十分丰富。
  • 建议独立于html的css的文件
  • 利用SEO,容易被搜索引擎收录。(Vue不容易被搜索引擎收录)

导入CSS的3种方式

  1. 行内样式
  2. 内部样式
  3. 外部样式

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--2.内部样式-->
    <style>
        h1 {
    
    
            color: red;
        }
    </style>
    <!--3.外部样式-->
    <link rel="stylesheet" href="../css/01.css">
</head>
<body>
<!--1.行内式-->
<h1 style="color: orange"></h1>
</body>
</html>

优先级: 就近原则

猜你喜欢

转载自blog.csdn.net/I_r_o_n_M_a_n/article/details/114179529