CSS 入门指南（二）CSS 常用样式及注册页面案例

迈不过友情╰ 2024-04-20 11:58 93阅读 0赞

## CSS 常用样式 ##

### 颜色属性 ###

**常见样式的颜色属性：**

*  **color**：定义文本的颜色
 *  **border-color**：定义边框的颜色
 *  **background-color**：设置背景色

**颜色属性值设置方式：**

*  十六进制值 - 如：**＃FF0000**
 *  一个RGB值 - 如：**RGB(255,0,0)**
 *  颜色的名称 - 如：**red**

参阅 [CSS 颜色值][CSS] 查看完整的颜色值

### 边框和尺寸 ###

*  **边框：定义元素的边框**
    
    常用属性：
    
     *  **border-style**：定义边框的样式
        
        属性值：
        
         *  none：默认，无边框
         *  dotted：定义一个点线边框
         *  dashed：定义一个虚线边框
         *  solid：定义实线边框
         *  double：定义两个边框。 两个边框的宽度和 border-width 的值相同
         *  groove：定义3D沟槽边框。效果取决于边框的颜色值
         *  ridge：定义3D脊（山脊）边框。效果取决于边框的颜色值
         *  inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
         *  outset：定义一个3D突出边框。 效果取决于边框的颜色值
        
        **border-style 属性可以有 1-4 个值：**
        
         *  4 个值：上 下 左 右
            
            示例：border-style:dotted solid double dashed;
            
            上边框是 dotted，右边框是 solid，底边框是 double，左边框是 dashed
         *  3 个值： 上 左右 下
            
            示例：border-style:dotted solid double;
            
            上边框是 dotted，左、右边框是 solid，底边框是 double
         *  2 个值：上下 左右
            
            示例：border-style:dotted solid;
            
            上、底边框是 dotted，右、左边框是 solid
         *  1 个值：上下左右
            
            示例：border-style:dotted;
            
            四面边框是 dotted
     *  **border-color**：定义边框的颜色。属性值详见颜色属性
        
        **注意：** border-color 单独使用是不起作用的，必须得先使用 border-style 来设置边框样式
     *  **border-width**：定义边框的宽度
        
        为边框指定宽度的方式：
        
         *  方法1：可以指定长度值，比如 2px 或 0.1em（单位为 px，pt，cm，em 等）
         *  方法2：使用 3 个关键字之一，分别是 thick 、medium（默认值） 和 thin
        
        \*\*注意：\*\*CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为 3px、2px 和 1px。
     *  **border**：同时设置元素的 4 个边框（上下左右）的颜色，尺寸（像素），格式。不区分先后顺序
        
        **单独设置各边**
        
         *  border-top：设置上边框
         *  border-right：设置右边框
         *  border-bottom：设置下边框
         *  border-left：设置左边框
     *  **border-radius**：设置四个角（左上，右上，右下，左下）边框从多少像素开始圆滑
     *  **border-collapse**：设置表格的边框是否被折叠成一个单一的边框或隔开。一般设置一个值全部应用
 *  **尺寸：设置元素的高度和宽度**
    
     *  **width**：设置元素的宽度，单位可以是像素（px）、百分比（%）或其他可用单位
        
         *  **像素（px）**：固定值
            
            注：
            
             *  屏幕（显示器）实际上是由一个一个的小点点构成的
             *  不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
             *  所以同样的 200px 在不同的设备下显示效果不一样
         *  **百分比（%）**：相对于父元素的大小。这种方式可以实现响应式布局。
         *  **自适应长度**：使用 `auto` 属性值来让元素自适应父元素的大小
            
            比如将图片的 width 属性设置为 80%，然后 height 属性将其高度设置为 auto，让其自适应父元素的大小，这样可以保持图片的宽高比例，并且不会出现变形。
         *  **em**：相对于元素的字体大小来计算
            
            1em = 1font-size
            
            em 会根据字体大小的改变而改变
         *  **rem**：相对于根元素 `<html>` 的字体大小来计算
     *  **height**：设置元素的高度，单位可以是像素（px）、百分比（%）或其他可用单位

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>边框和尺寸</title>
        <style>
            div{
          
                /*给div添加边框*/
                border: 1px red solid;
                border-bottom: 10px green double;
                border-left: 5px ridge;
                /*给div设置尺寸*/
                width: 300px;
                height: 100px;
            }
            span{
          
                /*给span标签添加边框*/
                border: red solid 2px;
                /*给span添加边框圆角*/
                border-radius: 50px;
            }
        </style>
    </head>
    <body>
        <div>我是一个div</div>
        <span>我是一个span</span>
    </body>
    </html>

