div+css教程(入门到精通)详细讲解

div css 教程 入门到精通 目录 一 div css 教程 入门到精通 详细讲解 二 DIV CSS 网页布局常用基础知识 三 div css 常用布局入门 四 div css 网站首页布局实例教程 一 div css 教程 入门到精通 详细讲解 CSS 高度 css height DIV CSS 高度基础知识 这里的 CSS 高度是指通过 CSS 来控制设置对象的高度 使用 CSS 属性单词 height 单位可以使用 PX em 等常用使用 PX 像素 为单位 实例 yangshi height 300px 即设置了 yangshi 选择器对象高度为 300px CSS 高度单词 height CSS 最大高度 max height IE7及以上版本浏览器支持 CSS 最小高度 min height IE7及以上版本浏览器支持 CSS 上下居中 line height 以上可跟值为数字加单位 Html 初始高度与 DIV CSS 高度对照 以前 html 直接设置高度 width 300 这种方式嵌入表格标签内 而且无需带单 位 默认以 px 像素 为单位 实例 我的高度为 100px 我高度为 50px 分别设置了高度为100px 和50px 的两行表格 接下来我们讲解 CSS 高度使用方法及技巧 1 CSS 自适应高度 一般我们需要让宽度一定时高度随内容增加而增高 此时我们将无需设置高度 即可实现此效果 同时也无需使用 height auto 来实现高度自适应 通常默认情 况下不设置高度 对象高度即是自适应高度 2 固定高度及隐藏超出固定高度的内容 很多时候我需要设置对象固定高度同时让多余的内容不显示出来 解决办法 设置固定高度值 和设置内容不被溢出 隐藏超出内容 如设置一个高度为50px 宽度为50px 并禁止内容超出此高度宽度 为了观看 效果同时设置对象为1px 黑色边框演示 CSS 代码 yangshi height 50px width 50px overflow hidden border 1px solid 666 Html body 内代码 演示 内容 测试内容高度超出演示实例 divcss5实例 CSS 固定高度效果截图 3 说明观看此上图 看出设置固定高度宽度并设置1px 的黑色边框 并且实现内 容未超出设置高度宽度 禁止溢出设置 CSS 高度 CSS 宽度的 CSS 属性单词及值 overflow hidden 3 设置最小高度 使用 CSS 单词 min height 为什么要设置最小高度 有时特别是在文章页面里因为文章内容多少参差不齐 所以我们可以使用最小 高度设置让左右结构的布局对齐 感觉饱和一点 但是我们又不能设置固定高 度 因为内容可能多可能少 当多的时候自然设置固定高度就不会显示完整内 容 这里有个问题就是 IE6不支持最小高度设置 min height 解决办法使用 css hack 方法来解决 大家知道区别不同浏览器时候用的 css hack 中 IE6可以使用 来区别其它浏览器 最小高度运用 yangshi min height 50px height 50px 这样就可以解决此问题 说明这里就不 能再使用 overflow hidden CSS overflow 设置隐藏超出内容溢出 完整 CSS html 最小高度实例代码 CSS 高度实例 yangshi min height 50px height 50px width 150px border 1px solid 666 演示 内容 测试内容高度超出演示实例测试内容测试内容高度超出演示实例高度超出演示实例 divcss5实例 效果图 以上是超出内容自动适应高 这里是内容够少 未能充满设置最小高度 无论在 IE6还是 IE7及以上版本浏览器或者火狐谷歌浏览器都支持最小高度的设 置 关于 CSS height 高度总结说明 这里讲解 CSS height 与 html height 区别及用法 同时讲解了最小高度 自适应 高度 固定高度的设置及运用 2 CSS 宽度 CSS width 一 宽度基础知识 CSS 宽度是指通过 CSS 样式设置对应 div 宽度 以下我们了解传统 html 宽度 宽度自适应 固定宽度等宽度知识 传统 Html 宽度属性单词 width 如 width 300 CSS 宽度属性单词 width 如 width 300px 最大宽度单词 max width 如 max width 300px css 手册中了解 max width 最小宽度单词 min width 如 min width 300px css 手册中了解 min width 同时你可以进入 CSS 在线手册 中 width 手册了解详细基础知识 二 Html 初始宽度与 DIV CSS 宽度对照 1 传统 html 中宽度 width 300 即设置对应元素宽度为300px 像素 而宽 度值后无需跟单位 默认情况下以像素 px 为单位 如 我的宽度为300px 即 设置了对应表格 td 的宽度为300px 2 div css 中宽度设置 width 300px 即设置对应 CSS 样式为300px 这里需要 跟单位 如 header width 300px 即 定义 header CSS 选择器样式为300px 宽度 而在标签运用 我的宽度为300px 宽度 三 css 宽度演示与讲解 1 CSS 宽度自适应 常常我们看见一个网页宽度随浏览器宽度改变而自动改变 如 一样 宽度是自适应宽度 这里运用了百分比即可实现自适 应宽度 如果网页总宽度为80 即 width 80 将使此宽度知道自适应宽度为浏览器 80 当然前提是设置最外层没有宽度限制条件下 DIV CSS 自适应宽度例子 CSS 样式代码 body margin 0 auto text align center yangshi width 80 border 1px solid 003 margin 0 auto Html 中 body div 代码 我是80 自适应宽度 这样即设置内容居中 为了方便测试加上1px 黑色边框 大家可以测试观察其 内容是随浏览器拉大而宽度变宽而自适应宽度80 而左右两边始终有10 宽 度留着 因为设置此 box 宽度为80 以上为 CSS 宽度 width 演示图解 2 CSS 宽度固定 固定即设置宽度为固定值即可如 很多时候需要对网页的宽度样式设置为固定 这时只需要设置宽度 width 300px 即设置对应固定宽度为300像素 3 最小固定宽度 CSS 样式属性单词 min width 兼容支持 min width 除 IE6不支持为 IE7 以上浏览器 火狐 谷歌都支持 常常用于设置宽度最小值 如设置对应 DIV 的样式最小宽度值限制 例 yangshi border 1px solid 003 min width 300px 即设置最小宽度为300px 当然一般很少设置最小宽度 如果要使用最小宽度即 使用浮动 float 可使用最小宽度限制 最大固定宽度 CSS 属性 单词 max width 兼容支持 max width 除 IE6不支持为 IE7以上浏览器 火狐 谷歌都支持 最大固定宽度是对对应的样式 div 设置最大宽度限制 即内容不超过此设置最 大宽度 最大宽度限制例子 yangshi border 1px solid 003 max width 300px 即设置了最大宽度限制为300px 以下为设置最大宽度限制演示图 通过图例和基础知识 DIVCSS5给大家讲解了关于 css 宽度知识 希望大家能掌 握其宽度运用 CSS 边框 即 CSS border CSS 边框基础知识 CSS 边框即 CSS border 是控制对象的边框边线宽度 颜色 虚线 实线等样 式 CSS 属性 Html 原始边框与 DIV CSS 边框对照 Html 表格控制边框 border 1 bordercolor 000000 说明 控制表格边框宽度为 1px 颜色为黑色 默认为实线样式边框 DIV CSS 边框 border color 000 border style solid border width 1px 说明 以上代码为设置对象边框颜色为黑色 边框为实线 宽度为 1px 边框 边框样式包括 设置上边框 border top 设置下边框 border bottom 设置左边框 border left 设置右边框 border right 边框显示样式 border style none hidden dotted dashed solid double groove ridge inset outset 参数值解释 none 无边框 与任何指定的 border width 值无关 hidden 隐藏边框 IE 不支持 dotted 在 MAC 平台上 IE4 与 WINDOWS 和 UNIX 平台上 IE5 5 为点线 否则为实线 dashed 在 MAC 平台上 IE4 与 WINDOWS 和 UNIX 平台上 IE5 5 为虚线 否则为实线 solid 实线边框 double 双线边框 两条单线与其间隔的和等于指定的 border width 值 groove 根据 border color 的值画 3D 凹槽 ridge 根据 border color 的值画菱形边框 inset 根据 border color 的值画 3D 凹边 outset 根据 border color 的值画 3D 凸边 例子 设置上边框为 1px 实线黑色边框 border top color 000 border top style solid border top width 1px 或简写 border top 000 solid 1px 可以根据以上实例举一反三 可以设置左 右 下的边框 CSS 样式 DIV CSS 边框技巧 如果设置对象上 下 左 右边框相同样式 可以简写无需分别写出上下左右 的属性及对应值 例 设置上下左右边框为 1px 宽度 实线 黑色边框 CSS 代码如下 border 1px solid 000 完整 DIV CSS 实例 实例内容设置 CSS 命名 为 yangshi 的 css 选择器 设置该属性选择器样式为 边框为 1px 宽度实线黑色边框 宽度为 200px 高度为 50px 的矩形 CSS 代码 div body border 0 margin 5px padding 0 初始化网页样式 yangshi border 1px solid 000 width 200px height 50px 设置对象样 式 HTML 中对应 DIV 代码 divcss5 实例 CSS 边框实例 CSS 实例 上图为 CSS 边框 CSS border 实例主要片段代码截图 说明 以上代码对应显示效果 看到实线以外虚线是因 DW 软件特自动对 DIV box 区加虚线 实际浏览是没有此虚线 特此说明 三边有边而一边没有设置技巧 如左右下有边框并且样式为黑色 1PX 宽度实线边框 而上边没有边框 CSS 代码 border 1px solid 000 border top none 注意 border 1px solid 000 和 border top none 前后顺序不能调换 因为 CSS 读取有从上到下 从左到右读取原理 而先设置了整个边框样式 后再加上声 明顶部上边边框为 none 没有意思 即实现该实例要的样式 从而无需分别设 置下 左 右 从而节约一定代码 总结 CSS 边框 常见对对象设置 CSS 样式使用属性代码 border 1px solid 000 CSS 背景 CSS background CSS 背景基础知识 CSS 背景这里指通过 CSS 对对象设置背景属性 如通过 CSS 设置背景各种 样式 CSS 中背景单词 background CSS 手册查询 background 手册 background color 设置颜色作为对象背景颜色 background image 设置图片作为背景图片 background repeat 设置背景平铺重复方向 background attachment 设置或检索背景图像是随对象内容滚动还是固定的 background position 设置或检索对象的背景图像位置 Html 原始背景与 CSS 背景对照 Html 是指对应效果的 table 背景设置 Html 背景单词 Bgcolor 设置背景颜色 与 CSS 背景颜色对应 background color Background 设置图片作为背景与 CSS 背景图片对应 background image 最原始 HTML 背景设置演示代码 这里设置了 table 背景颜色为 996600 然后设置了 td 的背景图片为 背景颜色 如果是给 table 设置背景颜色可以使用 bgcolor 颜色值 即可设置对象背景颜色 如果是 CSS 背景颜色 可使用 background color 颜色值 或 background 颜色 值设置对象背景颜色 CSS 背景颜色设置 DIV CSS 演示图 以上截图分别使用 background color 和 background 来设置对象背景颜色 CSS 图片背景 这里说的是以图片作为背景图片 CSS 背景图片详细介绍 CSS 可以使用 background 或 background image 直接引用图片地址来设置图 片作为对象背景 background url DIVCSS5 的 LOGO 图片作为背景 或 background image url 样设置图片作为背景有个缺陷就是图片会上下左右的重复 接下来我们只需看 以下图例教程即可掌握 CSS background 图片背景样式 固定 滚动 实现这个效果使用 CSS 单词是 background attachment 当然通常情况下背景 默认是固定的如果是自己使用 CSS background 简写则如上图 background attachment 使用解析 background attachment fixed 背景固定 background attachment scroll 背景图像是随对象内容滚动 DIV CSS 背景居中 CSS 背景分为左右居中和上下居中 具体左右居中方法见上图 背景图像上下居中 可以使用计算上下高度然后平分设置 如上下高度距离为 500px 那就设置图片居顶部多少 PX 可以让图片实现上下居中 CSS background 背景 总结 使用图片作为背景在一个网页布局中常常会遇到 希望大家能在实际中掌握其 知识 一般设置对象图片作为背景属性实例 background 666 url 图片地址 no repeat center top 解释首先设置背景颜色 紧跟设置图片作背景 紧跟图片 是否重复 然后跟图片在对象位置 前面的背景颜色可以不用设同时不是必须 一般使用图片作为对象背景如果要设置图片是否重复显示距离位置将设置图片 位置 1 设置图片作为背景如果图片设置图片在 X 坐标方向重复 如果再设置图片 在对象位置的左或右位置时将无效 可设置在对象上或下位置开始显示 2 设置图片作为背景如果图片设置图片在 Y 坐标方向重复 如果再设置图片 在对象位置的上或下位置时将无效 可设置图片在对象左或右位置开始显示 3 如果设置背景完全重复显示 那设置图片在对象上下左右位置开始显示将无 线 希望大家好好理解有不懂的地方可以进入 CSS 研教室讨论区发表问题 我们 将尽力答复您 div css 中 float 认识及 css float 用法 float 是什么意思 float 是浮动 翻译成中文也是浮动意思 进入对应 css 手册中 float 手册了解 float 基本信息 float 的作用 通过 css 定义 float 浮动 让 div 样式层块 向左或向右 靠 浮动 float 语法 float none left right 参数值 none 对象不浮动 left 对象浮在左边 right 对象浮在右边 接下来我们来通过一个 div css 实例讲解 float 使用技巧 DIV CSS 实验一 Css 样式实例内容 我们让文字和图片在一个固定宽度 div 层内 让蓝色背景 文字内容居右 小图片居左 CSS 案例演示最终效果图如下 1 首先我们设置一个最外层的宽度为 300px 高度为 200px 的 css 命名为 box 的 css 选择器代码如下 知识点 px 是什么意思 box width 300px height 200px 2 设置 box 内的文字内容部分 css 样式命名为 yangshi 并设置背景为蓝色 宽度为 120px 居右浮动 yangshi width 120px float right background 0066FF 3 设置图片居左浮动 div css 样式 img float left 4 body 内的 div 布局 代码如下 我是 网站 测试内容 说明 这里 img 标签是链接外部图片 图片名为 demo gif 最终演示结果截图 CSS 实验二 接下来我们演示使用 div css 让这里小图片居右 上个例子是居左 蓝色背 景文字内容区居左 上个例子是居右 扩展 css 居中 这里我们只需要改变 yangshi 的 float right 为 float left 和图片 css 样式 img float left 为 img float right CSS 代码如下 box width 300px height 200px yangshi width 120px float right background 0066FF img float left html 中的 css 代码和内容不变 最终演示结果截图如下 希望通过以上两个 css 实例对你认识 float 有帮助 希望大家多少实际操作实践 试试 css font css 文字 DIV Css 开发中设置字体常用 css 属性单词英文 css font 可进入 CSS 手册查看 更详细 CSS 文字知识 font font family 字体 font size 字大小 font style 字样式 font weight 加粗 text decoration 下划线 font variant 字母大 小写 text transform 英文大小写 letter spacing 间隔 接下来 我们一一实例讲解通过 css 文字控制方法 1 字体大小使用到 font size 实例如下 TOP 首先设置了 font size 的值为 36px 则下面结果显示字体比较大 2 文字的颜色使用 css 中 color 颜色属性通过 color 更样式值设置文字样式的 颜色为红色 TOP TOP 3 Css 来控制文字的下划线方法 css font 用到 text decoration 可以进 css 手册了解对应值 你还可能还希望了解 css 链接 css 超链接样式 css 下 划线 TOP 4 文字的间隔 进入详细的 CSS 字间距了解 TOP 5 文字的字体 用到 css 样式属性 font family 字体设置图例如下 一般 font family 字体可以跟常见的 宋体 新宋体 黑体 注意的是不能自 己设置不参加的字体样式 虽然在自己电脑上可能自己设置字体能表现出了 但是一般电脑用户都没有添加字体的 所以在这里字体只能设置常见 系统自 带的字体 而不能设置自己安装的字体 电脑自带字体 和常设置文字字体有黑体 新宋体 宋体 Arial Helvetica sans serif 等 TOP 6 文字的上下行间距 使用到 css 文字设置单词 line height 这里设置 line height 50px 可以看到演示 css font 文字段 我是被 css 控制文字样式演示 离上下文字间 隔距离是通过 line height 来实现 也许你需要了解 br 和 p 的区别 TOP 7 字体样式 斜体 使用到 css 样式中 font style 标签设置如 font style italic 当然可以使用标签将文字变为斜体 TOP 8 字加粗方式 可以直接对需要加错文字前加文字后加或 来实现 对文字的加粗 这里你可以用 css 来控制对文字加 粗 这里用到 font weight 来设置如 font weight bold 这里 font weight 的值可以为 100 900 不等的方式为值 值越大字体越粗 如果 值为 bold 则为正常加粗 同使用 b 或 strong 一致效果 TOP 9 英文字 字母大小写 css font 使用 css 中 font variant 字母全大小 如 font variant small caps 选择性大小写 text transform 如 text transform capitalize 开头第一个字母大写 text transform 语法 text transform none capitalize uppercase lowercase 参数 none 无转换发生 capitalize 将每个单词的第一个字母转换成大写 其余无转换发生 uppercase 转换成大写 lowercase 转换成小写 font variant 语法 font variant normal small caps 参数 normal 正常的字体 small caps 小型的大写字母字体 提升与扩展思维 css font 代码 font 12px 1 5 Arial Helvetica sans serif 一般常用以上代码定义一个网页的文字的 css 样式意思 这段代码以上是字体 的大小是 12px line height 为 1 5 倍字体尺寸 字体是 Arial Helvetica sans serif Css font 提升图例讲解 这样一定义可以节约很多代码 使用更简便以上即是 div css 网站为大家通俗的 介绍 css font css 文字相关知识与实例图讲 CSS 加粗知识与 CSS 加粗实例 DIV CSS 基础知识 CSS 加粗这里指的是通过 DIV CSS 控制对象的加粗 使用 CSS 属性 单词 font weight 对象值 从 100 到 900 最常用 font weight 的值为 bold font weight 参数 normal 正常的字体 相当于 number 为 400 声明此值将取消之前任何设置 bold 粗体 相当于 number 为 700 也相当于 b 对象的作用 bolder IE5 特粗体 lighter IE5 细体 number IE5 100 200 300 400 500 600 700 800 900 详细基础加粗知识请进 CSS 手册中的 font weight 手册 Html 常规加粗标签 以前 html 直接对对象加粗的标签如下 或两者效果相同 加粗实例 代码如下 我被加粗 我也被加粗了 我未被加粗 html 加粗实例截图 CSS 加粗基础技巧实例 CSS 代码 yangshi1 font weight bold yangshi2 font weight 800 Div html 代码 我被加粗 我也被加粗了 我未被加粗 CSS 加粗结果演示 说明此图为 CSS 加粗实例片段代码和结果图 这里通过 CSS 来控制加粗文字 方式来加粗对象 所以一般对文字对象加粗标题加粗即可使用此方法对其加粗 总结与推荐 1 在 html 对对象直接加粗可以用 或对其加粗 2 使用 CSS 加粗对象可以使用 font weight bold 即可实现加粗 DIV CSS 下划线基础 CSS 控制下划线出现用到地方 TOP 在 DIV CSS 网页中常常使用 CSS 代码来人对象文字内容加上下划线 使用 CSS 属性 单词 text decoration CSS 手册了解 text decoration none underline blink overline line through text decoration 下划线 CSS 单词值参数 none 无装饰 blink 闪烁 underline 下划线 line through 贯穿线 overline 上划线 二 HTML 常规下划线标签 TOP 在 HTML 直接使用下滑线标签 U 即可对对象文字加下划线 实例 我被 U 标签加下滑线 三 CSS 控制对象下划线属性样式 TOP 下面我们进行使用 U 标签和 text decoration 进行设置下划线实例对比如下图 四 下划线高级运用 TOP 我们接下来为大家讲解常见 CSS 超链接 当随便经过时候文字对象被加下划线 代码如下 下划线演示 WWW DIVCSS5 COM yangshi a text decoration none 鼠标经过热点文字被加下划线 yangshi a hiver text decoration underline 鼠标经过热点文字被加下划 线 divcss5 请将以上代码复制新建 HTML 即可查看该实例样式 更详细超链接讲解请进 DIV CSS 超链接 css 注释 css 注解 什么是 CSS 注解 什么是 CSS 注释 CSS 注释是什么 CSS 注解是什么 css 注解 css 注解 又被称作 CSS 注释 css 注释 是有 css 文件代码间 加入注释 解释说明意思 就像我们学习语文一样在文言文 诗词 文章用不 同颜色进行批注说明一个道理 通常情况下 css 注解是不会被浏览器解释或被 浏览器忽略的 CSS 注解作用 CSS 注释作用 css 注解 css 注释 可以帮助我们对自己写的 CSS 文件进行说明 如说明某 段 CSS 代码 是什么地方 功能 样式等说明 以便我们以后维护具有一看即懂 的方便性 同时在团队开发网页是时候合理适当的注解有利于团队看懂 css 样 式是对应 html 哪里的 以便顺利快速开发 div css 网页 CSS 注解用法 css 注释用法 css 注解 CSS 注解是以 斜杠一个星号开始 以 星号斜杠结束 注解 说明内容放到 中间 css 注解 div CSS 注释示例如下 的 css 注解实例 css 注释实例 body 定义 body text align center margin 0 auto 头部 css 定义 header width 960px height 120px 实例图如下 css 注解 CSS 注释 注意说明 注解 和 必须以半角英文小写 并且 符号不要和注释内容紧 挨在一起 至少需要一个空格位置空着 padding css padding 用法详解 padding 属性是 css 用于在一个声明中设置所有 padding 属性的简写属性 Padding 属性包含了 padding left 左补距离 设置距左内边距 padding top 头顶补距离 设置距顶部内边距 padding right 右补距 离 设置距右内边距 padding bottom 底补距离 设置距低内边距 其二维构建图可见 CSS 属性 二维图 padding 的解剖图 padding left 用法 padding left 10px 这个意思距离左边补距 10 像素 可跟 百分比如 padding left 10 距离左边补 10 的距离 padding right 用法 padding right 10px 这个意思距离右边补距 10 像素 可 跟百分比如 padding right 10 距离右边补 10 的距离 padding top 用法 padding top 10px 这个意思距离顶边补距 10 像素 可跟 百分比如 padding top 10 距离顶边补 10 的距离 padding bottom 用法 padding bottom 10px 这个意思距离低边补距 10 像素 可跟百分比如 padding bottom 10 距离底边补 10 的距离 注意 padding 中间的链接 号 设置距离值时用 并赋予值 并以 结 束 并且全部用小写半角字母 如果是左右上下都需要设置 padding 的值时可以简写来实现 以优化 css 如简写方式有 padding 10px 意思就是 上下左右补丁距离就是 10px 10 像素 等于 padding top 10px padding bottom 10px padding left 10px padding right 10px 一样效果简写 padding 5px 10px 意思上下补丁距离为 5px 左右 的补丁距离为 10px 等于 padding top 5px padding bottom 5px padding left 10px padding right 10px 一样效果简写 padding 5px 6px 7px 意思 上补丁距离 5px 下补丁距离为 7PX 左右补丁距 离为 6px 等于 padding top 5px padding bottom 7px padding left 6px padding right 6px 一样效果简写 padding 5px 6px 7px 8px 意思上补丁为 5px 右补丁距离为 6px 下补丁距 离为 7px 左补丁距离 8px 等于等于 padding top 5px padding right 6px padding bottom 7px padding right 8px 一样效果简写 其中 padding 5px 6px 7px 8px 的转法为顺时针即图 padding 的属性转法图解 上面即是 div css 网站总结的 padding 的属性与用法 其中 margin 的用与 padding 相同 CSS 外边距 基础知识 TOP DIV CSS 外边距指 CSS 属性单词 margin margin 是设置对象四边的外延边 距 没有背景颜色也无颜色 运用地方 TOP 两个布局之间距离设置 如上图中 CSS 手册 和 DIV CSS 研教室 黄颜色的背景之间空隙 背景土红 margin 缺点 TOP 在使用 CSS margin 的时候容易造成 CSS HACK IE6 解释此属性的时候容易 造成双倍距离 您可能需要了解 CSS 兼容浏览器知识 使用技巧与 CSS 代码优化 TOP margin 10px 意思就是上下左右元素块距离就是 10px 10 像素 等于 margin top 10px margin bottom 10px margin left 10px margin right 10px 一 样效果简写 margin 5px 10px 意思上下元素块距离为 5px 左右的元素块距离为 10px 等 于 margin top 5px margin bottom 5px margin left 10px margin right 10px 一样效果简写 margin 5px 6px 7px 意思上元素块距离 5px 下元素块距离为 7PX 左右元素 块距离为 6px 等于 margin top 5px margin bottom 7px margin left 6px margin right 6px 一样效果简写 margin 5px 6px 7px 8px 意思上元素块为 5px 右元素块距离为 6px 下元 素块距离为 7px 左元素块距离 8px 等于 margin top 5px margin right 6px margin bottom 7px margin right 8px 一样效果简写 其中 margin 5px 6px 7px 8px 你可以再了解以前 divcss5 介绍 margin 知识 CSS 文本 这里讲解 CSS 文本 主要介绍文本字段换行 文本文字间间隔 文本缩进 文本文字上下排间隔等 DIV CSS 文本样式 DIV CSS 文本知识整理 1 文本字段换行 TOP html 中使用和 和 2 文本上下排字间间隔 TOP 使用 CSS 属性单词 line height 作用 定义对象行高 后面跟具体的数值和 单位 line height DIV CSS 示例 div line height 22px 即定义行高为 22px 3 CSS 文本缩进 TOP 使用 CSS 单词 text indent 作用 设置对象中的文本的缩进 后面也跟具体 数值和单位 text indent DIV CSS 示例 div text indent 25px 即定义对象内开头的文字往后缩进 25px 效果如下 4 文本文字间间隔 TOP 使用单词 letter spacing 作用 设置对象内文本字与字之间间距距离 后跟具体 数值和单位 CSS 教程示例 div letter spacing 5px 即定义字与字之间距离为 5px 更多学习方法 TOP 更多 CSS 单词可进入 CSS 手册查看 知识 CSS 实例 CSS 颜色 认识 CSS 颜色 CSS color TOP 这里要介绍的是网页设置颜色包含有哪些 网页颜色规定规范 1 常用颜色地方包含 字体颜色 超链接颜色 网页背景颜色 边框颜色 2 颜色规范与颜色规定 网页使用 RGB 模式颜色 颜色基础知识 TOP 网页中颜色的运用是网页必不可少的一个元素 使用颜色目的在于有区别 有 动感 特别是超链接中运用 美观之用 同时颜色也是各种各样网页的样式 表现元素之一 传统的 html 颜色与 w3c 标准下的 css 颜色对比和 DIV CSS 运用颜色 1 文字颜色控制一样 TOP 传统 html 和 css 文字颜色相同使用 color RGB 颜色取值 即可 如颜色为 黑色字即对应设置 CSS 属性选择器 内添加 color 000 即可 2 网页背景颜色设置区别 TOP 传统设置背景颜色使用 bgcolor 颜色取值 而 CSS 中则 background 颜色 取值 例如 设置背景为黑色 传统 Html 设置 即在标签内加入 bgcolor 000 即可实现颜色为黑色背景 如果在 W3C 中即在对应 CSS 选 择器中始终 background 000 实现 3 设置边框颜色区别 TOP 传统 bordercolor 取值 CSS 中 border color 颜色取值 例如 在传统 html 直接在 table 标签加入 bordercolor 000 即可 在现在 CSS 中设置 border color 000 即可让边框颜色为黑色 同时记得对包括设置宽度和样式 虚线 实现 DIV CSS 颜色值扩展知识 颜色值是一个关键字或一个数字的 RGB 规范 16 个关键字是采取从 Windows 的 VGA 调色板 水色 黑色 蓝色 紫红色 灰 绿 灰 褐红色 藏青色 橄榄色 紫色 红色 银色 青色 白色 黄色 RGB 颜色给出了四种方法之一 TOP 1 rrggbb 如 00cc00 强烈推荐使用此表示颜色取值 2 的 RGB 如 0c0 3 RGB 十中 x x 的 x 是一个包容性的 0 和 255 之间的整数 如 的 RGB 0 204 0 4 RGB 其中 y 是一个包容性的数量介于 0 0 和 100 0 如 的 RGB 0 80 0 以下是 RGB 颜色表 TOP 当然一般的网页开发软件都有颜色取值器 网页开发软件 DW 软件中 CSS 取色器 用 CSS 控制超链接文字样式 本文将讲解通过 css 样式或通过 css 来控制超链接样式 这里主要讲文字类型 的超链接 超链接的样式包括通过 CSS 来控制设置超链接有无下划线 超链接 文字颜色等样式 什么是超链接 超链接通俗地指从一个网页指向一个目标的连接关系 这个目标可以是另一个网 页 也可以是相同网页上的不同位置 还可以是一个图片 一个电子邮件地址 一个文件 甚至是一个应用程序 而在一个网页中用来超链接的对象 可以是 一段文本或者是一个图片 当浏览者单击已经链接的文字或图片后 链接目标将 显示在浏览器上 并且根据目标的类型来打开或运行 超链接的代码 DIV CSS 解析如下 href 后跟被链接地址目标网站地址这里是 target blank 在新窗口中打开链接 parent 在父窗体中打开链接 self 在当前窗体打开链接 此为默认值 top 在当前窗体打开链接 并替换当前的整个窗体 框架页 title 后跟链接目标说明 也就是超链接被链接网址情况简要说明 或标题 CSS 可控制超链接样式 css 链接样式如下 a active 是超级链接的初始状态 a hover 是把鼠标放上去时的状况 a link 是鼠标点击时 a visited 是访问过后的情况 超链接样式案例 1 通常对全站超链接样式化方法 a color 333 text decoration none 对全站有链接的文字颜色样式为 color 333 并立即无下划线 text decoration none a hover color CC3300 text decoration underline 对鼠标放到超链接上文字 颜色样式变为 color CC3300 并文字链接加下划线 text decoration underline 2 通过链接内设置类控制超链接样式 css 方法 案例超链接代码CSS 对应 CSS 代码 a yangshi color 333 text decoration none a yangshi hover color CC3300 text decoration underline 通过这样的设置可以控制链接内的 css 类名为 yangshi 超链接的样式 3 通过对应超链接外的父级的 css 类的 css 样式来控制超链接的样式 案例超链接代码CSS 对应 CSS 代码 yangshi a color 333 text decoration none yangshi a hover color CC3300 text decoration underline 这里值得注意的是 a yangshi 与 yangshi a 的样式 css 代码区别 这里就是常见的通过 div css 来对超链接样式设置案例及分析 DIV CSS 优化 一 CSS 代码优化地方 1 border CSS 边框 简写 border top 1px solid 000 border bottom 1px solid 000 border left 1px solid 000 border right 1px solid 000 可以简写为 border 1px solid 000 2 padding CSS padding 简写 padding top 1px padding right 2px padding bottom 3px padding left 4px 可简写为 padding 1px 2px 3px 4px padding top 1px padding right 1px padding bottom 1px padding left 1px 可简写为 padding 1px 3 margin 简写 margin top 1px margin right 2px margin bottom 3px margin left 4px 可简写为 margin 1px 2px 3px 4px margin top 1px margin right 1px margin bottom 1px margin left 1px 可简写为 margin 1px 4 background 简写 background color 000 可以简写为 background 000 background image url 图片地址 可简写为 background url 图片地址 5 font 简写 font size 12px line height 12px font family Arial Helvetica sans serif 可简写为 font 12px 12px Arial Helvetica sans serif 二 CSS 重用优化 这里主要介绍是 CSS 代码的共用属性提取来达到节约代码 维护方便 CSS 实例如下 yangshi a width 100px height 20px text align left float left font size 24px yangshi b width 100px height 20px text align right float left font size 24px 他们都有相同高度 宽度 浮动 文字大小 而只有内容居左居右不同 你可能 需要了解 CSS 居中 我们就可以提取他们相同属性 优化后 yangshi a yangshi b width 100px height 20px text align left float left font size 24px yangshi b text align right 注意观察以上代码 自己理解 不懂可到 CSS 论坛提出问题 CSS id 与 CSS class 前面我们介绍过了 id 与 class 区别 接下来再简单介绍 CSS id 与 CSS class 区别与用法 CSS id 知识 在一个网页里 ID 只能使用一次 当然即使一个 id 在一个网页内被使用多次 其 CSS 样式仍然可以实现生效 但是一般规定 W3C 标准是使用一次 因为 ID 在 html 里可以赋予 html 标签特殊的属性如一下 JS 动作 表单传值等特性所以 区别于一个 class 可以使用多少的次 而一个 CSS 命名的 id 只能使用一次避 免一些特定动作 传的表单值的兼容性特性错误即使没有其它 JS 脚本动作 表单传值特性但是我们也一定执行一个页面只能使用一次 id 选择器以 来定义 命名 CSS 选择器 定义命名 css id 选择器例子 yangshi1 color F00 定义红色 实例 yangshi2 color 0F0 定义绿色 对应 html 中 div 引用 我颜色为红色 我颜色为绿色 一个 div 标签的定义只能使用一个 id 如 www divcss5 测试内容 或 www divcss5 测试内容 两个都是不正确的 并且 CSS 样式属性也不能生效 成为 CSS 失效之一 CSS class 知识 与 CSS ID 不同特性是 clsss 类可以在一个网页内无限次引用 Class 选择器定义以 来定义 定义 css class 选择器例子 yangshi1 color F00 定义文字为红色 yangshi2 font size 28px 定义文字大 小为 18px 对应 html 中 div css 引用 我颜色为红色 我字体大小为 28px 我颜色为红色文字大小为 28px 以上即是 yangshi1 yangshi2 类的正确使用方法 扩展知识 能否使用数字命名 CSS 属性选择器 css 命名规范 以下为错误的 css 类使用方法 我将无效 这样的引用方法即是错误的引用方法 同样可以得出一个只能出现一个 class 如果出现多个 css 类要应用到一个 div 标签内 即可以使用来应用 一个 div 标签内运用 id 和 class 是可以的 yangshi1 yangshi2 yangshi3 这样是可以的也是正确的 同样是正确的可取的 总结 本文分别从知识点到实例讲解了 div css 中 id 和 class 的运用 需要注意地方 正确运用引用方法 通过 divcss5 中 css 实例方式正确与错误运用 css id 和 css class 让大家能掌握 css 基础知识点 CSS id 与 CSS class 前面我们介绍过了 id 与 class 区别 接下来再简单介绍 CSS id 与 CSS class 区别与用法 CSS id 知识 在一个网页里 ID 只能使用一次 当然即使一个 id 在一个网页内被使用多次 其 CSS 样式仍然可以实现生效 但是一般规定 W3C 标准是使用一次 因为 ID 在 html 里可以赋予 html 标签特殊的属性如一下 JS 动作 表单传值等特性所以 区别于一个 class 可以使用多少的次 而一个 CSS 命名的 id 只能使用一次避 免一些特定动作 传的表单值的兼容性特性错误即使没有其它 JS 脚本动作 表单传值特性但是我们也一定执行一个页面只能使用一次 id 选择器以 来定义 命名 CSS 选择器 定义命名 css id 选择器例子 yangshi1 color F00 定义红色 实例 yangshi2 color 0F0 定义绿色 对应 html 中 div 引用 我颜色为红色 我颜色为绿色 一个 div 标签的定义只能使用一个 id 如 www divcss5 测试内容 或 www divcss5 测试内容 两个都是不正确的 并且 CSS 样式属性也不能生效 成为 CSS 失效之一 CSS class 知识 与 CSS ID 不同特性是 clsss 类可以在一个网页内无限次引用 Class 选择器定义以 来定义 定义 css class 选择器例子 yangshi1 color F00 定义文字为红色 yangshi2 font size 28px 定义文字大 小为 18px 对应 html 中 div css 引用 我颜色为红色 我字体大小为 28px 我颜色为红色文字大小为 28px 以上即是 yangshi1 yangshi2 类的正确使用方法 扩展知识 能否使用数字命名 CSS 属性选择器 css 命名规范 以下为错误的 css 类使用方法 我将无效 这样的引用方法即是错误的引用方法 同样可以得出一个只能出现一个 class 如果出现多个 css 类要应用到一个 div 标签内 即可以使用来应用 一个 div 标签内运用 id 和 class 是可以的 yangshi1 yangshi2 yangshi3 这样是可以的也是正确的 同样是正确的可取的 总结 本文分别从知识点到实例讲解了 div css 中 id 和 class 的运用 需要注意地方 正确运用引用方法 通过 divcss5 中 css 实例方式正确与错误运用 css id 和 css class 让大家能掌握 css 基础知识点 css li 讲解 Css li 是使用 css 来控制 li 的样式 css 列表 如 li 列表的以点为开头 或图片 开头的列表形式 Li 的基础知识 Li 是 html 的基本元素标签 标签是用于定义列表项目 标签可用在有序列表 和无序列表 中 在 W3C 标准下 li 不能单独使用 需要与或配合使用 使用范例 div css 范例 div css 范例之 li div css 范例 div css 范例之 li 以上代码效果如下图 Css li 实例 li ol li ul li 的用法 经过实例演示知道了 li 的默认有序和无序的 css 样式 有序 ol 的样式是以阿拉 伯数字 1 2 3 为递增列表 而无序的 ul 的 CSS 样式是以一个圆黑点的列表 形式 兼容 所有的浏览器都支持兼容 Css li 的样式引导 无论是有序还是无序的