css样式学习 - 技术栈

1、概念：层叠样式表，多个样式可以同时作用在一个html元素上，同时生效

2、好处：功能强大，将内容元素和样式控制分离，一套css可以作用于多套页面

3、css的使用：css与html的结合方式

内联样式

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    <!--
    内联样式：在标签内使用style属性来指定css代码
    内部样式：在head标签内，定义style标签
    -->
  <div style="color: blue">hello css</div>

</body>
</html>

内部样式

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>内部样式</title>
  <style>
    div{
      color: brown;
    }
  </style>
</head>
<body>
<!--
内部样式：在head标签内，定义style标签写css代码
-->
<div>hello css</div>
<div>hello css</div>
<div>hello css</div>
</body>
</html>

外部样式

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>外部样式</title>
  <!--<link rel="stylesheet" href="css/aa.css">-->
  <style>
    @import "css/aa.css";
  </style>

</head>
<body>
<!--在head标签里定义link标签，来引入外部的资源文件-->
<div>hello css</div>
<p>red</p>
</body>
</html>

4、选择器：

分类

1、基本选择器：id选择器（建议一个页面中id唯一）、元素选择器、类选择器

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>基础选择器</title>
  <!--基础选择器
      id选择器：语法#属性值{}
      元素选择器
      类选择器：
      -->
  <!--id选择器优先级高于元素选择器-->
  <style>
    #div1{
      color: darkorange;
    }
    div{
      color: blue;
    }
    .cls1{
      color: brown;
    }

  </style>
</head>
<body>
  <div id="div1">aaaaa</div>
  <div>nnnnn</div>
  <p class="cls1">aaaaaa</p>
</body>
</html>

2、扩展选择器：选择所有元素的选择器、并集选择器、子选择器、父选择器，属性选择器、伪类选择器

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>扩展选择器</title>
<!--link连接初始状态、hover连接悬浮状态、active正在点击状态、visited访问完毕状态-->
  <style>
    div p{
      color: brown;
    }
    div > p{
      border: 1px solid;
    }
    input[type="text"]{
      border: 5px solid;
    }
    a:link{
      color: deeppink;
    }
    a:hover{
      color: yellow;
    }
    a:active{
      color: green;
    }
    a:visited{
      color: red;
    }
  </style>
</head>
<body>

    <p>yyyyyyy</p>
    <div >
      <p>
        jjjjjjjj
      </p>
    </div>
    <div>
      kkkkkkk
    </div>
    <input type="text">
    <input type="password">
    <br>
    <a href="#">hhhhhhh</a>
</body>
</html>

3、属性

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>属性</title>
  <style>
    p{
      color: white;
      font-size: 30px;
      text-align: center;
      line-height: 100px;
      border: black;
      background: url("image/8c33674415e050b1b1ad845d764f763.png");
    }
  </style>
</head>
<body>
    <p>博客</p>
</body>
</html>

3、盒子模型：外边距：margin、内边距：padding（默认情况下，内边距会影响盒子的大小）

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>盒子模型</title>

  <style>
    div{
      border: 1px solid red;
      width: 100px;
    }
    .cls1{
      width: 200px;
      height: 200px;
      box-sizing: border-box;
      padding: 50px;
    }
    .cls2{
      width: 100px;
      height: 100px;
      /*margin: 50px;*/
    }
    .div3{
      float: left;
    }
    .div4{
      float: left;
    }
    .div5{
      float: right;
    }
  </style>
</head>
<body>

    <div class="cls1">
      <div class="cls2"></div>
    </div>
    <div class="div3">aaaaaaa</div>
    <div class="div4">bbbbbbb</div>
    <div class="div5">ccccccc</div>

</body>
</html>

4、注册页面

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>注册页面</title>
  <style>
    *{
      margin: 0px;
      padding: 0px;
      box-sizing: border-box;
    }
    body{
      background: url("image/8c33674415e050b1b1ad845d764f763.png");
    }
    .div1{
      width: 900px;
      height: 500px;
      border: 8px solid #EEEEEE;
      background-color: white;
      margin: auto;
      margin-top: 15px;
    }
    .left{
      /*border: 1px solid red;*/
      float: left;
      margin: 15px;
    }
    .left > p:first-child{
      color: yellow;
      font-size: 20px;
    }
    .left > p:last-child{
      color: #999999;
      font-size: 20px;
    }
    .center{
      border: 1px solid red;
      float: left;

      width: 450px;

    }
    .right{
      /*border: 1px solid red;*/
      float: right;
      margin: 15px;
    }
    .right > p:first-child{
      color: #555555;
      font-size: 15px;
    }
    .right p a{
      color: deeppink;
    }
    .td_left{
      width: 100px;
      text-align: right;
      height: 45px;
    }
    .td_right{
      padding-left: 50px;
    }
    #username,#password,#Email,#name,#birth,#tel,#check{
      width: 251px;
      height: 32px;
      border: 1px solid #999999;
      border-radius: 5px;
      padding-left: 10px;
    }
    #check{
      width: 110px;
    }
    #imgcheck{
      height: 32px;
      vertical-align: middle;
    }
    #sub{
      width: 150px;
      height: 40px;
      background-color: yellow;
      border: 1px solid yellow;
    }
  </style>
</head>
<body>
    <div class="div1">
      <div class="left">
        <p>新用户注册</p>
        <p>user register</p>
      </div>
      <div class="center">
        <div class="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="name" 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="1">男
                  <input type="radio" name="gender" value="2">女
                </td>
              </tr>
              <tr>
                <td class="td_left"><label for="birth">出生日期：</label></td>
                <td class="td_right"><input type="date" name="birth" id="birth">
                </td>
              </tr>
              <tr>
                <td class="td_left"><label for="check">验证码：</label></td>

                <td class="td_right"><input type="text" name="check" id="check" placeholder="请输入验证码">
                  <img src="image/963867e171133ee5396f2b2abadc6fb.png" id="imgcheck">
                </td>
              </tr>
              <tr>
                <td colspan="2" align="center"><input type="submit" value="注册" id="sub"></td>
              </tr>
            </table>
          </form>
        </div>
      </div>
      <div class="right">
        <p>已有账号<a href="#">立即登录</a></p>
      </div>
    </div>
</body>
</html>