DIV+CSS页面布局基础知识(一)-XylDll-ChinaUnix博客

七秒钟的记忆xyldll.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

XylDll

博客访问： 446058
博文数量： 63
博客积分： 1175
博客等级：少尉
技术积分： 1204
用户组：普通用户
注册时间： 2012-04-19 11:33

文章分类

全部博文（63）

文章存档

2015年（1）

2014年（3）

2013年（7）

2012年（52）

我的朋友

最近访客

推荐博文

DIV+CSS页面布局基础知识(一)

分类： Html/Css

2014-04-22 15:57:51

【知识篇】
知识一、DIV+CSS叫法

引入的误区

1. 使用table，页面不标准
2. DIV越多越好，DIV的多少决定页面的标准程度

DIV和table的区别

1. table用来存储数据
2. DIV用来架设网页结构

准确叫法

      XHTML+CSS

知识二、 W3C
1. W3C组织
      即World Wide Web Consortium的缩写，中文为万维网联盟，该组织负责网页标准，即W3C标准
2. W3C标准
      包括三个标准：结构标准、表现标准和行为标准，分别对应的语言是xhtml、css和javasrcipt
      静态页面需使用前两种语言，故称为xhtml+css

【基础篇】
基础一、样式分类
css样式分为四类：行内样式、内嵌样式、链接样式、导入样式
1. 行内样式
最直接、最简单，在html中直接加入style=“”
      for example:

2.内嵌样式
写在中的样式，用声明
for example：

点击(此处)折叠或打开

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body{
padding:0px;
margin:0px;
}
p{
color:#fff;
font-family: 微软雅黑;
font-size:12px;
}
</style>
</head>
<body>
<p>web前端攻城狮</p>
</body>
</html>

3. 链接样式
使用频率最高，最实用的方法，在中间加上link
for example：

点击(此处)折叠或打开

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p>web前端攻城狮</p>
</body>
</html>

4. 导入样式
      采用import方式导入样式
四种样式的优先级：行内样式 > 内嵌样式 > 链接样式 > 导入样式

基础二、 CSS选择器
      css选择器分为四种：标签选择器，ID选择器，类选择器，通用选择器
      1.标签选择器
          针对标签定义采用相应的样式
          for example：
              p{
                  font-size:12px;
                  color:#eee;
                }
      2.ID选择器
          每个id在html页面中只能出现一次，类似于身份证，页面中使用id选择器更具有针对性
          for example：
          html中定义id标签：
                <p id="one">web前端攻城狮</p>
      css样式：
         #one{
            font-size:12px;
            color:#eee;
           }
          3. 类选择器
              页面中同种标签可设置为同一个类名，同一类名可出现在多个标签中
                for example：
              html中定义类标签：
                <p class="one">web前端攻城狮</p>
         搜索一下
         css样式：
.one{
            font-size:12px;
            color:#eee;
}
          4. 通用选择器
              即 * 星号，所有的标签都采取的样式
for example：
              *{
                   }
              一般，页面都会先设置如下css样式
                 *{
                      padding:0px;
                      margin:0px;
                   }

该篇到此结束，下篇继续！

阅读(2946) | 评论(0) | 转发(0) |

上一篇：查看Android应用包名package和入口activity名称

下一篇：web前端学习总结（一）

给主人留下些什么吧！~~

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6