2021.3.9写写日记

CSS（Cascading Style Sheet）

css是什么？

Cascading Style Sheet层叠级联样式表

css：表现（美化网页）

字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动

css发展史

css1.0

css2.0 DIV（块）+ css，HTML与css结构分离的思想、网页变得简单、SEO

css2.1 浮动、定位

css3.0 圆角、阴影，动画（注意网页兼容性）

css入门

<!--规范，<style> 可以编写css代码，每一个声明最好用分号结尾
语法：	
	选择器{
		声明1;
		声明2;
		声明3;
}-->
--------------------------------------------------
<style>
    h1{
        color: red;
    }
</style>
--------------------------------------------------
<!--link标签引入css
-->
<link rel="stylesheet" href="css/style.css">

css的优势

1. 内容与表现分离

2. 网页结表现构统一，可以实现复用

3. 样式十分丰富

4. 建议使用独立于HTML的css文件

5. 利用SEO，容易被搜索引擎收录！

   VUE

css的导入方式

<!--行内样式,在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: red"></h1>
<!--内部样式-->
<style>h1{
    color: red;
    }</style>
<!--外部样式-->
<link rel="stylesheet" href="css/style.css">
<!--优先级：就近原则--->

另：外部样式的两种写法

• 链接式：

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

• 导入式：

@import 时css2.1特有的！

<style>
    @import url("css\style.css")
</style>
<!--弊端：当网页较大时会先展示骨架在渲染-->

区别

1.从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

2.加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

3.兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

4.DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

5.权重区别(该项有争议，下文将详解)
link引入的样式权重大于@import引入的样式。

摘自：https://www.cnblogs.com/my–sunshine/p/6872224.html

*css选择器

作用:选择页面上的某一个或某一类元素

基本选择器

1. 标签选择器：选择一类标签
2. 类选择器 class： 选择所有class属性一致的标签
3. id 选择器：全局唯一！~

<!--标签选择器-->
<style>
    /*标签选择器、会选择到页面上所有的这个标签的元素*/
</style>
<!--类选择器-->
<style>
    /*类选择器的格式   .class的名称{}*/
    .wo{
        color: red;
    }
    .ni{
        
        color: yellow;
    }
</style>
<h1 class="wo">标题1</h1>
<h1 class="ni">标题2</h1>
<!--id选择器； ID必须保证全局唯一！-->
<style>
    /*# + id名称{}
    */
</style>

美化网页（文字、阴影、超链接、列表、渐变。。。）

盒子模型

浮动

定位

网页动画（特写）