css的的一些简单的介绍和特点

最新推荐文章于 2022-03-11 12:46:45 发布

Arthur__Wong

最新推荐文章于 2022-03-11 12:46:45 发布

阅读量1.2k

点赞数

文章标签： h5 css web前端

本文链接：https://blog.csdn.net/Arthur__Wong/article/details/52704553

版权

Day3:

主要是认识为何要用css和怎么用css。

动态网页可以分为：jsp/asp/php/python

页面=数据（后台技术- jsp/asp/php/python）+html（显示）+css（样式）+js（动效）

Css 可以称为层叠样式表或级联样式表

Css主要特点：

1.可很好的控制页面的布局（div+css可以非常灵活地制作前段页面）

2.提高网页加载速度

3.降低服务器的成本

4.呈现一致的效果

Css外部引入特点

1.一个css文件可控制多个页面

2.易改版、便于维护

3.减少代码量、代码简介规范易于分工协作

4.优先利用缓存机制

缺点

相对于单页有垃圾代码

外部引入中的href属性会给服务器造成请求的压力

常应用于全站

Head头部引入特点

速度快，没有服务器请求压力

相对于外部引入单页代码量少

缺点

不易改版与维护

代码较乱不易前后台沟通

常见于大型互联网首页入：网易、新浪等

标签内引入特点

优先级最高

冗余代码多，代码量打

不利于维护

个别特殊效果的使用

Css选择器:

Id选择器

类选择器

标签名选择器

群组选择器

后代选择器

对应优先级:

标签内部 1000

Id 100

类 10

标签 1

important的优先级最高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 1.外部引用 -->
    <link rel="stylesheet" href="day3css1.css">

    <!-- 2.head 引入 -->
    <style>
        /*#main{
            background-color: red;
        }*/

        /*id选择器
        1.id重复器
        2.id选择器一般只作用于一个节点上
        应用：定位某一个节点时最好用id选择器
        */
        #nav{
            color:red;
        }
        /*类选择器
        1.当有很多节点需要同样的样式时，用类选择器

        */
        .nav-span{
            font-weight: bold !important;
        }
        /*标签名选择器
        1.和类选择器有相同的特性，可设置多个节点具有相同的样式
        2.比类选择器精简
        3.不能取代类选择器
        */
        p{
            font-weight: bold;;
        }
        /*群组选择器
        用逗号隔开
        1.当可以把相同的部分提取出来时，可以用群组选择器
        2.代码优化
        3.继承

        */
        #t1, .t2{
            background-color: red;
        }
        /*覆盖*/
        #t1{
            background-color: green;
        }
        /*后代选择器

        */
        #t3 span{
            font-weight: bold;
        }
        /*子选择器
        #nav>span
        */



        #tt{
            background-color: green !important;
        }
    </style>
</head>
<body>


    <!--原始表格  -->
    <table>
        <tr>
            <td>AA1</td>
            <td>AA2</td>
            <td>AA3</td>
        </tr>
    </table>

    <!--表格 优化  大模块分块显示，分块显示thead、tbody。-->
    <!--th、caption  -->
    <table>
        <thead>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </tbody>
    </table>



    <!-- jsp/asp/php/python -->
    <!-- 页面=数据（后台技术- jsp/asp/php/python）+html（显示）+css（样式）+js（动效） -->



    <div id="main">aaa</div>
    <!-- 标签内定义样式 -->
    <!-- <div style="background-color:red;">aaa</div> -->



    <!-- ID|class|tag|群组|后代->css1.0 ->兼容性最好
    兄弟|子|。。。->css2.0->存在一部分兼容性问题
    结构性伪类、动画、过渡->css3.0 ->edge\chrome\safari
     -->


    <div id="nav">aaa</div>


    <span class="nav-span">1</span>
    <span class="nav-span">2</span>
    <span class="nav-span">3</span>
    <span class="nav-span">4</span>
    <span class="nav-span">5</span>
    <span class="nav-span">6</span>

    <p>112344</p>


    <div id="t1">111</div>
    <div class="t2">111</div>



    <div id="t3">
        <span>111</span>
    </div>


    <!-- 提升优先级 -->
    <!-- !important 和标签style优先级的比较-->

    <div id="tt" style="background-color:red;">111</div>

    <!-- important优先级最大 -->


    <div>
        
    </div>


</body>
</html>