CSS基础笔记

君问归期魏有期

已于 2022-06-20 16:16:16 修改

阅读量3.6k

点赞数 2

分类专栏： html 文章标签： css css3 html

于 2021-12-19 09:37:59 首次发布

本文链接：https://blog.csdn.net/LongLiveThePRC/article/details/122020475

版权

html 专栏收录该内容

52 篇文章 0 订阅

订阅专栏

CSS基础笔记

正文

一般选择器

1.内部样式

    div{
      color: blue;
    }

2.外部样式

/*  2.外部样式,直接把css代码写在外部,用link标签来引用,rel和href属性一定要加上 */
/*  type属性写不写都行*/
  <link rel="stylesheet" type="text/css" href="../css/index.css">
  <link rel="stylesheet" href="../css/2.div_color_red.css">

3.选择器优先级

 /*3.选择器优先级,默认情况下类选择器和id选择器优先级大于元素选择器*/
    /*如果指定了标签id,那么他的选择器就会被确定下来*/
    /*id选择器*/
    #div1 {
      color: red;
    }

    /*元素选择器*/
    div {
      color: blue;
    }
    /*类选择器*/
    .clas1 {
      color: green;
    }

扩展选择器

1.选择所有元素

    /*1.选择所有元素*/
    * {
      color: red;
    }

2.并集选择器

    /*2.并集选择器*/
    /*也就是div和p标签都会被改变*/
    div, p {
      color: blueviolet;
    }

3.子选择器

    /*3.子选择器*/
    /*也就是div标签下的p标签会被改变*/
    div p {
      color: pink;
    }

4.父选择器

    /*4.父选择器*/
    div > p {
      color: purple;
      border: 1px solid;
    }

5.属性选择器

    /*5.属性选择器*/
    input[type="text"] {

    }

    input[type="password"] {

    }

伪类选择器

1.鼠标移动到超链接之前

    /*1.鼠标移动到超链接之前*/
    a:link {
      color: pink;
    }

2.鼠标放到超链接上

    /*2.鼠标放到超链接上*/
    a:hover{
      color: blueviolet;
    }

3.鼠标点击超链接时

    /*3.鼠标点击超链接时*/
    a:active{
      color: yellow;
    }

4.鼠标访问超链接之后

    /*4.鼠标访问超链接之后*/
    a:visited{
      color: red;
    }

盒子模型

    .clas1 {
      border: 1px solid;
      color: red;
      width: 300px;
      size: 300px;
      height: 300px;
      text-align: center;
    }

    .clas2 {
      border: 1px solid;
      color: red;
      width: 50px;
      size: 50px;
      height: 50px;
      text-align: center;
      margin-left: 125px;
      margin-right: 125px;
      margin-top: 125px;
      margin-bottom: 125px;
    }

    .clas3 {
      float: left;
      border: 1px solid;
    }

    .clas4 {
      float: left;
      border: 1px solid;
    }

    .clas5 {
      border: 1px solid;
    }

注册案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  1.所有的css代码都写在style标签里-->
	<!--  像这种把div标签的属性直接设置在style标签内部属于内部样式-->
	<!--  它可以把所有的div标签都设置成内部样式的格式-->
  <style>
    p{
      color: red;
      font-size: 300px;
      text-align: center;
      border: 1px solid purple;
      line-height: 300px;
    }
    div{
      border: 1px solid ;
      height: 2000px;
      width: 2000px;
      background: blue;
      background:url("https://dsfs.oppo.com/omp/1634182533170-_-38d8a954de6541dcbeea19368b8975cd.png?_w_=1080&_h_=1080");
    }
 /*依旧是h5的注册案例,此时用css美化了一下*/
    * {
      margin: 0px;
      padding: 0px;
    }

    body {
      background-image: url("https://tse1-mm.cn.bing.net/th/id/R-C.dab436e6a9d23101d719c1f3dd1a76a4?rik=ecsSPgiqEPBeNQ&riu=http%3a%2f%2fwww.shijuepi.com%2fuploads%2fallimg%2f201115%2f1-2011151G454.jpg&ehk=61OG%2bh8posKeFHHqLOOPJLQh6brnOHElxrxY9xRbGY4%3d&risl=&pid=ImgRaw&r=0");
      size: 2000px;
      height: 1000px;
      width: 1400px;
      border: 1px;
      margin: auto;
      margin-top: 15px;
    }

    .rg_left {
      float: left;
      /*border: red solid;*/
      height: 15%;
      width: 20%;
    }

    .rg_left p:first-child {
      color: blue;
      size: A5;
    }

    .rg_left p:last-child {
      color: dimgrey;
      size: A5;
    }

    .rg_center {
      /*border: red solid;*/
      height: 40%;
      width: 60%;
      float: left;
    }

    .rg_right {
      /*border: red solid;*/
      height: 15%;
      width: 20%;
      float: right;

    }

    a:link {
      color: blue;
    }

    .rg_bg {
      text-align: center;
      /*border: 1px solid;*/
      color: red;
      width: 50%;
      height: 600px;
      background-color: white;
    }

    #username,#password,#name,#email,#birthday,#phone,#ruture,#pic{
      height: 32px;
      width: 251px;
      border:1px solid dimgrey ;
      border-radius:5px;
    }
    #ruture{
      width: 100px;

    }
    #pic{
      width: 151px;
      height: 32px;
      vertical-align:middle;
    }
    #login{
      width: 150px;
      height: 40px;
      background-color: yellow;
      border-radius: 5px;
      border: 1px solid;
    }



  </style>
