javaEE初阶 — CSS 常用的属性

迷南。 2023-10-04 23:09 42阅读 0赞

#### 文章目录 ####

*  CSS 常用的属性
 *   *  1 字体属性
     *   *  1.1 设置字体家族 font-family
         *  1.2 设置字体大小 font-size
         *  1.3 设置字体粗细 font-weight
         *  1.4 文字倾斜 font-style
     *  2 文本属性
     *   *  2.1 文本颜色
         *  2.2 文本对齐
         *  2.3 文本装饰
         *  2.4 文本缩进
         *  2.5 行高
     *  3 背景属性
     *   *  3.1 背景颜色
         *  3.2 背景图片
         *  3.3 背景位置
         *  3.4 背景尺寸
     *  4 圆角矩形
     *   *  4.1 基本用法
         *  4.2 圆形的生成
         *  4.3 圆角矩形的生成

## CSS 常用的属性 ##

### 1 字体属性 ###

#### 1.1 设置字体家族 font-family ####

**font-family** 表示的是当前使用哪种字体来显示，比如，微软雅黑、宋体、黑体、华文行楷。

这个属性指定的字体必须要求是系统已经安装了的，如果系统没有则不能正确显示。

<!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>我真帅</title>
        
        <style>
          .one {
          
            font-size: 30px;
            font-family: '微软雅黑';
          }
    
          .two {
          
            font-size: 30px;
            font-family: '宋体';
          }
    
          .three {
          
            font-size: 30px;
            font-family: '黑体';
          }
    
          .four {
          
            font-size: 30px;
            font-family: '华文行楷';
          }
        </style>
        
    </head>
    <body>
       <div class="one">
        这是一个div
       </div>
       <div class="two">
        这是一个div
       </div>
       <div class="three">
        这是一个div
       </div>
       <div class="four">
        这是一个div
       </div>
    </body>
    </html>

![d17ea252022f417a9fa1ff8d3f3c2dd1.png_pic_center][]  
  
可以看到这四个 div 有着明显的区别。

#### 1.2 设置字体大小 font-size ####

浏览器的每个文字，可以视为一个 “方框”。  
如果是英文阿拉伯数字，方框则会比较窄，如果是中文，则一般就是一个正方形。  
设置 **font-size:20px** 文字框的=高度就是 20px。

设置字体大小上述已经演示过了，这里将不再演示。

#### 1.3 设置字体粗细 font-weight ####

实际设置的时候，有两种典型的设置风格：

1.**使用单词**  
2.**使用数字**

![21e6269688bf4660aa973cb05dff92ce.png_pic_center][]

<!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>我真帅</title>
        
        <style>
          .one {
          
            font-size: 30px;
            font-family: '微软雅黑';
            font-weight: normal;
          }
    
          .two {
          
            font-size: 30px;
            font-family: '宋体';
            font-weight: normal;
          }
    
          .three {
          
            font-size: 30px;
            font-family: '黑体';
            font-weight: bolder;
          }
    
          .four {
          
            font-size: 30px;
            font-family: '华文行楷';
            font-weight: bolder;
          }
        </style>
        
    </head>
    <body>
       <div class="one">
        这是一个div
       </div>
       <div class="two">
        这是一个div
       </div>
       <div class="three">
        这是一个div
       </div>
       <div class="four">
        这是一个div
       </div>
    </body>
    </html>

![9853228c68f349bea420fa64f37bec83.png_pic_center][]  
  
也可以直接设置数字大小来变化字体的粗细，数值越大字体越粗，这个数字的大小是 1~1000。

![a05326d2f2a0492998372f615c8f6ae5.png_pic_center][]  
  
可以明显的看到随着数字的增大，字体的粗细逐渐变大。

此时就可以把一个 div 设置成和 h1 类似了，也可以把 h1 设置成 div 类似的。

![b4cd4e358b5b46b19b831507f3581896.png_pic_center][]  
  
将一个标题的字体给变小变细，然后就类似于一个 div 了。

![a70e765300f243aca79c9719d55c833c.png_pic_center][]  
  
