Java Web(七)：CSS

最新推荐文章于 2022-03-19 17:38:16 发布

启帆远航

最新推荐文章于 2022-03-19 17:38:16 发布

阅读量154

点赞数

分类专栏： # java web 文章标签： css 前端 java

本文链接：https://blog.csdn.net/yu1755128147/article/details/102572565

版权

java web 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

一、CSS简介

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

二、CSS的使用方式

1、内联样式

在标签内使用style属性指定css代码，如：<div style="color:red;">hello css</div>。

2、内部样式

在head标签内，定义style标签，style标签的标签体内容就是css代码，如：

    <style>
        div{
            color:blue;
        }

    </style>

3、外部样式

定义css资源文件，在head标签内，定义link标签，引入外部的资源文件。

三、CSS语法

1、语法格式

语法格式由两个主要的部分构成：选择器，以及一条或多条声明，如：selector {property: value；property: value；...}

2、选择器

筛选具有相似特征的元素。

注意：每一对属性需要使用分号隔开，最后一对属性可以不加分号。

四、CSS选择器

1、基础选择器

id选择器

选择具体的id属性值的元素.建议在一个html页面中id值唯一
语法：#id属性值{}
实例：#red {color:red;}

元素选择器

选择具有相同标签名称的元素
语法：标签名称{}
实例：div{color:green;}

类选择器

选择具有相同的class属性值的元素。
语法：.class属性值{}
实例：.cls1{ color: blue;}

2、扩展选择器

选择所有元素

语法： *{}
实例：* { background-color:yellow; }

并集选择器

语法：选择器1,选择器2{}
实例：h1,p { background-color:yellow; }

子选择器

语法：选择器1 选择器2{}
实例：div p { background-color:yellow; }

父选择器

语法：选择器1 > 选择器2{}
实例：div>p { background-color:yellow; }

属性选择器

语法：元素名称[属性名="属性值"]{}
实例：input[type='text']{border: 5px solid;}

伪类选择器

语法：元素:状态{}
实例：a:link { background-color:yellow; }

五、CSS属性

1、字体、文本属性

font-size：规定文本的字体尺寸。
color：设置文本的颜色。
text-align：规定文本的水平对齐方式。
ine-height：设置行高。

2、背景属性

background：在一个声明中设置所有的背景属性。
background-color：设置元素的背景颜色。
background-image：设置元素的背景图像。
background-repeat：设置是否及如何重复背景图像。
background-size：规定背景图片的尺寸。

3、边框属性

border：在一个声明中设置所有的边框属性。
border-color：设置四条边框的颜色。
border-style：设置四条边框的样式。
border-width：设置四条边框的宽度。

4、尺寸属性

height：设置元素高度。
width：设置元素的宽度。

5、盒子模型

margin：在一个声明中设置所有外边距属性。
padding：在一个声明中设置所有内边距属性。
float：规定框是否应该浮动。

六、CSS实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        body{
            background: url("../images/register_bg.png") no-repeat center;
            padding-top: 25px;
        }

        .rg_layout{
            width: 900px;
            height: 500px;
            border: 8px solid #EEEEEE;
            background-color: white;
            /*让div水平居中*/
            margin: auto;
        }
        .rg_center{
            margin:0 auto;
            border:0px solid #000;
            width:50%;
            height:100px
        }

        .td_left{
            width: 100px;
            text-align: right;
            height: 45px;
        }
        .td_right{
            padding-left: 50px ;
        }

        #username,#password,#email,#name,#tel,#birthday,#checkcode{
            width: 251px;
            height: 32px;
            border: 1px solid #A6A6A6 ;
            /*设置边框圆角*/
            border-radius: 5px;
            padding-left: 10px;
        }
        #checkcode{
            width: 110px;
        }

        #img_check{
            height: 32px;
            vertical-align: middle;
        }

        #btn_sub{
            width: 150px;
            height: 40px;
            background-color: #FFD026;
            border: 1px solid #FFD026 ;
        }

    </style>
</head>
<body>

<div class="rg_layout">

    <div class="rg_center">
        <div class="rg_form">
            <!--定义表单 form-->
            <form action="#" method="post">
                <table>
                    <tr>
                        <td class="td_left"><label for="username">用户名</label></td>
                        <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="password">密码</label></td>
                        <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="email">Email</label></td>
                        <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="name">姓名</label></td>
                        <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="tel">手机号</label></td>
                        <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label>性别</label></td>
                        <td class="td_right">
                            <input type="radio" name="gender" value="male"> 男
                            <input type="radio" name="gender" value="female"> 女
                        </td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="birthday">出生日期</label></td>
                        <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="checkcode" >验证码</label></td>
                        <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
                            <img id="img_check" src="../images/verify_code.jpg">
                        </td>
                    </tr>

                    <tr>
                        <td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
</div>
</body>
</html>

启帆远航

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Java Web(七)：CSS

一、CSS简介CSS 指层叠样式表 (CascadingStyleSheets) 样式定义如何显示HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在CSS 文件中多个样式定义可层叠为一二、CSS的使用方式1、内联样式在标签内使用style属性指定css代...
复制链接

扫一扫

专栏目录