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都采
用链接方式的主要原因。
3596
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
