29.1 CSS介绍、3种使用方式、9种选择器、常用属性、实现注册界面

最新推荐文章于 2024-02-27 19:01:24 发布
最新推荐文章于 2024-02-27 19:01:24 发布
阅读量314 收藏
点赞数
分类专栏： 02 javaee
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Birdmotianlun/article/details/109386912
版权

目录

1 CSS：页面美化和布局控制

2 Css使用方式

2.1 内联样式使用

2.2 内部样式使用

2.3 外部样式使用

3 Css选择器

3.1 基础选择器

3.2 选择器扩展

4 常用属性

5 列：使用html和Css实现注册界面

1 CSS：页面美化和布局控制

Cascading Style Sheets 层叠样式表。层叠：多个样式可以作用在同一个html的元素上，同时生效

好处：

  1. 功能强大   
  2. 将内容展示和样式控制分离（ 降低耦合度。解耦 ）   
  3. 提高工作效率（提高开发效率）
  4. 代码重用

2 Css使用方式

2.1 内联样式使用

<body>
 <div style="color:red;">hello css</div>
</body>

<body>
 <p style=”color:red”></p>
</body>

<body>
<p style="color:blue;font-size: 30px;">跨越</p>
</body>

2.2 内部样式使用

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

<head>
    <meta charset="UTF-8">
    <title>Css内部样式</title>
    <style>
        div{
            color: #31902e;
        }
    </style>
</head>
<body>
<!--内部样式* 在head标签内，定义style标签，style标签的标签体内容就是css代码-->
<div> Css学习</div>
<div> java学习</div>
</body>

2.3 外部样式使用

方法1： 1.定义css资源文件.   2.在head标签内，定义link标签，引入外部的资源文件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/aa.css">
</head>
<body>
<div> Css学习</div>
<div> java学习</div>
<p>学习</p>
</body>

方法2： 1.定义css资源文件。  2.  @import 方式实现

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>@import "css/aa.css";</style>
</head>
<body>
<div> Css学习</div>
<div> java学习</div>
<p>学习</p>
</body>

3 Css选择器

格式：                                                                 注意： 每一对属性需要使用；隔开，最后一对属性可以不加；
        选择器 {
            属性名1:属性值1;
            属性名2:属性值2;
            ...
        }

3.1 基础选择器

  1.  id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一        * 语法：#id属性值{}
  2.  元素选择器：选择具有相同标签名称的元素        * 语法： 标签名称{}
  3. 类选择器：选择具有相同的class属性值的元素。        * 语法：.class属性值{}

    注意：选择器优先级：            id选择器>元素选择器            类选择器>元素选择器    

<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>
    <style>
        /*id原则器*/
        #div1{
            color: #107cce;
        }
        /*元素选择器*/
        div{
            color: gray;
        }
        /*类选择器*/
        .div3{
            color: red;
        }
    </style>
</head>
<body>
<div id="div1">青青子衿悠悠我心</div>
<div class="div2">离离原上草</div>
<div class="div3">离离原上草</div>
</body>

