首页 > 编程语言 >JavaWeb--CSS基础

JavaWeb--CSS基础

时间:2022-10-08 21:13:08浏览次数:66  
标签:JavaWeb -- 元素 color CSS left 选择器 css 属性

JavaWeb--CSS

概念

  • Cascading Style Sheets 层叠样式表

    • 层叠:多个样式可以作用在同一个html的元素上,同时生效
  • 好处:

    • 功能强大

    • 将内容展示和样式控制分离

      • 降低耦合度。解耦

      • 让分工协作更容易

      • 提高开发效率

与HTML结合方式

	1. 内联样式(不推荐)
		 * 在标签内使用style属性指定css代码
		 * 如:<div style="color:red;">hello css</div>
	2. 内部样式
		* 在head标签内,定义style标签,style标签的标签体内容就是css代码
		* 如:
			<style>
		        div{
		            color:blue;
		        }
		
		    </style>
			<div>hello css</div>
	3. 外部样式
		1. 定义css资源文件。
		2. 在head标签内,定义link标签,引入外部的资源文件
		* 如:
    		* a.css文件:
				div{
				    color:green;
				}
			<link rel="stylesheet" href="css/a.css">
			<div>hello css</div>
			<div>hello css</div>

	* 注意:
		* 1,2,3种方式 css作用范围越来越大
		* 1方式不常用,后期常用2,3
		* 3种格式可以写为:
			<style>
		        @import "css/a.css";
		    </style>

语法格式

  • 格式:
    选择器 {
    属性名1:属性值1;
    属性名2:属性值2;
    ...
    }

选择器

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

  • 注意:

    • 每一对属性需要使用;隔开,最后一对属性可以不加;
* 分类:
		1. 基础选择器
			1. id选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一
		        * 语法:#id属性值{}
		    2. 元素选择器:选择具有相同标签名称的元素
		        * 语法: 标签名称{}
		        * 注意:id选择器优先级高于元素选择器
		    3. 类选择器:选择具有相同的class属性值的元素。
		        * 语法:.class属性值{}
		        * 注意:类选择器选择器优先级高于元素选择器
            id选择器>类选择器>元素选择器
            
		2. 扩展选择器:
			1. 选择所有元素:
				* 语法: *{}
			2. 并集选择器:
				* 选择器1,选择器2{}
			
			3. 子选择器:筛选选择器1元素下的选择器2元素
				* 语法:  选择器1 选择器2{}
			4. 父选择器:筛选选择器2的父元素选择器1
				* 语法:  选择器1 > 选择器2{}

			5. 属性选择器:选择元素名称,属性名=属性值的元素
				* 语法:  元素名称[属性名="属性值"]{}

			6. 伪类选择器:选择一些元素具有的状态
				* 语法: 元素:状态{}
				* 如: <a>
					* 状态:
						* link:初始化的状态
						* visited:被访问过的状态
						* active:正在访问状态
						* hover:鼠标悬浮状态

属性

  • 字体、文本

    • font-size:字体大小
    • color:文本颜色
    • text-align:对其方式
    • line-height:行高
    1. 背景
      • background:
    2. 边框
      • border:设置边框,符合属性
    3. 尺寸
      • width:宽度
      • height:高度
    4. 盒子模型:控制布局
      • margin:外边距

      • padding:内边距

        • 默认情况下内边距会影响整个盒子的大小
        • box-sizing: border-box; 设置盒子的属性,让width和height就是最终盒子的大小
      • float:浮动

        • left
        • right

案例:登录界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
<style>
    *{
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
    body{
        background: url("img/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_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;

    }


    .rg_center{
        margin-left: 60px;
        float: left;

    }

    .rg_right{
        float: right;
        margin: 15px;
    }

    .rg_right > p:first-child{
        font-size: 15px;

    }
    .rg_right p a {
        color:pink;
    }

    .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_left">
        <p>新用户注册</p>
        <p>USER REGISTER</p>

    </div>

    <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="img/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 class="rg_right">
        <p>已有账号?<a href="#">立即登录</a></p>
    </div>


</div>


</body>
</html>

标签:JavaWeb,--,元素,color,CSS,left,选择器,css,属性
From: https://www.cnblogs.com/joeximu/p/16770211.html

相关文章

  • docker-compose 简述
    docker-compose.override.yml适用于开发环境#docker-compose.override.yml(ExtendedconfigforDEVELOPMENTenv.)version:'3.4'services:#Simplifiednumbero......
  • PriceFixed
    传送门题意:市场上有\(a[i]\)种商品,每种商品的价格都是\(2\)。现在你需要买这种商品\(a[i]\)件。但是对于第\(i\)种商品有一个属性\(bi\),意味着如果你已经买了\(bi......
  • web 开发里 SSR,CSR 和 SSG 的区别
    本文介绍这三种Web前端开发领域中的术语的区别。CSR-ClientSideRendering一种在浏览器上执行JavaScript以生成DOM并在挂载后显示内容的方法。页面初始加载不......
  • 网络io与select
    我们知道网络IO模型一共有5种,这里我们主要讨论同步IO和select多路复用的情况。我们先从一个简单的TCP服务器的代码出发,来讨论一下这个是怎么实现的。一个十分简单的TCP服......
  • 生物:选修一
    1.内环境&稳态1.1细胞生活的环境1.1.1细胞外液体液C内液70%细胞液在液泡中C外液30%细胞的生存环境细胞外液组织液血浆通过毛细血管渗出,绝大多......
  • 技术之路
    基本算法排序(快速,)设计模式单例模式数据库SQL存储过程redismongodb编程语言C++操作系统:进程与线程,互斥与同步,死锁。页表,虚存。计算机网络:TCP/IP4层结构。T......
  • 最简单的算法- 二分查找
    java代码/***Createdbyfupengon2017/1/11.*/publicclassbinarySearchpublicstaticlongbinarySearch_a(long[]src,intkey){intlo=0;......
  • 做题个人经验分享及刷题日记
    描述国王将金币作为工资,发放给忠诚的骑士。第一天,骑士收到一枚金币;之后两天(第二天和第三天),每天收到两枚金币;之后三天(第四、五、六天),每天收到三枚金币;之后四天(第七、八、九、......
  • Elasticsearch Terms Aggregation 根据某一项的聚合
    根据某一项的每个唯一的值的聚合。举例:{"aggs":{"genres":{"terms":{"field":"genre"}}}}返回{"aggregations":{......
  • python re 替换
    把字符串里的\r\n去掉。用下面这句替换实现。'\r\n','',prefix_name)print另外string本身也有replace这个函数可以实现相同的功能printprefix_namepref......