DIV+CSS

最新推荐文章于 2021-01-30 01:09:53 发布

DH520HW520

最新推荐文章于 2021-01-30 01:09:53 发布

阅读量194

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/DH520HW520/article/details/88753578

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一，为什么要使用DIV+CSS

DIV+CSS布局：（DIV是一个空的标签，没有什么效果）

代码：比较简洁

页面优化：有利于搜索引擎的搜索

打开速度：载入一点就显示一点，载入速度块

重构页面：内容样式相分离，当我们重构页面布局时（如：更换皮肤时），只会针对div元素重新定义其具体位置，样式就行了

兼容性：不太好

Table布局：（布局时需要加Tr,Td相互配合，不写的话布局不了，所以直接使用div布局最好，不需要繁琐的加 tr , td ）

代码：很繁琐，重复太多

页面优化：不利于搜索引擎的搜索

打开速度：只有在表格体内的内容全部载入完后，才一次性显示该系统，所以打开速度非常慢（如果在网速非常卡的时候，需要很长的时间才能显示出来，在使用div的时候，无论网速是否卡顿，网页都会加载一点显示一点，所以加载速度块）

重构页面：table基础上进行改版，几乎必须改变所有内容注入渠道，太过于麻烦，div就比较简单

兼容性：好，（但是现在随着浏览器的进步，兼容性已经不态重要）

注：所以主要使用div+css来避免大容量表格的出现，在一些细节处理上，有时候用表格div来的简单奏效，比如格式数据。一些成熟的大网站都是如此。

二，分区标签

使用分区标签不会对内容造成任何修饰，利于网页内容的修饰

标签名：<div></div>

用法：区域标签，容器标签，用来作为多种HTML标签的组合容器，对该区域进行操作和设置，就可以完成对区域块中元素的操作和设置。《注意：不能嵌套在<p></p>段落标签中》

标签名：<span></span>

用法：片段，文字，图片等内容的容器标签。

文本级元素，默认不会占整行，一行可以显示多个span.

三，CSS基础知识介绍

1，css时层叠样式表，即多重样式定义被层叠在一起成为一个整体，在页面设置中是标准的布局语言，用来控制怨怒苏的尺寸，颜色和排版。

2，用来将“页面结构代码”和“网页格式风格代码”分离开，从而使页面设计者可以对页面的布局进行更多的控制。

HTML负责结构，CSS负责样式，它俩地分开来写，即内容样式行为相分离，行为：JS交互

内容样式行为相分离，将他们分开来写的好处是：便于代码的优化

3.1css基本语法（选择器）

选择器的分类：

html元素选择器：（HTML标签）写上那个标签，就选中页面中所有的对应的标签

class类选择器：需要加上class，给对应的class命名，之后选择不同的class类的名字，进行设置（选中的名字前加上因为的句号《 . 》）

" * "通用选择器：找到页面中的所有元素

" 逗号 ”群组选择器：用逗号分隔，将所需要的元素（标签）用逗号分割包括类选择器和id选择器都可以连接

" 空格 "后代选择器：空格标签后代选择器，将父级元素加上，空格之后加上子代的元素，子代的所有元素都会被找到

" 大于号 "直接子代选择器：父级元素>子级元素，只选择父级下面的子级元素，子级以下的元素不选择

属性选择器：根据标签上的属性来设定，标签属性也可以自行设定，除了特殊字符以外（字符），属性如果有两个以上选择是需要加上 [ ].

兄弟选择器：+号，代表相邻的兄弟

~ 波浪线，代表所有的兄弟

总结：选择器总共有九类选择器

id选择器，class类选择器，ele元素选择器，*通用选择器，“空格”子代选择器，“逗号”群组选择器，“大于号”直接子代选择器，属性选择器，兄弟选择器

CSS的继承：只要是修饰字体的（颜色，大小，字体，样式等）都会被继承。

有些属性也是不能被继承：border边框，padding填充，margin边框粗细

3.2，CSS的引入方式

第一：内联样式，直接把CSS代码用style属性添加到开始标签中

<body>
    <h1 style="color:red">这是我们的内联样式</h1>
</body>

第二：内部样式，直接把代码添加到头部head标签的style标签中

<head>#style标签必须放在head标签内，网页读取时有优先级，先让网页读取head头部的程序
    <style type='text/css'> #type:指定type类型，引入的是css文件
         h2{
            background:green;
        }
    </style>
</head>

<body>
    <h2>内部引入的css样式，内部样式</h2>
</body>

第三：外部连接样式，需要建立一个css文件夹，在文件夹内添加style.css文件

#style.css文件夹内容
h3{
   background:black;
}

<head>
    <link rel="stylesheet" type='text/css' href='css/style.css' />
#link是HTML的标签，可以引入css,rel是一个固定语法修饰网页属于css，type：指定type类型，引入的是css文件

</head>

<body>
    <h3>这是link引入的Css样式，外部样式</h3>
</body>

第四：外联样式

#s1.css文件内容

body{
    background:salmon;
}


<head>
    <style>
        @import "css/s1.css"; #css引入外联的样式，css3的新属性
    </style>
</head>

总结：在开始标签内没有style引入的样式，都得放在head标签内

四种引入方式：1内部，2内联，3外部，4外联

注释：/* */ 有利于自己或他人在修改代码时理解代码得含义

3.4，css的单位和值

颜色的命名方式：数值，百分百，16进制，英文

 <style>
     h1{
        color:red;
    }
     h2{
        color:#223355;
    }
     h3{
        color:rgb(200,50,1);/*范围在0~255，还可以使用百分比*/
    }
     h4{
        color:red;
    }
</style>

长度单位：

px：像素，1像素就是屏幕上的一个小方格，由于显示器不同，方格也是有差异的。

em：1em就是当前字体的大小，如果当前字体为16px，那么1em就是16px，2em，就是32px，依次加倍。

<style>
    div{
         width:100px;
         height:100px;
         border:1px solid #3b3f54;
         font-size:24px;/*像素*/
    }
     div span{/*根据父元素的像素来加倍像素，父元素是12，span的像素就为24，依次加倍*/
          font-size: 2em;
    }

</style>

DH520HW520

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DIV+CSS

一，为什么要使用DIV+CSSDIV+CSS布局：（DIV是一个空的标签，没有什么效果）代码：比较简洁页面优化：有利于搜索引擎的搜索打开速度：载入一点就显示一点，载入速度块重构页面：内容样式相分离，当我们重构页面布局时（如：更换皮肤时），只会针对div元素重新定义其具体位置，样式就行了兼容性：不太好Table布局：（布局时需要加Tr,Td相互配合，不写的话布局不了...
复制链接

扫一扫