CSS基础知识学习笔记_css基础知识资源-CSDN下载

需积分: 50 3 浏览量 2015-05-11 14:28:13 上传评论收藏 110KB PDF 举报

### CSS基础知识学习笔记 #### 一、CSS简介与基本概念 **CSS**(Cascading Style Sheets)即层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言。CSS的作用在于控制网页的布局和样式，使网页内容的展现更加丰富多彩。 #### 二、CSS的基本结构一个CSS样式表主要由展示规则组成。这些规则用于控制HTML标签的外观。例如，我们可以定义一个段落（`<p>`标签）的字体颜色为红色、背景色为黄色、字体大小为4厘米并添加一个2像素的蓝色实心边框。具体的CSS代码如下： ```css p { color: red; background-color: yellow; font-size: 4cm; border: 2px solid blue; text-align: center; } ``` #### 三、CSS语法 CSS语法中，每个样式规则由属性和对应的值组成。多个属性之间使用分号分隔，属性和值之间则使用冒号连接。例如： ```css color: red; background-color: yellow; font-size: 4cm; border: 2px solid blue; text-align: center; ``` #### 四、CSS单位 - **颜色**：可以使用十六进制(#rgb)、颜色名(red)或RGB数值(如：rgb(255, 0, 0))等方式定义。 - **字符大小**：支持多种单位，包括相对单位(em)、绝对单位(px)和百分比(%)等。 - `em`: 相对于父元素的字体大小。 - `px`: 像素单位，常用的固定单位。 - `pt`: 磅，常用于印刷媒体。 - `cm`: 厘米。 - `%`: 百分比，相对于父元素的尺寸。 - **其他单位**：还有如mm、in等绝对单位。 #### 五、CSS注释 CSS中的注释采用`/* 注释内容 */`的形式，需要注意的是，注释内部不能嵌套注释。 #### 六、CSS样式表类型 - **内联样式表**：直接在HTML标签中使用`style`属性定义样式。 - 优点：简单直接，便于理解。 - 缺点：不易维护，不便于样式重用。 - **嵌入样式表**：通过`<style>`标签在HTML文档的`<head>`部分定义样式。 - 优点：可以控制整个页面的样式。 - 缺点：每页都需要复制相同的样式代码。 - **外部样式表**：将样式保存在一个`.css`文件中，然后通过`<link>`标签引用到HTML文档中。 - 优点：易于维护，便于样式重用，只需更改一处即可应用于所有引用该文件的页面。 - 缺点：需要额外的HTTP请求来加载CSS文件。 - **导入样式表**：使用`@import`语句将一个CSS文件导入到另一个CSS文件或HTML文档的`<style>`标签中。 - 优点：可以方便地合并多个样式文件。 - 缺点：加载时间可能较长，因为浏览器会先加载导入的文件再处理样式。 #### 七、CSS优先级 - **内联样式表**的优先级最高。 - **外部样式表**和**嵌入样式表**的优先级取决于它们被加载的顺序。 - **导入样式表**的优先级也受加载顺序的影响。 #### 八、CSS字体属性 - **font-family**：定义字体族科，可以指定多个字体族科以防首选字体不可用。 - **font-size**：定义字体大小，支持绝对单位（如px）、相对单位（如em）或百分比。 - **font-style**：定义字体风格，可选值包括`normal`、`italic`和`oblique`。 - **font-weight**：定义字体粗细，可选值包括`normal`、`bold`及介于1到900之间的数字。 - **font-variant**：定义小写字母的大小写转换，默认值为`normal`，另一个选项为`small-caps`。 - **复合属性**：可以同时设置多个字体属性，如`font: bold italic small-caps 16px/1.5 'Arial'`。 #### 九、CSS文本属性 - **color**：定义文本颜色。 - **letter-spacing**：定义字母之间的间距。 - **word-spacing**：定义单词之间的间距。 - **text-decoration**：定义文本装饰，如下划线、删除线等。 - **text-indent**：定义首行缩进。 - **text-transform**：定义文本转换，如转换为全大写或全小写。 - **line-height**：定义行高，可以使文本在垂直方向上居中。 #### 十、CSS背景属性 - **background-color**：定义背景颜色。 - **background-image**：定义背景图像。 - **background-repeat**：定义背景图像的重复方式。 - **background-position**：定义背景图像的位置。 - **background-attachment**：定义背景图像随滚动条的行为。 - **综合属性**：可以将多个背景属性结合在一起使用，例如`background: yellow url(image.jpg) no-repeat top center`。 #### 十一、CSS边框属性 - **border-width**：定义边框的宽度。 - **border-style**：定义边框的样式。 - **border-color**：定义边框的颜色。 - **border**：是一个简写属性，可以同时定义边框的宽度、样式和颜色。以上是CSS基础知识的一些核心概念和属性，熟练掌握这些基础知识可以帮助开发者更好地控制网页的布局和样式。

资源推荐

资源详情

资源评论