css层叠样式表第一天
css层叠样式表01
css层叠样式表第一天css介绍css语法html标签全局属性引入css样式的方式知识点应用css介绍
css是Cascading Style Sheet的缩写，中文"层叠样式表"，是一种标准的样式表语言，主要用于描
述网页的表现形式(样式: 如网页的颜色，字体大小，元素位置等等)
1994年，哈坤-利提出的css1996年css1.0发布，1998年发布css2.0，发布css2.1版本，199年开始准备的css3.0 并模块化，以后逐步完善各模块，到完善了大部分模块。
css语法
网页布局
table 是早期的网页布局方案，由于table结构比较复杂，特别是复杂网页，浏览器渲染需要耗费较多资源和时间。现在不能table做网页布局，一般用于数据展示。
为了提高网页渲染速度，css2.1的时代流行的是div + css布局h5 语义化的标签+css3布局，现在w3c提倡的规范布局。
css样式语法“样式名:样式值;”,很多的样式就可以控制元素复杂的显示效果
html标签全局属性
所有html标签都可以用的属性
title 元素的附加说明，鼠标悬浮在元素上面，会出现提示内容
data-* 给元素设置自定义数据，主要给js用的
contenteditable 把元素变为可编辑状态，允许用户修改元素的内容。
hidden 隐藏html元素
tabindex可以修改元素按tab键自动获取焦点的顺序(值是数字，可以有负数)，默认所有元素的tableindex=0，tableindex一样的时候是顺序获取。
accesskey 指定网页元素获取焦点的快捷键(键盘的单个字符串)，alt + 按键。
id 元素的唯一标识(一个网页里面id的属性值是唯一的),主要用于js查询元素，锚点，for关联元素。
class 类(设置元素的类别)可以重名,可以把不同的元素分类,相同的class代表属于同一类 可以有多个class属性值，多个值用空格分开
id和class的命名规则: 以字母开头(小写字母),可以包含数字,字 母,-,_的组合。 命名要有一定的语义,方便通过属性值了解 html元素描述的内容。
style 写css样式的。属性值就是层叠样式表语p法。
<div data-index="div1" contenteditable hiddenaccesskey="x " id="password" tabindex="1" class="a1 b1 c1 s-c-a_3">test1</div>
引入css样式的方式
1.内嵌样式(行内样式)： 直接将css样式语言作为style属性值，写在html标签里面。
缺点: 需要在每个style属性里面写样式，不方便维护和编写。样式不能复用,冗余的样式代码太多，造成html体积增大。
优点: 由于样式和html在一起，网页构建的时候直接能读取样式，渲染网页速度较快。
<div style="background-color:rgb(113, 80, 80);color:red;">div1</div>
2.内嵌样式: 将样式信息嵌入style标签里面。style标签是属于head标签的子元素。
. 代表class，这是选择class="style1"的标签，给它对应的样式
<style>.style1{background-color:rgb(113, 80, 80);color:blue;}</style>
外部样式(主流推荐): 把css样式写在单独的.css样式文件里面，通过link标签引入外面的css样式文件。
优点: 可以减少冗余的样式，可以多个文件引入样式，维护和编写方便，主流的样式编写方案。
缺点:需要额外加载css样式文件，相对比直接在html的样式渲染要慢一些(渲染速度差距一般是
级别，所以可以不用考虑这一点。)
link 标签可以将当前网页和外部文件资源关联在一起，通常放在head标签里面。常见用于引入
css样式文件。—— rel 必填属性，当前文件和外部资源直接的关系，值stylesheet加载一个样式表href 必填，外部文件的地址，可以是本地路径或者网络地址。 type 加载外部文件的类型，可以省略。@import 导入外部样式,与link标签比较类似。
@import 导入外部样式,与link标签比较类似。可以加url 或者省略url，导入的外部样式后面
必须加;
必须在第一行导入,可以导入多个样式文件。 link 标签引入的样式，在html加载的同时可
以加载css样式
@import 引入样式，会等当前文件加载完成再去导入文件，如果css文件比较大，可能会出现网页加载完成没有样式。
/* @import url("./css01.css"); */@import "./css01.css";
知识点应用
效果图