可以看到将一个 div 的字体变大变粗后就类似以一个 h1 标题了。

#### 1.4 文字倾斜 font-style ####

使用 **i、em** 标签也可以让字体倾斜，但是实际上使用更多的是 CSS 里的 font-style。

![eebf8f7a03764bd48636a9f5e42ddccc.png_pic_center][]  
  
**italic** 就是设置倾斜字体样式。

如果想要取消倾斜，设置为 **normal** 即可。

![8bcdf9daf8e24b96944c0dc0a010f15c.png_pic_center][]

### 2 文本属性 ###

#### 2.1 文本颜色 ####

计算机表示颜色一种典型的方式就是 RGB 的方式，  
R表示的就是 red，G 表示的就是 green，B表示的就是 blue。

在前端中，给 RGB 各分配一个字节，每个字节的范围都是 **0 ~ 255/00 ~ FF**（计算机里的典型表示）

<!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>我真帅</title>
        
        <style>
          .five {
          
            color: rgb(255, 0, 0);
          }
        </style>
        
    </head>
    <body>
      <div class="five">
        这是一个div
       </div>
    </body>
    </html>

![efdbb5899713445a93a79d4a486ffca4.png_pic_center][]  
  
第一个逗号前面的 255 表示的就是红色拉满，第二个逗号前面表示绿色为 0，最后一个 0 表示蓝色为 0。  
所以总体的一个颜色就是非常红的一个颜色。

color: rgb(255, 0, 0);

下面的就是一个绿色拉满，其余为 0 的颜色。

color: rgb(0, 255, 0);

![817755e743b54da79602aad48f7477a1.png_pic_center][]  
  
下面的则是一个蓝色拉满，其余为 0 的颜色。

color: rgb(0, 0, 255);

![1d4f7068b3d84b3abb28f6270ab4f825.png_pic_center][]  
  
通过括号里的三个分量不同的比例的搭配，就可以调出不同的颜色。

此处的颜色设置也可以使用 **十六进制**。

.five {
        color: #ff0000;
      }

![2386ffe83c064342bcde73473b5849a5.png_pic_center][]  
  
ff 表示 255，也就是红色拉满，中间两个 00 表示绿色为 0，最后两个 00 表示蓝色为 0。

如果每个分量的两个十六进制数字都相同，那么就可以把 6 位十六进制缩写成 3 为 十六进制。

比如上述的 **\#ff0000** 就可以缩写成 **\#f00**，如果是 \#ff0010 则就不可以缩写。  
这里面必须要求每个分量的两个十六进制数字都相同。  
  
颜色也可以使用 单词来表示，比如 **red、green、blue、orange、black、white**。

#### 2.2 文本对齐 ####

**文本对齐** 是使用 **text-align** 属性来设置的，这个属性决定对齐是靠左、靠右还是居中对齐。

<!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>我真帅</title>
        
        <style>
          .six {
          
            text-align: center;
            font-size: 50px;
          }
        </style>
        
    </head>
    <body>
      <div class="six">
        这是一个div
       </div>
    </body>
    </html>

![b2bc06c1f04044eda3329869226f0ea0.png_pic_center][]  
  
上述代码中的 **center** 决定的是居中对齐。

如果想要靠左或者靠右边对齐，就把这个属性改为 **left** 或者 **right** 即可。

#### 2.3 文本装饰 ####

**文本装饰** 使用的是 **text-decoration** 来实现的。  
  
![44125dc0bf034a70857e218a9d8c6fbe.png_pic_center][]

<!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>我真帅</title>
        
        <style>
          .six {
          
            color: rgb(10, 255, 10);
            text-align: left;
            font-size: 30px;
            text-decoration: underline;
          }
    
          .seven {
          
            color: rgb(100, 25, 210);
            text-align: left;
            font-size: 30px;
            text-decoration: overline;
          }
    
          .eight {
          
            color: rgb(180, 0, 200);
            text-align: left;
            font-size: 30px;
            text-decoration: line-through;
          }
        </style>
        
    </head>
    <body>
      <div class="six">
        这是一个div
       </div>
       <div class="seven">
        这是一个div
       </div>
       <div class="eight">
        这是一个div
       </div> 
    </body>
    </html>

