CSS初级入门(1)：整体布局声明

2016-02-19 14:44 9 1 收藏

今天图老师小编要向大家分享个CSS初级入门(1)：整体布局声明教程，过程简单易学，相信聪明的你一定能轻松get！

【 tulaoshi.com - Web开发】

1. 基本上，整体声明有两种方法，第一种就是针对一个标签，然后一次设定好几个样式。第二种就是同时对好几个标签设定相同的样式。下面这个例子就是：“针对一个标签，然后一次设定好几个样式”： stype="text/css"

body{font-size:9pt;
font-color:red;
background:white}

/style
你会发现，我们同时声明了：字形大小为 9pt、字形颜色为红色、背景为白色，这3个样式，为了将这三个样式分隔开，我们利用分号“；”来将之隔开，这样才能正常起作用！当然，若是你觉得这样一列一列的写出来很浪费空间，那么你也可以写成一行的形式，如下：

style type="text/css"

body{font-size:9pt;font-color:red;background:white}

/style

　　几个标签设定相同的样式

　　刚刚我们看过一个标签，同时设置几个样式的，实际上，我们也可以把好几个标签同时一起来设定，例如：

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）style type="text/css"

h1,h2,td{font-size:12pt; font-color:red; font-family:宋体}

/style

　　以此例而言，我们同时设定了三组标签h1、h2、td，换言之，凡是被这三个标签包起来的，其文字大小都会变成 12pt、红色字、并且以宋体显示！

来源:http://www.tulaoshi.com/n/20160219/1607779.html

上一篇： Ubuntu无法安装vim怎么办？
下一篇：从基础开始:CSS实用教程（一）

看过《CSS初级入门(1)：整体布局声明》的人还看了以下文章更多>>

第8天:CSS布局入门

标签： Web开发

CSS布局与传统表格(table)布局最大的区别在于：原来的定位都是采用表格，通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距；而现在则采用层(div)来定位，通过层的margin,padding,border等属性来控制版块的间距。 1.定义DIV 分析一个典型的定义div例子： #sample{ MARGIN: 10px 10px 10px 10px;PADDING:20px 10px 10px 20...

DIV＋CSS网页布局入门

标签： Web开发

你正在学习CSS布局吗？是不是还不能完全掌握纯CSS布局？通常有两种情况阻碍你的学习：第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadd...

Div+CSS布局入门教程

标签： Html CSS布局 Div+CSS XHTML

在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS...

CSS初级入门：样式表的外部调用

标签： Web开发

外部引用的优点为什么要把CSS声明做成一个CSS文件呢？这样做的好处有三个。第一个好处，网页处理速度会更快一些，尤其在有很多网页共用一份CSS样式表时更为好用！因为你不用为每一页都写同样的CSS代码，网页自然就会更瘦一些轻快一些。第二个好处是，可以防止一些电脑程度较低的使用者直接看到CSS语法（就是有人不喜欢被看见语法），当然...

Xhtml第8天：CSS布局入门技术

标签： Html CSS布局 Div+CSS XHTML

css布局与传统表格(table)布局最大的区别在于：原来的定位都是采用表格，通过表格的间距或者用无色透明的gif图片来控制文布局版块的间距；而现在则采用层(div)来定位，通过层的margin,padding,border等属性来控制版块的间距 1.定义div 分析一个典型的定义div例子： #sample{ margin: 10px 10px 10px 10px; padding:20px 10px 10px 20px; borde...

查看更多精彩>>