`
不打伞的蘑菇
  • 浏览: 15396 次
社区版块
存档分类
最新评论

div+css入门

    博客分类:
  • web
阅读更多

div+css入门:

 

1.CSS样式的三种用法:

a、直接定义在html标签里。使用style引入。

例:<div style="width:200px;height:200px;">这是第一种用法</div>

b、定义在本页面的<head></head>标签里面。

例:<html>

   <head>

<style type="text/css">

      .second{width:200px;height:200px;}

</style>

   </head>

   <body>

<div class="second">这是第二种用法</div>

            </body>

   </html>

c、定义成一个外部的CSS文件。

例:.three{width:200px;height:200px;}

   存放在与html文件的同目录下面的style.css文件中。

   然后在html文件引入这个CSS文件

   <html>

   <head>

<link href="style.css" type="text/css" rel="stylesheet" />

   </head>

   <body>

<div class="three">这是第三种用法</div>

            </body>

   </html>

 

2.CSS基础属性

      背景: background:#00CCFF url('1.jpg') no-repeat 0px -80px;

      设置背景颜色

          background-color:#00CCFF;

      设置背景图片

          background-image:url('1.jpg');

      属性值 repeat 导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,no-repeat 则不允许图像在任何方向上平铺。  

          background-repeat:no-repeat;

      设置背景图片在背景中的位置。

          background-position:0px -80px;

 

 

  文本: text-indent          缩进元素文本的首行

          text-align                对齐元素中的文本

          word-spacing         设置字间距

          letter-spacing         设置字符间距

          line-height              设置行高

          color                       设置文本颜色

 

 

 字体:font-family              设置字体

          font                          简写属性,作用是把所有针对字体的属性设置在一个声明中。

          font-size                   设置字体大小,一般声明为px, 或者pt

          font-weight               设置字体的粗细,normal是标准字体,bold是粗体

          font-style                  设置字体的风格,normal是标准字体,italic是斜体,oblique是倾斜

  

  列表: list-style-type         设置列表项标志的类型 none:无标记;disc:默认,实心圆;x:空心圆;square:实心方块;

             list-style-image       将图象设置为列表项标志

             list-style-position   设置列表中列表项标志的位置 inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐。 outside:默认。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。

             list-style 简写属性,将所有用于列表的属性设置在一个声明中。

 

 

3.css框模型常用属性。

内边距: padding 定义元素的内边距。padding 属性接受长度值或百分比值,但不允许使用负值。

               padding-left 定义元素左边的内边距

               padding-right 定义元素右边的内边距

               padding-top 定义元素上边的内边距

               padding-bottom 定义元素下边的内边距

 

边框:    border 简写属性,用于把针对四个边的属性设置在一个声明。

               border-style 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。

               border-width 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。

               border-color 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。

               border-top/border-bottom/border-left/ border-right 这四个属性分别单独设置一个边的属性,可以在后面接上style/width/color来设置一个边的一种属性,如:border-top-color用来设置上边框的颜色。

 

外边距: margin 定义元素的外边距。margin属性接受长度值或百分比值,但不允许使用负值。

               margin-top 设置元素的上外边距。

               margin-bottom 设置元素的下外边距。

               margin-left 设置元素的左外边距。

               margin-right 设置元素的右外边距。

 

4.CSS浮动和清理

浮动:#div{Float:left/right/none}

清理:#div{clear:left/right/none}

            left 在左侧不允许浮动元素

            right 在右侧不允许浮动元素

            both 在左右两侧均不允许浮动元素

            none 默认。允许浮动元素出现在两侧。

 

 

 

 

 

 

 

 

 

分享到:
评论

相关推荐

    《DIV+CSS入门教程》

    《DIV+CSS入门教程》是一本专为初学者设计的电子书,旨在帮助读者快速掌握网页布局和样式设计的核心技术。在网页开发中,DIV(Division)和CSS(Cascading Style Sheets)是构建现代网页界面的重要工具。本书通过...

    DIV+CSS入门

    【DIV+CSS入门】是网页设计领域中的基础知识,它代表了两种主要的Web页面布局技术。在HTML(超文本标记语言)中,`&lt;div&gt;`元素是一个通用的容器,用于组织文档中的内容,而CSS(层叠样式表)则负责控制这些内容的样式...

    div+css入门教程.rar

    《div+css入门教程》是一份专为初学者设计的学习资料,旨在帮助用户快速掌握网页布局与样式的最基本技能。这个教程可能包含了理论讲解、实例演示以及实践练习等多个部分,以确保学习者能够全面理解并熟练运用div和...

    div+css入门资料

    【div+css入门资料】 网页设计中,Div和CSS(Cascading Style Sheets)是构建高效、可维护、响应式布局的重要技术。Div是HTML中的一个元素,常用于定义页面上的区块,而CSS则用来控制这些区块的样式、布局和表现。...

    div+css入门教程.pdf

    ### DIV+CSS入门教程知识点详解 #### 一、页面布局与规划 在网页设计与开发领域,`div+css`是一种流行的布局技术,它利用HTML的`div`元素结合CSS样式来实现网页的布局和样式控制。这种方法相较于传统的表格布局...

    div+css入门教程

    【div+css入门教程】 网页布局是Web开发中的核心部分,而`div+css`是实现这一目标的主要技术。Div(层)是HTML中的一个通用容器元素,它用于组织页面内容,而CSS(层叠样式表)则用来控制这些元素的外观和布局。本...

    div+css入门详细教程

    【div+css入门详细教程】 在网页设计领域,HTML(超文本标记语言)与CSS(层叠样式表)是构建网站布局和外观的基石。尤其是Div+CSS的组合,已经成为现代网页开发的标准实践,它极大地提高了网页的可维护性和可扩展...

    DIV+CSS入门布局教程,内容很长,值得一看的.

    《DIV+CSS入门布局教程详解》 在网页设计领域,Div+CSS布局是现代网页制作的标准方式,它能够实现高效、灵活的页面布局。本文主要针对初学者,旨在引导大家了解并掌握Div+CSS的基本原理和应用技巧。 首先,Div...

    DIV+CSS入门例子

    本资源"DIV+CSS入门例子"是针对初学者准备的一份极佳的学习材料,通过具体的实例帮助初学者快速掌握这两种技术的核心概念。 `DIV`(Division)在HTML中是一个通用容器元素,用于组织和分隔页面内容。它的主要作用是...

    div+css入门必备(附有div+css的常用命名)

    而`div+css.pdf` 可能是一本关于`div+css`入门的电子书,涵盖了基础概念、布局技巧、命名规则等内容,是初学者很好的参考资料。 学习并掌握`div+css`,不仅能帮助你创建美观的网页,还能提高开发效率。通过实践和...

    DIV+CSS网站布局从入门到精通源代码

    DIV+CSS网站布局从入门到精通 源代码 朱印宏 邓艳超 编著 北京希望电子出版社 2011年1月 本教程介绍了商业类型的网页设计,以及目前流行的DIV+CSS标准布局方法和实战技法。通过对十个经典案例进行分析,分别从不同...

    DIV+CSS入门模板

    【DIV+CSS入门模板】是网页设计初学者的宝贵资源,它主要涵盖了使用HTML的`&lt;div&gt;`元素和CSS(层叠样式表)来构建网页布局的基础知识。在这个入门模板中,你将学习到如何利用这两种技术实现网页的上中(左右)下结构...

Global site tag (gtag.js) - Google Analytics