全网整合营销服务商

先设计 后付费,服务更有保障

免费咨询热线:18838171308

网站建设css入门章之基础

1.文档类型

  •              我们新建一个Html文档时,文档句话就会出现这样一段代码:<!DOCTYPE Html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “Http://Www.W3.Org/TR/Xhtml1/DTD/Xhtml1-Transitional.Dtd”>                                                                                     这句话表明文档是过度类型,另外还有框架和严格类型,一般使用过度类型,浏览器对Xhtml的解释比较宽松,允许使用HTML4.01中的标签,但必须符合XHTML的语法。许多朋友在制作页面时,往往喜欢把这句删除掉,在这里建议大家一定要保留这句话,删除它后可能引起某些样式表失效或其它意想不到的问题。

2.语言编码格式

  •         语言编码格式;接在文档类型的下面,<Meta Http-Equiv=”Content-Type” Content=”Text/Html; Charset=Gb2312″ />                                                                             它显示文档的语言编码格式,它标示文档的语言编码。就像我们平时所说的汉语、英语一样。这里的Gb2312告诉浏览器,本文档采用简体中文编码;还有一种常用的编码是UTF-8编码,它是通用的编码。不管我们采用哪种编码,有一点就是包含的Css样式表和其它文件也必须和本文档的编码一样,要不就会出现乱码。

3.html标签

  •           Html是一种文本标记性语言,在文档中必须有结束标签,具有嵌套性,有些单一的标签在本身的结尾打上/来结束,这是Xhtml代码编写的规范。例:<A></A>                  <B></A>                    <Stong></Stong>                           <H1></H1>                     <P></P>               <Head></Head>          <Body></Body>                        <Html></Html>                <Div></Div>
    <Script></Script>              <Link Href=""/>       <Img Src=""/>       <Br/>                <Hr/>    <Ul></Ul>                  <Li></Li>    <Table></Table>

4.css样式

  •            Css样式一般有以下四种;外部样式;行内样式;内部样式;导入样式。            把Css单独写到一个Css文件内,然后在源代码中以Link方式链接。它的好处是不但本页可以调用,其它页面也可以调用,是常用的一种形式,这种样式外部样式。           它是以<Style>和</Style>结尾,写在源代码的Head标签内。这样的样式表只能针对本页有效,不能作用于其它页面使用,这样的样式叫做内部样式。           这种在标签内以Style标记的为行内样式,行内样式只针对标签内的元素有效,写在Body标签里面因其没有和内容相分离,所以不建议使用,这样的样式叫做行内样式。                   链接样式是以@Import Url标记所链接的外部样式表,它一般常用在另一个样式表内部。如Layout.Css为主页所用样式,那么我们可以把全局都需要用的公共样式放到一个Global.Css的文件中,然后在Layout.Css中以@Import Url(“/Css/Global.Css”)的形式链接全局样式,这样就使代码达到很好的重用性,这样的样式叫做导入样式。

5.css的优先级

  •      Id优先级高于Class;
    后面的样式覆盖前面的 ;
    指定的高于继承 ;
    行内样式高于内部或外部样式;
    总结:单一的(Id)高于共用的(Class),有指定的用指定的,无指定则继承离它近的;

6.css盒模型

  •               Css盒模型是本节的重点,前面几个知识点如果说你会表格布局,基本上就不是什么难题,盒模型和Table布局有很大的区别,也正是难点之所在,学习Web标准首先要学习这个盒模型,也是Div排版核心之所在,表格排版是根据大小不一的表格嵌套来排版网页内容,单Css流行以后,是通过Css定义的大小盒子和盒子嵌套来排版网页,这样的方式网页代码比较简单,表现和内容相分离,能兼容更多的浏览器,比如PDA设备也能正常浏览。那么它为什么叫盒子呢?先说说我们在网页设计中常听的属性名:内容(Content)、填充(Padding)、边框(Border)、边界(Margin), CSS盒子模式都具备这些属性。
    我们可以把盒模型理解css盒模型演示图成上面是开了口的盒子,我们从这个口去俯视盒子里面。那么我们可以这样理解盒子模型,内容【Content】相当于盒子里面放的东西;填充(Padding)相当于东西与合子之间放的泡沫,边框(Border)相当于盒子的厚度,边界(Margin)相当于盒子边上留下的空隙方便盒子取出。