css样式使用.docxVIP

一、css样式加载css样式有以下四种：外部样式，内部样式，行内样式，导入样式。 外部样式：link href=css.css rel=stylesheet type=text/css /说明：href:被引用样式文件的。rel：指定连接文件的类型。如rel=stylesheet表示外部连接类型为css 文件。type:链接文件的内容类型。这种形式是把css单独写到一个css文件内，然后在源代码中以link方式链接。它的好处是不但本页可以调用，其它页面也可以调用，是最常用的一种形式。内部样式style type=”text/css”h2 { color:#f00;}/style这种形式是内部样式表，它是以style和/style结尾，写在源代码的head标签内。这样的样式表只能针对本页有效。不能作用于其它页面行内样式p style=font-size:18px;内部样式/p这种在标签内以style标记的为行内样式，行内样式只针对标签内的元素有效，因其没有和内容相分离，所以不建议使用。导入样式@import url(/css/global.css);链接样式是以@import url标记所链接的外部样式表，它一般常用在另一个样式表内部。如layout.css为主页所用样式，那么我们可以把全局都需要用的公共样式放到一个global.css的文件中，然后在layout.css中以@import url(/css/global.css)的形式链接全局样式，这样就使代码达到很好的重用性。二、CSS样式规格例1：h1{ color:#f00;}例2：#content{width:1000px}例3：.left{width:200px;float:left}1、样式规格selector{property1:value; property2:value;…… }其中： selector是选择符 property为属性名 value是对应属性名指定的值。2、选择符 常用的选择符主要有3类：HTML选择符、ID选择符和类选择符。 选择符的组合：当有多个选择符需要设置相同的属性和属性值时，可以用逗号将选择符隔开即一次性设置多个选择符的属性和属性值，这样可以减少样式重复定义。例如，h1,h2,h3{ color:#f00;}三、css盒模型组成css盒模型是DIV排版的核心。传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。这种排版方式的网页代码简洁，表现和内容相分离，维护方便，能兼容更多的浏览器。那么它为什么叫盒子呢？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。理解盒模型的简单方法：1、把它想像成现实中上方开口的盒子然后从正上往下俯视2、边框相当于盒子的厚度3、内容相对于盒子中所装物体的空间4、填充，相当于为防震而在盒子内填充的泡沫5、边界，相当于在这个盒子周围要留出一定的空间，方便取出。【上机练习】 横向导航菜单的制作效果图一：内容页代码：样式代码：css.css最主要就是用float让li向右浮动后，实现横向排列。怎么让它水平居中，其实很简单，首先导航的宽度是固定的，然后设置margin:0 auto;即可实现了效果图二：为了用户体验更加友好，还是把a转换成块级元素，也可以给a设置背景色或背景图片来更加美观了，另外再设置鼠标放上时的样式。相应代码：在效果一的css.css上修改效果三： 用图片美化的横向导航代码：