day 37 CSS

参考博客：https://www.cnblogs.com/majj/p/9021419.html

1.CSS的三种链接样式:

　　行内链接(优先级最高)

　　内接样式

　　外接样式

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 权重： 优先级高 权重大  谁在页面谁的权重大 -->
    <!-- 外接样式 -->
    <link rel="stylesheet" href="./index.css">
    <style type="text/css">
        /*内接样式*/

        /*选择器*/
        span{
            color: green;
            font-size: 30px;
        }
    </style>
    <script type="text/javascript" src="./javascript/index.js"></script>


</head>
<body>
    <!-- 行内样式 的优先级是最高最高的 -->
    <p style="color: red; font-size: 30px;">wusir</p>
    <span style="color: purple;">alex</span>
    
</body>
</html>

三种链接样式

2.CSS的选择器

　　选中的是"共性"

（1）CSS 层叠样式表    
        作用：修饰网页结构
        <!-- 行内样式 的优先级是最高最高的 -->
        <p style="color: red; font-size: 30px;">wusir</p>
        <span style="color: purple;">alex</span>
        
（2）css的三种引入方式
        - 行内样式
            注意：行内样式的优先级是最高的
        - 内接样式
        - 外接样式
            
（3）基本选择器
     id选择器
            选中的是特性 唯一的，不能重复
     标签选择器
            选中的是页面中共性的标签
     类选择器
            选中的也是页面中共性的标签，类名可以有多个
     通配符选择器
            通常是对页面进行重置样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="./css/reset.css">
    <style type="text/css">
        
    1.标签选择器 选中的是 ‘共性’
        p{
            color: red;
        }    
            
        ul,ol{
            list-style: none;
        } 
            /*重置样式*/，/*组合选择器*/

    2.类（class）选择器  .类名  选中的也是共性 可以有多个
        小技巧：
            不要去试图用一个类将我们的页面写完。这个标签要携带多个类，共同设置样式
            每个类要尽可能的小，有共同的概念，能够让更多的标签使用
        .active{
            color: yellow;
        }
        
        .large{
            font-size: 30px;
        }

    3.id选择器  选中的是‘特性’  id是唯一的
        p1{
            color: green;
        }
        
    4. 通配符选择器   * （在以后工作中不要用这个  

        一开始布局页面如果写css,一定要重置

        {    
            padding: 0;
            margin: 0;

        }
        
        a{
            text-decoration: none;
        } 清除a标签的下划线
        
        .baidu{
            color: blue;         /*下划线*/
            text-decoration: underline;        /*显示小手的状态*/
            cursor: pointer;
        }
        
        input{
            border: none;    #（边框）
            width: 400px;
            height: 40px;
            border: 1px solid #e0e0e0; （高度、样式、颜色）
            font-size: 22px;     （设置字体大小）
        }

    </style>
</head>
<body>
    <p id="p1">alex</p>
    <p id="p2">alex2</p>
    <p>alex3</p>
    <p>alex4</p>
    <p>alex5</p>
    <ul>
        <li class="active large">  #类名可是多个，方便以后选择时，可以类的不同而精确选择自己想要的数据
            alex1
        </li>
        <li>
            alex2
        </li>
    </ul>
    <ul>
        <li class="active">
            wusir
        </li>
    </ul>
    <a href="javascript:void(0);">百度一下</a>
    <span class="baidu">百度一下</span>
    <input type="text">

</body>
</html>

1.CSS的三种链接样式:

2.CSS的选择器

猜你喜欢