共有回帖数 0 个
-
引用百科一段话
DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，div+css 是一种网页的布局方法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离。XHTML是The Extensible HyperText Markup Language（可扩展超文本标识语言）的缩写。XHTML基于可扩展标记语言（XML），是一种在HTML 基础上优化和改进的的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。
以前都是table布局。。现在已经基本不用了（table只用来显示数据）
div中文里是区域的意思，css则是层叠样式表的意思，可见核心是布局，而不是样式
在学习DIV+CSS之前，一定要熟悉HTML，DIV+CSS要在HTML的基础上学习
好了，现在是用什么工具，一般用记事本就可以了 也就是记事本+浏览器就OK，服务器都不需要，也可以用dreamweaver cs5，这个有提示，帮助文档最好下个中文版的CSS样式表手册，这样就齐活啦
首先推荐一个学习web 的网站：http://w3school.com.cn 里面可以学到html，js，css等脚本语言
下面开始学，首先熟悉下html的基本结构，创建一个html文件test.html
html
head
title这是HTML基本结构/title
head
body
hello!
/body
/html
当然，你直接在html文件直接输入hello也能正常显示，但这不符合标准
下面认识下div，其实可以把他看作一个容器，或者一个盒子，他是专门盛放内容的
html
head
titleDIV认识/title
head
body
div这是一个div/div
/body
/html
但是你在网页上是看不到这个div的，因为他还是透明的
我们需要给他样式让他显示，首先让他的边框显示，宽高度100px，背景色为红色
html
head
titleDIV认识/title
head
body
div style="border:solid 1px;width:100px;height:100px;background:red"这是一个div/div
/body
/html
每一个html标签都有style属性，div当然也不例外
border:solid 1px border表示css边框属性 solid 1px 是它的两个值 注意要空格
solid 表示边框实现显示 1px表示边框宽度为1像素
什么是像素 看这里http://baike.baidu.com/view/575.htm
width:100px;height:100px;是设置div的宽度和高度 注意每个属性给值用: 属性之间隔开用;
background:red 背景设置红色
如上代码在浏览器显示如下
还得提一下，浏览器最好用IE8 谷歌浏览器，火狐浏览器，360的也可以
因为他们支持css标准还算兼容，别的浏览器就说不准了，你看的结果可能不一样
css浏览器兼容日后再说
引入css样式除了上面一种，还有两种
一种是外部样式引入，特别推荐这种，一种是内部样式
外部样式引入需要在head标签里加
link rel="stylesheet" type="text/css" href="mystyle.css" /
另外还的在html文件相同目录下创建mystyle.css文件
内部样式是直接在head写入，由于贴子特殊性，本贴全部用内部样式，这样看的舒服点，但在实际中最好用外部样式引入
这是内部样式
html
head
style type="text/css"
div{
border:solid 1px;
width:100px;
height:100px;
background:red
}
/style head
body
div这是一个div/div
/body
/html
这比之前要规范多了，body里也看的简单多了，要多多用这种样式与内容分离模式
如果是这种
html
head
style type="text/css"
div{
border:solid 1px;
width:100px;
height:100px;
background:red
}
/style head
body
div style="border:solid 1px;width:200px;height:200px;background:green"这是一个div/div
/body
/html
下面介绍css里的选择器
啥为选择器？看下面就明白
html
head
style type="text/css"
div{
border:solid 1px;
width:100px;
height:100px;
background:red
}
/style head
body
div这是一个div/div
/body
/html
其中大括号前的div就是html标签选择器，意思就是说html里所有div标签都采用此样式
html
head
style type="text/css"
div{
border:solid 1px;
width:100px;
height:100px;
background:red
}
/style head
body
div这是一个div/div
div/div
div/div
div/div
/body
/html
这里多加几个div你会发现都是同一样式
这种标签选择器只能是html标签才能生效
下面介绍ID选择器
html
head
style type="text/css"
#a{
border:solid 1px;
width:100px;
height:100px;
background:red
}
/style head
body
div id="a"这是一个div/div
/body
/html
这玩意一看就明白，用id选择器前面加#
然后是类选择器
html
head
style type="text/css"
.a{
border:solid 1px;
width:100px;
height:100px;
background:red
}
/style head
body
div class="a"这是一个div/div
/body
/html
也是一看就明白 类选择器前面加.
下面说说它们的区别
id顾名思义就是唯一标识，一个标签只能用一次，他的优先级要比类选择器要高
而类选择器在一个标签里可以用多个
html
head
style type="text/css"
#a{
border:solid 1px;
width:100px;
height:100px;
background:red
}
/style head
body
div id="a"这是一个div/div
div id="a"这是一个div/div
/body
/html
和
html
head
style type="text/css"
.a{
border:solid 1px;
width:100px;
height:100px;
background:red
}
/style head
body
div class="a"这是一个div/div
div class="a"这是一个div/div
/body
/html
是一样的
另外说一句，css样式块，也就是这个
.a{
border:solid 1px;
width:100px;
height:100px;
background:red
}
最后一个可以省略分号，但最好加上
html
head
style type="text/css"
#a{
background:red
}
.b{
border:solid 1px;
width:100px;
height:100px;
background:green;
}
/style head
body
div id="a" class="b"这是一个div/div
/body
/html
由于id选择器优先级高，它会采用id选择器的背景颜色
优先级比较
id选择器》类选择器》标签选择器
但是类选择器可以在一个标签使用多个，这是id选择器做不到的
html
head
style type="text/css"
.a{
width:100px;
height:100px;
}
.b{
border:solid 1px;
background:red;
}
/style head
body
div class="a b" 这是一个div/div
/body
/html
class="a b" 注意要空格
div class="a" class="b" 这是一个div/div 这样是无效的
如果两个类选择器内容冲突怎么办？
html
head
style type="text/css"
.a{
width:100px;
height:100px;
border:solid 1px;
background:red;
}
.b{
width:100px;
height:100px;
border:solid 1px;
background:green;
}
/style head
body
div class="a b" 这是一个div/div
/body
/html
注意就背景颜色不一样
它会采用样式表里最靠后的，也就是谁在谁后面就采用那个，答案是绿色
跟这个class="a b" 前后关系无关
下面介绍组合选择器
组合选择器就是相同的属性都放在一起
例如
h1标题/h1
h2标题/h1
h3标题/h1
h4标题/h1
h5标题/h1
我要让这5种标题的文字都变成红色，显然一个个定义就太麻烦了
我们可以这样
html
head
style type="text/css"
h1,h2,h3,h4,h5{
color:red
}
/style head
body
h1标题/h1
h2标题/h1
h3标题/h1
h4标题/h1
h5标题/h1
/body
/html
当然也可以id选择器，类选择器，标签选择器一起组合
,a,#b,div{
color:red
}
注意都要用逗号隔开
如果没用逗号隔开，就是我们下面要说的父子选择器了
div id="a"
h1标题/h1
h1标题/h1
h1标题/h1
h1标题/h1
h1标题/h1
div
假如要让div里的hi标签都成红色
有很多办法，一种用标签选择器，但是会让页面上所有的H1标签都成红色，不好
也可以用类标签，但是每个h1标签里都要class一下 麻烦
我们可以这样
html
head
style type="text/css"
#a h1{
color:red
}
/style head
body
div id="a"
h1标题/h1
h1标题/h1
h1标题/h1
h1标题/h1
h1标题/h1
div
/body
/html
这样就ok了
如果是这样
div id="a"
ah1标题/h1/a
ah1标题/h1/a
div
这样就ok
html
head
style type="text/css"
#a a h1{
color:red
}
/style head
body
div id="a"
ah1标题/h1/a
ah1标题/h1/a
div
/body
/html
很简单吧，其实父选择可以控制它下面的任何标签或类或id选择器，也就是孙子或重孙子
所以这样也是可以的
html
head
style type="text/css"
#a h1{
color:red
}
/style head
body
div id="a"
ah1标题/h1/a
ah1标题/h1/a
div
/body
/html
但建议最好不要这样。因为层次不清楚的话很容易搞晕
另外一种属性选择器，不是很常用
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html
head
style type="text/css"
[title]{
color:red;
}
/style head
body
div id="a"
a title="a"h1标题/h1/a
a title="b"h1标题/h1/a
div
/body
/html
必训得加
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
文档说明才有用
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html
head
style type="text/css"
[title=a]{
color:red;
}
/style head
body
div id="a"
a title="a"h1标题/h1/a
a title="b"h1标题/h1/a
div
/body
/html
只对等于a的有效
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：input[type="text"]
{ width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; }
input[type="button"] { width:120px; margin-left:35px; display:block; font-family: Verdana, Arial; }
但其实也不是常用，不做必训掌握内容
下面是介绍相邻选择器
这可能很难理解
!DOCTYPE HTML
html
head
style type="text/css"
h1 + p {margin-top:50px;} /style head
body
h1标题/h1
p我离上面标题50px/p
p不变/p
p不变/p
/body
/html
这其实是针对第一个p的样式，margin-top:50px表示外边距50px，以后学到
还有一种子元素选择器，也比较难理解
先看下面
!DOCTYPE HTML
html
head
style type="text/css"
p a {color:red;} /style head
body
p你a好/a吗/p
p你spana好/a/span吗/p
/body
/html
这种很熟悉啦，父子选择器，我说过父亲可以控制任意下面的子元素，所以两个好都变红色
如果我只希望a是p的子元素，另外一个a是span的子元素,就该这样
!DOCTYPE HTML
html
head
style type="text/css"
pa {color:red;} /style head
body
p你a好/a吗/p
p你spana好/a/span吗/p
/body
/html
这两种选择器都得加!DOCTYPE HTML（当然不是只有这个），否则无效
这两种选择器很灵活，作为高手进阶吧，初学还是把其他选择器基础打牢固
楼主 2016-05-06 17:02 回复
Copyright © 2010~2015 直线网 版权所有,All Rights Reserved.沪ICP备10039589号
意见反馈 |
关于直线 |
版权声明 |
会员须知
