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

来源：互联网发布：pcp弹道软件中文版编辑：程序博客网时间：2024/05/17 06:05

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>

0 0