### 行内|行间 转换属性 ###

**display：可以把行间元素和行内元素相互转换，还可以隐藏元素**

*  行间元素：占用 html 中的一行
    
    例如：h1-h6，ul，ol，div …
 *  行内元素：占用一行中的一部分
    
    例如：span，img，a …

**display 的属性值**：

*  inline：设置元素为行内元素（行内元素默认 display 的属性值）
 *  block：设置元素为行间元素（行间元素默认 display 的属性值）
 *  none：设置隐藏元素（不在 html 页面中显示，也不会占用空间）

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>转换属性</title>
        <style>
            div{
          
                border: 1px solid red;
            }
            span{
          
                border: 1px solid green;
            }
        </style>
    </head>
    <body>
        <div>我是一个div,我会占用一行</div>
        
        <div style="display: inline">我是一个div,我只占用一行的一部分</div>
        <span>我是一个span,我只占用一行的一部分</span>
        
        <span style="display: block">我是一个span,我会占用一行</span>
        
        <span style="display: none">我是隐藏起来的标签,你看不到我</span>
        <img style="display: none" src="img/2.jpg" height="100px" width="80px">
    </body>
    </html>

### 文本格式 ###

*  **color**：设置字体颜色。属性值详见颜色属性
 *  **text-align**：文本的对齐方式
    
    属性值：
    
     *  center：居中
     *  left：对齐到左
     *  right：对齐到右
     *  justify：两端对齐
 *  **text-indent**：指定文本的第一行的缩进，单位为像素 px
 *  **text-align**：对齐元素中的文本
 *  **text-shadow**：设置文本阴影
 *  **text-decoreation**：设置或删除文本的装饰。主要是用来删除链接的下划线
    
     *  none：取消文字的下划线
 *  **text-transform**：文本转换。指定在一个文本中的字母变成大写或小写字母，或每个单词的首字母大写
    
     *  uppercase：大写字母
     *  owercase：小写字母
     *  capitalize：单词首字母大写
 *  **line-height**：设置行高
 *  **letter-spacing**：设置字符间距
 *  **word-spacing**：设置字间距
 *  **vertical-align**：设置元素的垂直对齐
 *  **white-space**：设置元素中空白的处理方式
 *  **unicode-bidi**：设置或返回文本是否被重写
 *  **direction**：设置文本方向

案例：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>字体属性</title>
    </head>
    <body>
        <a href="http://www.itheima.com" target="_blank" style="color: red">我是红色的超链接</a><br/>
        <a href="http://www.itheima.com" target="_blank" style="text-decoration: none">我是没有下划线的超链接</a>
    </body>
    </html>

### 字体样式 ###

*  **font-family**：设置文本的字体系列（幼圆，宋体，楷体）
    
    **注意**：
    
     *  font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，则将尝试下一种字体
        
        多个字体系列是用一个逗号分隔指明
     *  如果字体系列的名称超过一个字，它必须用引号，如 Font Family：“宋体”
 *  **font-size**：设置字体大小
    
    能否管理文字的大小，在网页设计中是非常重要的。但是，不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。务必使用正确的 HTML 标签，就 `<h1>` \- `<h6>` 表示标题和 `<p>`表示段落
    
    如果不指定一个字体的大小，默认大小和普通文本段落一样，是 16 像素（16px=1em）
    
    字体大小的值可以设置为绝对或相对的大小：
    
     *  绝对大小：
        
         *  设置一个指定大小的文本，单位为像素 px
         *  不允许用户在所有浏览器中改变文本大小
         *  确定了输出的物理尺寸时绝对大小很有用
     *  相对大小：
        
         *  相对于周围的元素来设置大小，单位为 em
            
            1em的默认大小是16px
         *  允许用户在浏览器中改变文字大小
        
        **使用百分比和 em 组合**可以在所有浏览器中显示相同的文本大小，并允许所有浏览器缩放文本的大小：
        
         *  设置 `<body>`元素的默认字体大小的是百分比
         *  示例：
            
                body {
                          font-size:100%;}
                h1 {
                          font-size:2.5em;}
                h2 {
                          font-size:1.875em;}
                p {
                          font-size:0.875em;}
 *  **font-weight**：设置字体加粗，取值：bold
 *  **font-style**：指定斜体文字的字体样式属性
    
     *  normal：正常显示文本
     *  italic：使用默认的斜体设置
        
        注：并不是所有字体都有默认的斜体设置，一些不常用的字体，或许就只有个正常体，如果用 italic，则没有效果
     *  oblique：强制使用斜体，让没有默认斜体属性的文字倾斜，且可以指定斜体的角度
        
            <div style="font-style: oblique 5deg;">This is a sentence.</div>
            <div style="font-style: oblique 10deg;">This is a sentence.</div>