![1ec9bd3445584339bf97da1329990d02.png_pic_center][]  
  
**none** 可以将上述的下划线、上划线、删除线全部取消掉。

![ae9afdc6491647d49df296d98b05804f.png_pic_center][]  
  
可以看到确实取消掉了。

#### 2.4 文本缩进 ####

**文本缩进** 指的是每个段落首行缩进两个文字，使用的是 **text-indent**。

![220c374b829647caa931cbc9548dfa86.png_pic_center][]  
  
文本缩进的值可以是负数。（往左缩进）

![5467ad505b414770899e6655cf6fa3f5.png_pic_center][]  
  
可以看到文字已经缩到左边了，但是此时超出了页面。

**em** 是一个相对的量，是以文字尺寸为基础来进行设置的。

假设文字大小是 40 px，1em 就是 40px，2em 就是 80px。

#### 2.5 行高 ####

行高 = **文字高度 + 行间距**

![13bc0e8148e84fd187ad23a06fc155f5.png_pic_center][]  
  
图中的绿色线为 **顶线**，紫色的线为 **底线**，蓝色的线为 **中线**，橙色的线为 **基线**。

从第一条顶线到第二条顶线就是一个行高的高度，或者是第一条底线到第二条底线，  
再或者是第一条中线到第二条中线，第一条基线到第二条基线。

![4fc4c53180a14344b5f0fb61262facbb.png_pic_center][]

### 3 背景属性 ###

#### 3.1 背景颜色 ####

背景颜色使用 **background-color** 来设置。

![2d892c03135a4a2fbb8b29f683256d2d.png_pic_center][]  
  
可以看到此处的背景已有了改变。

#### 3.2 背景图片 ####

背景图片是使用 **background-image: url(图片路劲)** 来实现的。

<!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>我真帅</title>
        
        <style>
          .image {
          
            background-image: url(image/xiaojiejie.jpg);
            line-height: 500px;
          }
        </style>
        
    </head>
    <body>
       <div class="image">
        这是一个div
       </div>
    </body>
    </html>

![24d1d2ee575b4afda66c7e99bbd466c1.png_pic_center][]  
  
当前引入图片之后默认的情况图片是平铺的。

如果不想要平铺则可以使用 **background-repeat: no-repeat;** 设置。

![da0ddaa257634e59867a9e67ca363c96.png_pic_center][]  
  
可以看到此时就不是平铺的了。

禁止平铺之后图片就会出现在页面的左上角，

#### 3.3 背景位置 ####

如果要让图片居中，使用 **background-position: center center;** 即可。

<!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>我真帅</title>
        
        <style>
          .image {
          
            background-image: url(image/xiaojiejie.jpg);
            height: 500px;
            background-repeat: no-repeat;
            background-position: center center;
          }
        </style>
        
    </head>
    <body>
       <div class="image">
        这是一个div
       </div>
    </body>
    </html>

![c7a7c76afcf94a8cbac3521326799f22.png_pic_center][]  
  
可以看到此时图片就居中了。

也可以通过设置 **坐标系** 的方式来实现图片位置的设置。

background-position: 10px 50px;

![在这里插入图片描述][1aaf4fa70f374c9da3b09f92cefb28d8.png_pic_center]  
  
这里的坐标系与我们通常所说的坐标系是不一样的。  
在计算机中的坐标系是**左手系**，而通常所说的是**右手系**。  
  
![9820b87f91164bc9a9c7057667d13c85.png_pic_center][]

![2de54c5daa9b4fd1a383259fd83545fa.png_pic_center][]

#### 3.4 背景尺寸 ####

可以使用 **background-size** 来设置背景图片的位置。

background-size: 300px 400px;

如下图就是将图片设置成宽度为 300 像素，高度为 400 像素。  
  
![8996272594c948e2a8e2632322e0e444.png_pic_center][]  
  
**contain** 会使图片尽可能的扩大，但是不会超过这个元素的范围。

background-size: contain;

