学习笔记记录之CSS（一）

写在前面：

• chrome调试工具使用

1.打开调试工具

打开chrome浏览器，按下F12或者右击空白处-检查

2.使用调试工具

• ctrl+滚轮可以放大开发者工具代码大小
• 左边是 HTML元素结构，右边是CSS样式r
• 右边 CSS 样式可以改动数值(左右头者直接输入）和查看颜色
• Ctrl + 0复原浏览器大小
• 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误
• 如果有样式，但且样式前面有黄色叹号提示，则是样式属性书写错误

  ---

  目录

  一、CSS语法规范

  二、代码风格

  三、CSS基础选择器

  四、CSS字体属性

  五、CSS文本属性（外观样式）

  六、CSS引入方式

  ---

正文

一、CSS语法规范

<style> 选择器{样式}</style>

如 h1 {color=red; font-size=25px;}

二、代码风格

1.紧凑风格

2.展开式风格

• 空格规范：冒号后面加一个空格，选择器与大括号之间加一个空格。
• 样式提倡小写字母

三、CSS基础选择器

1.标签选择器：用来选择标签（某一大类）

2.类选择器（最常用）：样式点定义，结构类调用

如：.red {color=red;}     再调用所需改的样式  class="red"

3.多类名选择器：可以把标签相同的样式放到一个类里

4.id选择器：样式#定义，结构id调用，只能调用一次，别人切勿使用（每个样式用空格分开）

5.通配符选择器：*     表示选取页面中所有元素（标签）

四、CSS字体属性

• 学会利用CSS手册查询属性

1.字体：font-family

如Microsoft Yahei为微软雅黑

2.字体大小：font-size

值需用px作为后缀，标题需单独指定字体大小

3.字体粗细：font-weight

加粗：700/bold     变正常：400/normal

4.文字样式：font-style

变倾斜：italic    变正常：normal

5.复合属性：（顺序不能变，可缩减，但大小和字体必须有）

font: font-style font-weight font-size font-height font-family

五、CSS文本属性（外观样式）

1.color颜色

• 预定义颜色值
• 十六进制（最常用）
• RGB

2.对齐文本：text-align 水平对齐方式

（默认）left左对齐  right右对齐  center居中

3.装饰文本：text-decoration

（默认）none无线   underline下划线  line-though删除线  overline上划线

• 重点记住下划线和取消下划线

4.文本缩进：text-indent段落缩进（首行）

可正或负，以px为单位即为像素大小，以em为单位即为文字大小（当前单个元素大小）

5.行间距：line-height   px为单位

六、CSS引入方式

1.内部样式表（内嵌样式表）

放在html内部，在<style>标签中

2.行内样式表：适用于简单的修改

如：<p style="xxx:xxx;">

3.外部样式表

单独的.CSS文件

用<link>标签引入这个文件中   如：<link rel="stylesheet href="CSS文件路径">