css基本介绍_IT分享知识网

css基本介绍

大家好，欢迎来到IT知识分享网。

CSS基本使用

1.css简介
2.CSS的编写位置
3.样式表的优先级
4.CSS语法规范
5.CSS选择器
三.字体和文本样式

1.css简介

2.CSS的编写位置

2.1 行内样式

<h1 style="color:red;font-size:60px;">欢迎学习CSS</h1>

2.2 内部样式

（1）写在 html 页面内部，将所有的 CSS 代码提取出来，单独放在 <style> 标签中。style标签一般写在head标签里面， title标签下面
（2）语法：

（3）注意点：
①<style> 标签理论上可以放在 HTML 文档的任何地方，但一般都放在 <head> 标签中。
②此种写法：样式可以复用、代码结构清晰
（4）存在的问题：
①并没有实现：结构与样式完全分离。
②多个 HTML 页面无法复用样式。

2.3 外部样式

<link rel="stylesheet" href="./xxx.css">

（3）注意点：
①<link> 标签要写在 <head> 标签中。
②<link> 标签属性说明：

href ：引入的文档来自于哪里。
rel ：( relation ：关系）说明引入的文档与当前文档之间的关系。

3.样式表的优先级

4.CSS语法规范

5.CSS选择器

5.1 CSS基本选择器

5.1.1 通配符选择器

* { 属性名: 属性值; }

（3）举例：

/* 选中所有元素 */ * { color: orange; font-size: 40px; }

5.1.2 元素选择器

标签名 { 属性名: 属性值; }

（3）举例：

/* 选中所有h1元素 */ h1 { color: orange; font-size: 40px; } /* 选中所有p元素 */ p { color: blue; font-size: 60px; }

（4）备注：元素选择器无法实现差异化设置，例如上面的代码中，所有的 p 元素效果都一样。

5.1.3 类选择器

（1）语法：

.类名 { css属性名：属性值； }

5.1.4 id选择器