学习思路: → 你是谁,从哪来,到哪去.

  • CSS 是什么
  • CSS 几种来源
  • CSS 要干什么.如何结合 HTML

    文章推荐: 浏览器是如何工作的.
    书本推荐: Webkit 技术内幕

Webkit 内核渲染 html/css flow chart (流程图):

html 解析是一条线. css 解析是一条线 两者在某一点会合,形成最终视图.

学习CSS 三个 突破点:

  • 浏览器如何加载和解析CSS - - CSS的5个来源.
  • CSS 如何结合 Html - - 选择器
  • CSS 能控制哪些显示方式 - 盒子模式,浮动,定位,背景,字体.

CSS 和 HTML 的结合.

选择器. CSS 提供胃很多 选择器.

聪明的人类也通过css提供的选择器在其他临近的方面开疆拓土,例如jquery,zen-coding。

CSS 选择器 很重要的话题. 级别 伪类 . 伪元素.

页面呈现: 文字 + 块

  • 文字: 字体,字号,加粗,倾斜,背景色.
  • 块: 盒子模型, 浮动, 定位, display,背景.

布局: CSS 重点. 每种布局 都有各自特点.无好坏.

经典三列布局. Bootstrao 栅格布局 谷歌首页布局. 微博布局. 瀑布流布局.

block 元素.

为何默认情况下p、h1、ul、div都是block显示,就是这里定义的。

所以,不要再说div天生就是block——这句话应该换成: 浏览器默认样式天生规定了div是block——所以才导致了div是block!是默认样式规定的,不是浏览器的内核规定的。    没有设置block的元素,默认为inline显示。

display:list-item

我们在使用display时,常用的值一般是:inline/block/inline-block,用不到list-item。那这里的list-item到底有什么作用?我们不妨亲自试一试:

\<div\>
\<span style='display:list-item;' \>100\</span\>
\</div\>

看到没有,出现了ul-li中的效果了吧,如果再加一个margin-left是不是就跟ul-li一样了?

display table

先给出一个快速思考题:<table>和<div>在容器尺寸上最大区别是什么(只是容器尺寸,不考虑内容区别)?请在两秒钟内说出答案。        答案是: div宽度和父容器相同, table宽度根据内容而定: 即table具有“包裹性”

第一个div默认是block,宽度撑满整个页面。第二个div设置了display:table,宽度根据内容而定。这就是“包裹性”。而提到“包裹性”,又不得不让我想到float和absolute。

display:table-cell

而且是用它来干一件很重要的事情——多列布局。

但是float写出来的东西代码复杂,宽度调整不灵活,浏览器兼容性有问题。所以才有了新方案——table-cell,

选择器的级别要低于body标签选择器,但是{margin:0}依然有效的原因,就是浏览器偷偷的做了优先级的手脚。如果在正常情况下,选择器在遇到标签选择器时,是不会起作用的,及时它是“后加载”的。

inline-block

看看button和input的表现,你就知道inline-block是什么样子了:

伪类 & 伪元素

可以针对任何一种选择器使用.

伪类:

  • UI伪类
  • 结构化伪装类

UI伪类: a:link {} a:hover{} a:active{} a:visited{}

input[tyoe='text']:focus{}
#title1:target{}

结构化伪类

