JavaWeb03_css

最新推荐文章于 2023-12-18 19:39:59 发布

kk爱闹

最新推荐文章于 2023-12-18 19:39:59 发布

阅读量100

点赞数 1

分类专栏： JavaWeb 文章标签： javaweb

本文链接：https://blog.csdn.net/weixin_51229662/article/details/118734589

版权

JavaWeb 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS

概述

概念 Cascading Style Sheets 层叠样式表

 层叠:多个样式可以作用在同一个HTML的元素上

好处:
1. 功能强大
2. 将内容展示和样式控制分离
  - 降低耦合度,解耦
  - 让分工合作更容易
  - 提高开发效率
css的使用与html结合方式
1. 内联样式
  
  在标签内使用style属性指定css代码如:< div style="color:red;" > hello css < /div >
2. 内部样式
  
  在head标签内,定义style标签,标签体中的内容就是css代码.如:
```
<style>
	div{
        color:blue;
    }
</style>

<div>hello css</div>
```
3. 外部样式
  1. 定义css资源文件
  2. 在head标签内,定义link标签,引入外部的资源文件.如:
```
1. a.css文件内容
div{
    color:blue;
}
2. head标签内引入css文件
<link rel="stylesheet" href="css/a.css">
<div>hello css</div>
<div>hello css</div>
```
注意:
1. 一二三种方法中,css作用范围越来越大
2. 二三种方法更常用
3. 第三种格式可以是:
```
<style>
	@import "css/a.css";
</style>
```

css语法

格式
```
选择器{
	属性名1:属性值1;
	属性名2:属性值2;
	...
}
```
选择器:筛选具有相似特征的元素

注意:每一对属性需要使用;隔开,最后一对属性可以不写
选择器

*分类
1. 基本选择器
  1. id选择器:选择具体的id属性值的元素,建议在一个html页面中id值唯一
    - 语法:#id属性值{}
  2. 元素选择器:选择具有相同标签名称的元素
    1. 语法:标签名称{}
    2. 注意:id选择器优先级高于元素选择器
  3. 类选择器
    1. 语法: .class属性值{}
    2. 注意:类选择器优先级高于元素选择器
2. 扩展选择器
  1. 选择所有元素
    
    *语法: {}
  2. 并集选择器
    
    *语法: 选择器1,选择器2{}
  3. 子选择器:筛选选择器1下的的选择器2元素
    
    *语法: 选择器1 选择器2{}
  4. 父选择器:筛选选择器2的父元素选择器1
    
    *语法: 选择器1>选择器2{}
  5. 属性选择器:选择元素名称,属性名=属性值的元素
    
    *语法: 元素名称[属性名=“属性值”]{}
  6. 伪类选择器:选择一些元素具有的状态
    
    语法: 元素:状态{}
    如:< a >
    状态:
    - link:初始化的状态
    - visited:被访问过的状态
    - active:正在访问的状态
    - hover:鼠标悬浮的状态
属性
1. 字体、文本
  - font-size:字体大小
  - color:字体颜色
  - text-align:对齐方式
  - line-height:行高
2. 背景
  - background
3. 边框
  - border:设置边框,符合属性
4. 尺寸
  - width:宽度
  - height:高度
5. 盒子模型:控制布局
  - margin:外边距
  - padding:内边距
    - 默认情况下内边距会影响整个盒子的大小
    - box-sizing:border-box; 设置盒子的属性,让width和height就是最终盒子的大小
  - float:浮动
    - left
    - right

HTML与CSS综合案例

源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css综合案例</title>
  <link rel="stylesheet" href="css/a.css">
</head>
<body>
  <div class="all">
    <div class="big">
        <div class="small">
            <div class="rtext">
                <div class="register-ch">新用户注册</div>
                <div class="register-en">USER REGISTER</div>
            </div>
            <div>
                <form>
                    <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">密&nbsp;&nbsp;&nbsp;&nbsp;码</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&nbsp;</label></td>
                           <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
                         </tr>

                         <tr>
                           <td class="td_left"><label for="name">姓&nbsp;&nbsp;&nbsp;&nbsp;名</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>性&nbsp;&nbsp;&nbsp;&nbsp;别</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 height="25" src="img/verify_code.jpg">
                           </td>
                         </tr>


                         <tr>
                           <td colspan="2" align="center"><img src="img/regbtn.jpg"></td>
                         </tr>
                    </table>
                </form>
            </div>
            <div class="rtext2">
                <span>已有账号?</span>
                <span><a href="">立即登录</a></span>
            </div>
        </div>

    </div>
  </div>

</body>
</html>

a.css文件内容

.all{
    position:fixed;
    top: 0;
    left: 0;
    width: 1706px;
    height: 929px;
    background: url("../img/register_bg.png") no-repeat;
    background-size: cover;
}
.big{
    background-color: white;
    margin-top: 40px;
    margin-left: 360px;
    border:8px solid lightgray;
    width: 1000px;
    height: 700px;
}
.small{

}
.rtext{
    margin-top: 38px;
    margin-left: 15px;
    font-size: 20px;
    float: left;
}
.register-ch{
    color: orange;
}
.register-en{
    color: darkgray;
}
table{
    margin-left: 130px;
    margin-top: 25px;
    float: left;
}
tr{
    line-height:70px;
    font-size: 18px;
}
.td_left{
    text-align:center;
}
.td_right{
}
input{
    margin-left: 50px;
    margin-top: 22px;
    font-size: 16px;
    border-radius: 5px;
    padding-left: 2px;
}
a{
    color: hotpink;
}
.rtext2{
    margin-top: 38px;
    margin-left: 85px;
    font-size: 20px;
    float: left;
}