昨日回顾

表单标签：

        <form  action=”url” method=”post//get”>

                  <input  type=”text” name=”n1”  value=”xxx” size=”字符数”  readony=” readony”   disabled=” disabled” />

                  <inputtype=”password” name=”n2”  size=”15”/>

                  <inputtype=”radio”  name=”n3” value=”1” />

<input type=”radio”  name=”n3”value=”2” />

<input type=”radio”  name=”n3”value=”3” />

                  <inputtype=”checkbox”  name=”n4” value=”1”/>

<input type=”checkbox” name=”n4” value=”2” />

<input type=”checkbox” name=”n4” value=”3” />

<input type=”file”   name=”n5”/>

<input type=”hidden”  name=”n6”/>

<input type=”submit”  name=”n7”  value=”提交”  />

<input type=”reset”  name=”n8”  value=”重置”  />

<input type=”button”  name=”n9”  value=”提交”  />

<select  name=”n10”  size=”1”>

                  <option  value=”1”>文字1</option>

                  <option  value=”2”>文字2</option>

                  <option  value=”3”>文字3</option>

</select>

<select  name=”n11”  size=”3”>

                  <option  value=”1”>文字1</option>

                  <option  value=”2”>文字2</option>

                  <option  value=”3”>文字3</option>

</select>

<textarea  name=”n12”  rows=”5” cols=”60”></textarea>

        </form>

框架标签：

        <frameset  rows=”200, *” cols=”200, 300, *” >

                  <frame name=”f1” src=”url” noresize=” noresize”  frameborder=”1”></frame>

<frame  name=”f2”  src=”url” scrolling=”yes//no//1//0” ></frame>

        </frameset>

ＣＳＳ初步：

        1,有利于网页外观设置的批量控制

        2，有利于网页外观的精确控制

        3，有利于网页的维护升级修改。

布局：将网页中要表现的内容（文字和图片等）放在合适的我们需要的位置。

        table布局è  table+css布局è   div+CSS布局

布局要解决的问题两个：

1，怎么把“盒子”从上到下排列出来——某些盒子（比如div）直接可实现。

2，怎么把“盒子”从左到右排列出来——盒子进行左右浮动可实现

文字/段落样式属性：

设定文字颜色：color：颜色值//颜色名

设定文字大小：font-size：文字大小（px单位）

设定文字的粗细：font-weight：bold//normal

设定文字的字体：font-family：字体名1，字体名2，……. ——可以设定多个字体

设定字体的斜体/非斜体：font-style：italic//normal

设定行高：line-height：px值

设定字符间距letter-spacing：px值，适用于英文单词中的字母或中文字

设定单词间距：word-spacing：px值，适用于英文单词

设定文字的水平对其方式：text-align：left//center//right

设定首行缩进的距离：text-indent：px值

设定文字的划线：text-decoration：underline//中划线//上划线

设定文字的垂直对齐：vertical-align：top//middle//bottom

css的样式分类：

1，行内样式：<标签名  style=”属性名1：值1；……. ”  >。。。。</标签>

2，内部样式：<style>  选择器{属性名1：值1；…….}</style>

3，外部样式：是一个独立的css文件，通过html文件中link标签引入到当前网页中，如下：

a)<link rel="stylesheet"type="text/css" href="abc.css" />

b)abc.css文件中的语法是：选择器{属性名1：值1；…….}

4，导入样式：也是一个独立的css文件，但是在css文件中通过@import命令进入（导入）到该css文件中，自然，该css文件也会被html文件引入，如下：

a)html文件中：<link rel="stylesheet" type="text/css"href="abc.css" />

b)abc.css文件中：@import url("def.css");

注意：

1，他们的优先级就是上述列出来的顺序，前面的更优先（通常就是就近原则）

2，通常，行内样式和导入样式不太使用。

3，也就是说，内部样式和外部样式用的多，他们的区别是：

a)内部样式只能在当前网页使用

b)外部样式可以给多个网页使用

选择器形式和分类：

选择器：就是指用某值语法来代表html中的某个（或某些）标签（元素），其实也就是找到对应的元素的语法而已。然后该选择器中的属性设定就会对该元素生效。

通常选择器分以下几种：

1，标签选择器：

a)标签名{属性设定;…….}

2，类选择器（class选择器）：

a).类名{属性设定;…….}

3，id选择器：

a)#id名{属性设定;…….}

b)特别注意：在一个网页上的标签的id名不可以重复！

4，通用选择器：就一个代表所有标签（即可以对应所有标签）:  

a)*{属性设定;…….}

5，伪类选择器：就固定的几个，这里只介绍a标签上可用的几个，用于表示a标签处于不同的状态：

a):link          ——链接的初始状态

b):visited            ——链接的访问之后的状态

c):hover    ——链接的在鼠标放上去时的状态

d):active   ——链接的在鼠标“摁住”但还没有抬起来时的状态

e)说明，上述4个伪类通常用于a，但个别（比如hover）也可以用于很多其他标签。如果要跟其他标签分开，通常需要使用这种形式：a:link{…}   a:visited{….}  a:hover{….} a:active{…..}

6，复合选择器之层级选择器：

a)形式：选择器1  选择器2{属性设定;…….}

b)含义：选择器1所选中的标签中的由选择器2所选中的标签

c)说明：选择器1，选择器2均可以是前面5种基础选择器或其组合

d)举例：.c2 p{….}   div p{….}    .c2 p span{….}   #d1 .c2  p{….}  

e)注释：其层级的书写不一定要严格一级一级写下来。

7，复合选择器之分组选择器：

a)形式：选择器1，选择器2，…. {属性设定;…….}

b)含义：表示多个不同的选择器均使用该共同的属性设定。

c)举例： #d1, div, p{….}    #d1 p, .c2,  p  .c2{….}

d)说明：分组选择器进一步简化了代码（重用代码）

到现在为止：

1，css属性的设定形式， 2样式的分类，3选择器的分类， 4文字样式，

盒子初步

盒子是css技术中的核心观念！

什么是盒子：几乎任何一个可以表现出来的标签，都可以称为盒子。

盒子的形状？：矩形，具有上下左右4条边；

盒子从容纳性角度来说，可以分为两种：

1，容器盒子：里面可以放其它内容，其实就是双标签

2，非容器盒子：里面不能放其它内容了，其实就是单标签

盒子具有如下特性：宽高（width,height），边框(border)，外边距(margin)，内边距(padding)

盒子模型示意图：

盒子的实际所占据的区域包括（从内到外）：内容区域，padding区， border区，margin区

特别注意：我们设定盒子的宽高，通常只是盒子的内容区的宽高。

两种最常用的也是最重要的盒子区别：

块盒子：一个默认情况下会独自占据一行（不管其自身的宽度）的盒子，就称为块盒子。

行内盒子：一个默认情况下会在一行中跟其它内容连续出现，直到碰到行尾才自动换行，就称为行内盒子。

重要区别：行内盒子的宽高不可以使用css设定（即width，height无效），也不可以设定其上下padding和margin。

浮动初步

浮动的含义：其实就是指让一个“盒子”往某个指定的方向（左或者右）“浮起来”，其实可以认为该盒子已经不跟其兄弟（姐妹）元素挤在一起了，而是浮到“上一层”了。

浮动具有一定的“破坏”效果，我们需要在使用浮动布局的过程中，来消除其破坏效果，基本做法有两：

1，具有浮动的盒子的父盒子上使用属性：overflow:hidden;

2，具有浮动的盒子的父盒子中的最后加一个空的div如下：<div  style=”clear:both”></div>

学习html+css第四天笔记,古老的榕树,5-wow.com