牛腩新闻发布系统（2）——大战CSS

最新推荐文章于 2016-07-03 22:06:36 发布

Reka

最新推荐文章于 2016-07-03 22:06:36 发布

阅读量1.1k

点赞数

分类专栏：我的成长路の计算机 ----------【B/S】牛腩新闻发布系统文章标签： css 经验

本文链接：https://blog.csdn.net/helijie92902/article/details/46664069

版权

我的成长路の计算机同时被 3 个专栏收录

138 篇文章 1 订阅

订阅专栏

----------【B/S】

27 篇文章 0 订阅

订阅专栏

牛腩新闻发布系统

7 篇文章 1 订阅

订阅专栏

背景：学习牛腩新闻发布系统的时候，前面都学习得好好的，突然冒出来了新的东东——CSS，这个是什么？为什么要学习这个东东？有什么用？怎么用？我的脑袋瓜儿里冒出来一大堆问题，不过，不怕，咱也是经历过“大风大浪”的人了，还怕这个？二话不说，搜索也！

一、CSS简介

CSS（Cascading Style Sheets），中文名：层叠样式表，又名级联样式表，是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。（看到没，是一种计算机语言，咱就是跟计算机打交道的，这？还不是小菜！）

能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。（很有优势哦！）

二、基本选择器

1.ID选择器
定义：可以为标有id的HTML元素指定特定的样式
从定义中为HTML元素指定特定的样式可以知道，ID选择器具有特定性，唯一性
在CSS中ID选择器用“#”来区分与其他选择器

2.类选择器
定义：可以为标有类选择器的元素进行统一的样式设置
从定义中可以知道名称相同的类选择器可以多次出现，方便为标识有该类选择器元素进行样式的设置
在CSS选择器中用“.”来区分类选择器

3.标签选择器

一个HTML文档中有许多标签，例如p标签，h1标签等。若要使文档中的所有p标签都使用同一个CSS样式，就应使用标签选择器。

4.优先级：ID选择器>类选择器>标签选择器

三、使用方法

1.外联式Linking（也叫外部样式）：将网页链接到外部样式表。

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong><head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head></strong></span>

2.嵌入式Embedding（也叫内页样式）：在网页上创建嵌入的样式表。

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

<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong><head>
<style type="text/css"> 
body {background-color: red} 
p {margin-left: 20px}</style>
</head></strong></span>

3.内联式Inline（也叫行内样式）：应用内嵌样式到各个网页元素。

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

<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong><p style="color: red; margin-left: 20px"> 
This is a paragraph 
</p></strong></span>

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

四、布局特点

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

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

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

五、心得体会

问题的出现，是不可预知的，我们能做到的就是：遇到问题，解决问题，而且要开开心心地解决！这样在增长见识的同时，还锻炼了自己解决问题的能力，以后遇到问题就迎刃而解了。

遇到的问题越多，我们越开心才对，嘿嘿......