网站 搜索 关键字 description,网站开发常用工具,做网站有什么要求,潍坊潍城姓王的做网站一、引言
在前端开发领域#xff0c;CSS 曾是构建网页视觉效果的关键#xff0c;与 HTML、JavaScript 一起打造精彩的网络世界。但随着组件库的大量涌现#xff0c;我们亲手书写 CSS 样式的情况越来越少#xff0c;CSS 基础知识也逐渐被我们遗忘。 现在#xff0c;这种遗…一、引言
在前端开发领域CSS 曾是构建网页视觉效果的关键与 HTML、JavaScript 一起打造精彩的网络世界。但随着组件库的大量涌现我们亲手书写 CSS 样式的情况越来越少CSS 基础知识也逐渐被我们遗忘。 现在这种遗忘带来了诸如样式调整困难、面对兼容性问题不知所措等麻烦。所以我们有必要回顾 CSS重拾这些重要知识为更好地开发网页助力。
二、基础介绍
2.1 什么是CSS
层叠样式表Cascading Style Sheets缩写为 CSS是一种专门用于描述文档如网页、XML 文档等呈现方式的样式表语言之一XSL、LESS、SASS。
我们知道HTML是负责搭建网页文档的结构地基而CSS就是给这个网页增加色彩与动画的最终变成精美的界面呈现给用户。
2.2 基础语法
CSS 是一门基于规则的语言。是由选择器与样式信息组成选择器 {样式信息}。
h1 {color: red;font-size: 20px;
}上面写了一个简单示例我们可以看到h1就代表选择器的一种标签选择器括号中包裹的就是对应的样式对象信息由属性、属性值组成。上面样式的意思是将界面上h1标签元素文字样式设置为红色文字大小设置为20px
注意具体的选择器类别与样式信息后面会总结挖一个坑后面回填的请大家持续关注。
2.3 注释语法
在 CSS层叠样式表中注释用于在代码中添加说明性文字这些文字不会被浏览器解析为样式规则。CSS 注释有两种常见的语法
多行注释/* 这是 注释内容 */单行注释/* 这是注释内容 */
/* 这是h1标签样式 */
h1 {/* 多行注释color: red;font-size: 20px;*/
}三、引用方式
我们配置的css的样式最终是要作用到网页结构信息上面的而书写的位置也会有不同书写位置不同会导致最终界面呈现的效果不同。主要分为以下三种
外部样式表外联样式内部样式表style标签行内样式表内联样式
3.1 外部样式表外联样式
外部样式表是将 CSS 代码保存在一个独立的.css文件中然后在 HTML 文档中通过link标签或者import规则来引用这个文件。
首先在外部新建.css后缀的文件里面书写css样式。示例
/* style.css 文件样式 */
h1 {color: red;font-size: 20px;
}主界面引用 !-- link标签引入 --!-- link relstylesheet href./css/style.css --style/* 内部样式中使用import引入不推荐用于 HTML 文件可以在.css文件中引入 */import url(./css/style.css);/style3.2 内部样式表style标签
内部样式表是在 HTML 文档的head标签内使用style标签来定义 CSS 规则。这些规则只适用于当前的 HTML 文档。
styleh1 {color: red;font-size: 20px;}
/style3.3 行内样式表内联样式
内联样式是直接在 HTML 元素的style属性中添加 CSS 规则。这种方式将样式直接应用于特定的元素优先级非常高。
h1 stylecolor: red;font-size: 20px;h1标题/h13.4 总结
外联样式 优点实现样式和内容完全分离HTML 文件更简洁专注于结构。多个 HTML 文件可共享提高代码复用性和可维护性修改样式表可影响所有引用页面。缺点需要额外管理样式表文件文件丢失或路径错误会导致样式加载失败开发时可能需同时打开 HTML 和 CSS 文件编辑对简单页面稍复杂但大型项目中优势更明显。 内部样式表 优点能集中管理文档内的样式较内联样式可维护性有所提高。缺点多个 HTML 页面共享样式时需在各页面重复编写会导致代码冗余大型项目中使 HTML 文件臃肿不利于代码组织管理。 内联样式 优点简单直接可快速对个别元素设置样式。缺点可维护性差样式代码在 HTML 元素中若多个元素需相同样式代码会重复不符合样式和内容分离原则。
在实际的网页开发中外部样式表是最常用的引入方式因为它最符合代码的组织和复用原则能够提高开发效率和代码的可维护性。
四、盒模型
CSS 盒模型是网页布局的基础概念它把每个 HTML 元素看作一个矩形盒子。这个盒子由内容content、内边距padding、边框border和外边距margin组成。
div {width: 300px;height: 150px;margin: 20px;padding: 10px;border: 4px solid red;
}如上图蓝色部分就是代表元素内容所占宽高绿色部分代表内容区与边框之前的间距padding黄色部分代表元素边框橙色部分代表元素与其他周围元素之间的间距。
4.1 内容区Content
内容区是盒模型的核心部分用于显示元素包含的文本、图像等实际内容.
在上方例子中width和height属性分别设置了div元素内容区的宽度为 300px 和高度为 150px。
4.2 内边距Padding
内边距是内容区和边框之间的空间。它可以用于在内容和边框之间添加空白使内容不会直接贴在边框上增强了内容的可视性和布局的美观性。
在上面的例子中设置了四个方向上下左右边距都为10px还有其他几种书写方式
padding: 1px 2px 3px 4px;(对应上、右、下、左不同的边距大小)padding: 1px 2px 3px;(对应上、左右、下不同的边距大小)padding: 1px 3px;(对应上下、左右不同的边距大小)或者单独配置边距padding-left、padding-top
4.3 边框Border
边框是围绕在内边距和内容区外部的线条用于划分元素的边界。边框可以有不同的样式、宽度和颜色。
border是一个简写方式border边框宽度 边框样式 边框颜色;
还可以拆开分别配置
border-width: 边框宽度border-style: 边框样式如solid实线、dashed虚线、dotted点线等border-color: 边框颜色(颜色英文或颜色进制rgb)
还可以单独设置某一边的边框border-left、border-left-color…
在上面的例子中只是单纯的设置了四个边为4px的红色实线边框
4.4 外边距Margin
边距是元素边框与相邻元素之间的空间。它用于控制元素之间的间距使页面布局更加合理。
在上面的例子中设置了四个方向上下左右边距都为20px还有其他几种书写方式
margin: 1px 2px 3px 4px;(对应上、右、下、左不同的边距大小)margin: 1px 2px 3px;(对应上、左右、下不同的边距大小)margin: 1px 3px;(对应上下、左右不同的边距大小)或者单独配置边距margin-left、margin-top
4.5 标准盒模型与怪异盒模型
标准盒模型在标准盒模型中元素的宽度width和高度height只包括内容区域的大小不包括内边距和边框。 如上图
元素实际在页面所占宽度宽度300width 内边距10*2padding 边框4*2(border);元素实际在页面所占高度高度150width 内边距10*2padding 边框4*2(border);
怪异盒模型IE 盒模型在怪异盒模型中元素的宽度width和高度height是指内容区、内边距和边框的总和外边距不包括在内。可以通过box - sizing属性来切换盒模型。
div {width: 300px;height: 150px;margin: 20px;padding: 10px;border: 4px solid red;box-sizing: border-box;
}经过上方样式配置后就会将元素更改为怪异盒模型
元素实际在页面所占宽度300宽度width 内边距padding 边框(border);元素实际在页面所占高度150高度width 内边距padding 边框(border);
