附近的网站电脑培训班,高唐网站,自己建网站流程,永久免费影视建站程序css概述
CSS#xff08;Cascading Style Sheets#xff0c;层叠样式表#xff09; 是用于控制网页样式和布局的一种样式表语言。用于描述网页的样式和布局#xff0c;包括字体、颜色、大小、间距、边框等方面。
前端三#x1f5e1;客#xff1a;HTML,CSS,JavaScriptCascading Style Sheets层叠样式表 是用于控制网页样式和布局的一种样式表语言。用于描述网页的样式和布局包括字体、颜色、大小、间距、边框等方面。
前端三客HTML,CSS,JavaScript组成了我们看到的页面CSS时其中不可或缺的一环如果没有它页面也就会像数据 一样一行一行展现在我们面前正是因为CSS强大的修饰能力让我们看到了五颜六色的页面。
css的发展史
随着技术的不断发展CSS 也不断更新迭代目前主要有三个主要版本CSS1、CSS2 和 CSS3。
CSS1 是最早的版本于 1996 年推出引入了基本的样式控制功能如文本样式、颜色和背景等当下已基本废弃。
CSS2 在 1998 年发布增加了更多的样式属性和布局控制功能如浮动和定位等。
而 CSS3 是最新的版本于 2011 年开始逐步推出引入了更多的新特性如动画、过渡效果、阴影、圆角等以及对响应式布局和移动端优化的支持。
css的引入规则
三种引入方式
css的修饰这么强大那么在代码中我们该如何使用它呢。它提供了三种使用方式行内式知道即可不推荐使用内嵌式外联式。
行内式
行内式顾名思义就是写在行内的样式。在需要使用css修饰的标签上通过style属性添加样式,
样式和样式之间通过 ; 隔开。
行内式的缺点
没有完全脱离HTML标签css样式让标签结构繁重不利于HTML结构的解读一个内联式的css代码只能给一个标签用复用性差多个相同时会增加代码量影响加载速度。
div style width300px
我是盒子
/div
内联式
除了行内式内联式也是写在html页面中的它相较于行内式更加方便它写在head标签内部写style标签,style标签写在title标签后面 。在style标签中通过class名和id这些选择器完成对页面的渲染 内嵌式优点 实现了结构与样式的初步分离(css只负责样式html负责结构)多个标签可利用一段代码设置相同的样式节省代码量。 内嵌式缺点 结构和样式并没有完全分离代码仍然写在HTML文件头部css只能给一个HTML文件使用不能被多个HTML文件同时利用。在HTML中如果css代码太多会造成文件头重脚轻。 head
style
.a {
width 300px
}
样式写在这里
/style
head
外联式
由于发展越来越快页面样式越来越复杂css样式也越来越多外联式也营运而生。写在独立的.css文件中的样式。通过link标签引入页面 中完成渲染。
外联样式表的两种导入方式
1通过link标签引入
2在style标签中通过import url(路径)语句进行引用
为什么使用link引入不使用import引入 导入式和外联式作用基本相同但是导入式在浏览器中加载时会在HTML结构加载完毕后再进行编译网速比较慢的时候会导致网页出现没有css样式的效果给用户的体验不好。实际工作中较少用导入式推荐使用外联式样式表。
行内式内嵌式 外联式的优先级
这三个引用方式的优先级为行内式 内联式 外联式
css的语法规则
1css中的样式键值对为 属性名属性值的形式
2属性值为字符串时要用包裹
3属性和属性之间要用;连接
4css属性对空格缩进不敏感
css的注释语法
css的注释语法为/* 注释 内容*/
快捷键ctrl/
style
/*注释 内容*/
/style
