css cascading style sheets 1996 电脑586

层叠样式表 本身也是文本 {}  工作环境 任何文本编辑器 Dreamweaver webstorm 显示环境-浏览器

优势

避免使用不必要的HTML元素 减少代码量 缩短更新和维护的时间 做出HTML实现不了的特效

新标签

<div> <span> div ：是用来为HTML文档内大块(block-level)的内容提供结构和背景元素       Div的起始标签和结束标签之间的所有内容都是用来构成这个块的，中文我们把它称作        “层”       双标记 <div>内容1</div><div>内容2</div> 显示换行 后跟换行符    span标签：是被用来组合文档中的行内元素。span没有固定的格式表现。当对它应用样式时，它          才会产生视觉上的变化          <span>内容3</span> <span>内容4</span> 行级标签 同一行 理解：容器标签 div标签主要是块 早期是Table布局，现在都是Div+CSS布局 用样式表控制内         容的位置    CSS规则 .placeholder {color:#999;}

选择符(selector)：规则中用于选择文档中要应用的样式的那些元素，该元素可以是（X）HTML

                 的某个标签  （如本例中<h2>标签被选中），也可以是页面中指定的class                  或id属性限定的标记 声明：声明包含在一对大括号"{}"内，用于告诉浏览器如何渲染页面中与选择相匹配的对象。声      明内部由属性及其属性值组成，并用冒号隔开，以分号结束，声明的形式可以是一个或者       多个属性的组合 属性(property):属性是由官方CSS规范约定的，而不是自定义的，除个别浏览器私有属性以外 属性值(value)：属性值放置在属性名和冒号后面，具体内容跟随属性的类别而呈现不同形式，                一般包括数值 单位以及关键字    CSS注释   结构性注释 /*header   提示性注释 /* 12345 */

样式表加载总结

1.内嵌样式-直接在页面的标签里加(不常用，用于局部修改或者单独增加）  <div style="boder:1px red solid">测试信息</div>

2.内部样式表-在head部分加入 （即声明，本页面当中调用）

 <style type="text/css">div{margin:0;padding:0;border:1px red solid;}</style>   写成类的形式来调用    head <style type="text/css"> .font_rea{font-size:30px}</style>      body  <div class="font_read">调用</div>

3.链入外部样式表--在head部分加入（常用）

  <link rel="stylesheet" type="text/css" href="my.css" media="all"/>,引入外部css 文件   宋体12px 使用的最小字体 在CSS样式表中定义类  html头部声明<link href="" type="text/css" rel="stylesheet">     body中在<div class=""></div>来引用 4。导入外部样式表（不常用）   -在head头部加入<style type="text/css">@import(my.css);</style>

样式表优先级

  内嵌样式>内部样式表>导入外部样式表

链入外部样式表与内部样式表之间的优先级取决于所处位置的先后，最后定义的优先级最高

link和@import区别

使用link链接的css是客户端浏览你的网页时先将外部的css文件加载到网页当中，然后再进行编 译显示，所以这种情况下显示不出来的网页跟我们预期的效果是一样，即使一个页面link多个 css文件，网速再慢也是一样的效果 使用@import导入的CSS就不同了，客户端在浏览网页时是先将html的结构呈现出来，再把外部 的CSS文件加载到网页当中，当然最终的效果也是跟前者一样，只是当网速较慢时会先显示没有 CSS统一布局是的html网页，这样就会给阅读者很不好的感觉。这也是现在大部分网站的CSS都采 用链接方式的主要原因。