案例：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>字体属性</title>
    </head>
    <body>
        <a href="http://www.itheima.com" target="_blank" style="font-size: 50px">我是50px大小的超链接</a><br/>
        <a href="http://www.itheima.com" target="_blank" style="font-weight: bold">我是粗体的超链接</a><br/>
        <a href="http://www.itheima.com" target="_blank" style="font-style: italic">我是斜体的超链接</a><br/>
        <a href="http://www.itheima.com" target="_blank" style="font-style: italic;font-weight: bold;color: green">我是粗体斜体绿色的超链接</a><br/>
        <a href="http://www.itheima.com" target="_blank" style="font-family: 楷体">我是楷体的超链接</a><br/>
    </body>
    </html>

### 背景色和背景图片 ###

*  **background-color**：设置背景色。属性值详见颜色属性
 *  **background-image**：url（图片的地址）设置背景图片
 *  **background-repeat**：no-repeat（背景图片不平铺）
 *  **background-position**：top 0px right 0px（背景图片位置 右上角）

案例：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>背景色和背景图片</title>
    </head>
    
    <body style="background-image: url(img/bg.jpg);background-repeat:no-repeat;background-position: top 30px right 100px">
        
        <div style="border: 1px red solid;background-color: pink;width: 300px; height: 500px">我是一个div</div>
        
        <input type="submit" value="用户注册" style="background-color: gold;color: white">
    </body>
    </html>

### 链接样式 ###

在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示。链接的样式，可以用任何 CSS 属性（如颜色，字体，背景等）。

四个链接状态：

*  a:link：正常，未访问过的链接
 *  a:visited：用户已访问过的链接
 *  a:hover：当用户鼠标放在链接上时
 *  a:active：链接被点击的那一刻

注意：当设置为若干链路状态的样式时，也有一些顺序规则：

*  a:hover 必须跟在 a:link 和 a:visited后面
 *  a:active 必须跟在 a:hover后面

案例：

### filters：滤镜 ###

