您的位置：首页 > Web前端 > CSS

CSS入门

2016-06-19 11:11 369 查看

CSS入门

CSS层叠样式表

  是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

  CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言，相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。

  CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

  使用方法

  有三种方法在站点网页上使用样式表：

  1、外联式Linking

  也叫外部样式：将网页链接到外部样式表。

  当样式需要被应用到很多页面的时候，外部样式表将是理想的

选择，使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

  <head>

  <linkrel="stylesheet" type="text/css"href="mystyle.css">

  </head>

  2、嵌入式Embedding

  也叫内页样式：在网页上创建嵌入的样式表。

  当单个文件需要特别样式时，就可以使用内部样式表，你可以在head 部分通过<style> 标签定义内部样式表。

  <head>

  <styletype="text/css">

  body{background-color: red}

  p{margin-left: 20px}</style>

  </head>

  3、内联式Inline

  也叫行内样式：应用内嵌样式到各个网页元素。

  当特殊的样式需要应用到个别元素时，就可以使用内联样式，使用内联样式的方法是在相关的标签中使用样式属性，样式属性可以包含任何CSS 属性，以下实例显示出如何改变段落的颜色和左外边距。

  <pstyle="color: red; margin-left: 20px">

  Thisis a paragraph

  </p>

  优先级：内联式 > 嵌入式 > 外联式

  使用CSS+div的优点

  1、精简代码，降低重构难度。

  网站使用DIV+CSS布局使代码很是精简，相信大多朋友也都略有所闻，css文件可以在网站的任意一个页面进行调用，而若是使用table表格修改部分页面却是显得很麻烦。要是一个门户网站的话，需手动改很多页面，而且看着那些表格也会感觉很乱也很浪费时间，但是使用css+div布局只需修改css文件中的一个代码即可。

  2、网页访问速度

  使用了DIV+CSS布局的网页与Table布局比较，精简了许多页面代码，那么其浏览访问速度自然得以提升，也从而提升了网站的用户体验度。

  3、SEO优化

  采用div-css布局的网站对于搜索引擎很是友好，因此其避免了Table嵌套层次过多而无法被搜索引擎抓取的问题，而且简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。

  4、浏览器兼容性

  DIV+CSS相比TABLE布局，更容易出现多种浏览器不兼容的问题，主要原因是不同的浏览器对web标准默认值不同。国内主流是ie，firefox及chrome用的较少，在兼容性测试方面，首先需要保证在ie多版本不出现问题，这里涉及到一些方法和技巧，可以针对具体问题在网站查找解决办法。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航