网站搭建环境,网站建设大作业论文,百度个人网站申请,用手机搭建自己的网站概述
Web 兴起之后#xff0c;关于CSS的介绍和学习资料已经铺天盖地。 本文不涉及具体的CSS语法之类的#xff0c;而是希望从初学者的角度#xff0c;让没有接触或很少接触CSS的人能快速的了解 CSS 到底是什么以及如何使用。
什么是 CSS
了解一个概念#xff0c;首先看到…概述
Web 兴起之后关于CSS的介绍和学习资料已经铺天盖地。 本文不涉及具体的CSS语法之类的而是希望从初学者的角度让没有接触或很少接触CSS的人能快速的了解 CSS 到底是什么以及如何使用。
什么是 CSS
了解一个概念首先看到的就是它的名字而往往被忽略的也是它的名字。 CSS (cascading style sheets)可以翻译成中文 层叠样式表 。从名字可以看出
层叠说明 样式可以叠加所以会有优先级样式表说明CSS是描述样式的而且只是个 表 不是程序语言所以后来随着 CSS 的应用越来越多才会有 Sass 和 Less 这些扩充 CSS 语法的语言出来
CSS 的作用
CSS 的作用就是样式其实 Web 只用 HTML也可以做出来只是随着机器和浏览器性能的提升人们对网页的美观和易用性要求越来越高CSS 的重要性才逐渐凸显。 CSS 我觉得有2个主要的作用
可以将 Web 的样式统一管理便于修改类似于程序语言中的变量或者配置文件将网页内容和样式分离开让灵活呈现内容成为可能
注意 HTML 才是网页的实际内容CSS 只是控制HTML元素的如何显示显示与否。
CSS for 布局
CSS 在布局上用的最多就是因为了有了 CSS才会有所谓的 div css 布局方式以前用 HTML 都是 table 布局。
初步了解 div css 的布局我觉得了解3点就够了框模型定位和浮动。
框模型
每个div对于css来说都是一个 框 。每个框由内到外由4部分组成 content padding border margin div 的长和框由这4部分的长之和和宽之和组成 示例
!doctype html
html langenheadmeta charsetUTF-8/titleCSS Sample/titlelink hrefindex.css relstylesheet//headbodydivContent/div/body
/htmlbody {background-color: #FAEBD7;
}div {width: 100px;height: 100px;padding: 30px;border: 10px solid blue;margin: 10px;background-color: red;text-align: center;
}
例子很简单但是可以看出
从外到内 依次是 margin, border, padding, contentdiv 的 width 和 height 只是 content 的大小
定位
理解了 框模型之后定位也很简单其实就是将一个个框定位在页面上。 定位分为绝对定位和相对定位。
绝对定位
就是在浏览器上的绝对位置通过 top 和 left 属性设置相对于浏览器左上角的距离
!doctype html
html langen
head
meta charsetUTF-8/
titleCSS Sample/title
link hrefindex.css relstylesheet/
/head
body
div iddiv1Content1/div
div iddiv2Content2/div
/body
/htmlbody {background-color: #FAEBD7;
}div {width: 100px;height: 100px;padding: 30px;border: 10px solid blue;margin: 10px;background-color: red;text-align: center;position: absolute;
}#div1 {top: 100px;left: 100px;
}#div2 {top: 200px;left: 200px;
}
绝对定位明确但不灵活除非屏幕大小能固定否则需要多套css。设置不好会造成元素的重叠。 绝对定位中有个很关键的设置是 position: absolute
相对定位
相对定位中每个 div 的 top 和 left 不再是相对浏览器的左上角了。而是相对剩余位置的左上角。 同样是上面的例子把 position: absolute 换成 position: relative 可以发现2个div 不再重叠了。
浮动
div 默认是 inline的也就是每个 div 占据了一行。 布局时如果希望多个div排列在一行那么就会用到浮动或者用以前的 table方式 设置 div 浮动属性之后就可以用div布局出各种结构。
下面以常见的管理系统为例做一个简单的 div css 布局
!doctype html
html langenheadmeta charsetUTF-8/titleCSS Sample/titlelink hrefindex.css relstylesheet//headbodydiv idheadhead/divdiv idmiddlediv idnavnav/divdiv idcontentcontent/div/divdiv idfootfoot/div/body
/htmlbody {background-color: #FAEBD7;height: 100%;margin: 0px;padding: 0px;
}div {border: 1px solid black;text-align: center;
}#head {height: 50px;width: 100%;
}#middle {width: 100%;top: 50px;bottom: 100px;left: 0px;position: absolute;
}#nav {float: left;width: 200px;height: 100%;
}#content {height: 100%;overflow: hidden;
}#foot {height: 100px;width: 100%;bottom: 0px;left: 0px;position: absolute;
}
上面的示例中headfoot 高度固定nav 宽度固定。其他都是自适应的可以通过调整浏览器窗口的大小看到效果。
总结
CSS 布局很简单如果还有其他的交互动作可以通过js来实现比如导航和内容的联动。 现在已经基本没有人会用 table 的布局方式了因为 table 本来只展现数据的一种方式rowcell 的方式也不适合组件化。
