javaWeb（二）----- CSS-阿里云开发者社区

CSS

✔ 概念：Cascading Style Sheets 层叠样式表

* 层叠：多个样式可以作用在同一个html的元素上，同时生效

✔ 好处：

（1）功能强大

（2）将内容展示和样式控制分离

* 降低耦合度。解耦

* 让分工协作更容易

* 提高开发效率

✔ CSS的使用：CSS与html结合方式

（1）内联样式

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

（2）内部样式

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

例如：

编辑

（3）外部样式

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

例如：

编辑

注意：

（1）上述3种方式种 css作用范围越来越大

（2）第一种方式不常用，后面两种方式常用

（3）第三种格式还可以写为

编辑

✔ CSS语法

* 格式：

编辑

* 选择器：筛选具有相似特征的元素

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

✔ 选择器分类

--- 基础选择器

（1）id选择器：选择具体的id属性值的元素，建议在一个html页面中id值唯一

语法：#id属性值{}

（2）元素选择器：选择具有相同标签名称的元素

语法：标签名称{}

注意：id选择器优先级高于元素选择器

（3）类选择器：选择具有相同的class属性值的元素。

语法：.class属性值{}

注意：类选择器选择器优先级高于元素选择器

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>
    <style>
        #div1{
            color: red;
        }
        div{
            color:green;
        }
        .clsl{
            color: cornflowerblue;
        }
    </style>
</head>
<body>
     <div id="div1" align="">一闪一闪</div>
     <div id="div">小星星</div>
     <p class="clsl">满天</p>
</body>
</html>

--- 扩展选择器

（1）选择所有元素：

语法： *{}

（2）并集选择器：

语法：选择器1,选择器2{}

（3）子选择器：筛选选择器1元素下的选择器2元素

语法：选择器1 选择器2{}

（4）父选择器：筛选选择器2的父元素选择器1

语法：选择器1 > 选择器2{}

（5）属性选择器：选择元素名称，属性名=属性值的元素

语法：元素名称[属性名="属性值"]{}

（6）伪类选择器：选择一些元素具有的状态

语法：元素:状态{}

如： <a>

状态：

* link：初始化的状态

* visited：被访问过的状态

* active：正在访问状态

* hover：鼠标悬浮状态

✔ CSS属性

（1）字体、文本

* font-size：字体大小

* color：文本颜色

* text-align：对其方式

* line-height：行高

（2）背景

* background

（3）边框

* border：设置边框，符合属性

（4）尺寸

* width：宽度

* height：高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体属性</title>
    <style>
        p{
            color: red;
            font-size: 30px;
            text-align: center;
            line-height: 100px;
            border: 1px solid red;
        }
        div{
            border: 1px solid red;
            height: 200px;
            width: 200px;
            background: url("./img/login_logo.png") no-repeat center;
        }
    </style>
</head>
<body>
       <p>我爱我的祖国</p>
       <div>我爱我的家乡</div>
</body>
</html>

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

* margin：外边距

* padding：内边距

* 默认情况下内边距会影响整个盒子的大小

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

* float：浮动

* left

* right

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子属性</title>
    <style>
        div{
             border: 1px solid red;
        }
        .div1{
            width:100px;
            height: 100px;
            /*margin: 50px;*/
        }
        .div2{
            width: 200px;
            height: 200px;
            padding: 50px;
            /*设置盒子的属性，让width和height就是最终盒子的大小*/
            box-sizing: border-box;
        }
        .div3{
            float: left;
        }
        .div4{
            float:left;
        }
        .div5{
            float: left;
        }
    </style>
</head>
<body>
     <div class="div2">
         <div class="div1">
         </div>
     </div>
     <div class="div3">aaaaaa</div>
     <div class="div4">bbbbbb</div>
     <div class="div5">cccccc</div>
</body>
</html>

▶ 案例：注册页面

（1）HTML

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>
<body>
    <!--定义表单 form-->
   <form action="#" method="post">
       <table border="1" align="center" width="500">
           <tr>
               <td><label for="username">用户名</label></td>
               <td><input type="text" name="username" id="username"></td>
           </tr>
           <tr>
               <td><label for="password">密码</label></td>
               <td><input type="text" name="password" id="password"></td>
           </tr>
           <tr>
               <td><label for="email">Email</label></td>
               <td><input type="email" name="email" id="email"></td>
           </tr>
           <tr>
               <td><label for="name">姓名</label></td>
               <td><input type="text" name="name" id="name"></td>
           </tr>
           <tr>
               <td><label for="tel">手机号</label></td>
               <td><input type="text" name="tel" id="tel"></td>
           </tr>
           <tr>
               <td>性别</td>
               <td>
                   <input type="radio" name="gender" value="male">男
                   <input type="radio" name="gender" value="female">女
               </td>
           </tr>
           <tr>
               <td><label for="birthday">出生日期</label></td>
               <td><input type="data" name="birthday" id="birthday"></td>
           </tr>
           <tr>
               <td><label for="checkcode">验证码</label></td>
               <td><input type="test" name="checkcode" id="checkcode">
               <img src="./img/verify_code.jpg">
               </td>
           </tr>
           <tr>
               <td align="center" colspan="2"><input type="submit" value="注册" ></td>
           </tr>
       </table>
   </form>
</body>
</html>

效果展示：

编辑

（2）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("./img/register_bg.png") no-repeat center;
        }
        .reg_layout{
            width: 900px;
            height: 500px;
            border: 8px solid #EEEEEE;
            background-color: white ;
            /*让div水平居中*/
            margin: auto;
            margin-top: 15px;
        }
        .reg_left{
            /*border: 1px solid red;*/
            float: left;
            margin: 15px;
        }
        .p_reg_left_1{
            color: #FFD026;
            font-size: 20px;
        }
        .p_reg_left_2{
            color: #A6A6A6;
            font-size: 20px;
        }
        .reg_center{
            /*border: 1px solid red;*/
            float: left;
            width: 450px;
        }
        .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;
            margin-top: 10px;
        }
        .reg_right{
            /*border: 1px solid red;*/
            float: right;
            margin: 15px;
        }
        .p_reg_right{
            font-size: 15px;
        }
        .p_reg_right a{
            color: pink;
        }
    </style>
</head>
<body>
      <div class="reg_layout">
          <div class="reg_left">
              <p class="p_reg_left_1">新用户注册</p>
              <p class="p_reg_left_2">USER REGISTER</p>
          </div>
          <div class="reg_center">
              <div class="re_form">
                  <form action="#" method="post">
                      <table  align="center" 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="text" 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="请输入Email"></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">性别</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="data" name="birthday" id="birthday" placeholder="年/月/日"></td>
                          </tr>
                          <tr>
                              <td class="td_left"><label for="checkcode">验证码</label></td>
                              <td class="td_right"><input type="test" name="checkcode" id="checkcode" placeholder="请输入验证码">
                                  <img id="img_check" src="./img/verify_code.jpg">
                              </td>
                          </tr>
                          <tr>
                              <td align="center" colspan="2"><input type="submit" id="btn_sub" value="注册" ></td>
                          </tr>
                      </table>
                  </form>
              </div>
          </div>
          <div class="reg_right">
              <P class="p_reg_right">已有账号?<a href="#">立即登录</a></p>
          </div>
      </div>
</body>
</html>

效果展示：

编辑

javaWeb（二）----- CSS

CSS

热门文章

最新文章

相关课程

相关电子书

相关实验场景