CSS学习笔记—1

1. CSS介绍

（1）作用：通过CSS达到美化网页的效果

（2）与HTML之间的关系：通过css控制HTML标签，达到美化网页的效果

（3）CSS的基本语法：选择器 {属性:值；属性:值;...........}

（4）选择器：在网页中选中标签的过程。

✔ 基础选择器（重点）：

◆标签选择器（重点）

◆类选择器（重点）

◆ID选择器

◆通配符选择器

✔ 复合选择器（重点）：

◆后代选择器（重点）

◆子代选择器

◆伪类选择器（重点）

◆并集选择器（重点）

◆标签指定选择器（重点）

2 .CSS基本语法介绍

总结基础的属性：

width：设置宽度              注意：设置值时，需要设置单位px

height: 设置高度                注意：设置值时，需要设置单位px

font-size：控制文字大小   注意：设置值时，需要设置单位px

color：控制文字颜色【前景色】

background-color：设置背景色

3.CSS书写位置

（1）内嵌式写法

◆在HTML页面中设置一个style标签

◆style标签必须放到head中

（2）行内式写法

注意：行内样式指的是在标签内部通过style属性去控制样式

（3）外联式写法

◆将css代码和html代码分开去写：

 ✓先新建一个css文件（文件后缀名为.css）

✓将css代码写入css文件中

✓用link标签将css文件引入到html页面中即可。

注意：一个html页面中可以同时引用多个css文件。

4.标签选择器

标签选择器 {属性：值；......}

注意：所谓的标签选择器，其实就是以html标签名作为选择器，实现选中标签的过程。

5.类选择器

◆.自定义名称{属性：值；....}   ---类样式的定义

◆要让定义好的类样式起作用，还得让标签去调用，标签通过class属性调用即可。

类的命名规范注意事项：

◆不能使用数字定义类名

◆不能使用特殊字符定义类名（%，/.....）

◆不推荐使用单个字母定义类名（不严谨）

◆不推荐使用汉字定义类名（不严谨）

◆推荐使用与定义好的类名

◆使用有具体语义的单词或拼音

类选择器的特点：

◆一个类样式可以被多个标签同时调用

◆一个标签可以同时调用多个类选择器

 

6.  ID选择器

◆#自定义的ID名称  {属性：值；..........}   ——ID样式的定义

◆ID选择器的调用：标签通过ID属性调用即可

ID选择器与类选择器之间的区别：

◆一般情况下，我们在使用ID选择器在设置样式的时候，最好保持每个标签的ID值不一样。

◆一个标签只能调用一个ID样式（即一个标签只能有一个ID值）

1.6  通配符选择器

◆语法：*{ 属性：值；.......}

◆特点：通过该选择器会将页面中所有的标签都选中。

7.颜色的表示方式

◇使用预定义颜色

◇使用三原色表示

r---red      0-255

g---green  0-255

b---blue     0-255

◇使用十六进制表示颜色

特点：以#开始 0-f  0-F

 

8.与文本相关的属性

font-size:设置文字大小

font-family:设置文字字体

   

font-weight:设置文字是否加粗 

      ◇normal  或者设置 400 (默认值)

     ◇ bold 或者设置 700 (文字加粗)

  font-style:设置文字是否斜体

     ◇normal(默认值)

      ◇italic（斜体）    

line-height:设置文字的行高

行高的本质是改变文字上下之间的距离

9. font属性联写

注意：◇在font属性联写中，必须设置font-size和font-family。

          ◇ 在font属性联写中，font-size必须放到font-family之前。

10.文本修饰

文字阴影

注意：设置多个文字阴影，用逗号隔开即可。

设置内容居中显示：

text-align:left |center | right

注意：该属性只能在块级元素中使用。

11.后代选择器

◇后代选择器必须在嵌套结构中使用

◇后代选择器只能选中所有后代元素（子元素）

◇语法：

选择器 选择器{ 属性：值；........}

注意：后代选择器 选择器与选择器中间一定要有空格

12.子代选择器

语法：选择器>选择器{属性：值；...........}

特点：只能在嵌套结构中使用自带选择器

           子代选择器只能选中直接子元素（只能选中儿子）

13.标签指定式选择器

又名交集选择器

语法  

选择器选择器{属性：值；.........}

标签指定式选择器的关系：

既.........又............

14.并集选择器

◇语法

选择器，选择器{属性：值；.......}

◇通过并集选择器设置公共样式。