-
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：相对于根元素
的字体大小来计算
-
-
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>我是一个divdiv> <span>我是一个spanspan> 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
行内|行间 转换属性
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>- 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
文本格式
-
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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
字体样式
-
font-family：设置文本的字体系列（幼圆，宋体，楷体）
注意：
-
font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，则将尝试下一种字体
多个字体系列是用一个逗号分隔指明
-
如果字体系列的名称超过一个字，它必须用引号，如 Font Family：“宋体”
-
-
font-size：设置字体大小
能否管理文字的大小，在网页设计中是非常重要的。但是，不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。务必使用正确的 HTML 标签，就
-表示标题和表示段落如果不指定一个字体的大小，默认大小和普通文本段落一样，是 16 像素（16px=1em）
字体大小的值可以设置为绝对或相对的大小：
-
绝对大小：
- 设置一个指定大小的文本，单位为像素 px
- 不允许用户在所有浏览器中改变文本大小
- 确定了输出的物理尺寸时绝对大小很有用
-
相对大小：
-
相对于周围的元素来设置大小，单位为 em
1em的默认大小是16px
-
允许用户在浏览器中改变文字大小
使用百分比和 em 组合可以在所有浏览器中显示相同的文本大小，并允许所有浏览器缩放文本的大小：
-
设置
元素的默认字体大小的是百分比 -
示例：
body {font-size:100%;} h1 {font-size:2.5em;} h2 {font-size:1.875em;} p {font-size:0.875em;}- 1
- 2
- 3
- 4
-
-
-
font-weight：设置字体加粗，取值：bold
-
font-style：指定斜体文字的字体样式属性
-
normal：正常显示文本
-
italic：使用默认的斜体设置
注：并不是所有字体都有默认的斜体设置，一些不常用的字体，或许就只有个正常体，如果用 italic，则没有效果
-
oblique：强制使用斜体，让没有默认斜体属性的文字倾斜，且可以指定斜体的角度
"font-style: oblique 5deg;">This is a sentence."font-style: oblique 10deg;">This is a sentence.- 1
- 2
-
案例：
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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
背景色和背景图片
- 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">我是一个divdiv> <input type="submit" value="用户注册" style="background-color: gold;color: white"> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
链接样式
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示。链接的样式，可以用任何 CSS 属性（如颜色，字体，背景等）。
四个链接状态：
- a:link：正常，未访问过的链接
- a:visited：用户已访问过的链接
- a:hover：当用户鼠标放在链接上时
- a:active：链接被点击的那一刻
注意：当设置为若干链路状态的样式时，也有一些顺序规则：
- a:hover 必须跟在 a:link 和 a:visited后面
- a:active 必须跟在 a:hover后面
案例：
"http:\\www.itcast.cn" target="_blank">点击我到传智- 1
- 2
- 3
- 4
- 5
- 6
- 7
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>我是一个divdiv> 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
注册页面案例
页面原型
需求分析
案例实现
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>- 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
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
-
相关阅读:
Yakit工具篇：中间人攻击(平替Burp)的相关技巧-02
C++ 学习（14）类和对象 - 多态、多态原理解析、纯虚函数和抽象类、虚析构与纯析构函数
gcc选项记录
linux设置应用开机自启（通用：mysql、jar、nginx、solr...）
27.3 Java集合学习之List（基本概念，API，存储原理）
python写入文件的中文出现乱码
CLR内存管理机制与IDisposable对象的GC原理
Demo 题记
大数据方向面试问题
最「难搞」的英伟达也开源了，下一个会是谁？
- 原文地址：https://blog.csdn.net/footless_bird/article/details/136614263
