一文彻底学会CSS-1

一文彻底学会CSS-1

一、CSS基本概念

1.CSS初体验

css的作用是给页面中的元素(标签)设置样式(颜色、大小、字体、位置等等)
在这里插入图片描述

2.CSS的相关属性

在这里插入图片描述

3.CSS概念

层叠样式表(Cascading style sheets)
在这里插入图片描述

二、字体属性(font-)

1.字体大小

在这里插入图片描述

2.字体粗细

在这里插入图片描述

3.字体风格

在这里插入图片描述
在这里插入图片描述

4.连写形式

在这里插入图片描述

三、开发人员调试

开发者调试工具:调试、查错、找BUG。程序员的必备装备~
在这里插入图片描述

四、简单(基本)选择器

标签选择器、类选择器、ID选择器

选择器就是用来选中对应的标签的,然后给选中的标签加上对应的样式

1.标签选择器(标签名)

在这里插入图片描述

2.类选择器(.)

在这里插入图片描述
在这里插入图片描述

3.ID选择器(#)

在这里插入图片描述
在这里插入图片描述

特别注解:

id和class的区别

在这里插入图片描述

id选择器和class选择器的区别?

在这里插入图片描述

实际开发情况

在这里插入图片描述

五、复杂(复合)选择器

1.通配符选择器(*)

在这里插入图片描述

2.并集选择器(,)

在这里插入图片描述

3.交集选择器

在这里插入图片描述

4.后代选择器(空格)

在这里插入图片描述

5.子代选择器(>)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

六、 拓展的小细节

1.颜色的属性(知道即可)

在这里插入图片描述
在这里插入图片描述

2.注释

在这里插入图片描述

七、CSS的三种书写位置

内嵌(嵌入)样式表、行内样式表、外联(外部)样式表

1.内嵌样式

在这里插入图片描述

行内样式

在这里插入图片描述

外联样式

在这里插入图片描述

三种样式表总结

在这里插入图片描述

八、text- 文本相关属性

1.text-indent:文本的缩进

在这里插入图片描述

text-align:文本的对齐方式

在这里插入图片描述

text-decoration:文本的修饰

在这里插入图片描述

九、让盒子水平居中

在这里插入图片描述

十、CSS的三大特性

解释css的一些效果~

1.继承性

在这里插入图片描述

2.层叠性

在这里插入图片描述

3.优先级(重要)

给页面中的一个标签设置样式,可以通过多种方法~

当设置的样式层叠的时候,需要考虑优先级(权重)

优先级

在这里插入图片描述

权重

在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/xiaotai1234/article/details/108521627
今日推荐