CSS 入门指南（二）CSS 常用样式及注册页面案例
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>
欢迎加入北京社区
更多推荐
57
0- 0
已为社区贡献6条内容
所有评论(0)