*  filters 是 CSS3 里新增的一种功能，可以为元素指定各种滤镜效果，例如模糊效果、透明效果、色彩反差调整等等；同时，CSS 滤镜不仅可以对图片进行滤镜处理，还可以对网页元素甚至视频进行滤镜处理。
 *  filter 的基础使用非常简单，CSS 标准里包含了一些已实现预定义效果的函数，可以通过指定这些函数的值来实现想要的效果
 *  **常用filter函数**：
    
    <table> 
     <thead> 
      <tr> 
       <th>滤镜效果</th> 
       <th>函数</th> 
       <th>补充</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>无</td> 
       <td>none</td> 
       <td>默认值，表示没有效果</td> 
      </tr> 
      <tr> 
       <td>模糊</td> 
       <td>blur(px)</td> 
       <td>为图像设置高斯模糊，默认值为 0，单位为像素，值较大越模糊</td> 
      </tr> 
      <tr> 
       <td>调整亮度</td> 
       <td>brightness(number)</td> 
       <td>number 越大图像越亮，number 不能取负值，可以是整数也可以是百分比</td> 
      </tr> 
      <tr> 
       <td>调整灰度</td> 
       <td>grayscale(%)</td> 
       <td>将图像转换为灰度图像，默认值为 0%，表示原始图像；<br>100％ 表示将图像完全变成灰度图像（即黑白图像），不允许为负值</td> 
      </tr> 
      <tr> 
       <td>调整对比度</td> 
       <td>contrast(%)</td> 
       <td>默认值为 100％，代表原始图像；0％ 将使图像完全变黑；<br>当值超过 100％ 时图像将获得更高的对比度</td> 
      </tr> 
      <tr> 
       <td>阴影</td> 
       <td>drop-shadow(h-shadow v-shadow blur spread color)</td> 
       <td>为图像添加阴影效果，参数说明如下：<br> h-shadow：必填值，指定水平方向阴影的像素值，若值为负，则阴影会出现在图像的左侧；<br> v-shadow：必填值，指定垂直方向阴影的像素值，若值为负，则阴影会出现在图像的上方；<br> blur：可选值，为阴影添加模糊效果，默认值为 0，单位为像素，值越大创建的模糊就越多（阴影会变得更大更亮），不允许使用负值；<br> spread：可选值，默认值为 0，单位为像素。若值为正，则阴影将会扩展并增大；若值为负，则阴影会缩小； <br>color：可选值，为阴影添加颜色，如未指定，则由浏览器来绝对，通常为黑色。<br>注意：Chrome、Safari 和 Opera 等浏览器不支持第 4 个参数，如果添加，则不会有任何效果</td> 
      </tr> 
      <tr> 
       <td>反转图像</td> 
       <td>invert(%)</td> 
       <td>默认值为 0%，表示原始图像；100% 则表示完全反转，不允许使用负值</td> 
      </tr> 
      <tr> 
       <td>不透明度</td> 
       <td>opacity(%)</td> 
       <td>默认值为 100%，表示原始图像；0% 表示完全透明，不允许使用负值</td> 
      </tr> 
      <tr> 
       <td>图像转为棕褐色</td> 
       <td>sepia(%)</td> 
       <td>默认值为 0%，表示原始图像；100% 表示图像完全变成棕褐色，不允许使用负值</td> 
      </tr> 
      <tr> 
       <td>调整饱和度</td> 
       <td>saturate(%)</td> 
       <td>默认值为 100%，表示原始图像；0% 表示图像完全不饱和，不允许使用负值</td> 
      </tr> 
      <tr> 
       <td>图像色相旋转</td> 
       <td>hue-rotate(deg)</td> 
       <td>该值用来定义色环的度数，默认值为 0 deg，代表原始图像，最大值为 360deg</td> 
      </tr> 
     </tbody> 
    </table>

### CSS 的盒子模型 ###

CSS 的盒子模型：可以把 html 中的任意元素，都可以看成是被一个盒子包裹起来

*  盒子的外边距：设置这个盒子到其他盒子之间的距离，或者设置盒子到 body 框的距离
    
    使用 css 的属性（**margin**）设置**外边距**：
    
     *  margin：同时设置4个外边距
     *  margin-top：设置上外边距
     *  margin-right：设置右外边距
     *  margin-bottom：设置下外边距
     *  margin-left：设置左外边距
 *  盒子的内边距：设置盒子边框到盒子中内容的距离
    
    使用 css 的属性（**padding**）设置**内边距**（填充）：
    
     *  padding：同时设置4个内边距
     *  padding-top：设置上内边距
     *  padding-right：设置右内边距
     *  padding-bottom：设置下内边距
     *  padding-left：设置左内边距
 *  总元素的宽度 = 宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
    
    总元素的高度 = 高度 + 顶部填充 + 底部填充 + 上边框 + 下边框 + 上边距 + 下边距

![在这里插入图片描述][80eee8f005864c1b965283507ee09e5e.png_pic_center]

案例：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS的盒子模型</title>
        <style>
            div{
          
                /*设置div的边框和尺寸*/
                border: 1px solid red;
                width: 300px;
                height: 200px;
                /*设置div的外边距*/
                margin: 50px;	/*同时设置4个外边距为50px*/
                margin-left: 100px;		/*设置左外边距100px*/
                margin: 50px 100px;		/*上下50px 左右100px*/
                margin: 50px 100px 150px;	/*顺时针上50px 右100px 下150px 左100px*/
                margin: 50px 100px 150px 200px;	/*顺时针上50px 右100px 下150px 左200px*/
                margin: 50px auto;	/*上下50px 左右auto会自动居中*/
                /*设置div的内边距*/
                padding: 50px;	/*同时设置4个内边距为50px*/
            }
        </style>
    </head>
    <body>
        <div>我是一个div</div>
    </body>
    </html>

