手机访问 | 设为首页 | 加入收藏 | 网站地图

当前位置:电脑中国 > 网络创业 > CSS DIV >

初学者必读:CSS是什么?DIV+CSS又是什么?

2017-05-18 11:27|来源:未知 |作者:dnzg |点击:

很多初学的朋友学完HTML后开始学习CSS,在学习中常常遇到div+css,但是不知道什么意思。网上很多资料说div就是取代〈table〉的,并且搜索引擎喜欢div,更容易被搜索引擎收录,反正很多。但到底div+css(或者div)是什么意思?为什么用它?为什么不用〈table〉呢?这样,我们先科普一下css是什么,然后再一起了解下div+css是什么。 css是Cascading Style Sheets(层叠样式表)的简称,css语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)。

 

div+css

在学习css之前你应该掌握哪些基础知识

1.什么是网页,什么是超文本语言(html)。

2.会使用Dreamweaver等常用的网页编辑器。

Dreamweaver是现今最好的网站编辑工具之一,而Dreamweaver8增加的对css的支持更是你容易得来使用css,用它来给制作网页的css样式表会更简单、更方便。

css是什么

CSS就是Cascading Style Sheets,中文翻译为“层叠样式表”,简称样式表,它是一种制作网页的新技术。

网页设计最初是用HTML标记来定义页面文档及格式,例如标题<h1>、段落<p>、表格<table>、链接<a>等,但这些标记不能满足更多的文档样式需求,为了解决这个问题,在1997年W3C(The World Wide Web Consortium)颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1, 自CSS1的版本之后,又在1998年5月发布了CSS2版本,样式表得到了更多的充实。W3C把DHTML(Dynamic HTML)分为三个部分来实现:脚本语言(包括JavaScript、Vbscript等)、支持动态效果的浏览器(包括Internet Explorer、Netscape Navigator等)和CSS样式表。

怎样使用CSS

 

css层叠样式,层叠指的是上级标签的样式会自动继承到其所有下级标签,如针对<body>设置的标签选择器所设的字体样式会自动应用到<body>下的<p>中,除非<p>重写了相关样式将其覆盖。

css语义化的命名是指用易于理解的名称对html标签附加的class或id命名,如对于页面上方的<div>,可将其id设为header;页面下方的<div>设为footer,可以增强CSS的可维护性。

基本上层叠的意思就是“继承”、“权重”、“覆盖”,通过良好的层级命名更好的实现效果,更少的代码,更多的功能

 

 

 比如下面的一个代码我们这样写:

 

<div class="box">
<div class="h2">这是区块标题</div>
<div class="bd">这是区块内容</div>
<div> 

 

使用CSS样式,通常有3种方法:元素中直接添加样式、从页面头部<style>元素中调用、采用链接的形式调用。其中元素中直接添加样式优先级最高、从页面头部调用次之、采用链接外部CSS样式最低。


你可以在你的HTML文档的<HTML>和<BODY>标记之间插入一个<STYLE>...</STYLE>块对象。 示例如下: 

<html>
<head>
<title>文档标题</title>
<style type="text/css">
<!--
body {font: 10pt "Arial"}
h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon}
h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue}
p {font: 10pt/12pt "Arial"; color: black}
-->
</style>
</head>
<body> 

 

请注意,这里将style对象的type属性设置为"text/css",是允许不支持这类型的浏览器忽略样式表单。 

 

w3c

css语法基础

CSS的定义是由三个部分构成:选择符(selector),属性(properties)和属性的取值(value)。
 
基本格式如下:
selector {property: value}
(选择符 {属性:值})
 
选择符是可以是多种形式,一般是你要定义样式的HTML标记,例如BODY、P、TABLE……,你可以通过此方法定义它的属性和值,属性和值要用冒号隔开:
body {color: black}
选择符body是指页面主体部分,color是控制文字颜色的属性,black是颜色的值,此例的效果是使页面中的文字为黑色。

如果属性的值是多个单词组成,必须在值上加引号,比如字体的名称经常是几个单词的组合:
p {font-family: "sans serif"}
(定义段落字体为sans serif)

如果需要对一个选择符指定多个属性时,我们使用分号将所有的属性和值分开:
p {text-align: center; color: red}
(段落居中排列;并且段落中的文字为红色)

为了使你定义的样式表方便阅读,你可以采用分行的书写格式:
p
{
text-align: center;
color: black;
font-family: arial
}
(段落排列居中,段落中文字为黑色,字体是arial)

2. 选择符组

你可以把相同属性和值的选择符组合起来书写,用逗号将选择符分开,这样可以减少样式重复定义:
h1, h2, h3, h4, h5, h6 { color: green }
(这个组里包括所有的标题元素,每个标题元素的文字都为绿色)
p, table{ font-size: 9pt }
(段落和表格里的文字尺寸为9号字)
 
效果完全等效于:
p { font-size: 9pt }
table { font-size: 9pt }
 
3. 类选择符

用类选择符你能够把相同的元素分类定义不同的样式,定义类选择符时,在自定类的名称前面加一个点号。假如你想要两个不同的段落,一个段落向右对齐,一个段落居中,你可以先定义两个类:
p.right {text-align: right}
p.center {text-align: center}
然后用不在不同的段落里,只要在HTML标记里加入你定义的class参数:
<p class="right"> 这个段落向右对齐的
</p> 
<p class="center">
这个段落是居中排列的
</p>
注意:类的名称可以是任意英文单词或以英文开头与数字的组合,一般以其功能和效果简要命名。

类选择符还有一种用法,在选择符中省略HTML标记名,这样可以把几个不同的元素定义成相同的样式:
.center {text-align: center}
(定义.center的类选择符为文字居中排列)

这样的类可以被应用到任何元素上。下面我们使h1元素(标题1)和p元素(段落)都归为“center”类,这使两个元素的样式都跟随“.center”这个类选择符:
(责任编辑:dnzg)