《research-css-视频教学》教学笔记

视频地址

一，综述

HTML是负责网页的内容；CSS是负责网页的样式和布局的；JavsScript是负责网页的控制的；

二，使用CSS：

1，写入标签的style属性中：只能控制一个标签的样式

<h1 style="color:white;background-color:blue">

2，添加style标签到html页面中：能控制一个页面的样式

<style type="text/css">
h1{
color:white;
background-color:blue
}
</style>

3，将css文件导入html页面中：能控制多个页面的样式，推荐使用

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

优先级：行内 > 页内 > 链接 > 浏览器默认

继承：子标签会继承父标签的某些样式

三，CSS语法：

选择器 { 键值对... }

1，选择器：

基本选择器：

选择器层叠优先级：ID选择器 > 类别选择器 > 标记选择器

复合选择器：

2，样式属性

a>背景（不能继承）

b>段落

c>字体

d>列表特有属性

e>表格特有属性

http://www.w3school.com.cn/tiy/t.asp?f=csse_table_fancy

f>链接伪类选择器和常改变属性

常改变属性：color,font-size, background-color, text-decoration

http://www.w3school.com.cn/tiy/t.asp?f=css_link_advanced

3，布局属性

a>大小

每个HTML元素都是一个盒子。每个盒子有九种属性决定大小：

简写顺序：top->right->bottom->left

滚动条属性：overflow

一旦内容超过盒子大小，则会出现滚动条。通过设置overflow属性，可定制滚动条的行为

b>位置

标准流：行级元素左右排列，左右margin不合并。块级元素上下排列，上下margin合并。

display：

非标准流：分为浮动和定位。

float：通过float属性指定方向。浮动后，块级元素不占一行，并且将浮动到left或right的位置。可选值：left, right

position：通过position属性指名定位方式，并结合top, bottom, left, right属性来设置偏移。

四：设计思路（摘自css禅意花园）

内容决定样式，如果内容本身就十分复杂，而且足够吸引浏览者的注意那么就没有必要添加过多的修饰。
为页面留白是一个很好的理念，文本需要呼吸的空间，浏览者需要思考的空间。间隔的空白并不是什么都没有，信息显示的方式更加优雅，让浏览者倍感轻松。

装饰：
图标是简化了的符号，用来标识某一个事物和概念，或者用一个抽象化的图形来代替一段很长的文字。
LOGO：为什么很多网站都放在左上角？因为浏览者的目光首先落在这里；右上角的内容重要性略输于左上角，但是还是高于其它部分的内容
图像:图像的格式有很多种，但是适合Web的只有三种：GIF JPEG PNG；JPEG不支持透明度 GIF支持1位的透明设置 PNG支持8位的透明度
线条的作用是增加页面的韵律和层次，但是过多的线条会给浏览者网格结构的暗示，无论你的原意是不是这样。所以线条只用在最需要的地方。
光和影的作用是增强真实感 距离感 和层次感，说到底是怎样使用光源的问题。错误的使用光源会把问题搞糟，比如光影效果的不一致。
形状：圆形经常和女性、温暖舒适 爱情联系在一起；圆弧经常和社区、群体、忍耐、运动、安全的含义。三角形通常让人联想到男性阳刚表达诸如强壮、攻击、运动感等含义。浏览者的目光经常被棱角的方向导向，指向上方代表攻击性，指向下方则暗示出消极的意义。方形暗示了力量和根基可以让它看起来足够的监视稳重。
色彩：蓝色是全世界范围内都被广泛接受的颜色。红色和白色同时使用有加强的意义。绿色在美国让人联系到金钱，在其它的文化环境中不一定。橙色标识降价，这也是一个世界范围内的共识。黄色代表了温暖乐观。紫色一直是页面配色的禁忌。棕色是一种中立颜色。黑色代表沉重，白色代表纯洁，可是同时这两种颜色都有悲伤和死亡的暗示。
不同的颜色还会引起浏览者不同的心理联想。CSS现在支持17中颜色。

布局：
HTML文档流按照声明顺序显示在页面上，absolute可以将文档中的位置从原来的位置上删除，并重新定位到新的任意位置上；float并不是定位选项而是给元素分配空间，然后然文档中的其它元素自动环绕其周围；float的优势在于它保留在文档之中而周围的元素也清楚它的位置。
绝对定位是一个最直接最有效最简单的布局方式，而如果那些需要考虑页脚，或者其它元素需要了解周围元素的布局，Float是不二之选。

流式布局liquid页面宽度使用百分比指定，所以浏览器大小变化的时候，页面的宽度也变化。而固定布局的时候页面宽度是不变化的。

内容溢出:使用浮动就一定要同时清除浮动,使用浮动的时候最容易出现的情况就是内容溢出.限制溢出的方法:1.清除浮动 2.同时使用overflow 这个方法比较好 3.斜有时候也会引起内容溢出4.单位使用em代替px