CSS简介
- 1. form表单
- 2. 选择器

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{
            width: 10px;
            height: 20px;
            background-color: black;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式-->
    <style>
        .a{
            width: 10px;
            height: 20px;
            background-color: yellow;
        }

    </style>
    <link rel="stylesheet" href="b.css">
</head>
<body>
<!--行内样式-->
<div style="width: 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{
            width: 20%;
            height: 200px;
            background: yellow;
        }
        span{
            width: 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>

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

>>>图示结果：

【1011 | Day 42】前端之CSS

CSS简介

1. form表单

2. 选择器

2.1 id选择器

2.2 伪类元素选择器

2.3 伪类选择器

2.4 儿子选择器

2.5 兄弟选择器

2.6 后代选择器

2.7 字体属性

2.8 属性的引入方式

b.css文件

2.9 属性选择器

3.0 标签的嵌套

3.1 标签选择器

3.2 毗邻选择器

3.3 类选择器

3.4 组合选择器

3.5 设置宽高

3.6 通用选择器

猜你喜欢