• 前端入门--CSS篇

    CSS

    文章目录


    CSS主要是实现美化界面的作用

    基本的语法规范

    选择器 + {一条/ 多条声明}

    选择器主要是决定对谁修改

    声明是决定怎么改,改成什么

    声明的属性是以键值对的形式出现的

    image-20221026205730839

    style里面的div就是键值对, 说明针对下面的div进进行修改

    color : 颜色英文 对选择器选中的地方进行修改

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>csstitle>
head>
    <style>
        div{
            color: red;
            font-size: 120px; /*键值对  将字体的大小设为120像素*/
        }
    style>
<body>
    <div>这就是cssdiv>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    image-20221026210649320

    使用开发者工具进行调试,看实现了哪些css样式

    命名风格

    驼峰命名法 fontSize, 常常在Java JS中使用

    蛇形命名法 font_size, 常常在C C++ Python中使用

    脊柱命名法 font-size, 一般都是在CSS中使用,因为在别的语言中’-’ 往往代表减号或者符号,但是在CSS中, 不存在算术运算,所以可以使用脊柱命名法

    注释

    在CSS中只能使用/* * / 或者 ctrl + / 来注释

    CSS中的注释不支持嵌套

    CSS的引入方式

    内部样式

    将CSS嵌入到了html当中

    image-20221026211700912

    内联样式

    使用style属性, 每个标签都可以有style属性,在标签后面直接写CSS

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>csstitle>
head>
    <style>
        div{
            color: red;
            font-size: 120px; /*键值对  将字体的大小设为120像素*/
        }
    style>
<body>   
    <div style="color: green"> /*直接在标签后面加CSS*/
        这就是css
    div>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    要是将style标签和style属性同时进行

    image-20221026212438979

    要是不同的属性,就不会影响,所以字体变成了120px

    要是是相同的属性, 就会要看优先级了, style属性设置优先级(内联样式) > style标签(内部样式), 所以最后执行的是绿色

    外部样式

    单独创建一个.css的文件, 之后在.html文件的头文件中,使用link标签调用即可

    image-20221026213118189

    image-20221026213133225

    要是外联样式与内联样式冲突了,还是内联样式优先级高

    在实际开发中,使用的最多的样式就是外部样式,因为外部样式的代码复用性高

    内联样式主要是在进行代码的修修补补的时候,快速直接解决问题

    但是下面的代码主要是使用内部样式, 因为方便观察代码

    代码风格

    最好写成展开风格,便于阅读

    div{
    color: red;
    font-size: 120px; 
}   

    • 1
    • 2
    • 3
    • 4

    在css中不区分大小写, 一般都是使用小写的

    CSS选择器

    选择器描述的是要选中页面中的哪个/哪些元素, { }的键值对就是针对选择的元素生效的

    标签选择器

    选择器 就是一个标签的名字

    标签选择器表示针对当前页面中所有的指定标签, 都会被选中

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>csstitle>
    <link rel="stylesheet" href="style.css">
head>
    
    <style>
       div{
        color: red;
        font-size: 40px;
       }
       p{
        color: black;
        font-size: 50px;
       }
    style>
    
<body>   
    <div>闪电侠div>
    <div>闪电侠div>
    <div>闪电侠div>
    <p>蝙蝠侠p>
    <p>蝙蝠侠p>
    <p>蝙蝠侠p>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    image-20221026215108395

    类选择器

    上面使用标签选择器选中了所有含标签的,但是要是想要做到差异化,就可以使用类选择器

     	<style>
       .the{
        color: red;
        font-size: 40px;
       }
    style>
<body>   
    <div>闪电侠div>
    <div class="the">闪电侠div>
    <div>闪电侠div>
    <p>蝙蝠侠p>
    <p>蝙蝠侠p>
    <p>蝙蝠侠p>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    .the就是类名, CSS中的类与Java中面向对象的类是不一样的,CSS中的类只是一个类似于模板的简单功能

    在下面调用类的时候, 不用写 . 了, 直接写class = "类"就行了

    image-20221026215905123

    类也是支持多个元素引用一个类的

      <style>
       .the{
        color: red;
        font-size: 40px;
       }
    style>
<body>   
    <div>闪电侠div>
    <div class="the">闪电侠div>
    <div class="the">闪电侠div>
    <p>蝙蝠侠p>
    <p>蝙蝠侠p>
    <p>蝙蝠侠p>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    image-20221026220048525

    所以, 类选择器是很灵活的,也是很好用的

    id选择器

    每个元素都有一个id属性, id值在页面上是唯一的, 使用id选择器可以选中对应元素

     <style>
    /*类选择器是 . */
       .the{
        color: red;
        font-size: 40px;
       }
     /*id选择器是 # */
      #the-id{
        color: rgb(82, 64, 162);
        font-size: 120px;
      }
    style>
