学习html+css第四天笔记

昨日回顾

表单标签:

        <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>


CSS初步:

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

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

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


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

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

布局要解决的问题两个:

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

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


文字/段落样式属性:

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

设定文字大小:font-size:文字大小(px单位)

设定文字的粗细:font-weightbold//normal

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

设定字体的斜体/非斜体:font-styleitalic//normal

设定行高:line-heightpx

设定字符间距letter-spacingpx值,适用于英文单词中的字母或中文字

设定单词间距:word-spacingpx值,适用于英文单词

设定文字的水平对其方式:text-alignleft//center//right

设定首行缩进的距离:text-indentpx

设定文字的划线:text-decorationunderline//中划线//上划线

设定文字的垂直对齐:vertical-aligntop//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)说明:分组选择器进一步简化了代码(重用代码)


到现在为止:

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


盒子初步

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

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

盒子的形状?:矩形,具有上下左右4条边;

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

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

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

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

盒子模型示意图:


盒子的实际所占据的区域包括(从内到外):内容区域,padding区, border区,margin

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


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

块盒子:一个默认情况下会独自占据一行(不管其自身的宽度)的盒子,就称为块盒子。

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

重要区别:行内盒子的宽高不可以使用css设定(即widthheight无效),也不可以设定其上下paddingmargin


浮动初步

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


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


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

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







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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。