初学者必读:CSS是什么?DIV+CSS又是什么?
很多初学的朋友学完HTML后开始学习CSS,在学习中常常遇到 div+css,但是不知道什么意思。网上很多资料说div就是取代〈table〉的,并且搜索引擎喜欢 div,更容易被搜索引擎收录,反正很多。但到底 div+css(或者div)是什么意思?为什么用它?为什么不用〈table〉呢?这样,我们先科普一下 css 是什么,然后再一起了解下 div+css 是什么。 css 是 Cascading Style Sheets (层叠样式表)的简称,css 语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)。
在学习 css 之前你应该掌握哪些基础知识
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
<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>
请注意,这里将 style 对象的 type 属性设置为"text/css",是允许不支持这类型的浏览器忽略样式表单。
css语法基础
selector {property: value;}
body {color: black;}
body
是指页面主体部分,color
是控制文字颜色的属性,black
是颜色的值,此例的效果是使页面中的文字为黑色。
如果属性的值是多个单词组成,必须在值上加引号,比如字体的名称经常是几个单词的组合:
p {font-family: "sans serif";}
如果需要对一个选择符指定多个属性时,我们使用分号将所有的属性和值分开:
p {text-align: center; color: red;}
为了使你定义的样式表方便阅读,你可以采用分行的书写格式:
p
{ text-align: center;
color: black;
font-family: arial; }
2. 选择符组
你可以把相同属性和值的选择符组合起来书写,用逗号将选择符分开,这样可以减少样式重复定义:
h1, h2, h3, h4, h5, h6 { color: green; }
p, table{ font-size: 9px; }
p { font-size: 9pt; }
table { font-size: 9pt; }
用类选择符你能够把相同的元素分类定义不同的样式,定义类选择符时,在自定类的名称前面加一个点号。假如你想要两个不同的段落,一个段落向右对齐,一个段落居中,你可以先定义两个类:
p.right {text-align: right;}
p.center {text-align: center;}
<p class="right"> 这个段落向右对齐的
</p>
<p class="center">
这个段落是居中排列的
</p>
类选择符还有一种用法,在选择符中省略 HTML 标记名,这样可以把几个不同的元素定义成相同的样式:
.center {text-align: center;}
这样的类可以被应用到任何元素上。下面我们使h1元素(标题1)和p元素(段落)都归为"center"类,这使两个元素的样式都跟随".center"这个类选择符:
<h1 class="center">
这个标题是居中排列的
</h1>
<p class="center">
这个段落也是居中排列的
</p>
4. ID选择符
在HTML页面中ID参数指定了某个单一元素,ID选择符是用来对这个单一元素定义单独的样式。ID选择符的应用和类选择符类似,只要把CLASS换成ID即可。将上例中类用ID替代:
<p id="intro">
这个段落向右对齐
</p>
#
号。和类选择符相同,定义ID选择符的属性也有两种方法。下面这个例子,ID属性将匹配所有id="intro"
的元素:
#intro
{font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent; }
下面这个例子,ID属性只匹配
id="intro"
的段落元素:
p#intro
{font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent; }
可以单独对某种元素包含关系定义的样式表,元素1里包含元素2,这种方式只对在元素1里的元素2定义,对单独的元素1或元素2无定义,例如:
table a
{font-size: 12px;}
6. 样式表的层叠性
层叠性就是继承性,样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上,所有在元素中嵌套的元素都会继承外层元素指定的属性值,有时会把很多层嵌套的样式叠加在一起,除非另外更改。例如在DIV标记中嵌套P标记:
div { color: red; font-size:9pt;}
……
<div>
<p>
这个段落的文字为红色9号字
</p>
</div>
注意:有些情况下内部选择符不继承周围选择符的值,但理论上这些都是特殊的。例如,上边界属性值是不会继承的,直觉上,一个段落不会同文档BODY一样的上边界值。
另外,当样式表继承遇到冲突时,总是以最后定义的样式为准。如果上例中定义了P的颜色:
div { color: red; font-size:9pt;}
p {color: blue;}
……
<div>
<p>
这个段落的文字为蓝色9号字
</p>
</div>
不同的选择符定义相同的元素时,要考虑到不同的选择符之间的优先级。ID选择符,类选择符和HTML标记选择符,因为 ID 选择符是最后加上元素上的,所以优先级最高,其次是类选择符。如果想超越这三者之间的关系,可以用
!important
提升样式表的优先权,例如:
p { color: #FF0000!important; }
.blue { color: #0000FF;}
#id1 { color: #FFFF00;}
!important
申明的HTML标记选择符样式为红色文字。如果去掉 !important
,则依照优先权最高的ID选择符为黄色文字。
7. 注释
你可以在CSS中插入注释来说明你代码的意思,注释有利于你或别人以后编辑和更改代码时理解代码的含义。在浏览器中,注释是不显示的。CSS注释以
/*
开头,以*/
结尾,如下:
/* 定义段落样式表 */
p
{
text-align: center; /* 文本居中排列 */
color: black; /* 文字为黑色 */
font-family: arial; /* 字体为arial */
}
div+css是什么
div是什么
2、在HTML中DIV标签我们用的最多,具有代表性
3、div配合css类,布局出网页
div语法
<div class="divcss5">内容</div>
<div id="divcss5">内容</div>
为什么用div+css取代〈table〉
但是在如今 web 前端逻辑越来越复杂,用户体验要求越来越高的情况下,对这三者的解耦是必须的。此时再用 table 拿来做布局就不太合适了,因为 table 标签的语言根本不是用来做布局的,而是用来传递数据的。而 div+css 是符合解耦这一思想的,div 用来控制布局,css 用来控制样式。好处从小了说是整个页面的代码组织结构更合理,耦合度更低,从大了说是更利于前端开发的深度分工和复杂合作。
1、div+css 相对于 table 更为灵活,用 table 布局,代码臃肿。
2、语义性问题。从语义上来说,table 应该只是表格数据的容器,不应该是布局的工具。
3、样式渲染问题。table 布局要等内容全部加载完毕后才渲染样式,如果用户网速不好,这样用户体验会很差。
DIV+CSS布局该怎么学?基本流程及实例介绍