前端-CSS是什么，为什么，怎么做（简）

最新推荐文章于 2021-09-28 15:01:37 发布

DDDDDDDDDDDDDDqd

最新推荐文章于 2021-09-28 15:01:37 发布

阅读量241

点赞数 1

文章标签： css html dom

本文链接：https://blog.csdn.net/weixin_50477991/article/details/115259549

版权

一、定义、工作原理、语法。我们姑且用高中常写的论述文三要素作为标题以一定程度增加理解。

1. 什么是css？
  css的英文名是Cascading Style Sheets，中文名层叠样式表，是一个用于修饰文档（可以是标记语言HTML,也可以是XML——的语言，可以将文档以更优雅的形式呈现给用户。❤
1. 为什么css能做到？（css的工作原理）
  浏览器在处理文档的时候包含两个阶段：
  步骤一：浏览器将HTML和CSS转换为DOM (Document Object Model)，DOM在计算机内存中表示文档，使得文档和CSS结合。
  步骤二：浏览器显示DOM的内容
  [注：DOM的简介及工作原理，我后续会讲-
  要听后事如何，请听下回分解😁]
1. 怎么使用css？（语法）
  a）声明
  选择器 {
  属性名:属性值;
  }
  b）css的特点之一----代码的可读性（规范）
  ✔ - 缩进、空白
  意味着实际空格、新行、制表符，可以添加空白是样式表更加可读
  [制表符：不适用建表工具的情况下，在宋体中可通过该字符组建通俗易懂的表格]
  ✔ - 注释
  /* … */
  ✔ - 速记写法
  允许一些有多个属性值的元素将属性值一次性写完，节省时间。

二、CSS与HTML的奇妙连接

<head>
    <title>CSS的使用</title>
    <!-- 方式一：外部样式表 -->
    <link rel="stylesheet" href="./1-out.css">
</head>

<!-- 方式二： 内部样式表 -->
<head>
	<style>
	    div {
	        color: royalblue;
	    }
	</style>
</head>

[不建议使用，相对麻烦]

<!-- 方式三： 内联样式表/行内样式表 -->
    <div style="font-size: 30px;">css - 第一天</div>

<style>
    /* 导入外部css文件 */
    @import './1-out.css';
</style>

🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹
这是我的第三篇文章，谢谢支持~
希望你我一同进步~
🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹

关注