</head>
<body>
<!--内联样式-->
<!--<br>-->
<!--(不推荐使用)-->
<!--<div style="color: red">hello css</div>-->
<!--<br>-->
1.内部样式
<div>
  hello world
</div>
<div>
  i am css
</div>
2.外部样式效果
center>
  <h2>《木兰花令 拟古决绝词》</h2>
  <p>人生若只如初见,何事秋风悲画扇</p>
  <p>等闲变却故人心,却道故人心易变。</p>
  <p>骊山语罢清宵半,泪雨零铃终不怨。</p>
  <p>何如薄幸锦衣郎,<span>比翼连枝当日愿。</span></p>
  <div>终于特么的测试好了</div>
  <p>hello world</p>
</center>
<center>
<!--3.选择器优先级效果图-->
<div id="div1">hello world</div>
<div id="div">hello world</div>
<div class="clas1">hello world</div>

</center>
<!--4.拓展选择器效果图-->
<center>
  <div>传智播客</div>
  <div>hello world
    <p>nihao</p>
  </div>
  <div>
    hello world<p>

  </p>
  </div>
  <input type="text">
  <input type="password">
  <br>
  <a href="#">传智播客</a>

</center>
<!--6.属性效果图-->
<p>hello world</p>
<div></div>
<!--7.盒子模型效果图-->
<div class="clas1">
  <div class="clas2">

  </div>
</div>

<div class="clas3">aaa</div>
<div class="clas4">bbb</div>
<div class="clas5">ccc</div>

<!--注册案例效果图-->
<center>
  <div class="rg_bg">


    <div class="div1">
      <div class="rg_left">
        <p>
          新用户注册
        </p>
        <p>
          user register
        </p>
      </div>


      <center>
        <div class="rg_center">
          <form action="#" method="get">
            <table align="center" bgcolor="">
              <tr>
                <td>
                  username
                </td>
                <td>
                  <input type="text" name="username" id="username" placeholder="please input">
                </td>
              </tr>
              <tr>
                <td>
                  password
                </td>
                <td>
                  <input type="password" name="password"id="password" placeholder="please input">
                </td>
              </tr>
              <tr>
                <td>
                  email
                </td>
                <td>
                  <input type="email" name="email"id="email" placeholder="please input">
                </td>
              </tr>
              <tr>
                <td>
                  name
                </td>
                <td>
                  <input type="text" name="name"id="name" placeholder="please input">
                </td>
              </tr>
              <tr>
                <td>
                  phoneNo
                </td>
                <td>
                  <input type="tel" name="phoneno"id="phone" placeholder="please input">
                </td>
              </tr>
              <tr>
                <td>
                  sex
                </td>
                <td>
                  <input type="radio" name="female"id="female" placeholder="please input">female
                  <input type="radio" name="female"id="male" placeholder="please input">male
                </td>
              </tr>
              <tr>
                <td>
                  birthday
                </td>
                <td>
                  <input type="datetime-local" name="birthday"id="birthday" placeholder="please input">
                </td>
              </tr>
              <tr>
                <td>
                  resure
                </td>
                <td>
                  <input type="text" name="resure"id="ruture">
                  <img width="100" id="pic" height="20"src="https://tse1-mm.cn.bing.net/th/id/OIP-C.eaeOunC0HJmzAA0M9fU1LQAAAA?w=276&h=149&c=7&r=0&o=5&dpr=1.25&pid=1.7">
                </td>
              </tr>
              <tr>
                <td colspan="2" align="center">
                  <input type="submit"id="login" name="submit">
                </td>
              </tr>

            </table>
          </form>
        </div>
      </center>


      <div class="rg_right" align="right">
        <p>
          已有帐号
        </p>
        <p>
          <a href="#">立即登录</a>
        </p>
      </div>
    </div>

  </div>
</center>

</body>
</html>

君问归期魏有期

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS基础笔记

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> 
复制链接

扫一扫