CSS详细基础教程-01-简介、基础选择器、字体属性、文本属性、引入方式、调试工具

CSS详细基础教程

CSS简介

美化网页，布局页面

HTML的局限性：只关注内容的语义，可以做简单的样式，专注结构呈现

css的层叠样式表简称，标记语言，美化HTML，使网页布局更简单

css基础选择器

1. css主要的构成：选择器以及一条或多条声明

• 选择器{样式；}，px是像素
• 选择器是用于指定css样式的HTML标签，花括号内是对该对象设置的具体样式
• 属性和属性值以“键值对”的形式出现

2. css代码风格 ：展开式风格

3. 样式大小写：用小写

4. 空格规范：属性值前面，冒号后面，保留一个空格；选择器（标签）和大括号中间保留空格

5. css选择器的作用：选择标签使用的

6. 选择器的分类：基础选择器（单个选择器组成）、复合选择器基础选择器（标签选择器、类选择器、id选择器、通配符选择器）

   6.1. 标签选择器：HTML名为选择器，选择页面中全部同类型标签

   6.2. 类选择器：单独选择一个或几个标签；样式点定义，结构class调用，一个或多个，开发最常用

   • 语法：.类名（自己命名，不要使用数字、中文，尽量有意义） class=“类名”
   • 案例：div就是盒子，background-color背景颜色
   • 多类名：一个标签有多个类名（多个名字），多个类名之间用空格隔开

   6.3. id选择器：以“#”来定义，id来调用；样式用#定义，结构用id调用，只能调用一次，别人切勿使用

   语法：#名字 id来调用

   6.4. 通配符选择器：使用※定义，不需要调用

   语法：*（空格）{}

css字体属性

1. 字体系列

   font-family：‘字体名字’；各种字体之间用，隔开

2. 字体大小

   font-size：大小px；标题比较特殊，需要单独设置字体大小

3. 字体粗细

   font-weight：数字；

   700：加粗；400：normal

4. 文字样式

   font-style：不倾斜不加粗（normal），倾斜（italic）；

5. 复合属性

   把文字样式综合来写，节约简洁

   font: font-style font-weight font-size font-family；

   注：用空格隔开，不能随意颠倒顺序，必须保留font-size、font-family，否则将不起作用

css文本属性

 定义文本的外观

1. 文本颜色

   color定义文本颜色，预定义的颜色值、#16进制颜色、rgb代码，

   十六进制使用最多

2. 文本对齐

   text-align属性设置水平对齐，center，left（默认），right

3. 装饰文本

   text-decoration属性添加文本的修饰，none（normal）、underline（下划线）、line-through（删除线）、overline（上划线）

4. 文本缩进

   段落的首行缩进，text-indent：2em；em，相对单位，一个文字的大小

5. 行间距

   line-height（行高），控制文字行与行之间的距离

css引入方式

  css的三种样式表：行内样式表（行内式）、内部样式表（嵌入式）、外部样式表（链接式）

• 内部样式表：HTML页面内部，写到style标签内部；style一般放在head中；控制整个代码页面中的元素样式；并没有实现结构与样式完全分离；练习时常用
• 行内样式表：修改简单样式；直接在标签内加上style属性；使用双引号
• 外部样式表：适用于样式比较多；核心是样式单独写到css文件中，再引入到HTML页面中；1）新建.css文件（只有样式，没有标签）2）在HTML中head使用link rel=“stylesheet” href=“路径”；可以控制多个页面

Chrome调试工具

1. 打开调试工具，F12或右键选择检查
2. 试用调试工具

• ctrl+滚轮，大小调整
• ctrl+0复原浏览器大小
• 左边是HTML元素结构，右边是css样式
• 如果有样式，但样式前面有黄色叹号提示，则是样式属性书写错误