CSS的学习

看的还是黑马的教程，说起来跟黑马也真是有缘，以前的一个C++知识点跟的是黑马学的，我redis也是跟黑马学的，我VUE也是跟黑马学的，现在CSS还是黑马哈哈哈哈课程链接1.front-size调整字体的大小2.class和id选择器的区别，id只能用一次，class可以多次引用，一个标签可以引用多个class选择器，用空格分隔3.front-family是修改页面字体，可以搞多个字体，逗号分隔，顺

dxgzg

253746人浏览 · 2021-09-24 10:43:32

dxgzg · 2021-09-24 10:43:32 发布

看的还是黑马的教程，说起来跟黑马也真是有缘，以前的一个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是这个类型

<link rel="stylesheet" href="xxxx">

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;
        }

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^