3.2 选择器扩展

  1. 通配符选择器：* 语法：  *{属性：属性值}
  2. 并集选择器：* 语法： 选择器1,选择器2，选择器N{属性:属性值;｝
  3. 子选择器：筛选选择器1元素下的选择器2元素    * 语法：  选择器1 选择器2{}
  4. 父选择器：筛选选择器2的父元素选择器1    * 语法：  选择器1 > 选择器2{}
  5.  属性选择器：选择元素名称，属性名=属性值的元素    * 语法：  元素名称[属性名="属性值"]{}
  6.  伪类选择器：选择一些元素具有的状态     * 语法： 元素:状态{  }
<head>
    <meta charset="UTF-8">
    <title>扩展选择器</title>
    <style>
        /*1. 选择所有元素：语法： *{}*/
        *{
            color: #107cce;
        }

        /*2. 并集选择器：选择器1,选择器2{}*!*/
        div,p,a{
            color: gray;
        }
          /*3子选择器：筛选选择器1元素下的选择器2元素*/
        div p{
            color: green;
        }
        /* 4 父选择器：筛选选择器2的父元素选择器1*/
        div>p{
            border: 1px solid red;
        }
        /*5. 属性选择器：选择元素名称，属性名=属性值的元素*/
        input[type=text]{
            border: 3px solid;
        }
        input[type='password']{
            border: 5px solid;
        }
        /*6. 伪类选择器：选择一些元素具有的状态*/
        /*默认状态下*/
        a:link{
            color: pink;
        }
        /*鼠标悬浮状态*/
        a:hover{
            color: green;
        }
        /*点击时*/
        a:active{
            color: yellow;
        }
        /*访问后的状态（失去焦点）*/
        a:visited{
            color: red;
        }
    </style>
</head>
<body>
    <div><p>长恨歌</p></div>
    <p>白居易</p>
    <div>汉皇重色思倾国，御宇多年求不得。</div>
    <div>杨家有女初长成，养在深闺人未识。</div>
    <div>天生丽质难自弃，一朝选在君王侧。</div>

    <input type="text" >
    <input type="password" >
    <a href="#">查看下一句</a>
</body>

4 Css常用属性

css字体、文本属性：

font-size：字体大小        * color：文本颜色        * text-align：对其方式        * line-height：行高 

css背景属性：

  background

css边框：

border：设置边框，符合属性

css尺寸

width：宽度        * height：高度

css盒子模型（控制布局）：

margin：外边距        padding：内边距(默认情况下内边距会影响整个盒子的大小)  

box-sizing: border-box;  设置盒子的属性，让width和height就是最终盒子的大小

float：浮动      值有（left, right）

 

    <style>
        h3{
            text-align: center;
            background: url("./img/login_bg.png") no-repeat;
        }
        p{
            color: gray;
            font-size: 15px;
            text-align: center;
            line-height: 20px;
            border: 1px solid red;
        }
        div{
            color: #020202;
            border: 1px solid gray;
            height: 25px;
            width: 300px;

        }
    </style>
</head>
<body>
    <h3>长恨歌</h3>
    <p>白居易</p>
    <div>汉皇重色思倾国，御宇多年求不得。</div>
    <div>杨家有女初长成，养在深闺人未识。</div>
    <div>天生丽质难自弃，一朝选在君王侧。</div>
</body>

5 列：使用html和Css实现注册界面

    <style>
        *{
           margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            background: url("./img/register_bg.png") no-repeat  center;
            padding-top:100px ;

        }
        .rg_layout{
            width: 900px;
            height: 500px;
            border: white solid 8px;
            background-color: white;
            margin: auto;/*让div水平居中*/
        }
        .rg_left{
            float: left;
            margin: 15px;
        }
        .rg_left>p:first-child{/* 父标签的首个子对象*/
            color: #FFD026;
            font-size: 20px;
        }
        .rg_left>p:last-child{
            color:#A6A6A6;
            font-size: 20px;
        }
        #username,#password,#email,#name,#tel,#birthday,#checkcode{
            width: 251px;
            height: 32px;
            border: 2px solid #A6A6A6;
            border-radius: 10px;/*设置边框圆角*/
            padding-left:10px ;/*重点*/
        }
        #checkcode{
            width: 110px;
        }
        #img_check{
            height: 32px;
            border: 1px solid red;
            vertical-align: middle;

        }
        #btn_sub{
            width: 150px;
            height: 32px;
            background-color:#FFD026 ;
            border: 2px solid #FFD026;
        }
        .rg_center{
            float: left;
        }
        tr{
            height: 45px;
        }
        .td_left{
            width: 100px;
            text-align: right;
        }
        .td_right{
            padding-left: 50px;
        }
        .rg_right{
            float: right;
        }
        .rg_right>p:first-child{
            font-size: 15px;
        }
        .rg_right p a{
            color: pink;
        }

    </style>
。。。
<body>
<div class="rg_layout">
    <div class="rg_left">
        <p>新用户注册</p>
        <p>USER REGISTER</p>
    </div>
    <div class="rg_center">
        <div class="rg_form">
            <form action="#" method="post" >
                <table border="0"  width="500">
                    <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"></td>
                    </tr>
                    <tr>
                        <td class="td_left">性别：</td>
                        <td class="td_right">
                            <input type="radio" name="sex"  value="male" checked>男
                            <input type="radio" name="sex"  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"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="checkcode">验证码</label></td>
                        <td class="td_right"><input type="text" name="checkcode" id="checkcode">
                            <img id="img_check" height="30" src="img/verify_code.jpg">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center">
<!--                            <input  type="image" src="./img/regbtn.jpg" alt="注册">-->
                            <input type="submit" value="注册" id="btn_sub">
                        </td>


                    </tr>

                </table>
            </form>
        </div>
    </div>
    <div class="rg_right">
        <p>已有账号？<a href="#">立即登录</a></p>
    </div>
</div>

</body>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

