DIV+CSS规则
css书写规则
css书写规则Div+css命名规范Css的命名是区分大小写的，建议全部使用小写。
下面总结一下最好的命名准则，好的命名不仅有利于维护人员阅读对搜索搜索引擎优化(seo)有很大的好处。
其中对代码的优化是一个很关键的步骤。
为了更加符合SEO的规范，下面是目前流行的CSS+DIV的命名规则，并做了些补充：1.1. div+css命名规范页头:header登录条:loginBar标志:logo侧栏:sideBar广告:banner导航:nav子导航:subNav菜单:menu子菜单:subMenu搜索:search滚动:scroll页面主体:main内容:content标签页:tab文章列表:list提示信息:msg小技巧:tips栏目标题:title友情链接:friendLink页脚:footer加入:joinus指南:guild服务:service热点:hot新闻:news下载:download注册:regsiter状态:status按钮:btn投票:vote合作伙伴:partner版权:copyRight产品管理1.2. CSS的Id命名规范外套:wrap主导航:mainNav子导航:subnav页脚:footer整个页面:content页眉:header页脚:footer商标:label标题:title主导航:mainNav(globalNav)顶导航:topnav边导航:sidebar左导航:leftsideBar右导航:rightsideBar旗志:logo标语:banner菜单内容1:menu1Content菜单容量:menuContainer子菜单:submenu边导航图标:sidebarIcon注释:note面包屑:breadCrumb(即页面所处位置导航提示) 容器:container内容:content搜索:search登陆:login功能区:shop(如购物车，收银台)当前的：current1.3. css样式文件命名主要的:master.css布局版面:layout.css专栏:columns.css文字:font.css打印样式:print.css主题:themes.css通用：basic.css上面的命名规范很直观，即使程序人员不添加注释，我们也会很清楚的知道是什么意思。
div的样式继承规则
div的样式继承规则
在CSS中，div元素是HTML中最常用的块级元素之一，用于定义网页中的一
个主要区域。
当我们设置div元素的样式时，可以使用一些CSS属性来改变其外观和行为。
在设置div元素的样式时，我们需要了解div元素的样式继承规则，以确
保样式表现如预期。
1. 字体属性不继承：div元素的字体属性不会继承自其父元素。
这意味着，如
果我们在父元素中设置了字体样式，例如字体大小、字体颜色等，这些样式不会自动应用到div元素上。
为了在div元素中设置字体样式，我们需要显式地在div的
样式规则中设置。
2. 边框属性部分继承：div元素继承了父元素的边框颜色和边框样式属性，但
不继承边框宽度。
这意味着，如果我们在父元素中设置了边框的颜色和样式，div
元素将继承这些设置，但我们仍然需要单独设置div元素的边框宽度。
3. 背景属性不继承：div元素的背景属性，例如背景颜色、背景图片等，在默
认情况下不会继承自其父元素。
如果我们希望div元素的背景与父元素相同，需要
显式地将背景属性设置为相同的值。
4. 外边距属性不继承：div元素的外边距属性（margin）不会继承自其父元素。
这意味着，父元素的外边距不会影响div元素的外边距。
如果我们想要设置div元
素的外边距，需要在div元素的样式规则中单独设置。
总结起来，div元素的样式继承规则较为有限。
它不会继承字体属性、背景属
性和外边距属性，仅继承部分的边框属性。
因此，在设置div元素的样式时，我们
需要单独设置这些属性，以确保样式的准确表现。
div均等分 css3 间隔
div均等分css3间隔是一种常用的网页布局技巧，通过使用CSS3的属性和值来实现页面中div块的等分布局和间隔设置。
本文将针对这一主题进行深入探讨，为读者详细介绍div均等分css3间隔的实现方法及相关知识点。
一、什么是div均等分css3间隔？1.1 div均等分：在网页布局中，我们经常需要将页面分割成若干个部分，并且使它们等宽等高，以便更好地展现页面内容和提高页面美观度。
而div均等分就是指将页面中的div块等分成相同的宽度和高度。
1.2 css3间隔：在进行网页布局时，我们还需要在div块之间设置一定的间隔，以增加页面的美观性和可读性。
CSS3提供了丰富的间隔设置属性，可以帮助我们实现div块之间的间隔效果。
二、div均等分css3间隔的实现方法2.1 使用flex布局：CSS3的flex布局是一种灵活的布局方式，可以方便地实现div块的等分布局和间隔设置。
通过设置div容器的display 属性为flex，再配合设置justify-content和align-items属性，可以轻松实现div块的等分布局。
2.2 使用grid布局：CSS3的grid布局也是一种强大的布局方式，可以实现复杂的网页布局效果。
通过设置div容器的display属性为grid，并配合使用grid-template-columns和grid-gap属性，可以实现div块的等分布局和间隔设置。
三、div均等分css3间隔的兼容性3.1 目前，大部分主流浏览器都已经支持flex布局和grid布局，因此使用这两种方式来实现div均等分和间隔设置是比较安全和稳定的选择。
但是对于一些较老版本的浏览器，可能存在兼容性问题，需要进行相应的兼容性处理。
3.2 除了flex布局和grid布局之外，我们还可以使用传统的浮动布局和定位布局来实现div均等分和间隔设置。
这种方法在兼容性方面更为稳定，但是布局代码会比较繁琐，不够灵活和简洁。
我学习DIV+CSS
e/ne/nw/n-resize 鼠标大小 text 文字鼠标 wait 等待鼠标 help 求助鼠标 progress 过程鼠标
三、通过CSS定义图片的样式
六、CSS滤镜的应用(一般情况下用不着，在PS中处理成图片就可以了)
filter:filtername(parameters)
alpha 设置透明(enabled 是否激活 opacity finishOpacity startX startY finishX finishY)
blur 设置模糊效果(makeshadow pixelradius shadowopacity )
a:link 未被访问前的样式属性 a:hover 鼠标悬停时的样式属性 a:active 被激活的属性 a:visited 已经被访问过的样式属性
margin 外边距
padding 内边距
border 和外边框有关的效果
background-color 设置背景的颜色
font-size字体大小
line-height行高
text-decoration文本修饰(underline 下划线 overline 顶划线 line-through 删除线 blink 文本闪烁)
letter-spacing字间距
text-align对齐方式(只可以作用于p blockquqte ul h1 h6标识符里面)
glow 为对象的外边界增加光效(enabled color strength)
wave 设置对象的波纹效果(enabled add freq lightStrength phase strength)
CSSdiv和css布局
CSSdiv和css布局⼀.div和span DIV和SPAN在整个HTML标记中，没有任何意义，他们的存在就是为了应⽤CSS样式 DIV和span的区别在于，span是内联元素，div是块级元素。
div占⽤整⾏，span只会占⽤内容⼤⼩的部分。
div可以改变size，span不可以改变size⼆.盒模型 margin 盒⼦外边距，增加的话，内盒⼤⼩不会变 padding 盒⼦内边距，增加的话，border向外扩⼤，内盒⼤⼩本⾝不会变 border 盒⼦边框宽度 width 盒⼦宽度 height 盒⼦⾼度三.布局相关的属性 1.position定位⽅式 relative 正常定位 absolute 根据⽗元素进⾏定位 fixed 根据浏览器窗⼝进⾏定位 static 没有定位 inherit 继承 2.定位 left，right，top，bottom离页⾯顶点的距离 3.覆盖顺序优先级 z-index 其值是从0，1，2... 数值越⼤，优先级越⾼，那么显⽰就在最上⾯ 4.display显⽰属性 display:none 层不显⽰ display:block 块状显⽰，在元素后⾯换⾏，显⽰下⼀个块元素。
将内联转换成块状 display:inline 内联显⽰，多个块可以显⽰在⼀⾏内。
将块状转换成内联 5.float浮动属性 left 左浮动 right 右浮动 6.clear清除浮动 clear:both 7.overflow溢出处理 hidden 隐藏超出层⼤⼩的内容 scroll ⽆论内容是否超出层⼤⼩都添加滚动条 auto 超出时⾃动添加滚动条四.兼容问题及⾼效 1.兼容性测试⼯具 IE Tester Multibrowser 2.常⽤浏览器 Google chrome Firefox opera 3.⾼效的开发⼯具 轻量级 notepad++ sublime text 记事本 重量级 webstorm Dreamweaver 4.⽹页设计⼯具 fireworks photoshop 5.判断IE的⽅法 条件判断格式 <!--[if 条件版本]> 那么显⽰ <![endif]--> 不等于 [if !IE 8] 除了IE8都可以显⽰ ⼩于 [if lt IE 5.5] 如果IE浏览器版本⼩于5.5的显⽰ ⼤于 [if gt IE 5] 如果IE浏览器版本⼤于5的显⽰ ⼩于或者等于 [if lte IE 6] 如果IE浏览器版本⼩于等于6的显⽰ ⼤于或者等于 [if gte IE 6] 如果IE浏览器版本⼤于等于6的显⽰ ⼩于和⼤于之间 [if (gt IE 5)&(lt IE 7)] 或 [if (IE 6)|(IE 7)] 仅 <!--[if IE 8]><!doctype html><html><head><title>Div+Css布局(div+span以及盒模型)</title><meta charset="utf-8"><style type="text/css">body{margin:0px;padding:0px;}/*div{background-color:green;color:#fff;}span{background-color:green;color:#fff;}div{width:500px;height:500px;padding:0px;margin:0px;border:solid 10px;}*/.div{width:600px;height:600px;margin:0 auto;background-color:green;}.diva{float:left;width:240px;height:240px;background-color:red;}.divb{float:left;width:240px;height:240px;background-color:yellow;}.div div{margin:10px;padding:10px;border:solid 10px;}</style></head><body><!--div>麦⼦学院DIV</div><div>麦⼦学院DIV</div><span>麦⼦学院SPAN</span><span>麦⼦学院SPAN</span--><div class="div"><div class="diva"></div><div class="divb"></div></div></body></html><!doctype html><html><head><title>Div+Css布局(布局相关的属性)</title><meta charset="utf-8"><style type="text/css">body{padding:0;margin:0;}/*.div{width:300px;height:300px;background-color:green;position:relative;left:10px;top:10px;z-index:0;}span{position:absolute;background-color:#ff6600;color:#fff;top:-10px;right:0;}.fixed{position:fixed;background-color:#ff6600;color:#fff;top:100px;z-index:1;}*/div{background:green;display:inline;width:200px;}span{background-color:red;display:block;width:200px;}</style></head><body><!--div class="fixed"><p>联系电话：1111111</p><p>联系QQ：782590844</p><p>联系地址：四川省成都市</p></div><div class="div"><span>浏览次数：222</span></div></div--><div>麦⼦学院</div><div>麦⼦学院</div><div>麦⼦学院</div><span>麦⼦学院</span><span>麦⼦学院</span><span>麦⼦学院</span><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></body></html><!doctype html><html><head><title>Div+Css布局(浮动以及溢出处理)</title><meta charset="utf-8"><style type="text/css">body{padding:0;margin:0;}.div{width:960px;height:600px;margin:0 auto;background-color:#f1f1f1;}.left{float:left;width:260px;height:460px;background:#ccc;}.right{float:right;width:690px;height:460px;background:#ddd;}.clear{clear:both;}.bottom{margin-top:10px;height:200px;width:960px;background:red;}.jianjie{width:260px;height:120px;background:red;overflow:auto;}</style></head><body><div class="div"><div class="left"><div class="jianjie">麦⼦学院麦⼦学院麦⼦学院麦⼦学院<br />麦⼦学院麦⼦学院麦⼦学院麦⼦学院<br />麦⼦学院麦⼦学院麦⼦学院<br />麦⼦学院麦⼦学院麦⼦学院麦⼦学院<br />麦⼦学院麦⼦学院麦⼦学院麦⼦学院<br />麦⼦学院麦⼦学院麦⼦学院<br />麦⼦学院麦⼦学院麦⼦学院<br />麦⼦学院麦⼦学院麦⼦学院<br /></div></div><div class="right"></div><div class="clear"></div><div class="bottom"></div></div></body></html>。
DW-第9章div+css样式讲解
9.3.1 内联样式特点
• 内联样式特点 –看上去很直观 –针对个别元素控制 –和传统的外观控制方式没有本质的不同 –不推荐使用
9.3.2 嵌入样式
• 嵌入样式—internalCSS.html –使用<style>标记把样式代码插入到页 面中 –一般插入到<head>标记中 –如：
本章目标
9.1 DIV盒模型介绍 9.2 CSS概述 9.3 CSS语法 9.4 DIV+CSS样式实例布局
9.1 div盒子模型介绍
CSS中， Box Model叫盒子模型（或框模型），Box Model规定了元素框 处理元素内容（element content）、内边距（padding）、边框（border） 和 外边距（margin） 的方式。在HTML文档中，每个元素（element）都 有盒子模型，所以说在Web世界里（特别是页面布局），Box Model无处不 在。下面是Box Model的图示：
9.3.3 外联样式使用
• 使用 –建立外部样式文件（.css） –外部的样式文件不能含有任何像<head>或 <style>这样的HTML标记 –样式表文件仅仅由样式规则或声明组成
9.3.3 外联样式特点
• 特点 –当样式被应用到很多的网页时，推荐使用外部样式 表 –网页制作者使用外部样式表，在改变整个网站的外 观时，仅需要改变一个文件 –大多数浏览器会保存外部样式表在缓冲区，从而如 果样式表在缓冲区就避免了在展示网页时的延迟 –在实际开发中一般都使用外联样式
内边距、边框和外边距可以应用于一个元素的所有 边，也可以应用于单独的边。而且，外边距可以是负 值，而且在很多情况下都要使用负值的外边距。
div均等分 css3 间隔
div均等分 css3 间隔（原创版）目录1.CSS3 的概述2.CSS3 中的 div 元素3.如何使用 CSS3 实现 div 的均等分4.CSS3 中的间隔属性5.总结正文一、CSS3 的概述CSS3 是层叠样式表（Cascading Style Sheets）的第三个版本，它是一种用于网页设计的样式表语言。
CSS3 在 CSS2 的基础上进行了很多改进和扩展，提供了更多的功能和特性，使得网页设计更加灵活和丰富。
二、CSS3 中的 div 元素div（division）元素是 CSS3 中的一个常用元素，它可以用来划分网页的布局结构。
div 元素没有固定的样式，可以通过 CSS 样式来设置其外观和属性。
这使得 div 元素在网页设计中具有很大的灵活性。
三、如何使用 CSS3 实现 div 的均等分在 CSS3 中，我们可以使用“display: flex”属性将 div 元素设置为弹性盒子，然后通过“flex-wrap: wrap”和“flex-basis: equal”属性实现 div 的均等分。
具体做法如下：```css.container {display: flex;flex-wrap: wrap;flex-basis: equal;}```在这个例子中，我们创建了一个名为“container”的 div 元素，它包含了多个子 div 元素。
通过设置“display: flex”，我们将 container 设置为弹性盒子。
接着，设置“flex-wrap: wrap”，使得子 div 元素在容器超出其宽度时自动换行。
最后，设置“flex-basis: equal”，使得每个子 div 元素的宽度相等。
四、CSS3 中的间隔属性在 CSS3 中，我们可以使用“margin”和“padding”属性来设置元素的外部和内部间隔。
这些属性可以分别设置上下左右四个方向的间隔，也可以通过简写形式设置全部间隔。
DIV命名规范
搜索引擎优化(seo)中，对代码的优化也是一个很关键的步骤。
为了更加符合SEO的规范，下面是目前流行的CSS+DIV的命名规则：DIV ID命名页头:header登录条:loginBar标志:logo侧栏:sideBar广告:banner导航:nav子导航:subNav菜单:menu子菜单:subMenu搜索:search滚动:scroll页面主体:main内容:content标签页:tab文章列表:list提示信息:msg小技巧:tips栏目标题:title友情链接:friendLink页脚:footer加入:joinus指南:guild服务:service热点:hot新闻:news下载:download注册:regsiter状态:status按钮:btn投票:vote合作伙伴:partner版权:copyRightCSS ID的命名外套:wrap主导航:mainNav(globalNav)子导航:subNav页脚:footer整个页面:content页眉:header页脚:footer商标:label标题:title顶导航:topNav边导航:sideBar左导航:leftsideBar右导航:rightsideBar标识:logo标语:banner菜单1内容:menu1Content菜单1容量:menu1Container子菜单:submenu边导航图标:sidebarIcon注释:note面包屑:breadCrumb(即页面所处位置导航提示)容器:container内容:content搜索:search登陆:login功能区:shop(如购物车，收银台)当前的current样式文件命名全站标签默认样式：general.css或global.css 布局版式设计样式：layout.css或container.css 通用样式（如文字、表单等）：style.css专栏/频道样式：columns.css打印输出样式：print.css主题模板样式：themes.css。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
DIV+CSS规则整理一、善用css缩写规则/*注意上、右、下、左的书写顺序*/1. 关于边距（4边）：1px 2px 3px 4px (上、右、下、左)1px 2px 3px （省略的左等于右）1px 2px (省略的上等于下)1px （四边都相同）2. 简化所有：*/ body{margin:0}------------表示网页内所有元素的margin为0#menu{ margin:0}------------表示menu盒子下的所有元素的margin为03. 缩写（border）特定样式：Border:1px solid #ffffff;Border-width:0 1px 2px 3px;4. 关于文字的缩写规则：Font-style:italic; 斜体形式Font-variant:small-caps/normal; 变体样式：小型大写字母/正常Font-weight:bold;Font-size:12px;Line-height:1.2em(120%)/1.5em(150%);Font-family:arrial,sans-serif,verdana;缩写成：Font:italic small-caps bold 12px/1.5em arrial,sans-serif;注意：Font-size和Line-height用斜杠组合在一起不能分开写。
5. 关于背景图片的：Background:#FFF url(log.gif) no-repeat fixed top left;6. 关于列表：List-style-type:square/none;List-style-position:inside;List-style-image:url(filename.gif);缩写成：List-style:none inside url(filename.gif);二、运用4种方法来引入CSS样式1.link<link rel=”stylesheet” type=”text/css” href=”a.css”>rel 关系type 数据类型,有多种href 路径部分浏览器支持候选样式,关键字:alternate:<link rel=”stylesheet” type=”text/css” href=”a.css”><link rel=”alternate stylesheet” type=”text/css” href=”b.css”><link rel=”alternate stylesheet” type=”text/css” href=”c.css”>2.内部样式块<style><!–h1{color:red;}–></style>3.@import@import url{a.css}注意:此指令必须放在<style>容器中,并且在所有样式之前建议放在一个html注释中,<!––>浏览器会不显示注释内的内容,而import等css代码能正常工作4.内联样式<p style=”color:red;”>选择器是css的一个基本概念，基本规则如下：1.规则结构：h1 {color:red;}选择器{属性:值;}这类是元素选择器，基本可以包括所有html的元素属性值可以包括多个元素，如：border：1px solid red;常用语法1)分组：选择器和声明都可以分组:h1,h2,h3{color:red;background:#fff;} ,选择器用“,”分割开,属性用”;”分割2)类选择器,即通过class=”stylename”应用的声明定义:.stylename{color:red;}注意:在html中可以使用多类选择:如class=”cn1 cn2 cn3″3)ID选择器,即与id属性对应的样式定义:#a{color:red;} ->这个定义对用id=”a”的元素2.这部分都是我们常见的css语法，下面谈一下我们不常见的选择器语法1)父子结构,跟文档结构图对应如p span{border:1px solid red;}对应的是<p>下面的<li>标签,这个很用用途,可以准确定位.一些特殊应用(IE7支持):(1) p > span{},匹配所有p下所有的span(2) p + span{} ,匹配紧接着p元素后出现的第一个span标签,2者要有相同的父标签2)属性选择器:(注意:属性选择器ie7才开始支持,以下版本并不支持,其他的浏览器基本可以) 语法:img[alt]{border:1px solid;}表示对应有alt属性的img标签,当然可以支持多个属性对应,如img[alt][title]{};表示这个2个属性都有的img标签,也可以与具体值对应:如:img[alt=”摄影”]{};属性选择器中的高级应用,特殊匹配:(1)img[class~=”b”], ~= : 与属性中的一个值对应的,即与<img class=”a b c”>对应(2)[class^=”a”],以a开头的(3)[class$=”a”],以a结束的(4)[class*=”a”],包含a的(5)[class|=”a”],等于a或以a开头的3)伪类和伪元素日常使用中主要是<a>标签的几个伪类:link:hover:active:visited以及:first-child:first:before:left:right:lang:focus:fist-line等等注意:动态伪类可以应用到任何元素,如,input:focus{background:red;}当input标签获得焦点时背景变红以上语法组合使用,就能实现定位准确、简单间接的样式了。
三、选择器分类整合优先级别遵循：行内样式>ID > Class >标记基本选择器标记选择器（eg:<p></p>）类别选择器(eg:class)ID选择器复合选择器“交集”复合选择器(eg:p.menu{color:red}) 必须是标记+类别/ID组合“并集”复合选择器(eg:h1,h2,h3{color:red})“后代”复合选择器(eg: #menu .menulist{ ... })“子”复合选择器(eg: #menu .menulist .selectit { ... })四、用子选择器减少id和class的定义示例结构：<div id="menu"><div class="menulist"><div class="selectit">content</div></div></div>示例CSS：#menu { ... }#menu .menulist { ... }#menu .menulist .selectit { ... }五、使用组选择器为不同元素应用相同的样式如h1,h2,h3,div{font-size:16px;font-weight:bold}则h1,h2,h3,div元素的样式都为字体16像素，字体粗体六、伪类和选择符的配合使用将伪类和类组合起来用，就可以在同一个页面中做几组不同的链接效果了，例如，我们定义一组链接为红色，访问后为蓝色；另一组为绿色，访问后为黄色：a.red:link {color: #FF0000}a.red:visited {color: #0000FF}a.blue:link {color: #00FF00}a.blue:visited {color: #FF00FF}现在应用在不同的链接上：<a class="red" href="...">这是第一组链接</a><a class="blue" href="...">这是第二组链接</a>七、CSS的最近优先原则/*如果对一个元素定义了多次样式，则以最近的一级优先，最近一级的样式将覆盖其他行内样式>ID > Class >标记*/以下是引用片段：CSS:p{color:red}.blue{color:blue}.yellow{color:yellow}HTML:<p>此处显示为红色</p><p class="blue">此处显示为蓝色</p><p class="blue" style="color:green">此处显示为绿色</p><p class="blue yellow">此处显示为黄色</p>注意：（1）注意样式的几个优先顺序(优先级由上至下递减，下面的样式覆盖上面的样式)：--元素style设定--head区<style></style>中的设定--外部引用css文件（2）优先级不是按访问顺序来设定的，而是又css中的声明顺序来设的。
如上例中<p class="yellow blue">此处显示为黄色</p>也显示为黄色，因为在css定义中.yellow在.blue的后面八、书写正确的链接样式当用css定义链接的各种状态时，要注意书写的顺序即：:link :visited :hover :active利用首字母：L V H A，你可以通过记忆LoVe,Hate,两个单词来记住其顺序。
:link --------链接的颜色:visited -----鼠标点击后的颜色:hover -------鼠标放上去未点的颜色（悬停）:active-------鼠标点击瞬间的颜色九、:hover的灵活运用IE6不支持除a标签以外的:hover属性，我们了解:hover属性是鼠标悬停效果。
在IE7和FF中，对几乎任意元素都可以设置:hover属性效果。
这对我们做不同的访问效果很好。
如：p {width : 360px;height : 80px;padding : 20px;margin : 50px auto 0 auto;border : 1px solid #ccc;line-height : 25px;background : #fff;}p:hover {border : 1px solid #000;background : #ddd;}----------------此效果针对IE7和FFp a {color : #00f;text-decoration : none;font-size : 13px;}p a:hover {color : #036;text-decoration : underline;}-----------------此效果针对IE6十、定义A标签要注意的小问题当我们定义a{color:red;}时，它代表了A的四种状态的样式，如果此时要定义一个鼠标放上的状态只要定义a:hover就可以了，其它三种状态就是A中所定义的样式。