**cover** 会使图片尽可能的伸展，会一直伸展到极致。

background-size: cover;

### 4 圆角矩形 ###

通过 **border-radius** 使边框带圆角效果。

#### 4.1 基本用法 ####

先设置一个宽和高，然后再设置**背景色**为橘色。

<!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>我真帅</title>
        <style>
          div {
          
            width: 200px;
            height: 100px;
            background-color: orange;
          }
        </style>
        
    </head>
    <body>
       <div>
        这是一个div
       </div>
    </body>
    </html>

![978793320a494a0791bb25f298580080.png_pic_center][]  
  
然后将它设置为字体白色。

color: rgb(255, 255, 255);

![3080148dc4c84259a48e2392564d43ba.png_pic_center][]  
  
接下来是将文字居中放置。

text-align: center;
     line-height: 100px;

![5b0df3268a2c4f3abbad3de1e995eb0a.png_pic_center][]  
  
最后就是将这个矩形变为圆角矩形。

border-radius: 10px;

![bacab37377654be18f3ddd7c71cca5bf.png_pic_center][]

#### 4.2 圆形的生成 ####

**让 border-radius 的值为正方形宽度的一半即可。**

![0fed3368fd994c0fbdb9d310f3a9386c.png_pic_center][]

#### 4.3 圆角矩形的生成 ####

**让 border-radius 的值为矩形高度的一半即可。**

![4f67904bd72e4fb0baa06756c9642bae.png_pic_center][]  
![7b1afde7207d49539c9eaa75ce408292.png_pic_center][]

