CSS简介
CSS(Cascading Style Sheets)层叠样式表。
·传统HTML页面排版和显示效果设置方面的问题。
·引入CSS后:Html标记专门用于定义网页的内容,而是用CSS来设置其效果。
CSS分类:
内嵌样式(Inline Style):以属性形式直接在HTML标记中给出,用于设置该标记所定义的信息效果。例如:
<body style ="background-color:#ccffee;">
<p style = "font-size:16px;color:red">第一段</p>
</body>
内部样式表(Internal Style Sheet):在<head>标记中给出,可以同时设置多个标记所定义的信息效果。对当前页面有效,例如:
<html>
<head>
<style type = "text/css">
body{background-color:#ffeecc}
p.mystyle1{font-size:20px;font-color:blue}
p.mystyle2{font-size:40px;font-color:red;text-align:center}
</style>
</head>
<body>
<p class="mystyle1">第一段文字</p>
<p class="mystyle2">第二段文字</p>
</body>
</html>
外部样式表(External Style Sheet):保存在外部文件中,在使用的HTML页面中可以引用,它的文件后缀为.css格式。可以被用到多个HTML页面中。
m1.css代码如下:
body{background-color:blue}
p.style1{font-size:20px;font-color:yellow}
p.style2{font-style:italic;font-size:30px;font-color:red;text-align:center}
03.html代码如下:
<html>
<head>
<link href="m1.css" rel="stylesheet" type="text/css">
</head>
<body>
<p class="style1">第一段</p>
<p class="style2">第二段</p>
</body>
</html>
·样式设置优先级:(从高到低)
内嵌样式表——内部样式表——外部样式表——系统默认样式表
CSS的组成部分:
&m
相关文档:
我最近在模仿博客园,制作一个个人博客,突然发现Footer部分浮动到了Content部分,我在Footer部分已经加了一句“clear:both;”,为什么还会出现这个问题。Footer部分的CSS代码如下: /*页面底部*/
#Footer {width:100%;height:70px;margin:0 auto;clear:both;} /*如果加了clear:both; 此部分就不会浮动了*/ ......
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT=""& ......
在用DIV+CSS排版时,经常要使左右两边栏目自动等高。这里介绍个简单方法~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<m ......
一.文件命名规范
全局样式:global.css;
框架布局:layout.css;
字体样式:font.css;
链接样式:link.css;
打印样式:print.css;
二.常用类/ID命名规范
页 眉:header
内 容:content
容 器:container
页 脚:footer
版 权:copyright
导 航:menu
主导航:mainMenu
子导航:subMenu
......
CSS 基础语法
当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?
一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。
1. 浏览器缺省设置
2. 外部样式表
3. 内部样式表(位于 <head> 标签内部)
4.&nb ......