CSS样式规则和加载方式 · UI104班随堂笔记

## CSS样式规则和CSS加载的方式 ### CSS样式规则 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明: ![](https://box.kancloud.cn/2b07a7a024f4c1fd23db0c07d6119ea5_569x119.png) 选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性（property）希望设置的样式属性（style attribute）。 ### CSS加载的方式 **引入外部文件** ```html <link href="outer.css" rel="stylesheet" type="text/css"></link> ``` HTML文档中使用`<link>`元素引入外部样式文件，引入外部样式文件应在`<head>`元素中增加`<link>`子元素。 **导入外部样式单** ```html <style type="text/css"> @import "../outer.css"; @import url('outer.css'); </style> ``` 导入外部样式表单需要在<style>元素中执行@import进行导入。 **使用内部CSS样式** 一般来说我们不建议使用内部CSS样式： * 复用性小。 * 导致HTML文档过大，会导致网络负载严重。 * 修改整站风格时，需要对每个网页文件进行样式修改。 ```html <style type="text/css"> 样式单文件定义 </style> ``` **使用内联CSS样式** 内联样式只对单个标签有效，不会影响整个文件。在HTML元素中使用style属性定义内联样式。 ```html <div style="property1:value1;property2:value2;"/> ```