## 注册页面案例 ##

### 页面原型 ###

![在这里插入图片描述][ac1eef9ea4e348208b9f2806809db5da.png_pic_center]

### 需求分析 ###

![在这里插入图片描述][374346f0d8e54857b366b3f55eecb3ba.png_pic_center]

### 案例实现 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>注册页面案例</title>
        <style>
            /*设置外部div的样式*/
            .bigDiv{
          
                height: 500px;/*高度*/
                width: 800px;/*宽度*/
                border: 10px gray ridge;/*边框*/
                margin: 50px auto;/*外边距*/
                background-color: white;/*背景色*/
            }
            /*设置内部div的样式*/
            .regDiv{
          
                height: 500px;/*高度*/
                width: 400px;/*宽度*/
                margin: 0px auto;/*外边距*/
                font-family: "楷体";/*字体*/
                color: gray;/*字体颜色*/
                /*border: 1px red solid;*/
            }
            /*设置所有tr的高度*/
            tr{
          
                height: 50px;
            }
            /*7.设置input标签的样式(高度,宽度,边框,边框圆角,颜色)*/
            input[type="text"],
            input[type="password"],
            input[type="date"],
            input[type="email"]{
          
                border: 1px solid gray;/*边框*/
                width: 180px;/*宽度*/
                height: 30px;/*高度*/
                border-radius: 15px;/*边框圆角*/
            }
            /*8.设置验证码input标签的宽度*/
            input[name="checkCode"]{
          
                width: 60px;
            }
            /*9.设置用户注册案例的样式(边框,背景色,字体颜色,居中,尺寸)*/
            input[type="submit"]{
          
                width: 100px;/*宽度*/
                height: 30px;/*高度*/
                background-color: gold;/*背景色*/
                color: white;/*字体颜色*/
                border: 1px solid gold;/*边框*/
                border-radius: 5px;/*边框圆角*/
            }
        </style>
    </head>
    
    <body style="background-color: beige">
        
        <div class="bigDiv">
            
            <div class="regDiv">
                
                <form action="#" method="get">
                    
                    <table>
                        
                        <tr>
                            <td>用户名</td>
                            <td>
                                <input type="text" name="username" placeholder="请输入用户名"/>
                            </td>
                        </tr>
                        <tr>
                            <td>密码</td>
                            <td>
                                <input type="password" name="password" placeholder="请输入密码"/>
                            </td>
                        </tr>
                        <tr>
                            <td>邮箱</td>
                            <td>
                                <input type="email" placeholder="请输入邮箱"/>
                            </td>
                        </tr>
                        <tr>
                            <td>姓名</td>
                            <td>
                                <input type="text" name="name" placeholder="请输入姓名"/>
                            </td>
                        </tr>
                        <tr>
                            <td>手机号</td>
                            <td>
                                <input type="text" name="phone" placeholder="请输入手机号"/>
                            </td>
                        </tr>
                        <tr>
                            <td>性别</td>
                            <td>
                                <input type="radio" name="sex" checked="checked"/>男
                                <input type="radio" name="sex" />女
                            </td>
                        </tr>
                        <tr>
                            <td>生日</td>
                            <td>
                                <input type="date" name="birthday"/>
                            </td>
                        </tr>
                        <tr>
                            <td>验证码</td>
                            <td>
                                <input type="text" name="checkCode" placeholder="验证码"/>
                                <img src="img/checkCode.bmp">
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" align="center">
                                <input type="submit" value="用户注册"/>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
    </body>
    </html>

[CSS]: https://www.runoob.com/cssref/css-colors-legal.html
[80eee8f005864c1b965283507ee09e5e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/9f36322fa45d450bb9275852f6338b00.png
[ac1eef9ea4e348208b9f2806809db5da.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/b6a69791d1be45c0be6f81ee262be140.png
[374346f0d8e54857b366b3f55eecb3ba.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/3f914c2870f44934bdc1e7d94c8bdc1d.png