首页 前端知识 CSS 入门指南(二)CSS 常用样式及注册页面案例

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

2024-03-13 00:03:15 前端知识 前端哥 716 527 我要收藏

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>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/3705.html
标签
评论
发布的文章

JavaScript基础库

2024-04-09 00:04:11

解决vue npm 下载echart出错

2024-04-09 00:04:05

Echarts中option属性设置

2024-04-08 23:04:58

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!