CSS2+DIV的学习心得
作者：互联网
一、对CSS和页面布局的理解
1. 首先在如何写CSS之前，要先了解页面的整个布局结构，例如：主页面内容、站点导航(主菜单)、子菜单、搜索框、功能区、页脚，清楚了页面的结构，才能更好的去设计CSS样式。
2. 样式表优先级：外部<内部<内联。有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。
3. 在编写样式表之前一定要注意CSS文档的编码类型一定要和HTML文档的字符集类型一致。
4. 网站一般采取HTML结构与样式分离的纯CSS布局形式，所以采取外部样式表导入的方法。样式表按区块分为几个不同的CSS文件，是为了使结构更加清晰，也是为了站点的访问及维护更加容易。
5. 先定义全局的CSS文件来定义例如body，a，p，form，input这些标签统一的规则，具体的还可以把文字，边框，链接，宽高都具体定义多个样式、。之后再定义各个部分的样式创建各自的CSS文件。
6. 选择器的优先级：标签（HTML标签，如：a{...}）< 类（以“.”开头，class="top"，如：top{...}）< ID（以“#”开头，id="ppp"，如：#ppp{...}）。
注意在同一组属性设置中标有“!important”规则的优先级最大。
7. 群选择器：定义多个标签的样式规则(标签间用逗号隔开)。 例如：p,form,ul,li{...;...;...;}；
8. 派生选择器：给一个元素里的子元素定义样式。
①用不同规则定义不同内容块的样式， 例如：#globalnav a:link或者 #subnav a:link或者#content a:link
②用不同规则定义相同元素的不同样式， 例如：#content p和#footer p分别定义#content和#footer中p的样式
二、需要注意的一些样式用法
1. float: none || left || right;
在层布局中经常用到的一个属性，可以left/right浮动任何元素:图片、段落、div、标题、表格、列表等等，使用float属性，必须给这个浮动元素定义一个宽度。
2. clear：none || left || right || both;
不允许有浮动元素，有时可以利用clear:both;来解决浮动超出的问题达到布局效果。
3. display: block || none || inline;
设置或检索对象是否及如何显示， block:默认值，显示； none:层内容不可见，不保留层所占据的物理空间； inline:层内容不可见，但保留层所占据的物理空间。 visibility: inherit || visible || hidden;设置或检索是否显示对象。 inherit:默认值，继承父对象的可见性； visible:对象可视，hidden:对象隐藏。 与 display 属性不同，此属性为隐藏的对象保留其占据的物理空间。
4. border : border-width || border-style || border-color;
设置对象的边框样式。 当你指定了边框颜色( border-color )和边框宽度( border-widtd )时，你必须同时指定边框样式( border-style )，否则边框不会被呈现。
border-width : medium | thin | thick | length；设置对象边框的宽度。
border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset；设置对象边框的样式。
border-color : color；设置对象边框的颜色。
border-collapse: collapse;可以使表格无边框。
5. magin x x x x(检索或设置对象四边的外补丁); padding x x x x(检索或设置对象四边的内补丁);
如果提供全部(x x x x)四个参数值，将按顺时针的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上下，第二个用于左右。
如果提供三个，第一个用于上，第二个用于左右，第三个用于下。
也可以单方向进行设置： magin-top/-right/-bottom/-left； padding-top/-right/-bottom/-left。
6. list-style-type : none;
可以设定ul/ol列表的li为无样式显示，通常与div相结合可实现表格的布局形式。
7. overflow: hidden;
不使用滚动条，也不显示超过对象范围的内容，有时要对层或者层里的对象进行clear的时候，也可以用。 还有overflow-x和overflow-y，他们可以分别设置x或y轴方向的滚动条。
8. text-decoration: none || underline || blink || overline || line-through;
设置对象中的文本的装饰。 none:无装饰;underline:下划线;blink:闪烁;overline:上划线;line-through:贯穿线。
9. a:link、a:visited、a:hover、a:active
CSS中用四个伪类来定义链接的样式。
a:link{ text-decoration:none; color:#c00;}链接未访问原来的样式
a:visited { text-decoration:none; color:#c30;} 链接已被访问的样式
a:hover { text-decoration:underline; color:#f60;} 鼠标悬停在链接上的样式
a:active { text-decoration:none; color:#F90;} 在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。
10. background: background-color | background-image | background-repeat | background-attachment | background-position;
使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
background-color: transparent | color；设置对象的背景颜色。
background-image: none | url ( url )；设置对象的背景图像。
background-repeat: repeat | no-repeat | repeat-x | repeat-y；设置对象的背景图像是否及如何铺排。
background-attachment: scroll | fixed；设置对象的背景图像是随对象内容滚动还是固定的。
background-position:x y;设置对象的背景图像的位置，注意，x是图片相对于层x轴方向的位置，y是图片相对于层y轴方向的位置，x、y如果他们的值是具体的像素值或百分比，那就是他们相对于层的间距；
如果值是x( left | center | right) y(top | center | bottom)这种方位,就是他们相对于层的定位。
11. text-align: left || right || center || justify(两端对齐);
设置或检索对象中文本的水平方向的对齐方式。 vertical-align: baseline || sub(对齐文本下标) || super(对齐文本上标) || top || text-top || middle || bottom || text-bottom，设置或检索对象内容的垂直对其方式。 baseline:默认值，对象内容与基线对齐； 注意：baseline、top、text-top、middle、bottom、text-bottom，这些值的参数对象必须支持valign 的特性，这几个值才有效果。
12. position : static || absolute || relative;
static: 默认值。无特殊定位，对象遵循HTML定位规则；
absolute: 绝对定位，将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义 relative: 相对定位，对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置
三、CSS编写的一些规范和技巧
1. 样式的命名规范：全部小写，类选择器和ID选择器的命名可以为了表明语义采用Camel命名法。另外要尽量使用缩写形式，不仅可以减少CSS文件的大小，而且更加容易阅读
2. 只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，而且一定不要在数值和单位之间加空格。
3. 为了避免层布局受到最大化和最小化的影响，都采用固定宽高规则。(可根据情况灵活运用)
4. 在一个标签定义多个类样式时，注意用空格隔开，要尽量避免重复的样式。
5. 调试布局时，通常在出问题的层上定义一个背景颜色，这样就能很明显看到层占据多大空间。而不要用边框，例如”border:solid 1px;”，如果是添加边框的方法会增加元素的尺寸并破坏横/纵向margin的值，所以使用background更加清晰合理。
6.一些CSS文件名的命名规范：
| base或basic | 基本样式 |
| layout | 全部页面布局。 除非改变布局否则不修改此文件。 |
| general | 颜色，风格，排版，非结构的布局。本文件可据需要经常编辑。 |
| forms | 表单的布局和风格。如果需要可以为不同的页面而分别制作表单的css文件。 |
| index或home | 用来控制主页而不考虑其他页面的样式。 |
| 基本的打印样式。 | |
| themes | 主题样式表。 |
| master | 主要的CSS样式。 |
| font | 字体样式表。 |
转载于:https://www.cnblogs.com/lishaofei/archive/2013/03/01/2938176.html
标签：CSS2,none,样式,学习心得,对象,background,DIV,border,CSS 来源： https://blog.csdn.net/weixin_34404393/article/details/94490589