怎么给网站做logo,app推广在哪里可以接单,网站群建设 公司,网页设计作业1js嵌入网页的方式目录 引言一、css盒模型1. 盒模型概念2. 盒模型案例 二、css编写1. html文件内部编写1.1 标签style属性编写1.2 css选择器关联1.2.1 id选择器1.2.2 class选择器1.2.3 标签选择器1.2.4 css选择器作用域1.2.5 其他选择器1.2.6 各css选择器优先级 2. 单独维护css文件2.1 创建css文… 目录 引言一、css盒模型1. 盒模型概念2. 盒模型案例 二、css编写1. html文件内部编写1.1 标签style属性编写1.2 css选择器关联1.2.1 id选择器1.2.2 class选择器1.2.3 标签选择器1.2.4 css选择器作用域1.2.5 其他选择器1.2.6 各css选择器优先级 2. 单独维护css文件2.1 创建css文件2.2 在html中引入 三、css常见属性需记忆1. 结构类2. 样式类 四、css布局定位1. position定位1.1 属性值描述1.2 案例举例 2. 弹性盒子布局2.1 常规用法2.2 案例举例 总结 引言 本系列教程旨在帮助一些零基础的玩家快速上手前端开发。基于我自学的经验会删减部分使用频率不高的内容并不代表这部分内容不重要只是对于初学者来说没必要一开始就学的面面俱到。我希望可以先通过主干内容带大家入门前端细节技巧性内容可以在后续的开发工作中自行发现并掌握。 在上一篇 【前端开发入门】html快速入门 中你应该可以利用块级元素和行内元素的占位特点完成基础的页面布局。
本篇将介绍css的常用属性及使用场景为html标签添加样式美化页面效果。关于css基础内容请参考MDN–CSS 基础一些css属性的详细介绍和示例也可以在MDN网站上查询。
有关css的编写规范请参考我的另一篇文档【CSS Tricks】深入聊聊前端编写css的方法论 一、css盒模型 还记得 html快速入门 文中介绍的容器概念吗所有的页面元素都是一个容器堆叠在一起形成了文档流。css其实就是对每一个容器进行粉饰美化。我们通常会按照一定规则去美化每一个容器也就是所说的盒模型规则。这是一个重要的概念理解了盒模型将对你编写css样式有很大帮助。 如上图所示一个完整的html页面就像是一个个粉饰好的元素盒子堆叠在一起。
1. 盒模型概念
css盒模型包含以下几个内容从内向外
content内容元素内部主要填写表达的内容。padding内边距元素内容到边框之间的空间。border边框紧贴内边距的四周的线边框。margin外边距边框外部与其他元素的碰撞范围即其他元素要与当前元素边框保持的距离。
2. 盒模型案例
我们可以通过在浏览器页面中按 f12 打开开发者工具更直观的查看元素样式
设置css样式 .box2 {// content 宽高width: 100px;height: 100px;// 内边距padding: 30px;// 边框border: 30px solid #333;// 外边距margin: 30px;// 背景色background: blue;}在开发者工具中点选对应元素在样式一栏中滑动到末尾查看盒模型 二、css编写
1. html文件内部编写
在html文件内部编写css样式可以直接写在标签的style属性中也可以通过css选择器关联指定html标签并将样式统一写在style标签中。
1.1 标签style属性编写
通过标签style属性编写的样式优先级最高
div stylewidth: 100px; height: 100px; background: #333333content/div1.2 css选择器关联
可以将以下各类选择器代码放置在html对应位置去看下效果。
1.2.1 id选择器
元素标签中设置唯一id名表示单独匹配某一个元素。在style中通过 #id名 匹配到对应元素在选择器后的大括号内部编写css样式应用到指定id的元素身上。
style
#box1{width:100px;height:100px;background:red;
}
/stylebodydiv idbox1box/div
/body1.2.2 class选择器
元素标签中设置class名可重复表示匹配这一类的元素。在style中通过 .class名 匹配到对应元素在选择器后的大括号内部编写css样式应用到标记有相同class名的元素身上。class类可以设置多个后设置的class类的属性值会覆盖先设置的class类的相同属性名的属性值。
style
.box{width:100px;height:100px;background:blue;margin: 20px;
}
/stylebodydiv classboxbox1/divdiv classboxbox2/divdiv classboxbox3/div
/body1.2.3 标签选择器
html的标签名同样可以作为选择器匹配到元素和class的匹配范围类似。在style中通过 标签名 匹配到当前作用域下的对应元素在选择器后的大括号内部编写css样式应用到具有相同标签名的元素身上。
style
div{width:100px;height:100px;background:green;margin:20px;
}
/stylebodydivbox1/divdivdiv嵌套的box1/divdiv嵌套的box2/div/div
/body1.2.4 css选择器作用域
如1.2.3示例中div的样式会遍历body中的所有div标签层层渗透直到都赋予相同的样式。如果我想单独为 嵌套的box1 和 嵌套的box2 设置另一种样式其他的div保持全局的div样式该如何处理
一种方案是为两个嵌套的box设置class类在style中为这个类设置另一种样式。另一种方案是为包裹他俩的父元素div设置class类或者id在这个作用域下匹配所有的div。如下示例
style
div{width:100px;height:100px;background:green;
}
.area div {background:yellow;
}
/stylebodydivbox1/divdiv classareadiv嵌套的box1/divdiv嵌套的box2/div/div
/body解释下这里的代码
首先是全局作用域我们直接编写的div样式默认的作用域为body他会匹配到body下所有的div并赋予样式。然后是局部作用域我们通过 .area div 选择器限定了类名为 .area 的标签下作用域的所有div子元素。如果有更深一级的嵌套那就继续使用 去向下匹配作用域。所以整体的渲染过程是先将body下的所有div渲染为宽高各100px背景色为绿色。然后通过 .area div 选择器匹配到的div元素修改背景色为黄色重新覆盖了全局作用域的样式并继续保持宽高100px继承了全局作用域的部分样式。
1.2.5 其他选择器
现在还不是时候不过可以先熟悉一下名字css伪类、css伪元素、标签属性选择器。
1.2.6 各css选择器优先级 因为css样式是可以重复覆盖掉的所以判断css选择优先级的意义是决定哪种类型的选择器所携带的css样式会最终渲染到元素身上。 首先明确一点在标签的style属性中编写css样式优先级最高。
css选择器按照优先级排序分别为id、class、标签名。
当出现了css选择器作用域等复杂情况时可以通过比较选择器的 特定性 去判断。在开发者工具中可以看到id选择器的 特定性 为100标签选择器 特定性 为001.area div 选择器包含了class类选择器和标签选择器他整体的 特定性 为011。id代表特定性第一位class代表特定性第二位标签代表特定性第三位。 由此我们可以整理出规则按照特定性三位数依次作比较
按位对比第一位为1的情况也就是包含id的选择器优先级最高。当第一位相同则对比第二位为1的情况也就是包含class选择器的优先级高。当前两位相同则对比第三位为1的情况也就是包含标签选择器的优先级高。当三位特定性值都相同那么谁编写的位置靠后谁优先级高。相同优先级的选择器后写的样式会覆盖掉先写样式的重复项。
2. 单独维护css文件
单独维护css文件其实就是将html文件中的style内容复制出来放置在独立的css文件中通过引用文件的方式注入到页面的style中去。根据业务模块的需求可以同时创建多个css文件分别独立维护方便管理。
2.1 创建css文件
在html同级目录下创建后缀为 .css的文件如style.css写入内容
div{width:100px;height:100px;background:green;
}
.area div {background:yellow;
}2.2 在html中引入
找到html的 head 标签在 head 标签内部使用 link 标签引入css文件。
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title// link标签引入css文件link relstylesheet href./style.css/headbodydivbox1/divdiv classareadiv嵌套的box1/divdiv嵌套的box2/div/div/body
/html
你同样可以使用import 关键字在style标签中引入css文件但是更推荐使用link方法。所以这里不做过多介绍自行查阅资料了解。 三、css常见属性需记忆 css属性多的数不清我们不可能将其全部记住。我将列举几个必须要记的几个属性其余的在开发过程中百度即可。 css属性按照效果来划分可以大致分为两类结构类和样式类
1. 结构类 表示元素的物理外在表现比如高矮胖瘦、和其他元素距离多少。 width和height用于设置元素的宽高一般取值为数字单位。
.box{// 表示宽度为100像素点。width:100px; // 表示宽度为父元素宽度的20%width:20%;// 表示宽度为整个浏览器视口的宽度的100%仅浏览器页面区域不包含顶部标签页、导航栏、收藏夹等区域。width:100vw;// 表示高度为整个浏览器视口的高度的100%仅浏览器页面区域不包含顶部标签页、导航栏、收藏夹等区域。高度单位只有vh这一个区 别其他和宽度单位一致。height:100vh;// 表示宽度为当前默认字体大小的1.5倍width:1.5rem;
}margin表示外边距。即元素边框外与其他元素的碰撞距离。单位与宽高一致。
.box{// 表示四周边距均为10像素margin:10px;// 第一个值表示上下边距为10像素第二个值表示左右边距为20像素margin:10px 20px;// 第一个值表示上边距为10像素第二个值表示左右边距为20像素第三个值表示下边距为10像素margin:10px 20px 10px;// 四个值的顺序为上、右、下、左边距。顺时针四个边距margin:10px 20px 10px 20px;// 以下四种分别为单独某个方向设置边距。一般推荐使用margin四参数。margin-top: 10px;margin-right: 10px;margin-bottom: 10px;margin-left: 10px;
}padding表示内边距。表示元素内容到边框之间的距离。单位与宽高一致。
.box{// 表示四周内边距均为10像素padding:10px;// 第一个值表示上下内边距为10像素第二个值表示左右内边距为20像素padding:10px 20px;// 第一个值表示上内边距为10像素第二个值表示左右内边距为20像素第三个值表示下内边距为10像素padding:10px 20px 10px;// 四个值的顺序为上、右、下、左内边距。顺时针四个内边距padding:10px 20px 10px 20px;// 以下四种分别为单独某个方向设置内边距。一般推荐使用padding四参数。padding-top: 10px;padding-right: 10px;padding-bottom: 10px;padding-left: 10px;
}border设置元素边框。
.box{// 第一个参数为边框宽度。// 第二各参数为边框线形一般取值为solid实线、dashed虚线。其他取值不推荐可以自行探索。// 第三个参数为边框颜色。颜色值在样式类详解。border: 1px solid #333;// 设置边框四角曲度取值可以为具体像素值也可以为百分比。border-radius: 10px;
}overflow设置了当元素的内容太大超出设置宽高范围时元素容器的表现行为。当值不为visible时可用于形成 BFC
.box{// 默认值如果虽然设置了元素容器宽高但子元素内容过多仍会超出宽高范围overflow:visible;// 子元素内容过多超出元素容器宽高范围时将被裁剪掉。overflow:hidden;// 子元素内容过多超出元素容器宽高范围时将出现侧边滚动条超出部分内容被遮挡通过滚动滚轮查看全部内容。overflow:scroll;// 自动调节子元素内容在元素容器宽高范围内时和visible表现一致。子元素内容过多超出元素容器宽高范围时将出现侧边滚动条超出部分内容被遮挡通过滚动滚轮查看全部内容。overflow:auto;// 将超出部分分为横向和纵向单独控制超出时元素容器的表现当你确认横向或纵向某一方向不会超出时使用。参数与overflow一致。overflow-X: auto;overflow-Y: auto;}2. 样式类 表示元素的涂装一般指各种颜色和阴影效果。 颜色取值一般为HEX#ffffff、RGBrgb(255255255)、HSLhsl(25590%50%)三种形式。 HEX格式中如果每两位数字都相同可以简写例如#11ee00 等价于 #1e0 ; #ffffff 等价于 #fff。
字体样式
.box{// 字体大小每个浏览器都会有默认的字体大小16px和最小字体大小(chrome最小6px)font-size: 16px;// 不填写font-weight属性为默认字体粗细值等价于400bold为加粗字体值等价于700取值范围为1-1000以100为倍数。font-weight: bold;// 字体颜色color: #333333;
}背景色
.box{// 背景色background: #333;// 背景图片背景图微调详情查询MDN网站background: url(./bg.png);
}阴影在线调试页面
.box{/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */box-shadow: 10px 10px 0 10px #333;
}四、css布局定位 UI设计稿一般情况下都不会规规矩矩自左而右、自上而下的排列元素往往都是比较有设计感的到处飞。 在完成了基础的元素外形、涂装的css样式设置后我们需要考虑如何将元素放置在指定位置。
一般情况下我们可以基于 块级元素 和 行内元素 基础的占位特性加上一些margin微调即可完成基础布局。但实际上会经常出现一些特殊状况比如一批元素需要对齐、单独移动一个元素而不想影响其他元素等。这时候单纯的margin就无法便捷的完成目标我们需要一些特殊手段这里只推荐position和弹性盒子布局用的比较多其他可以根据喜好自己研究一下。
1. position定位
针对单独移动某一元素而不想影响其他元素位置的情况一般推荐使用position属性设置定位。默认属性值为static 常用的属性值有relative 、absolute 。
1.1 属性值描述
relative相对定位。设置position为relative时会在原来元素应该占据的位置预留一个尺寸相当的空白区域不影响原有的文档流布局当前元素则悬浮于空白区域正上方。此时该元素获得了额外五个属性top、right、bottom、left、z-index。 top元素相对于原来位置的上边缘的偏移值取值为像素或百分比。正值向下偏移负值向上偏移right元素相对于原来位置的右边缘的偏移值取值为像素或百分比。正值向左偏移负值向右偏移bottom元素相对于原来位置的底边缘的偏移值取值为像素或百分比。正值向上偏移负值向下偏移left元素相对于原来位置的左边缘的偏移值取值为像素或百分比。正值向右偏移负值向左偏移z-index表示元素堆叠层级序号取值整数值越大越靠上想象为一摞纸张值越大越靠上。当没有比他大的值则排在第一张top和bottom不同时出现left和right不同时出现 absolute绝对定位。设置position为absolute时需要确保该元素的父元素设置了position为relative或absolute如果没有的话就继续往父元素的父元素找直到找到一个设置了position为relative或absolute的元素暂时叫相对父元素如果最终没有找到则body为相对父元素。此时该元素脱离文档流即不占据文档流的位置注意relative仍占据文档流位置该元素将单独形成一个图层覆盖在原文档流上方。 同样的该元素也将额外获得五个属性top、right、bottom、left、z-index元素的四边将相对于 相对父元素 的对应四边进行偏移。同时z-index也基于相对父元素的z-index产生不是单纯的叠加。细节问题篇幅原因不展开描述私信交流或后期单独写一篇描述 其他属性自行探索常用的就记住relative和absolute两个就够。
1.2 案例举例 元素垂直水平居中 html部分 div classboxdiv classitem/div/divcss部分 .box {width: 100vw;height: 100vh;position: absolute;}.item {width: 100px;height: 100px;background: red;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}解释下这里的代码box元素设置宽高为视口宽高的100%并设置相对定位。item元素设置宽高100px背景为红色并设置绝对定位item的上边缘相对于box的上边缘移动了box的50%高度左边缘相对于box的左边缘移动了box的50%宽度此时相当于item的左顶点处于box的正中心思考下这里。最后需要用到transfrom变换平移将item分别向左向上平移自身宽高的50%负值那么此时item的正中心就和box的正中心重合完成了元素垂直水平居中。
transform属性会在一些特效样式时常用大多数时间仅会出现在垂直水平居中案例这种情况里。根据喜好在MDN中查询体验其他特性。
2. 弹性盒子布局 弹性盒子布局目前用的最多的布局方式一维空间最好的布局方式。本篇仅介绍常用的属性详细介绍参考弹性盒子布局 弹性盒子布局一般用于对一批元素进行整合排布比如对齐、分隔等操作。
2.1 常规用法
准备一份html素材在本地测试下如下代码。 div classboxdiv classitem item1/divdiv classitem item2/divdiv classitem item3/div/div简化垂直水平居中写法
.box{width:100vw;height: 200px;// 将父元素设置为弹性盒子其子元素将依照弹性盒子规则布局。display: flex;// 默认情况下主轴方向上横向的对齐方式center表示水平居中对齐可选值有flex-start或start居左对齐、flex-end或end居右对齐justify-content: center;// 默认情况下交叉轴纵轴的对齐方式center表示垂直居中对齐可选值有flex-start或start向上对齐、flex-end或end向下对齐align-items: center;
}
.item{width:100px;height:100px;background:red;
}改为纵向轴向
.box{width:200px;height: 100vh;// 将父元素设置为弹性盒子其子元素将依照弹性盒子规则从左至右布局。display: flex;// 改变弹性盒子轴向为纵向子元素将从上至下布局。flex-direction: column;// 主轴方向上纵向的对齐方式center表示垂直居中对齐可选值有flex-start或start居上对齐、flex-end或end居下对齐justify-content: center;// 交叉轴横轴的对齐方式center表示水平居中对齐可选值有flex-start或start向左对齐、flex-end或end向右对齐align-items: center;
}
.item{width:100px;height:100px;background:red;
}设置子元素单独属性
.box{display: flex;// 设置子元素与子元素之间间隔为10像素仅在display值为flex时存在gap属性。gap:10px;
}
.item1{background:red;// 将class名为item1的元素宽度设置为box总宽度减去item2和item3后的剩余宽度。理解为按照比例分配父元素的剩余空间。详细使用方式查询MDNflex:1;// 单独设置item1的交叉轴纵轴对齐方式为向上对齐。可选值有center垂直居中、flex-end或end向下对齐、stretch拉伸item1的高度为父元素的高度align-self: flex-start;
}2.2 案例举例
左中右布局左右各占据300px定宽中间宽度根据窗口变化动态调整。比较经典的页面布局方式
html部分
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /link relstylesheet href./style.css /titleDocument/title/headbody!-- 总容器 --div classcontainer!-- 左侧区域 --div classpanel leftPanel/div!-- 中间区域 --div classpanel centerPanel/div!-- 右侧区域 --div classpanel rightPanel/div/div/body
/html
css部分同级目录下单独创建style.css文件
/* 样式初始化 */
html,
body {width: 100vw;height: 100vh;margin: 0;padding: 0;overflow: hidden;
}/* 总容器样式 */
.container {width: 100%;height: 100%;display: flex;
}/* 面板通用样式 */
.panel {align-self: stretch;width: 300px;
}
/* 左侧面板样式 */
.leftPanel {background: greenyellow;
}/* 中间面板样式 */
.centerPanel {background: pink;flex: 1;
}
/* 右侧面板样式 */
.rightPanel {background: orangered;
}
看下效果 总结
以上我们介绍完了css对于前端初学者来说的基础内容到这里为止你应该可以按照UI设计稿完成大约70%-80%左右的样式编写。虽然仍会有不少特殊样式或者动效无法完成不过那些都是你熟练掌握现有内容后的拓展知识一点点进步就好。
这些内容只是css的一小部分当你逐渐深入前端领域后会有更多的内容需要学习探索。
再接再厉~
