前端学习笔记-CSS

1、Css是什么

CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

css 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：

就像在Html的注释一样，在CSS中也有注释语句：用/*注释语句*/来标明（Html中使用<!--注释语句-->)

 

2、css样式

 2.1内联式

2.2 外部式css样式

<link href="base.css" rel="stylesheet" type="text/css" />

 

3、类选择器

 

 4、ID选择器

5、类和ID选择器的区别

不同点：

1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。

2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。

相同点：可以应用于任何元素

6、子选择器

 

7、后代选择器

 

8、通用选择器

通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色。

* {color:red;}

9、伪类选择器

10、分组选择器

11、 使用font-family设置字体系列

12、使用font-size设置字体大小

13、 使用font-weight设置字体粗细

 

14、使用font-style设置字体样式

 

15、使用text-decoration添加文本修饰 

 

16、使用text-indent为文本添加首行缩进 

p{text-indent:2em;}

17、使用line-height为文字设置行间间距

p{line-height:1.5em;}

18、使用letter/word-spacing增加或减少字符间的空白

19、 使用text-align设置文本对齐方式

20、使用border为盒子添加边框

 

 

21、 使用border-radius设置圆角

 

 

 

22、使用padding为盒子设置内边距（填充）

 

23、 使用margin为盒子设置外边距（边界）

 

 

24、流动模型

 

 

25、层模型

 

1）绝对定位

 

2）相对定位

 3）固定定位

26、使用justify-content属性设置横轴排列方式