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为0   3.      缩写（border）特定样式： Border:1px 【Div+CSS 规则整理】提高前端开发效率的关键在于合理地组织和使用CSS规则。以下是一些关于CSS高效编码的要点： 1. **边距缩写规则**：在设置元素的边距时，可以使用简写形式。例如，`margin: 1px 2px 3px 4px` 分别代表上、右、下、左边距。如果某一边距未指定，通常会取与其相邻边距的值，如 `margin: 1px 2px 3px` 表示上、右边距为1px，下边距为3px，左边距自动取2px。当所有边距都相同时，可直接写为 `margin: 1px`。 2. **批量设置边距**：要快速将所有元素的边距设置为0，可以使用 `body{margin:0}` 来清除整个页面的边距，或者使用 `#menu{margin:0}` 来针对特定ID的元素进行设置。 3. **边框缩写**：`border` 属性可以缩写，如 `border: 1px solid #ffffff;` 设置边框宽度、样式和颜色。`border-width` 属性允许单独设置各边边框宽度，如 `border-width: 0 1px 2px 3px;`。 4. **文字属性缩写**：`font` 属性可以整合多个文字相关的属性，如 `font: italic small-caps bold 12px/1.5em 'Arial', sans-serif;`，它涵盖了字体风格、变体、粗细、大小、行高以及字体族。需要注意的是，`font-size` 和 `line-height` 必须以斜杠 `/` 结合，不可分开写。 5. **背景图片设置**：使用 `background` 属性可以一次性设置背景颜色、图片、重复方式、定位及固定或滚动状态，如 `background: #FFF url(log.gif) no-repeat fixed top left;`。 6. **列表样式缩写**：`list-style` 属性可以设置列表项的符号类型、位置以及图像，如 `list-style: none inside url(filename.gif);`。 7. **CSS样式引入方式**： - **外部链接**：`<link rel="stylesheet" type="text/css" href="a.css">` 用于链接外部样式表。 - **内部样式**：在 `<style>` 标签内编写CSS，如 `<!– h1{color:red;} –>`. - **@import**：在 `<style>` 标签内使用 `@import url(a.css);` 导入样式表。 - **内联样式**：直接在HTML元素中使用 `style` 属性，如 `<p style="color:red;">`。 8. **CSS选择器的运用**： - **元素选择器**：直接使用元素名，如 `h1 {color:red;}`。 - **类选择器**：通过 `.stylename` 应用样式，可同时应用于多个类名，如 `class="cn1 cn2"`。 - **ID选择器**：通过 `#a` 直接作用于具有特定ID的元素。 9. **特殊选择器**： - **父子结构选择器**：如 `p span` 选择所有 `p` 元素内的 `span` 子元素。 - **相邻兄弟选择器**：如 `p + span` 选择紧跟在 `p` 后的第一个 `span` 元素。 - **属性选择器**：如 `img[alt]` 选择所有带有 `alt` 属性的 `img` 元素。 理解并熟练运用这些CSS规则和技巧，可以显著提高编写和维护CSS代码的效率，减少冗余，使前端布局更加灵活且易于管理。同时，了解不同浏览器对某些高级选择器的支持情况也是十分重要的，确保在兼容性方面做出合理选择。