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

CSS 常用样式

颜色属性

常见样式的颜色属性：

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

颜色属性值设置方式：

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

参阅 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>
    <!--使用display属性inline把div转换为行内元素-->
    <div style="display: inline">我是一个div,我只占用一行的一部分</div>
    <span>我是一个span,我只占用一行的一部分</span>
    <!--使用display属性block把span转换为行间元素-->
    <span style="display: block">我是一个span,我会占用一行</span>
    <!--使用display属性none隐藏标签-->
    <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添加一个背景图片-->
<body style="background-image: url(img/bg.jpg);background-repeat:no-repeat;background-position: top 30px right 100px">
    <!--给div添加一个背景色-->
    <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后面

案例：

<style>
    a:link {color: #FF0000}		/* 未访问的链接 */
    a:visited {color: #00FF00}	/* 已访问的链接 */
    a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
    a:active {color: #0000FF}	/* 选定的链接 */
</style>
<a href="http:\\www.itcast.cn" target="_blank">点击我到传智</a>

filters：滤镜

filters 是 CSS3 里新增的一种功能，可以为元素指定各种滤镜效果，例如模糊效果、透明效果、色彩反差调整等等；同时，CSS 滤镜不仅可以对图片进行滤镜处理，还可以对网页元素甚至视频进行滤镜处理。
filter 的基础使用非常简单，CSS 标准里包含了一些已实现预定义效果的函数，可以通过指定这些函数的值来实现想要的效果

常用filter函数：

滤镜效果	函数	补充
无	none	默认值，表示没有效果
模糊	blur(px)	为图像设置高斯模糊，默认值为 0，单位为像素，值较大越模糊
调整亮度	brightness(number)	number 越大图像越亮，number 不能取负值，可以是整数也可以是百分比
调整灰度	grayscale(%)	将图像转换为灰度图像，默认值为 0%，表示原始图像； 100％表示将图像完全变成灰度图像（即黑白图像），不允许为负值
调整对比度	contrast(%)	默认值为 100％，代表原始图像；0％将使图像完全变黑；当值超过 100％时图像将获得更高的对比度
阴影	drop-shadow(h-shadow v-shadow blur spread color)	为图像添加阴影效果，参数说明如下： h-shadow：必填值，指定水平方向阴影的像素值，若值为负，则阴影会出现在图像的左侧； v-shadow：必填值，指定垂直方向阴影的像素值，若值为负，则阴影会出现在图像的上方； blur：可选值，为阴影添加模糊效果，默认值为 0，单位为像素，值越大创建的模糊就越多（阴影会变得更大更亮），不允许使用负值； spread：可选值，默认值为 0，单位为像素。若值为正，则阴影将会扩展并增大；若值为负，则阴影会缩小； color：可选值，为阴影添加颜色，如未指定，则由浏览器来绝对，通常为黑色。注意：Chrome、Safari 和 Opera 等浏览器不支持第 4 个参数，如果添加，则不会有任何效果
反转图像	invert(%)	默认值为 0%，表示原始图像；100% 则表示完全反转，不允许使用负值
不透明度	opacity(%)	默认值为 100%，表示原始图像；0% 表示完全透明，不允许使用负值
图像转为棕褐色	sepia(%)	默认值为 0%，表示原始图像；100% 表示图像完全变成棕褐色，不允许使用负值
调整饱和度	saturate(%)	默认值为 100%，表示原始图像；0% 表示图像完全不饱和，不允许使用负值
图像色相旋转	hue-rotate(deg)	该值用来定义色环的度数，默认值为 0 deg，代表原始图像，最大值为 360deg

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：设置左内边距
总元素的宽度 = 宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距

总元素的高度 = 高度 + 顶部填充 + 底部填充 + 上边框 + 下边框 + 上边距 + 下边距

在这里插入图片描述

案例：

<!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>

注册页面案例

页面原型

在这里插入图片描述

需求分析

在这里插入图片描述

案例实现

<!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>
<!--1.给整个body添加一个背景色(米黄色)-->
<body style="background-color: beige">
    <!--
        2.创建一个外层的div,设置样式(边框,背景色,尺寸,外边距)
    -->
    <div class="bigDiv">
        <!--3.创建一个内层的div,设置样式(尺寸,外边距,字体,字体颜色)-->
        <div class="regDiv">
            <!--4.创建一个form表单-->
            <form action="#" method="get">
                <!--5.在form中创建9*2的表格-->
                <table>
                    <!--6.给表格中添加元素(文本,input标签,图片)-->
                    <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>