<body>   
    <div>闪电侠div>
    <div class="the">闪电侠div>
    <div class="the">闪电侠div>
    <p>蝙蝠侠p>
    <p id="the-id">蝙蝠侠p>
    <p>蝙蝠侠p>
body>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    通配符选择器

    *{

    }

    通配符选择器是选中页面中所有的元素, 常常用于干掉浏览器的默认样式

    即便没有指定文本的颜色 字体大小, 段落间距,不同的浏览器上也会有默认的, 所以每个浏览器上的默认是不一样的, 所以要统一更改

    上面的这四个选择器是最基础的选择器,还有一类叫做复合选择器

    复合选择器

    后代选择器

    image-20221028112240778

    这里的 li 就是ul的儿子, 下面的li 是ol的儿子

    ​ image-20221028112403161

    div是ul的孙子,也算是后代

    

   
    
      
        
    • 书本
      •         
        
    • 椅子
      • 
        
    • 桌子
      • 
    
    
    
      
        
    1. 茶杯
      2. 
        
    2. 保温杯
      3. 
        
    3. 玻璃杯
      4. 
    
    


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    image-20221028112547406

    image-20221028112821456

    其实后代选择器就是在一个大的范围里面选中一个更小的对象

    image-20221028113112548

    也可以直接跳过父亲,直接就是爷爷和孙子,效果也是一样的

    子选择器

    ​ 子选择器与后代选择器不一样的是, 子选择器只能父亲选择儿子,不能隔代选择

    父亲 > 儿子

    

   
    
      
        
    • 书本
      •         
        
    • 椅子
      • 
        
    • 桌子
      • 
    
    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    并集选择器

    使用逗号使多个标签使用同一种样式

    

   
    
    天龙八部
    
    
    神雕侠侣
    
    
    鹿鼎记
    

    
    倚天屠龙记
    
    
    神雕英雄传
    
    
    碧血剑
    


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    image-20221028114410672

    伪类选择器

    使用 :hover 是 鼠标移动上去就会有效果

    使用 :active 是 鼠标点上去就会有效果

    

   
    
    天龙八部
    
    
    神雕侠侣
    
    
    鹿鼎记
    


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    点击一个按钮会变色就是这样子实现的

     

       
       
    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    常用的元素属性

    在CSS中, 属性很多,要想了解更多,可以去MDN查文档, 这里只介绍一些常用的属性

    修改字体

    font-family

     

    
    闪电侠
    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    image-20221028122457691

    修改字体的粗细

    font-weight:

    后面可以是100-900的数字,也可以是单词

    normal 普通

    bold 粗的

    bolder 更粗的

    lighter 更细的

    所以可以使用CSS中的font-weight代替html中的h1等标题的效果

    设置文本属性

    文本颜色

    color 后面可以写不同的值

    1. 直接写颜色单词
    2. 写成rgb / rgba 形式
    3. 写成 #十六进制数字

    rgb是计算机表示颜色的基本方式

    r : red

    g : green

    b : blue

    这就是色光三原色,在计算机中通过三原色表示各种颜色, 每个光点都可以表达一种颜色, 使用一个字节表示R,一个字节表示G,一个字节表示B,每种颜色的取值范围是0-255,所以一共有255 * 255 * 255 种颜色

    ​ 语法格式是 color: rgb( , ,);

    image-20221028124501080

    使用十六进制也能表示颜色, 如 ff0000 ,十六进制的 ff 在十进制中表示255

    所以也就相当于是上面的rgb形式 , 两个数为一个分量, 要是每个分量的两个数字都是一样的 , 就 可以把六个数字缩写成3个数字

    例如: AABBCC 就能缩写成ABC

    文字对齐

    默认网页上的文字都是左对齐的,但是文章的标签标题一般都是要居中, 落款一般都是右对齐的

    使用 text-align:

    后面可以是center文字居中, right右对齐

    文本装饰

    text-decoration :

    主要是下划线(underline) 上划线(overline) 删除线(line-through) 不加下划线(none)

    创建链接的时候,下面会有下划线, 有时想要去掉下划线,就用 text-decoration : none

    
    "#">这是一个链接
    
    闪电侠
    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    文本缩进

    text-indent

    给定一大段话, 要是想要首行缩进,就要用到text-indent : 数字px / em

    要是想要向右缩进2个文字的大小, 就要知道一个文字有 多少个px,但是网页的文字是有可能改变的,所以最后是text-indent: 2em 不管一个字多大,都是缩进两个文字大小

    一个em就是一个文字的大小

    行间距 = 行高 - 文字大小

    所以要是想确定行间距只要做一下减法就行了

    行间距 = line-height - font-size

    设置背景颜色和背景图片

    使用 background-image: url() 设置背景图片, 这里填的路径可以是绝对路径 / 相对路径 /网络地址

    默认设置的北京是平铺的,所以会有很多

    image-20221028160339857

    使用 background-repeat: 来确定平铺的状态,

    要是是 background-repeat: no-repeat; 就是不平铺

    image-20221028160632640

    设置完不平铺之后,图片会出现子左上角,还是不好看

    ​ 使用background-position : center center

    将图片设置成居中 , 后面还能直接跟上两个数字, 表示 距离原点 的横纵坐标

    页面的原点在左上角

    image-20221028164913908

    使用background-size 设置背景图片的的大小

    background-size: contain; 保证图片能完整显示

    background-size: cover 尽可能拉伸

    圆角矩形

    默认的都是呈90度的矩形, 但是为了美观,很多的矩形边角都是有一定的弧度的此时就可以使用 border-radius: 20px; 来设置圆角矩形, 数值越大 角就越圆

    image-20221028170747207

    要是想要画出一个圆形,就要先画出一个正方形,在让 border-radius变成变长的一半即可

    image-20221028171258092

    元素的显示模式

    独占一行: 块级元素 div h1 - h6 p table r

    不独占一行 : 行内元素; span a u b strong

    一般都是将行内元素转换成块级元素, 可以使用 display属性

    
    就是这样
    就是这样
    就是这样
    就是这样


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    image-20221028173312231

    span是行内元素,是不会独占一行的

    使用display : block 转换成块级元素

    	

    
    就是这样
    就是这样
    就是这样
    就是这样
    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    display还有一种用途,就是display: none 隐藏元素

    image-20221028173757964

    盒模型

    每个html元素就相当于是一个矩形的"盒子",这个盒子是这样构成的

    • 边框border

    • 内容 content

    • 内边距 padding

    • 外边距 margin

      image-20221029101621306

      可以通过CSS设置这些盒属性

      设置边框border

      border: 5px blue solid;
