前端开发必备：CSS使用技巧与规则概览

106 浏览量更新于2024-08-31 收藏 109KB PDF 举报

CSS（Cascading Style Sheets）是一种用于描述HTML或XML（包括XML衍生的文档）元素外观和格式的语言。掌握CSS的使用规则对于前端开发者至关重要，它能让网页设计更加高效且易于维护。本文将详细介绍两个关键主题：CSS的缩写规则和引入CSS样式的四种方法。 1. **CSS缩写规则** - **边距（Margin）**：CSS允许通过省略的方式设置边距，例如`1px2px3px4px`可以简写为`1px 2px 3px 4px`（四个方向分别设置），或者`1px 2px 3px`（默认上下对齐），`1px`则代表所有边距相等。 - **边框（Border）**：可以通过`border`属性一次性设置宽度、样式和颜色，如`border:1px solid #ffffff`。另外，也可以单独指定宽度，如`border-width:0 1px 2px 3px`。 - **字体（Font）**：可以合并`font-style`, `font-variant`, `font-weight`, `font-size`, 和 `line-height`。例如，`Font:italic small-caps bold 12px/1.5em Arial, sans-serif`。 - **背景（Background）**：背景颜色和图片可以同时设置，如`background:#FFF url(log.gif) no-repeat fixed toleft`，`background`属性可以接受多个值。 2. **引入CSS样式的方法** - **link**：这是最常见的方法，通过`<link>`标签在`<head>`中引用外部CSS文件，如`<link rel="stylesheet" type="text/css" href="styles.css">`。部分浏览器支持`alternate`属性，提供备选样式。 - **内部样式**：直接在HTML文档中使用`<style>`标签定义CSS，适用于临时或页面局部样式调整。 - **@import**：虽然现代推荐避免使用，但在某些情况下可用，如`@import url('a.css')`。但注意`@import`应放在`<style>`标签内，并遵循CSS声明顺序的优先级原则。理解这些规则有助于编写更简洁、可读性强的CSS代码，提高开发效率。在实际应用中，还需要关注浏览器兼容性问题，确保不同设备和平台上的样式一致性。同时，CSS的继承、层叠和优先级规则也需要深入理解，以便灵活运用并解决样式冲突。学习和熟练掌握CSS的使用规则是前端开发者的必备技能。

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

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;

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

weixin_38636461

粉丝: 5
资源: 894

前端开发必备：CSS使用技巧与规则概览

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

css知识点总结包含xmind文件

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

使用CSS美化网页布局

如何使用CSS网页打印样式

使用CSS动画提升用户体验

使用CSS3实现动画效果

CSS网格：理解与使用

postcss-loader作用

在html如何使用css代码

最新资源