CSS缩写规则与样式引入总结

需积分: 5 138 浏览量更新于2024-08-30 收藏 109KB PDF 举报

"这篇文章是关于CSS使用规则的总结，涵盖了边距、边框、文字、背景、列表样式的缩写规则，以及四种引入CSS样式的常见方法。" 在CSS中，缩写规则是为了提高代码的简洁性和可读性。例如，边距（margin）可以按顺时针方向设置上、右、下、左四个值，如果省略某个值，则会按照对称原则自动赋值。例如，`margin: 1px 2px 3px`意味着上边距1px，右边距2px，下边距3px，左边距也是2px。若只设置一个值，如`margin: 1px`，则所有边距都是1px。类似地，我们可以使用`margin: 0`来清空所有元素的边距。边框（border）的缩写同样方便，如`Border:1px solid #ffffff;`设置了1像素宽的白色实线边框。`Border-width`允许分别指定各边的宽度，如`Border-width:0 1px 2px 3px;`。对于文字样式，可以使用`Font-style`、`Font-variant`、`Font-weight`、`Font-size`和`Line-height`等属性，它们可以组合成一个`Font`简写，如`Font: italic small-caps bold 12px/1.5em Arial, sans-serif;`。背景图片的设置可以包括颜色、图像、重复方式、定位等，如`Background: #FFF url(log.gif) no-repeat fixed top left;`。列表样式的缩写，如`List-style`可以涵盖列表项的类型、位置和图像，例如`List-style: none inside url(filename.gif);`。引入CSS样式主要有四种方法： 1. `link`标签，常用于外部样式表，例如`<link rel="stylesheet" type="text/css" href="style.css">`。 2. 内部样式块，即将CSS写在`<style>`标签中，位于`<head>`部分。 3. `@import`语句，如`@import url("a.css");`，但需放在所有CSS规则之前。 4. 行内样式，直接在HTML元素中使用`style`属性。理解CSS的优先级也是很重要的。当同一个元素受到多个选择器的影响时，根据CSS的特异度（specificity）来决定哪个样式生效。通常，行内样式优先级最高，然后是ID选择器，接着是类选择器、属性选择器和标签选择器。在相同的特异度下，后定义的样式会覆盖前面的。书写链接样式时，应按照`link:link`、`link:visited`、`link:hover`、`link:active`的顺序，以确保各种状态的样式正确应用。例如，`.yellow`定义在`.blue`之后，即使`.blue`的链接先被访问，当鼠标悬停时，链接将显示为`.yellow`定义的颜色。

CSS 使用规则总结使用规则总结

一一.缩写规则缩写规则

关于边距 margin（4边）：

1px 2px 3px 4px (上、右、下、左)

1px 2px 3px （省略的左等于右）

1px 2px (省略的上等于下)

1px （四边都相同）

简化所有：

*/ body{margin:0}————表示网页内所有元素的margin为0

#menu{ margin:0}————表示menu控件下的所有元素的margin为0

缩写（border）特定样式：

Border:1px solid #ffffff;

Border-width:0 1px 2px 3px;

关于文字的缩写规则：

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用斜杠组合在一起不能分开写。

关于背景图片的：

Background:#FFF url(log.gif) no-repeat fixed top left;

关于列表：

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

rel 关系

type 数据类型,有多种

href 路径

部分浏览器支持候选样式,关键字:alternate:

2.内部样式块

3.@import

@import url{a.css}

注意:此指令必须放在中的设定

–外部引用css文件

（2）优先级不是按访问顺序来设定的，而是又css中的声明顺序来设的。

如上例中

此处显示为黄色

也显示为黄色，因为在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;

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38499503

粉丝: 8
资源: 975

CSS缩写规则与样式引入总结

CSS实战学习总结,很不错的

CSS使用技巧总结

微信小程序 css使用技巧总结

css总结

CSS学习总结：掌握CSS样式规则和使用方式

CSS RESET个人总结

css的一些总结

css 通配符用法总结

CSS代码缩写实例以及CSS缩写原因总结

CSS常用样式总结积累

最新资源