5.22 css和基本选择器

1，css的三种引入方式

1，行内样式

2，内接样式

3，外接样式：链接式和导入式。

HTML的缺陷：

不能够适应多种设备
要求浏览器必须智能化足够庞大
数据和显示没有分开
功能不够强大

CSS 优点：

使数据和显示分开
降低网络流量
使整个网站视觉效果一致
使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css

行内样式

1 <div>
2     <p style="color: green">我是一个段落</p>
3 </div>

行内样式的级别最高

内接样式

<style type="text/css">
    /*写我们的css代码*/
        
    span{
    color: yellow;
    }

</style>

外接样式-链接式

<link rel="stylesheet" href="./index.css">

外接样式-导入式

<style type="text/css">
        @import url('./index.css');
</style>

2，css的选择器

1，标签选择器

标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta name=description content="">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        /*标签选择器*/
       a{
           font-size: 12px; 
           text-decoration: none;
       }

        /**/
        span{
            color: red;
            /*让鼠标显示小手的样式*/
            cursor: pointer;
        }

        /*id选择器 一般不会设置样式，通常都与js有很大关系*/
        #p1{
            color: green;
            font-size: 20px;
        }

        /*类选择器*/

        .w{
             968px;
            height: 100px;
            background-color: blue;
            border: 1px solid red;

            /*让一个盒子居中显示*/
            margin: 0 auto;
        }
        .t{
            border: 1px solid yellow;
        }    
        .lv{
            color: green;

        }
        .big{
            font-size: 40px;
        }
        .line{
            text-decoration: underline;
        }
        .d:hover{
            text-decoration: underline;
            color: red;
        }

        /**/

    </style>
</head>
<body>

    <!-- 基本选择器： 标签选择器、id选择器、class选择器、*通配符选择器 

        标签选择器：不管你的标签藏的多深，都会被选中，选的"共性"，而不是特性
    -->


    <div>
        <div>
            <div>
                <span>内容</span>
                <a href="" class="d">哈哈</a>
                <a href="">哈哈</a>
                <a href="">哈哈</a>
            </div>
        </div>
        <span>另一个内容</span>
        <a href="">哈哈</a>
        <p id="p1">一个段落</p>
        <!-- <a href="" id="app">超链接</a> -->



        <div class="w t">
            
        </div>
        <div class="w">
            
        </div>

        <div class="w">
            
        </div>

        <div>
               <p class="lv big">段落1</p>
             <p class="lv line">段落2</p>
             <p class="line big">段落3</p>
         </div>
    </div>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>选择按钮</title>
</head>
<body>
    <form>
        姓名:<input type="radio" name="请输入用户名">
    </form>

</body>
</html>

View Code

2，id选择器

3，类选择器

. 点加类名