文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

DIV+CSS布局的知识点有哪些

2024-04-02 19:55

关注

这篇文章主要介绍了DIV+CSS布局的知识点有哪些的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇DIV+CSS布局的知识点有哪些文章都会有所收获,下面我们一起来看看吧。

div+css网页标准布局

DIV全称 division意为“区块、分割”,DIV标签是一个无意义的容器标签,用于将页面划分出不同的区域。通过DIV将复杂的页面进行细分块,可以将问题细分一个一个解决,所以通过DIV将页面分块是一个关键的工作,也是决定最终效果与质量的前提。

css

CSS (Cascading Style Sheet),中文翻译为层叠样式表,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

div承载的是内容,而css承载的是样式

DIV+CSS布局的知识点有哪些

干货:我把前端高级工程师DIV+CSS课件给借来了

div+css缺点

1.使用相对复杂

相对html中的table布局来说,divcss布局相对要复杂些,需要掌握的知识更多些

2.CSS设计的网站浏览器兼容性问题比较突出

各个浏览器对CSS的支持略有不同,但这些细小的不同也会使网站在各个浏览器中有较大的显示差异,甚至是面目全非

为什么要使用div+css

1.div+css是web标准,顺应潮流

2.弥补html标签的功能缺陷。

3.加快页面加载的速度,降低流量费用。

4.对搜索引擎更加友好,更有利于收录和抓取您的页面。

5.使页面的内容和表现分离,便于维护和管理,节省大量的人力和成本。

使用css控制页面样式的方式

行内样式

<div style="属性1:值1;属性2:值2;"></div>

嵌入样式

<style type="text/css">

选择器{属性1:值1;属性2:值2;}

</style>

外部样式

<link rel="stylesheet" type="text/css" href="url">

导入样式

@import url(外部样式表位置);

优先级别:

行内样式表>其他的样式表

其他的样式表,优先级一样,按照导入的顺序来确定他们是否起作用。

css选择器

当我们定义一条样式规则时候,这条样式规则会作用于网页当中的某些元素,而我们的规定的这些元素的规则就叫做选择器

.id选择器

.类选择器

.标签选择器

.交叉选择器

.群组选择器

.后代选择器 (包含选择器 )-父级和子级用空格隔开

.通用选择器:*{}

css选择器

伪类选择器

同一个html元素在不同状态下的不同样式

a:visited {color: #00FF00}

a:hover {color: #FF00FF}

css的继承性和叠加性

继承性

后代元素会继承前辈元素的一些文字属性和样式

叠加性

同一个元素,被多个样式规则指定。

因为css的继承性和叠加性,就有了css优先级的概念

选择器的优先级

DIV+CSS布局的知识点有哪些

干货:我把前端高级工程师DIV+CSS课件给借来了

css注释

注释

任何语言都有注释,当然CSS也不例外

CSS的注释为

块元素和行内元素

我们已经学习了很多的HTML标签,不同的标签有不同的特性,比如从文档流的角度区分,那么标签元素分为块标签与行标签

块标签即标签元素是一个块,即有宽、高属性,同时块标签会独占一行,比如说H1~H6、P、li等标签都是块标签,当然也包括我们即将学习的DIV标签

行标签正好与块标签意义相反,行标签不具有宽、高特性,mrgin属性的值,只有左右没有上下。也不会占一行,所以我们可以利用行标签对文字进行区块指定不同的CSS样式达到不同的效果,行标签也很多,如em、span标签等

关于“DIV+CSS布局的知识点有哪些”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“DIV+CSS布局的知识点有哪些”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