zoukankan      html  css  js  c++  java
  • 【1011 | Day 42】前端之CSS(上)

    CSS简介

    1. form表单

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
    </head>
    <body>
    <!--from 的属性设置 action 是提交地址,method是提交方式,也叫请求方式
     如果是上传图片:enctype="multipart/form-data-->
    
    <form action="" method="" >
        <div>
            用户名:<input  type="text" name="user" value="123"/>
        </div>
        <div>
            密码:<input type="password" name="pwd">
        </div>
        <div>
            性别: <input type="radio" name="sex" value="1">男
                <input type="radio" name="sex"  value="0">女
        </div>
        <div>
           爱好:<input type="checkbox" name="hobbies" value="dance"/>跳舞
                <input type="checkbox"  name="hobbies" value="sing"/>唱歌
                <input type="checkbox"  name="hobbies" value="piant"/>画画
                <input type="checkbox" name="hobbies"  value="reading"/>看书
        </div>
        <div>
            头像:<input type="file" name="arator">
        </div>
        <input type="submit" value="登录">
        <input type="reset" value="重置">
        <input type="button" value="按钮">
    </form>
    
    </body>
    </html>
    

    >>>图示结果:

    2. 选择器

    2.1 id选择器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #a{
                color: red;
            }
    
        </style>
    </head>
    <body>
    <div id="a">asdasd</div>
    <div>asdasd</div>
    
    </body>
    </html>
    

    >>>图示结果:

    2.2 伪类元素选择器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
        <style>
            p:first-letter { font-size: 48px; color: red; }
            body{
                font-size: 16px; color: red;
            }
            span{
                color: blue;
            }
        </style>
    </head>
    <body>
    <p>我<span style="color: pink">爱</span>你</p>
    
    </body>
    </html>
    

    注意:<span></span>内的样式优先于<style></style>里的样式,所以“爱”显示pink,而不是blue。

    >>>图示结果:

    2.3 伪类选择器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            a:link{
                color: yellow;
            }
            a:hover{
                color: red;
            }
            a:active{
                color: green;
            }
            /*a:visited { color:pink }
        </style>
    
    </head>
    <body>
    <a href="伪类选择器.html">字体颜色:黄 指针悬浮颜色:红 点击颜色:绿</a>
    </body>
    </html>
    

    >>>图示结果:


    2.4 儿子选择器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
        <style>
    
            .a>div{
                background-image:url("1.jpg") ;
            }
    
        </style>
    </head>
    <body>
    
    
        <div class="a">我是爸爸
            <div class="b">我是儿子
                <p class="b" >我是孙子</p>
            </div>
        </div>
    
    
    </body>
    </html>
    

    >>>图示结果:

    2.5 兄弟选择器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
        <style>
            span~.a{
                color: red;
            }
        </style>
    
    </head>
    <body>
    <div>
        <span>span</span>
        <h1 class="a">h1</h1>
        <h2 class="a">h2</h2>
        <p>我不属于a类,所以没有变红</p>
        <h4 class="a">h4</h4>
    </div>
    <p class="a">我不是兄弟,所以没有变红</p>
    
    </body>
    </html>
    

    >>>图示结果:

    2.6 后代选择器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*div .a{*/
                /*color: red;*/
            /*}*/
            /*#b .a{*/
                /*color: red;*/
            /*}*/
            div div{
                color: red;
            }
    
        </style>
    </head>
    <body>
    <div id="b" class="c">asda
        <div>我是第一个儿子</div>
        <div class="a">我是第二个儿子
            <div>我是孙子</div>
        </div>
    </div>
    
    
    </body>
    </html>
    

    >>>图示结果:

    2.7 字体属性

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*非重点 哪种字体*/
            body{
               font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
            }
            /*字体的大小*/
            span{
               font-size: 25px;
    
            }
            /*字体的粗细*/
            span{
                font-weight: bold;
            }
            /*字体的颜色*/
            span{
                /*color: yellow;*/
                /*color:#3333;*/
                /*color: rgb(255,0,255);*/
                color: rgba(255,0,255,0.5);
            }
    
        </style>
    </head>
    <body>
    <span>我是span</span>
    
    </body>
    </html>
    

    >>>图示结果:

    2.8 属性的引入方式

    b.css文件

    .b{
                 10px;
                height: 20px;
                background-color: black;
    }
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--内部样式-->
        <style>
            .a{
                 10px;
                height: 20px;
                background-color: yellow;
            }
    
        </style>
        <link rel="stylesheet" href="b.css">
    </head>
    <body>
    <!--行内样式-->
    <div style=" 10px;height: 20px;background-color: red"></div>
    <div class="a"></div>
    <div class="b"></div>
    
    
    </body>
    </html>
    

    >>>图示结果:

    2.9 属性选择器

    例一:所有含有name属性的都有color属性

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
        <style>
            div[name]{
                color: red;
            }
    
        </style>
    </head>
        
    <body>
    <div name="123"> div</div>
    <div name="455">我是div</div>
    <div>没有属性的div</div>
    
    </body>
    </html>
    

    >>>图示结果:

    例二:指定属性color变红

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
        <style>
            
            div[name="123"]{
                color: red;
            }
            
        </style>
    </head>
        
    <body>
    <div name="123"> div</div>
    <div name="455">我是div</div>
    <div>没有属性的div</div>
    
    </body>
    </html>
    

    >>>图示结果:

    3.0 标签的嵌套

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div>123
        <div>123213</div>
    </div>
        
    <!--关于标签嵌套:通常块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。-->
    <!--p标签不能包含块级标签,p标签也不能包含p标签。-->
        
    <p>asdasd<p>我是p</p> <div>asdasd</div></p>
    
    
    </body>
    </html>
    

    3.1 标签选择器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div{
                color: red;
            }
        </style>
    </head>
    <body>
        
    <!--标签选择器,只要是这个标签都会被选中-->
        
    <div>dasdasda
        <div>而知</div>
    </div>
    <div>asdasd</div>
    
    </body>
    </html>
    

    >>>图示结果:

    3.2 毗邻选择器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
        <style>
            div+p{
                color: red;
            }
            
        </style>
    </head>
    
    <body>
    <div>
        不显示红色
    </div>
    <p>显示红色</p>
    <p>不显示红色</p>
    
    </body>
    </html>
    

    >>>图示结果:

    3.3 类选择器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
           .p{
            color:red ;
            }
            .a{
                font-size: 36px;
            }
            
        </style>
    
    
    </head>
    <body>
    
    <div class="p a">
        看我
    
    </div>
    <div class="a">wo s </div>
    
    </body>
    </html>
    

    注意:可以通过class类多属性减少重复代码,比如<div class="a">wo s </div>只针对wo s做样式设计。

    >>>图示结果:

    3.4 组合选择器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
        <style>
            /*div,p{*/
                /*color: red;*/
            /*}*/
            /*p{*/
                /*color: red;*/
            /*}*/
            div .b .a,p,.c{
                color: red;
            }
    
        </style>
    </head>
    <body>
    <div>div
        <div class="b">345
            <div class="a">123</div>
        </div>
        <div class="a">
            678
        </div>
    
    </div>
    <p>p</p>
    <div class="c">9098</div>
    
    </body>
    </html>
    

    >>>图示结果:

    3.5 设置宽高

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
        <style>
            div{
                 20%;
                height: 200px;
                background: yellow;
            }
            span{
                 20%;
                height: 200px;
                background: pink;
            }
        </style>
    </head>
    <body>
    <div>div</div>
    <span>span</span>
    
    </body>
    </html>
    

    注意:块级元素有宽高,行内元素的宽根据内容调节,高度则固定。

    >>>图示结果:

    3.6 通用选择器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            *{
                color:red;
            }
        </style>
    
    </head>
    <body>
    <p>asdasd</p>
    <div>asdasd</div>
    <span>sdasd</span>
    
    
    </body>
    </html>
    

    注意:利用“ * ”选择所有标签。

    >>>图示结果:

  • 相关阅读:
    二分图之最小边覆盖(poj3020)
    第一章:计算机网络概述
    X Window 简单的新手教程
    SharePoint Permission Analyzer 权限分析仪
    《源创新》:破坏性创新换了个说法,有陷入锤子钉子模式的嫌疑,书中的案例可以看一看。
    《金融可以颠覆历史》:隐藏在历史事件背后的金融制度发展历程
    转发:三伏天话“三伏贴”
    《浪潮之巅》(第2版):精彩的IT商战史
    《史玉柱自述》:管理者要谦虚,好的经营策略是试出来的
    《生活中的经济学》:主张让市场去解决生活中的问题,离中国的现实有点远
  • 原文地址:https://www.cnblogs.com/fxyadela/p/11656633.html
Copyright © 2011-2022 走看看