[d17ea252022f417a9fa1ff8d3f3c2dd1.png_pic_center]: https://img-blog.csdnimg.cn/d17ea252022f417a9fa1ff8d3f3c2dd1.png#pic_center
[21e6269688bf4660aa973cb05dff92ce.png_pic_center]: https://img-blog.csdnimg.cn/21e6269688bf4660aa973cb05dff92ce.png#pic_center
[9853228c68f349bea420fa64f37bec83.png_pic_center]: https://img-blog.csdnimg.cn/9853228c68f349bea420fa64f37bec83.png#pic_center
[a05326d2f2a0492998372f615c8f6ae5.png_pic_center]: https://img-blog.csdnimg.cn/a05326d2f2a0492998372f615c8f6ae5.png#pic_center
[b4cd4e358b5b46b19b831507f3581896.png_pic_center]: https://img-blog.csdnimg.cn/b4cd4e358b5b46b19b831507f3581896.png#pic_center
[a70e765300f243aca79c9719d55c833c.png_pic_center]: https://img-blog.csdnimg.cn/a70e765300f243aca79c9719d55c833c.png#pic_center
[eebf8f7a03764bd48636a9f5e42ddccc.png_pic_center]: https://img-blog.csdnimg.cn/eebf8f7a03764bd48636a9f5e42ddccc.png#pic_center
[8bcdf9daf8e24b96944c0dc0a010f15c.png_pic_center]: https://img-blog.csdnimg.cn/8bcdf9daf8e24b96944c0dc0a010f15c.png#pic_center
[efdbb5899713445a93a79d4a486ffca4.png_pic_center]: https://img-blog.csdnimg.cn/efdbb5899713445a93a79d4a486ffca4.png#pic_center
[817755e743b54da79602aad48f7477a1.png_pic_center]: https://img-blog.csdnimg.cn/817755e743b54da79602aad48f7477a1.png#pic_center
[1d4f7068b3d84b3abb28f6270ab4f825.png_pic_center]: https://img-blog.csdnimg.cn/1d4f7068b3d84b3abb28f6270ab4f825.png#pic_center
[2386ffe83c064342bcde73473b5849a5.png_pic_center]: https://img-blog.csdnimg.cn/2386ffe83c064342bcde73473b5849a5.png#pic_center
[b2bc06c1f04044eda3329869226f0ea0.png_pic_center]: https://img-blog.csdnimg.cn/b2bc06c1f04044eda3329869226f0ea0.png#pic_center
[44125dc0bf034a70857e218a9d8c6fbe.png_pic_center]: https://img-blog.csdnimg.cn/44125dc0bf034a70857e218a9d8c6fbe.png#pic_center
[1ec9bd3445584339bf97da1329990d02.png_pic_center]: https://img-blog.csdnimg.cn/1ec9bd3445584339bf97da1329990d02.png#pic_center
[ae9afdc6491647d49df296d98b05804f.png_pic_center]: https://img-blog.csdnimg.cn/ae9afdc6491647d49df296d98b05804f.png#pic_center
[220c374b829647caa931cbc9548dfa86.png_pic_center]: https://img-blog.csdnimg.cn/220c374b829647caa931cbc9548dfa86.png#pic_center
[5467ad505b414770899e6655cf6fa3f5.png_pic_center]: https://img-blog.csdnimg.cn/5467ad505b414770899e6655cf6fa3f5.png#pic_center
[13bc0e8148e84fd187ad23a06fc155f5.png_pic_center]: https://img-blog.csdnimg.cn/13bc0e8148e84fd187ad23a06fc155f5.png#pic_center
[4fc4c53180a14344b5f0fb61262facbb.png_pic_center]: https://img-blog.csdnimg.cn/4fc4c53180a14344b5f0fb61262facbb.png#pic_center
[2d892c03135a4a2fbb8b29f683256d2d.png_pic_center]: https://img-blog.csdnimg.cn/2d892c03135a4a2fbb8b29f683256d2d.png#pic_center
[24d1d2ee575b4afda66c7e99bbd466c1.png_pic_center]: https://img-blog.csdnimg.cn/24d1d2ee575b4afda66c7e99bbd466c1.png#pic_center
[da0ddaa257634e59867a9e67ca363c96.png_pic_center]: https://img-blog.csdnimg.cn/da0ddaa257634e59867a9e67ca363c96.png#pic_center
[c7a7c76afcf94a8cbac3521326799f22.png_pic_center]: https://img-blog.csdnimg.cn/c7a7c76afcf94a8cbac3521326799f22.png#pic_center
[1aaf4fa70f374c9da3b09f92cefb28d8.png_pic_center]: https://img-blog.csdnimg.cn/1aaf4fa70f374c9da3b09f92cefb28d8.png#pic_center
[9820b87f91164bc9a9c7057667d13c85.png_pic_center]: https://img-blog.csdnimg.cn/9820b87f91164bc9a9c7057667d13c85.png#pic_center
[2de54c5daa9b4fd1a383259fd83545fa.png_pic_center]: https://img-blog.csdnimg.cn/2de54c5daa9b4fd1a383259fd83545fa.png#pic_center
[8996272594c948e2a8e2632322e0e444.png_pic_center]: https://img-blog.csdnimg.cn/8996272594c948e2a8e2632322e0e444.png#pic_center
[978793320a494a0791bb25f298580080.png_pic_center]: https://img-blog.csdnimg.cn/978793320a494a0791bb25f298580080.png#pic_center
[3080148dc4c84259a48e2392564d43ba.png_pic_center]: https://img-blog.csdnimg.cn/3080148dc4c84259a48e2392564d43ba.png#pic_center
[5b0df3268a2c4f3abbad3de1e995eb0a.png_pic_center]: https://img-blog.csdnimg.cn/5b0df3268a2c4f3abbad3de1e995eb0a.png#pic_center
[bacab37377654be18f3ddd7c71cca5bf.png_pic_center]: https://img-blog.csdnimg.cn/bacab37377654be18f3ddd7c71cca5bf.png#pic_center
[0fed3368fd994c0fbdb9d310f3a9386c.png_pic_center]: https://img-blog.csdnimg.cn/0fed3368fd994c0fbdb9d310f3a9386c.png#pic_center
[4f67904bd72e4fb0baa06756c9642bae.png_pic_center]: https://img-blog.csdnimg.cn/4f67904bd72e4fb0baa06756c9642bae.png#pic_center
[7b1afde7207d49539c9eaa75ce408292.png_pic_center]: https://img-blog.csdnimg.cn/7b1afde7207d49539c9eaa75ce408292.png#pic_center