CSS的学习_dxgzg

网络 02-07 6800

看的还是黑马的教程，说起来跟黑马也真是有缘，以前的一个C++知识点跟的是黑马学的，我redis也是跟黑马学的，我VUE也是跟黑马学的，现在CSS还是黑马哈哈哈哈课程链接

1.front-size调整字体的大小

2.class和id选择器的区别，id只能用一次，class可以多次引用，一个标签可以引用多个class选择器，用空格分隔

3.front-family是修改页面字体，可以搞多个字体，逗号分隔，顺序是第一个字体浏览器不支持，一次往后找，最后找不到了找浏览器默认的字体。

4.font-weight变粗细，这个后面不用加px（注px是像素，一个单位）

5.font-style 字体是否倾斜，italic斜体开启,normal关闭斜体。

6.color直接就可以表示字体颜色了。

7.text-align 水平对齐，center

8.text-decoration 装饰线

text-indent缩进，让p标签的文本缩进，就是小时候写作文空两行。可以使用px单位，也可以使用em，em意思为缩进当前元素两个文字大小的距离

10.line-height 行间距，上下间距都改了。line-height=上下间距+文字的高度

11.这个css操作意思就是修改ul标签里的li标签。

12.引入外部的css文件。注意rel是这个类型

13.emmet语法快速生成标签，一定要tab才能生成。

14.vscdoe保存就修改代码格式

==== 2021.9.28更新一下

16px是字体大小，28px是行高，而不是真正的除法 16.>亲儿子选择器，这样就只有儿子会变色 17.标签的一些操作，要按照这个顺序来写。这四种的，亲测p标签改一下这个hover也是可以使用的。hover悬停的意思元素显示模式

18.css 分为块元素显示和行元素显示普通div、p标签这些都是块元素了，块元素的特点

span是行内元素，这个经常见到，行内特点的如下 19.行内块元素 20.行内元素转换成块内元素display:block 块内元素转换成行内元素display:inline

水平居中和上下居中

text-align: center水平居中。hegiht和line-height一样高就可以上下居中了，演示效果如下。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { background-color: skyblue; height: 300px; width: 300px; text-align: center; /*text-indent: 7em;*/ line-height: 300px; /*字体加空隙的高度与盒子的高度一致*/ } </style> </head> <body> <div> 我要居中 </div> </body> </html> 背景图片

需要url函数来导入，默认是平铺的，平铺可以理解为是重复的

div { /*width: 800px;*/ height: 8000px; /*注意要用这个url这个函数*/ background-image: url("../img/first_work.png"); /*默认图片是平铺的所以要改成不平铺*/ background-repeat: no-repeat; }