漂亮的页面从哪里来？-CSS

浏览数：26 / 时间：2015年06月09日

漂亮的页面从哪里来，源于CSS样式的巧妙配置!

CSS特点：实现网页内容与样式的分离

  1. 通过选择器，选择出Html 中被选择器中标记的内容，使这些内容按照CSS中的样式显示
  2. 网页内容如何应用CSS样式
    1. 行内样式
    1. 内嵌样式
    1. 引入方法：html文件盒css文件成功分离
      1. 链接式：客户端浏览你的网页时先将外部的CSS文件加载到网页当中，然后再进行编译显示，所以这种情况下显示出来的网页跟我们预期的效果一样
      1. 导入式：客户端在浏览网页时是先将html的结构呈现出来，再把外部的CSS文件加载到网页当中，当然最终的效果也是跟前者是一样的，只是当网速较慢时会出现先显示没有CSS统一布局时的html网页
        1. 优缺点比较：导入样式可以避免过多页面指向一个css文件。当网站中使用同一个CSS文件的页面不是非常多时，这两种方式在效果方面几乎是没有不同的，但网站的页面数达到一定程度时（比如新浪等门户），如果采用链接的方式可能就会使得由于多个页面调用同一个CSS文件而造成速度下降，但是一般页面能达到这种程度的网站也会有资本用最好的硬盘，所以这方面的因素也不用怎么担心。
  1. 基本的CSS选择器
    1. 标记选择器
      1. <h1></h1>
    1. 类别选择器
      1. Class
    1. ID选择器
      1. ID
    1. 选择器的优先：ID选择器>类选择器>HTML标记选择器

 

  1. 复合选择器
    1. 交集选择器
    2. 并集选择器
    3. 后代选择器

 

  1. 盒子模型
    1. margin：外边距
    2. Border: 边框
    3. padding：内边距
      1. 分别有left,right,bottom,top四个属性
      2. 设置四个属性值时：

 

 

  1. 盒子的定位
    1. static：默认的布局方式（该盒子按照标准流包括浮动方式进行布局）
    1. relative：相对定位，使盒子相对于它在原来的标准位置偏移指定的距离。其它的盒子仍以标准流对待它
    1. absolute：绝对定位，盒子的位置以他的包含框为基准进行偏移。其它盒子的定位，就好像此盒子不存在一样
    2. Fixed:以浏览器窗口为基准进行定位

CSS中还有许多我们要学的，需要在今后不断的深入。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： 浏览器 标签 布局 浏览器 标签 布局

相关文章

随机文章

您可能还喜欢

您可能还喜欢