如何实现 表格 间隔显示背景颜色. 最简单的就是用伪类. table tr:nth-child(even){background-color:#f1f1f1;}

table tr:nth-child(even){}
table tr:nth-child(odd){}
table tr:first-child{}
table tr:last-child{}

伪元素 非常重要的概念!其中 :before和:after 非常常用。

:before & :after 在元素前后添加内容.

span:before{content: 'A'}
span:after {content: 'B'}
<span> xu.jian  </span>

→ Axu.jianB

除了可以添加内容(可以是 unicode 编码的方式) 还能自定义执行内容样式.

span:before{content: 'A';color: blue}
span:after {content: 'B';color: gray}
<span> xu.jian  </span>

FontAwesome .Web 最流行的icon字体库. 这些小图标 就是通过伪元素来实现的. 小旗帜图标: .glyphicon-flag:before{content: "\e034"}

清除浮动样式 .clearfix:after{     content: “”; display: table; clear:both; } .clearfix{zoom:1;} // 兼容IE低版本

选择器的扩展

选着器 本来就是css的一种规则. 用于为css 选择html节点.

但是有人通过选择器创造出了其他领域非常伟大的作品.

jQuery query:查询 jQuery流行的原因: 他的query 基于css 选择器的query. 现在的浏览器都支持 queryselectall()方法 其实这就是 w3c 抄袭了 jQuery的设计.

zen-Coding

jQuery 可以通过一段css选择器表达式 从已有的html结构中选择出符合 表达式的 dom组.

zen-coding 反其道而行之 可以根据css选择器表达式 创造出html节点.. 也就是CSS自动补全

选择器类型多了不一定是好事. 下面介绍 类型太多带来的问题 以及解决方案.

选择器优先级
span {color:red;}
.plantext{color:blue}

<span class='plantext'> This is a span  </span>

这里 css 中两个选择器都是针对span的. 两个颜色不一样.
span最终到底什么颜色.



div1 li {color:blue;}
.content .list li {color:red;}
<div id="div1" class="content">
    <ul class="list">
        <li> list1  </li>
        <li> list2  </li>
        <li> list3  </li>
    </ul>
</div>

这个li 改是什么颜色呢….

特指度: specificity

指的是 一个css 表达式的重要程度. 有公式可计算. 值越大 越重要.

“I-C-E” 计算公式

  • ID → 100
  • Class → 10
  • Element → 1

即,针对一个css选择器表达式,遇到一个id就往特指度数值中加100,遇到一个class就往特指度数值中加10,遇到一个element就往特指度数值中加1。

CSS选择器表达式 特指度计算结果
p 1
p.large 11
P#large 101
div p#large 102
div p#large ul.list 113
div p#large ul.list li 114

!important优先级最高,高于上面一切。 * 选择器最低,低于一切。

简版规则: 不想计算. 就看这个 只有三个规则. 一般情况都适用…

  • ID > Class 选择器 > 元素选择器
  • 不同选择器 比较 不区分加载顺序.
    相同选择器 后者覆盖前者.

      <style type="text/css">
          #div1 { color:blue;}
          </style>
    	 
      <style type="text/css">
      .content { color: red;}
      </style>
    

    //虽然后加载,但是特指度低:

    设置样式 高于继承样式.不用考虑特指度. # div1 {color: blue;} span {color: red;}

      <div id="div1">
      <span> span1  </span>
      </div>
    

正真涉及 web 前端知识体系的东西是 浏览器内核 这并不是说让你去详细了解浏览器内核、做出一个浏览器。

浏览器是web前端代码运行的一个平台,浏览器内核里有哪些模块,我们就需要去学习哪些东西

盒子模型.

布局分两类: 文字和块 文字简单 也就字体 颜色 大小 徂斜 … 块: 知识点 非常多. 盒子模型, float,position,display…

盒子 原来就是我早就知道的margin,padding和border,但是我竟然不知道“盒子”这个词。——所以,不要只满足于网上查来的代码段、小技巧,要全面的了解一些知识体系。当然,后来我又知道,盒子模型不仅仅是margin,padding和border,还有其他的知识。

在盒子模型中,我们设置的宽度都是内容宽度,不是整个盒子的宽度。 整个盒子的宽度是:(内容宽度 + border宽度 + padding宽度 + margin宽度)之和。 这样我们改四个中的其中一个,都会导致盒子宽度的改变。这对我们来说不友好。

默认情况下,div的display:block,宽度会充满整个父容器。

为盒子模型设置宽度,结果只是设置了内容的宽度,这个不合理。如何解决这一问题?答案就是:box-sizing:border-box

<div style=’padding:10px; border:5px solid blue; margin:10px; width:300px; box-sizing:border-box;’> paragraph content… </div>

div设置了box-sizing:border-box之后, 300px = 内容 + border + 边框的宽度(不包括margin) 这样就比较符合我们的实际要求了。

纵向 margin 的重叠 p的纵向 margin是16px . 那么两个p之间的距离是32px ?? 不是的. 纵向的margin 是会重叠的.大的会把小的吃掉.

用div 画三角 比如 设置 右边的 三角下拉框. 你当然可以用 背景图片. fontaswsome 来实现…

div {
border:10px solid; 
border-color: #333 transparent transparent transparent;
width: 0;
}

<div></div>

Float 一.

离不开.却倍受折磨. 知识就那么一点.但是 就是驾驭不了各种奇怪现象. 推荐系统的学一下 float

一般用 float 都是为了 横向排版/多列布局. bootstrap 的栅格系统也是使用了float来实现的

并且在css3被普及之前,多列布局的最佳解决方案也是使用float——要不然你就用table。

这样使用确实是对float的一种误解和“误用”,因为float被设计出来的初衷是用于——文字环绕效果。即,一个图片一段文字,图片float:left之后,文字会环绕图片。

“包裹性”也是float的一个非常重要的特性,大家用float时一定要熟知这一特性。

普通的div如果没有设置宽度,它会撑满整个屏幕,在之前的盒子模式那一节也讲到过。而如果给div增加float:left之后,它突然变得紧凑了,宽度发生了变化,把内容“王福朋”三个字包裹了——这就是包裹性。div设置了float之后,其宽度会自动调整为包裹住内容宽度,而不是撑满整个父容器。

float为什么要具有包裹性?其实答案还得从float的设计初衷来寻找,float是被设计用于实现文字环绕效果的。文字环绕图片比较好理解,但是如果想要让文字环绕一个div呢?此时div不被“包裹”起来,那么如何去实现环绕效果?

 清空格

float还有一个大家可能不是很熟悉的特性——清空格。

比如 4张照片 横向排列. 每张照片之间会有个空格(本来是换行,但是浏览器把换行识别成空格.) 第二个例子中,img增加了float:left的样式,这就使得img之间没有了空格,四个img紧紧挨着。

为什么float适合用于网页排版 就是因为float排版出来的网页严丝合缝,中间连个苍蝇都飞不进去。

Float 2 float 具有破坏性,会导致父元素的坍塌. 如何避免这种情况: 也叫 清除浮动.

  1. 给父元素添加 overflow:hidden
  2. 浮动父元素
  3. clear:both.通过在所有浮动元素下方添加一个clear:both的元素,可以消除float的破坏性。 div 里 四张图片 排不满一行. 加这个 下面的内容就会另起一行开始. 而不是跟着图片行.

  4. clearfix 最推荐的.也是 bootstrap 在用的

    .clearfix:after{ content:’’; display:table; clear:both; } .clearfix { zoom:1; //为了兼容低版本的IE }

     <div class='clearfix'>
         <img src="1.jpg" style="float:left">
         <img src="2.jpg" style="float:left">
     </div>
    

    究其原理,其实就是通过伪元素选择器,在div后面增加了一个clear:both的元素,跟第三种方法是一个道理。

合理使用 float 布局.

经典布局: 三列 左中右

<div class='clearfix' style='text-align:center;'>
    <div style='float:left;'>
    左侧内容. 宽度可省略.因为 float具有包裹性.
    </div>
    <div style='float:right;'>
    右侧内容. 宽度也可以省略
    </div>
    <div>
    <p> 中间内容, </p>
    </div>
</div>

两列布局 左右结构

<div style='float:left'>
左侧内容
</div>
<div style='margin-left:100px'>
右侧内容
</div>

Bootstrap 栅格系统 如果您熟悉并使用bootstrap,那么您将不必自己去操心网页布局,因为bootstrap已经把网页分成了12列,您可以随意设置多列布局,非常方便。这就是bootstrap的栅格系统。

display

网页元素. 除了块就是流.
流都包含在块里面.
body 就是一个块.
html 元素 ,除了 块 剩下的都是流.

所有面试 都会问 哪些是块 哪些是流..


|----|----|
|:---|:---|
|none| 此元素不会被显示
|block| 此元素 显示为快级元素. 此元素前后带换行符
|inline| 默认. 此元素显示为 内联元素, 前后没有换行符
|inline-block| 行内块元素
|list-item | 此元素 作为列表显示.
run-in  此元素会根据上下文 作为块及/内联元素.
table  块级表格 前后带有换行符
inline-table 内联表格显示, 前后没有换行符号
table-row-group 一行/多行的分组 类似 tbody
table-header-group  类似 thead
table-footer-group 类似 tfoot

table-row 表格显示 tr
table-columb-group 一个/多个列的分组来显示
table-column 单元格
table-cell 一个表格 单元格 类似 td th
table-caption 一个表格标题显示
inherit 从父元素 继承 display属性值.

inline

文字 图片.
杯子里面的水... 没有大小和形状. 它的宽度 取决于父容器的宽度.

对inline 标签设置 宽度和高度是无效的.
实际宽高都是 auto.


如何把 inline 元素转成 块元素.
display:block
display: table


对inline 元素设置 float.

block 一个元素 设置了 block. 那就必须遵循 盒子模型的规则.

**inline-block.**
inline: 一般文字 图片.
block: 一般 div
inline-block: 既有inline 又有 block
如: button . input. 
button: 页面中输入 \<button\>.会发现是 流排列的.
但是针对这个button 我们可以自定义修改形状 这个就是块的特征.

inline-block的特点可以总结为:外部看来是“流”,但是自身确实一个“块”。

posiition 定位.

- static  静态定位 默认值.
- relative
- absolute
- fixed


什么情况 需要定位.
没有定位会 无法满足我们怎样的需求.
知识被创造出来都有它的用途.


没有定位:
网页 自上而下,从左到右 平埔在浏览器上.
加上 margin padding 调整下间距.
用 float 来浮动某些元素....


现在我们需要 某些元素 跑出来.
给它指定一个位置. 这就必须用到 Position .

relative:

- relative会导致自身位置的相对变化,而不会影响其他元素的位置、大小的变化。
- relative产生一个新的定位上下文

<p>line1</p>
<p>line2</p>
<p style="position:relative;top:10px;left:10px;">
    line3</p>
<p>line4</p>

第三行会向 右下 移动10px.
其他几行的位置不变!!!

absolute参考视频link2

<p>line1</p>
<p>line2</p>
<p style="position:absolute;">
    line3</p>
<p>line4</p>

会发现 .第三行 脱离了文档结构. 124 行重新排列了. 把原本第三行的位置用第四行补上去了.

absolute元素具有“包裹性”。之前<p>的宽度是撑满整个屏幕的,而此时<p>的宽度刚好是内容的宽度。 着时候设置p的背景颜色.就不会整行都有背景色了.只是有文字的地方才有背景色.

  1. absolute元素具有“跟随性”。虽然absolute元素脱离了文档结构,但是它的位置并没有发生变化,还是老老实实的呆在它原本的位置,因为我们此时没有设置top、left的值。
  • absolute元素会悬浮在页面上方,会遮挡住下方的页面内容。

最后,通过给absolute元素设置top、left值,可自定义其内容,这个都是平时比较常用的了。这里需要注意的是,设置了top、left值时,元素是相对于最近的定位上下文来定位的,而不是相对于浏览器定位。下文马上会讲定位上下文。    但是有时候设置top、left值并不是定位的最佳解决方案。例如想要元素A紧跟在元素B的上方,可通过设置元素B为absolute,然后调整B的margin值来确定,这样更有效率。如下图:

 最后,再提几个小知识点。

  1. 设置absolute会使得inline元素被“块”化,这在上一节将display时已经说过;
  2. 设置absolute会使得元素已有的float失效。不过float和absolute同时使用的情况不多;
  3. 上文提到了absolute会使元素悬浮在页面之上,如果有多个悬浮元素,层级如何确定?答案是“后来者居上”

Fixed 其实fixed和absolute是一样的,唯一的区别在于:

  • absolute元素是根据最近的定位上下文确定位置,
  • fixed 永远根据浏览器确定位置。

定位上下文

  • relative 定位: relative元素的定位永远是相对于元素自身位置的,和其他元素没关系,也不会影响其他元素。

  • fix 定位 fixed元素的定位永远是相对于浏览器边界的,和其他元素没有关系。但是它具有破坏性,会导致其他元素位置的变化。

  • absolutie 定位 absolute的定位相对于前两者要复杂许多。如果为absolute设置了top、left,浏览器会根据什么去确定它的纵向和横向的偏移量呢?答案是浏览器会递归查找该元素的所有父元素,如果找到一个设置了position:relative/absolute/fixed的元素,就以该元素为基准定位,如果没找到,就以浏览器边界定位。如下两个图所示:

1 2

目录 不过凡事都有一个定位,如果盲目求多,定位模糊,那样就没有目的没有方向了。

我的身份不是前端开发人员,而是产品经理。我规划的产品是一款项目管理软件,我也是一个PMP。我深知一个项目一定要有目标、范围、进度和质量要求。一旦达到,项目即可结束,准备下一个项目的启动。

《css知多少》的读者建议是了解css基础知识(或者刚刚入门),但是没有系统学习、归纳、总结过的人,还有那些整天忙于coding、bug、加班当饭吃的,而没有时间去看书学习的码工们。《css知多少》里虽然内容不多,但是都是我觉得应该讲的基础,那些不需要讲的基础我就没有讲。所以,如果你是css大牛,那你不必看了(来给我指正一下我也欢迎啊!);如果你css都没有入门,那你也不用看了,我是从来不会写入门教程的。

我的经历告诉我:学习有捷径。学习的捷径之一就是多看看别人是怎么理解这些知识的。举两个例子。如果你喜欢《水浒》,千万不要只读原著当故事看,一定要读一读各代名家的批注和点评,看他们是如何理解的。之前学C#时,看《CLR via C#》晦涩难懂,但是我又通过看《你必须知道的.net》而更加了解了。因为后者就是中国一个80后写的,我通过他对C#的了解,作为桥梁和阶梯,再去窥探比较高达上的书籍和知识。

 最后,真诚的希望你能借助别人的力量来提高自己。我也一直在这样要求我自己。

flex 经验

容器用了 水平布局 下面的项目就不能用 height??.?

容器用了 垂直布局. 下面的项目就不能用 width. width 肯定是100%的啊….

CSS

CSS 选择器

元素选择器 / 类型选择器   type selector   如果 设置 HTML 样式 :  选择器 通常是 某个 html元素,比如 p h1 em  a       选择器 分组: 多个选择器 用一个属性 P,h2 color:red   声明分组:一个选择器 多个属性      ; 很重要

 = 

如果 忘了 ; 号 : h1
  font: 28px Verdana;
  color: blue background: red;
     background 对 color 来说不是一个合法值,而且由于只能为 color 指定一个关键字, 所以浏览器 会完全忽略这个 color 声明(包括 background: black 部分)。 这样 h1 标题只会显示为蓝色,而没有红色背景,不过更有可能根本得不到蓝色的 h1。 这些标题只会显示为默认颜色(通常是黑色),而且根本没有背景色。 font: 28px Verdana 声明仍能正常发挥作用,因为它确实正确地以一个分号结尾。              通配符选择器  *.important   color:red 这个选择器 于 任何元素匹配 .   →  文档下 所有元素都是红色!     Class 可以有多个 值: 

ID 选择器    多个 # 号. id选择器 不引用class 属性的值, 要用id 属性里面的值.   

类选择器 还是 id选择器          值: 都是区分大小写的 .  id 选择器 只能使用一次!!! id选择器  不能结合使用,因为id属性不允许有空格.   比如 网页中 有个最重要的东西(段落 短语 标题) 只会有一个:

mostImportant color:red; background:yellow; 

下面就能用了 . <h1 id=“mostImportant”>This is important!</h1>   简单属性选择:   不需要值的话 可以:  


CSS 图片

<img src=“xxx.jpg” alt=“图片坏掉时候替代显示的文本”>

CSS 表格

表格能极大改善外观   属性后面 ; 不能随便加的.   表格内边距 padding Td padding:15px   单元格间距   <style>下面: table.one border-spacing: 10px 10px          …… 如果 值里面  只有一个值   那么这个值 就是水平和垂直的间距                          如果有两个   第一个水平值 第二个垂直值 

表格文本对齐 Text-align:       水平对齐            左   右     居中  Vertical-align: 垂直对齐         顶部 底部 居中   表格边框  border           tr行     td单元格   th 表格标题 . (默认标题内容是居中的)    标题其实和表格是分开的 标题默认在表格上方,可以改到下方 caption
 
  caption-side:bottom;
      Width 表格宽度 Height 表格高度 

表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。     <html> <head> <style type=“text/css”> table,td,th   {   border:1px solid black( 颜色可改! );      要显示边框 必须上 solid属性.   }   table   {   width:100%;   }   th   {   height:50px;   } </style> </head>   <body> <table> <tr> <th>Firstname</th> <th>Lastname</th> </tr> <tr> <td>Bill</td> <td>Gates</td> </tr> <tr> <td>Steven</td> <td>Jobs</td> </tr> </table> </body> </html>         折叠边框      border-collapse         双边框→单边框 注释:如果没有规定 !DOCTYPE,border-collapse 属性可能会引起意想不到的错误。   table
 
  border-collapse:collapse;
  table,th, td
 
  border: 1px solid black;
          表格布局: table-layout: automatic  /   fixed    自动布局 比较慢 因为要先访问表格里面 所有数据才能布局. 固定布局 速度快. 总宽度100%    单元格分配都是20% 40% 40%       

<html> <head> <style type=“text/css”>

customers

  {   font-family:“Trebuchet MS”, Arial, Helvetica, sans-serif;   width:100%;   border-collapse:collapse;   }  

customers td, #customers th

  {   font-size:1em;   border:1px solid #98bf21;   padding:3px 7px 2px 7px;   }  

customers th

  {   font-size:1.1em;   text-align:left;   padding-top:5px;   padding-bottom:4px;   background-color:#A7C942;   color:#ffffff;   }  

customers tr.alt td

  {   color:#000000;   background-color:#EAF2D3;   } </style> </head>   <body> <table id=“customers”> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr>   <tr> <td>Apple</td> <td>Steven Jobs</td> <td>USA</td> </tr>   <tr class=“alt”> <td>Baidu</td> <td>Li YanHong</td> <td>China</td> </tr>   <tr> <td>Google</td> <td>Larry Page</td> <td>USA</td> </tr>   <tr class=“alt”> <td>Lenovo</td> <td>Liu Chuanzhi</td> <td>China</td> </tr>   <tr> <td>Microsoft</td> <td>Bill Gates</td> <td>USA</td> </tr>   <tr class=“alt”> <td>Nokia</td> <td>Stephen Elop</td> <td>Finland</td> </tr>     </table> </body> </html>


CSS 列表

菜单, 等等 都可以用列表做.     简写属性: list-style    用于把所有用于列表的属性设置于一个声明中。   Li list-style: url(xxx.gif) square inside     列表标志类型 :  list-style-type: Disc 实心圆黑点 Circle  空心圆点 Square 实心正方形 Decimal  1234 Decimal-leading-zero   01 02 03 04 Lower-roman    I ii iii Upper-roman    I II III Lower-alpha  a b c Upper-alpha A B C Cjk-ideographic  一 二 三       无序列表:   圆点 有序列表: 字母 / 数字 /  等等               Ul list-style-type: square   方块列表.   列表标志图片:  lisy-style-image   Ul li list-style-image:url(xxx.gif)   列表标志位置,  inside / outside         例子   内外位置列表   内就是正常位置靠右移  外就是正常位置靠左移.

<style type=“text/css”> ul.inside { list-style-position: inside }   ul.outside { list-style-position: outside } </style> </head>   <body> <p>该列表的 list-style-position 的值是 “inside”:</p> <ul class=“inside”> <li>Earl Grey Tea - 一种黑颜色的茶</li> <li>Jasmine Tea - 一种神奇的“全功能”茶</li> <li>Honeybush Tea - 一种令人愉快的果味茶</li> </ul>   <p>该列表的 list-style-position 的值是 “outside”:</p> <ul class=“outside”> <li>Earl Grey Tea - 一种黑颜色的茶</li> <li>Jasmine Tea - 一种神奇的“全功能”茶</li> <li>Honeybush Tea - 一种令人愉快的果味茶</li> </ul> </body>  


CSS 链接

链接样式 属性 : 颜色 字体 背景 等等   链接状态:   普通 未访问          a:link        color:blue 已访问                    a:visited  color:pink 鼠标在链接上      a:hover    color:green 链接被点击时      a:active   color:yellow   注: 当为链接的不同状态设置样式时, 请按照以下次序规则: a:hover 必须位于 a:link 和 a:visited 之后 a:active 必须位于 a:hover 之后     去链接下划线:             a:link text-decoration:none;   链接背景色:                 a:link background-color:#B2FF99;       例子:   <!DOCTYPE html> <html> <head> <style> a.one:link color:#ff0000; a.one:visited color:#0000ff; a.one:hover color:#ffcc00;   a.two:link color:#ff0000; a.two:visited color:#0000ff; a.two:hover font-size:150%;   a.three:link color:#ff0000; a.three:visited color:#0000ff; a.three:hover background:#66ff66;   a.four:link color:#ff0000; a.four:visited color:#0000ff; a.four:hover font-family:’微软雅黑’;   a.five:link color:#ff0000;text-decoration:none; a.five:visited color:#0000ff;text-decoration:none; a.five:hover text-decoration:underline; </style> </head>   <body> <p>请把鼠标指针移动到下面的链接上,看看它们的样式变化。</p>   <p><b><a class=“one” href=“/index.html” target=“_blank”>这个链接改变颜色</a></b></p> <p><b><a class=“two” href=“/index.html” target=“_blank”>这个链接改变字体尺寸</a></b></p> <p><b><a class=“three” href=“/index.html” target=“_blank”>这个链接改变背景色</a></b></p> <p><b><a class=“four” href=“/index.html” target=“_blank”>这个链接改变字体</a></b></p> <p><b><a class=“five” href=“/index.html” target=“_blank”>这个链接改变文本的装饰</a></b></p> </body>   </html>   

  <!DOCTYPE html> <html> <head> <style> a:link,a:visited { display:block; font-weight:bold; font-size:14px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#98bf21; width:120px; text-align:center; padding:4px; text-decoration:none; }   a:hover,a:active { background-color:#7A991A; } </style> </head>   <body> <a href=“/index.html” target=“_blank”>W3School</a> </body> </html>        


CSS 字体

字体,大小,加粗,风格(斜体),变形(小型大写字母)   Font-size 字体大小.   管理web 文本大小很重要. <h1> - <h6> 来标记标题 <p> 来标记段落. 默认段落的大小是 16px = 1 em     Ie 浏览器 , 最好用em 代替px, 1em 等于当前元素的字体尺寸, 默认段落字体是16px   这时1em=16px 当父元素(一般是body元素) 字体设为20px时, 这时 1em=20px   所有浏览器通用的办法: body 元素(父元素)以百分比设置默认的 font-size 值: body font-size:100%;
h1 font-size:3.75em;  也就是 60 px
h2 font-size:2.5em;                    40px
p font-size:0.875em;                  14px   绝对值: 文本指定大小, 不允许浏览器改变文本大小 在确定输出的物理尺寸时候 很有用. 相对值: 相对周围元素 来设置大小 允许浏览器改变文本大小.     Font-style   字体风格   Normal 正常文本 Italic  斜体文本 Oblique 倾斜显示  一般 italic 和 oblique 没有显示上的区别.   Font-variant  字体变形.  可以有 小型的大写字母.   P font-variant: small-caps;   Font-weight  字体加粗   Bolder 比继承的粗细 加粗一个级别 Lighter 降低粗细级别 100 900  字体有9级别的粗度.  100最细 400正常默认. 700 = bold . 900最粗.   Font-family 字体系列   有通用字体系列:     选择一个系列款式!     但不选择具体字体. 指定字体系列:                                                   选择一个具体的字体.   一般方法: 结合指定字体和通用字体系列, h1 font-family: Georgia, serif; 如果读者没有安装 Georgia,但安装了 Times 字体(serif 字体系列中的一种字体),用户代理就可能对 h1 元素使用 Times。尽管 Times 与 Georgia 并不完全匹配,但至少足够接近。 因此,我们建议在所有 font-family 规则中都提供一个通用字体系列。这样就提供了一条后路,在用户代理无法提供与规则匹配的特定字体时,就可以选择一个候选字体。 如果您对字体非常熟悉,也可以为给定的元素指定一系列类似的字体。要做到这一点,需要把这些字体按照优先顺序排列,然后用逗号进行连接: p {font-family: Times, TimesNR, ‘New Century Schoolbook’, Georgia, ‘New York’, serif;} 根据这个列表,用户代理会按所列的顺序查找这些字体。如果列出的所有字体都不可用,就会简单地选择一种可用的 serif 字体。     字体成比例:  字体中的字符根据自身的不同大小而有不同的宽度. 比如小写 i 和小写 m 的宽度就不同。   上下短线:   是指每个字符笔划末端都有短线装饰。 比如大写 I 顶部和底部就有短线,大写 A 两条腿底部也有短线。   常见的 5种 通用字体系列, Serif                  衬线字体     成比例显示,有上下短线。 可读性非常好.(仅限于小字体上) 所以它应用的最多的地方也正是出版物或者印刷品的正文内容等以大段文字作为表现形式的作品上。   Sans-sarif        无衬线字体 成比例显示, 无上下短线 字体种类比  serif   多多了. 由于没有上下短线, 所以 字体比较圆滑,线条粗细均匀, 较适合 艺术字,标题 等;  不适合大面积文字,因为没有上下短线,字母辨认会有点困难, 字体小的时候 可读性不高,任意视觉疲劳. 强烈建议 大字体下使用.       Monospace    等宽字体 每个字符的宽度都必须完全相同,所以小写的 i 和小写的 m 有相同的宽度。   Cursive  相当于印刷学中的手写体。  偏僻. Fantasy  相当于印刷学中的装饰体。  偏僻.   其他字体: 以下几种  mac 和pc上都常用, ◦ Arial Black ◦ Arial Narrow ◦ Impact 要特别注意Arial Black和Impact字体,它们只有一种形式,没有斜体。因此,在使用这些字体时,一定要将font-weight属性和font-style属性设置为normal。否则,如果将文本设置为粗体或斜体,浏览器就会绞尽脑汁去猜测这些文字应该是什么样子。        


CSS 文本

http://www.w3school.com.cn/css/css_text.asp                                                             Text-indent: +-5em    段落首行缩进文本,  可以是正负值. 百分比.    用负值的话推荐搭配相应的内边距(padding-left: 5em)   Text-align:    内部内容水平对齐. Left / right  / center   /  <center>  / justify Center 文本内容居中 <center>  文本和元素都居中. Justify: 文本行的左右两端都在边界上,通过调整单词和字母的间隔,使得各行的长度恰好相等. 打印的时候 很常见.     Word-spacing 字间隔   默认0  正值 增加间距   负值 减少间距.   Letter-spacing  字母间距,    类似 word-spacing   Text-transform   字符转换 Uppercase  文本全部大写  lowercase   文本全部小写 capitalize      单词 首字母 大写.   H1 text-transform: capitalize     Text-decoration  文字装饰. None           无装饰      超链接不想要下划线可以用这个!. Underline   下划线 Overline   上划线 Line-through 中间线 Blink   文本闪烁.     White-space  空白符. Normal  默认: 多个空白符→一个空格    ;    回车键 也是一个空格.

Direction:ltr  /  rtl   文本方向 正常是左右上下 阅读的, 古文则是 右左 阅读的.


CSS 层叠样式表

Cascading Style Sheets   样式 通常 保存在外部 .css 文件中.  编辑外部.css文件 能控制所有页面的 布局和外观.   外部样式表:  需要应用于很多页面 .   头文件 加入<link>标签        链接到外部css文件.   <head>
<link rel=“stylesheet” type=“text/css” href=“mystyle.css” />
</head>     内部样式表: 当个文档  需要的特殊样式.     头文件中 加入  <style> 标签    <head>
<style type=“text/css”>
  hr color: sienna;
  p margin-left: 20px;
  body background-image: url(“images/back40.gif”);
</style>
</head>   内联样式:   多重样式:   如果 一个网页中 , 外部样式表对a 有 3个属性设置  颜色 红   大小20  位置 居中       内部样式表对a 有2个属性设置                    大小30  位置 靠左 那么 实际情况是  颜色红 大小30 位置左 先用外部样式表,遇到相同的属性设置  由于内置样式表优先级高,相同的属性被修改, 不同的属性被保留.     样式优先级: 4最高  1 最低.   1 浏览器缺省设置 2 外部样式表 3 内部样式表(位于 <head> 标签内部) 4 内联样式(在 HTML 元素内部)     CSS 语法          选择器   若干个声明(属性:值)    声明之间用 ; 号                selector declaration1; declaration2; … declarationN         建议 每行一个声明 增加 可读性.       属性: property 样式属性 style attribute   列子           h1 color:red; font-size:14px;  将 h1 元素内的  文字颜色 设置红色  文字大小 设置14像素      多个选择器 可以用相同的声明  选择器之间用 , 隔开   比如:  h1,h2,h3,h4,h5,h6 color: green;   所有标题元素都是绿色的

CSS 标签

Text-alignment   文字排列   Font-size             文字大小   Background-color    元素背景色 Padding:20px  背景色 框 增大!!    

Background-image     背景图片.     Background-position: 图像位置 关键字 :           Center / left /right / top / bottom           可以出现两个 水平和垂直各一个.           用一个关键字的话  默认是居中的. 可以使用 100px  5cm 甚至          百分比.            background-position:66% 33%;   Background-repeat    背景重复.   Repeat -y    垂直方向重复 Repeat -x     水平方向重复 No-repaet   不重复.    background-reapat: repeat -y;         background-attachment    背景关联,固定背景图片. 如果文档比较长,  文档滚动适合 背景也会滚,  文档滚动过多  会超过图片边缘导致图片消失. background-attachment:fixed  默认值是 scroll  也就是 图片随着文档滚动.       Span.highlight bancground-color:yellow 文本黄色高亮.   用法:     <span class=“highlight”>  文本   </span>        多背景层叠: 注意点 ,p h3  不是随便能取名的 !  好像只有p h1-6 有效. <style type=“text/css”> body background-image:url(/i/eg_bg_04.gif);  p.cflower background-image: url(/i/eg_bg_03.gif); padding: 20px;  h3.radio background-image: url(/i/eg_bg_07.gif);  padding: 20px; </style>   <body>   <p class=“cflower”>我是一个有花纹背景的段落。   <h3 href=“#” class=“radio”>我是一个有放射性背景的链接。</h3>    </p>   </body> 


CSS 定位

Div h1 p    块级元素,  这些元素显示为一块内容.     相对定位 : relative       相对于元素的    初始位置    .进行一个移动 

绝对定位 :  absolute 

固定定位: fixed         距离上下左右 固定距离

css 定位机制 普通流 浮动 绝对定位                                     百分比 / 像素值  设定图片的上下左右 边距.     Position   top/bottom/left/right  

  溢出内容   overflow        启用滚动条显示溢出内容.

设置元素形状: 剪切元素.  clip

垂直对齐方式   vertical-align 

元素 堆叠 顺序    z-index

  Css 浮动    http://www.w3school.com.cn/css/css_positioning_floating.asp


CSS 轮廓

Outline  轮廓 ,是元素周围的一条线, 突出元素的作用   Outline 声明设置所有轮廓属性 Outline-color    颜色 Outline-style    样式 Outline-widyh  宽度    

<style type=“text/css”> p.one { border:red solid thin; outline-style:solid; outline-width:thin; } p.two { border:red solid thin; outline-style:dotted; outline-width:3px; } </style> </head> <body>   <p class=“one”>This is some text in a paragraph.</p> <p class=“two”>This is some text in a paragraph.</p>   

<style type=“text/css”> p { border: red solid thin; } p.dotted outline-style: dotted p.dashed outline-style: dashed p.solid outline-style: solid p.double outline-style: double p.groove outline-style: groove p.ridge outline-style: ridge p.inset outline-style: inset p.outset outline-style: outset </style> </head> <body>   <p class=“dotted”>A dotted outline</p> <p class=“dashed”>A dashed outline</p> <p class=“solid”>A solid outline</p> <p class=“double”>A double outline</p> <p class=“groove”>A groove outline</p> <p class=“ridge”>A ridge outline</p> <p class=“inset”>An inset outline</p> <p class=“outset”>An outset outline</p>  

表格 技巧

<table> 表格    <tr> 行     <td>列      属性:  标签后面加空格 选择一个属性.   <table> :  表格边框厚度    border 表格边框颜色 bordercolor   一行三列:   <table>            <tr>   <td>  </td>  <td>  </td>       <td>  </td>         </tr>     </table>