/*边框的粗细  颜色  边框的样式*/
/*  solid是实线
dotted 是围了一周点
dash是围了一周虚线*/

      • 1
      • 2
      • 3
      • 4
      • 5
       

    
    
      闪电侠
      
    

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12

      image-20221029102515315

      我们会发现, 之前设置的div是100px,最后的div变成了110px, 也就是说,加上边框之后,边框会使整个变大

      要是不想边框撑大,就可以使用box-sizing: border-box;

      image-202210291028401374

    ​ 这样子设置了之后, div确实是不变了,但是这是里面的内容也变少了 , 边框其实还是没变, 这是不会撑大而已image-20221029103005482

     

    
    
    闪电侠
    
    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    image-20221029104004065

    弹性布局

    弹性布局是用来描述元素之间的相对关系的

    弹性布局主要是用来网页布局

    最早的时候,

    主要是基于表格来布局

    后来有了弹性布局(一行一行的进行页面布局)

    后来又有了王网格布局, 网格布局是二维的,所以更加先进

    但是网格布局还比较新, 旧电脑上的旧浏览器还不支持,所以还没有完全普及

    所以当下主要还是使用弹性布局

    在父元素中使用display: flex 使子元素变成弹性布局, 弹性布局解决的就是在如何在同一行中布局

    

    
        
    
            1
            2
            3
        
    
    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    在弹性布局的符容器里面, 还可以使用 justify-content: 来设置水平方向的排列方式

    justify-content: center的效果

    image-20221029113032890

    

    
        
    
            1
            2
            3
            4
            5
            6
            7
        
    
    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    image-20221029113136671

    B站的视频水平排列方式就是通过弹性布局来实行的

    以上就是一些关于 CSS的知识点,这些都是比较基础的前端知识, 只是入门级别的, 主要是为了了解前端的一些基础知识

  • 相关阅读:
    【OpenCV-Python】教程：3-13 Hough直线变换
    【光学】基于Matlab模拟干涉条纹图
    ssh无密码登录
    【KVM-6】KVM/QEMU软件栈
    Docker学习（1）—— 安装Docker
    jmeter 聚合报告
    Windows 11 安装OpenCV 及其学习路线
    机器学习——逻辑斯蒂回归数学原理及信用卡诈骗项目实例
    Maven 工具学习笔记（基础）
    Spring进阶（四）：Boot
  • 原文地址：https://blog.csdn.net/m0_60354608/article/details/127596262