birdlun
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ASP.NET4高级程序设计(第4版) 3/3
10-29
此外，《ASP.NET 4高级程序设计(第4版)》专门提供了两章的内容来教你如何用Ajax 技术制作快速响应的页面，以及如何使用微软的ASP.NETAJAX平台。另外，还专门介绍了ASP.NET4 新增的功能，如MVC 和动态数据等。 　...
ASP.NET3.5从入门到精通
03-13
12.1.3 CSS 常用属性 12.1.4 将CSS 应用在控件上 12.1.5 主题和皮肤 12.1.6 页面主题和全局主题 12.1.7 应用和禁用主题 12.1.8 用编程的方法控制主题 12.2 母版页 12.2.1 母版页基础 12.2.2 内容窗体 12.2.3 母版页...
JavaWeb-CSS入门(一)
摸鱼胖嘟嘟的博客
02-07 599
CSS描述的是页面的样式，具体来说，就是描述一个任意一个页面的元素，大小/位置/字体/颜色/背景/边框…注意html和css都是不区分大小写的，习惯上在写代码的时候，统一使用小写。这种内联样式，是属于一种比较特殊的写法，这种写法只适合于样式特别简单的情况。选择器的功能就是选中页面的元素，可以一次选择一个，也可以一次选中一批。里面是键值对结构，来表示CSS中的各种属性，键值对之间使用。把CSS代码单独提取出来，放到一个.css文件中。这种方式，可以让多个html，复用同一份样式。标签，来引入CSS文件。
Java中web的css、js、img等静态资源引入详细操作教程
最新发布
任聪聪的博客
02-27 587
本篇文章主要讲解：Java中web的css、js、img等静态资源引入详细操作教程日期：2024年2月27日作者：任聪聪。
Day_03 css
lbw18的博客
03-02 193
文章目录2. 内容讲解2.1 CSS的作用2.2 CSS的引入方式2.2.1 行内样式2.2.2 内部样式2.2.3 外部样式2.3 CSS代码语法2.4 CSS选择器2.4.1 标签选择器2.4.2 id选择器2.4.3 类选择器 简单了解CSS 2. 内容讲解 2.1 CSS的作用 CSS是用于设置HTML页面标签的样式，用于美化HTML页面 2.2 CSS的引入方式 2.2.1 行内样式 也就是在要设置样式的标签中添加style属性，编写css样式; 行内样式仅对当前标签生效 <!--给div设
【JAVAWEB】CSS
m0_57248752的博客
05-30 1266
层叠样式表(Cascading Style Sheets).作用：CSS能够对网页中元素位置的排版进行像素级精确控制，实现美化效果，能够做到页面的样式和结构分离。
javaEE 初阶 — CSS 的 基本语法 与 引入方式
超烦豆先森
03-11 733
基本语法规范、三种引入方式
ASP.NET 3.5 开发大全11-15
02-12
12.1.3 CSS常用属性 12.1.4 将CSS应用在控件上 12.1.5 主题和皮肤 12.1.6 页面主题和全局主题 12.1.7 应用和禁用主题 12.1.8 用编程的方法控制主题 12.2 母版页 12.2.1 母版页基础 12.2.2 内容窗体 12.2.3 母版页的...
JavaWeb前置学习内容——CSS
sunshine的博客
04-14 379
JavaWeb前置学习内容——css css笔记
JavaWeb-03 CSS技术
学无止境,勤则可达；志存高远,恒亦能成！
04-07 230
3.1 CSS 技术介绍 CSS 是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 3.2 CSS 语法规则： 选择器：浏览器根据“选择器”决定受CSS 样式影响的HTML 元素（标签）。 属性(property) 是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration），例如：p {color: blue} 多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开。虽然最后
引入jar包里的css样式_使用WebJar管理css、JavaScript文件
weixin_39573981的博客
12-20 197
Web前端使用了越来越多的JS或CSS，如jQuery, Backbone.js 和Bootstrap。一般情况下，我们是将这些Web资源拷贝到Java的目录下，通过手工进行管理，这种通方式容易导致文件混乱、版本不一致等问题。WebJars是将这些通用的Web前端资源打包成Java的Jar包，然后借助Maven工具对其管理，保证这些Web资源版本唯一性，升级也比较容易。关于webjars资源，有一...
Web前端 | HTML引入CSS样式的三种方式
m0_61933976的博客
10-04 1万+
HTML引入CSS样式的三种方式
web外部引入css的两种方式
Endorphincuan的博客
10-10 1352
用css设置web样式时，有行内样式、内部样式和外部样式。对于较为复杂的网页，较多使用的是外部样式，因为这样才真正实现了内容与样式的分离效果。本篇文章就介绍了关于css设置外部样式时的两种引入方法
Java Web开发实例（三） 3.新建菜单和引用CSS文件
u011530874的博客
03-03 3698
新建菜单和引用CSS文件
SpringMVC如何引入css文件
也许不会看见的博客
12-04 1万+
css文件放在WebContent下，没有放在WEB-INF路径下 在jsp中引入如下 运行jsp时css中设置的样式就是没有效果，纠结了一上午，终于发现，在spring mvc默认拦截所有请求，所以你需要单独把静态资源配起来，springmvc就会放过这些请求了。格式：<mvc:resources  location="/public-resources/" 
java加载css文件_java – 如何将CSS文件加载到jsp
weixin_35223524的博客
02-28 244
我创建了一个jsp页面，如下所示：Login page India welfare welcome 并将其命名为login.jsp我也创建了一个名为loginstyle.css的css文件，并且.css文件的代码如下：body{background-color:#d0e4fe;}h1{color:orange;text-align:center;}p{font-family:"Times New ...
Javaweb项目引入js文件路径的三种方式
热门推荐
sy793314598的博客
08-07 2万+
1、直接引用： 根据项目的目录结构。我的项目目录结构如图： 引用方式为： <script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>2、通过EL表达式引入：<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding
obs-studio-29.1.3-full-installer-x64.exe
08-21
obs-studio-29.1.3-full-installer-x64.exe是一个可以安装OBS Studio软件的文件。 OBS Studio是一款开源的免费软件，专门用于实时录制和流媒体直播。这个软件非常适用于视频游戏玩家、教育工作者和内容创作者等各种...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值