CSS+DIV笔记
第一章html 格式
<html> #html页面的开始
<head> #html页面头部开始
<title>linux开源社区</title> #html页面标题
<meta http-equiv="Content-Type" content="test/html;charset=utf-8"/> #html页面utf-8中文
</head> #html页面头部结束
<body> #html页面主体部分开始
<p>北京天安门</p> #p段落
</body> #html主体部分接收
</thml> #html页面结束
注明：html注释如下
<! 这是注释在网页不会显示>
第二章：标签的简单使用
<p> 标签表示段落
<img src=pic.gif/> 插入图片
<tr height="80"></tr> 属性值
img标签必须使用alt属性
<img src=\'#\'" alt="这是本人照片"/>
<style></style> 标签
<style>
p{font-size:14px;color:red;} 意思：设置p段落的字体大14为红色字体
</style>
为一个段落设置字体大小和颜色：
<p style="font-size:20px;color:red;">北京安全诚信科技有限公司</p>
在<style></style>标签中加入CSS样式
<style type="text/css"> p{font-size:30px;color:#FF0000;} </style>
（1）链入外部CSS样式表
在桌面创建个文件为test.css输入下代码
p{font-size:30px; #文件大小30像素
color:blue; #字体为蓝色
font-weight:bold;} #字体粗体
然后在<head></head>中加入以下代码：
<link href="test.css" type="text/css" rel="stylesheet" />
在link标签中有三个属性
href：引入外部文档路径
rel：指定外部文档以样式表方式引入到html文件中，应指定为stylesheet。
type：指示外部文档的MIME格式，应制定为text/css
（2）导入样式
导入样式的方法是在<style></style>标签之间插入@import语句和css文件路径，有六种导入语句。如下：
@import url(test.css);
@import url('test.css')
@import url("test.css")
@import test.css
@import 'test.css'
@import "test.css"
以上六种导入都是一样效果
在刚才桌面创建的test.css为列导入语句如下：
<style> type="text/css" @import url(test.css); </style>
(3)css样式优先级
<p style="color:red;">第一生效</p>
<style type="text/css"> #第二生效
@import url(2.css);
p{color:yellow;}
</style>
<link href="1.css" rel="stylesheet" type="test/css" /> #第三生效
注明：style和link标签都在<head></head>使用
这是个简单的CSS文档
h1{font-size:30px; /*.设置好h1的文字大小为30像素，颜色为紫色.*/
color:#cc00cc;}
p{font-size:14px; /*设置p标签的文字大小为14像素*/
color:#333; /*设置P标签的文字颜色为深蓝色*/
margin:0; /*设置P标签的四边边距为0像素*/
text-indent:32px; /*设置P标签的首行缩进为32像素*/
line-height:24px;} /*设置P标签的文字行高为24像素*/
（4）注释说明：
<html>、<head>、<title>、<link>、<body>注明都是用<!现在写的这段话不会在页面上显示>
<style>注明是以/*.....在段话不会在页面上显示....*/
第三章：CSS的基本语法
（1）类选择器
在<p>中写入class="pengliang"的语句。class和等号都是固定的写法，在双引号中写入类选择器的名称。
<title>标签选择器</title>
<style type="text/css">
p{font-size:20px;font-weight:boldl} /*设置文字大小为20像素为粗体字*/
.pengliang{color:green;} /*设置文字颜色为绿色*/
.gaopeng{color:blue;} /*设置文字颜色为蓝色*/
.benet{color:red;} /*设置文字颜色为红色*/
</style>
</head>
<body>
<p class="pengliang">第一个类选择器</p>
<p class="gaopeng">第二个类选择器</p>
<p class="benet">第三个类选择器</p>
</body>
</html>
(2)ID 选择器
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ID</title>
<style type="text/css">
p{font-size:20px;
font-weight:bold;}
#pengliang{color:green;}
</style>
</head>
<body>
<p>ID 选择器</p>
<p id="pengliang">ID 选择器</p>
<p id="pengliang">ID 选择器</p>
</body>
</html>
（3）全局选择器
<thml>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ID</title>
<style type="text/css">
p{font-size:20px;
font-weight:bold;}
#pengliang{color:green;}
</style>
</head>
<body>
<p>ID 选择器</p>
<p id="pengliang">ID 选择器</p>
<p id="pengliang">ID 选择器</p>
</body>
</html>
(4)组合选择器
<thml>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>全局选择器</title>
<style type="text/css">
p{font-size:20px; font-weight:bold;} /*设置文字为20像素粗体*/
h4{font-size:20px;font-weight:bold;} /*设置文字为20像素粗体*/
p{color:red;} /*红色*/
p.one{color:orange;} /*橘色*/
.one{color:blue;} /*蓝色*/
</style>
</head>
<body>
<p>benet</p>
<p class="one">benet</p>
<h4 class="one">benet</h4>
</body>
</html>
(5)CSS的继承
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS的继承</title>
<style type="text/css">
p{text-decoration:underline; /*设置文字有下划线*/
font-size:30px;} /*设置字体大小30像素*/
</style>
</head>
<body>
<p><b>标签b</b>是标签p的子元素；<em>标签em</em>是标签p的子元素</p>
</body>
</html>
(6)超链接
超链接伪类表
a:link 设置超链接在未被访问前的样式。
a:active 设置超链接在被用户激活（在鼠标点击与释放之间发生的件事）时的样式。
a:vistited 设置超链接在其连接地址已被访问过时的样式。
a:hover 设置超链接在其鼠标悬停是的样式。
实列：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用超链接的伪类</title>
<style type="text/css">
a:link{color:green;} /*设置超链接的未被访问前文字颜色为绿色*/
a:active{color:red;} /*设置超链接在被用户激活文字颜色为红色*/
a:visited{color:orange;} /*设置超链接已被访问过时文字的颜色为橙色*/
a:hover{color:blue;} /*设置超链接在其鼠标悬停是文字的颜色为蓝色*/
</style>
</head>
<body>
<a href="http://localhost/phpMyAdmin">超链接文件</a>
</body>
</html>
实验一：继承选择器-1
<html>
<head>
<title>继承选择器-1</title>
</head>
<body>
<p>
<b>第一个标签b</b>是标签p的子元素
</p>
<p>
<em>第一个标签em</em>是标签p的子元素
</p>
<h4>
<b>第二个标签b</b>是标签h4的子元素、
<em>第二个标签em</em>是标签h4的子元素
</h4>
</body>
</html>
实验二：继承选择器加CSS
<html>
<head>
<title>继承选择器-2</title>
<style type="text/css">
p{text-decoration:underline; /*设置文字有下划线*/
font-size:30px;} /*设置文字大小为30像素*/
</style>
</head>
<body>
<p><b>标签b</b>是标签p的子元素；<em>标签em</em>是标签p的子元素</p>
</body>
</html>
实验三：继承选择器
<html>
<head>
<title>继承选择器-2</title>
<style type="text/css">
p span b{text-decoration:underline; /*设置文字有下划线*/
font-size:50px;color:red;} /*设置文字大小为50像素*/
</style>
</head>
<body>
<p>
<span>美丽<b>新</b>世界</span>
</p>
<p><span>美丽<b>新</b>世界</span</p>
</body>
</html>
/*多重声明*/
h1{color:red;} /*设置文字颜色为红色*/
h1{font-size:14px;} /*设置文字大小为14像素*/
h1{font-weight:bold;} /*设置文字为粗体*/
/*上面写了三个声明可以写一条声明代码如*/
h1{color:red;
font-size:14px;
font-weight:bold;}
/*集体声明*/
h1{color:red; /*设置文字颜色为红色*/
font-size:14px; /*设置文字字体大小为14像素*/
font-weight:bold;} /*设置问题字体为粗体*/
h2{color:red; /*设置文字颜色为红色*/
font-size:14px; /*设置文字字体大小为14像素*/
font-weight:bold;} /*设置问题字体为粗体*/
h3{color:red; /*设置文字颜色为红色*/
font-size:14px; /*设置文字字体大小为14像素*/
font-weight:bold;} /*设置问题字体为粗体*/
/*注明:同样的代码应用三个不同的标签，为了缩减代码量、重复代码，CSS提供集体声明的方式代码如下*/
h1,h2,h3{color:red;font-size:14px;font-weight:bold;}
（1）选择器的优先级
<html>
<head>
<meta http-equiv="content-type" content="text/html" content="utf-8" />
<title>标签选择器和类选择器组合使用</title>
<style type="text/css"> /!--style定义--/
p { font-size:50px; font-weight:bold; } /!-- 设置段字体为50像素，字体为粗体 --/
h4 { font-size:20px; font-weight:bold;} /!-- 设置h4字体大小为20像素，字体为粗体 --/
p { color:red;} /!-- 设置字体颜色为红色 --/
p.one { color:orange; } /!-- 为橙色 --/
.one { color:blue; } /!--为蓝色--/
</style>
</head>
<body>
<p>1111111111111111111111</p>
<p class="one">22222222222222222222222</p> /!-- 调用类 --/
<h1 class="one">333333333333333333333333</h1>
</body>
</html>
（2）!important语句
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
p { font-size:20px; } /!--设置字体像素为20--/
span.name { font-size:22px; color:red; font-weight:bold;} /!-- 定义个类：字体像素为22，字体红色，粗体字体 --/
span { font-size:30px !important;} /!-- 定义!important语句，字体像素为30px --/
</style>
</head>
<body>
<p>12345<span class="name">朋亮</span>678910</p> /!-- 加载类 --/
</body>
</html>
（3）CSS的层叠规则
<html>
<head>
<meta http-equiv="content-type" content="text/html" content="utf-8" />
<title>一个元素同一属性被多次设置</title>
<style type="text/css">
.red { color:red; } /!-- 定义个类：设置字体为红色 --/
p { color:green; } /!-- p标签，字体为绿色 --/
</style>
</head>
<body>
<p class="red">1234567</p> /!-- 调用类：验证类优先级高，字体为红色 --/
</body>
</html>
（4）制作竖形菜单
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单竖形菜单</title>
<style type="text/css">
ul li { font-size:300px; color:maroon;} 在ul标签的子li标签字体像素30，颜色为橙色
u1 li a { text-decoration:none; } 设置没有下划线
a:link { color:green;}
a:active { color:red;}
a:visited { color:orange;}
a:hover { color:blue;}
</style>
</head>
<body>
<ul>
<li><a href="1.html">首页</a></li>
<li><a href="2.html">公司简介</a></li>
<li><a href="3.html">作品展示</a></li>
<li><a href="4.html">关于公司</a></li>
<li><a href="1.html">联系公司</a></li>
</ul>
</body>
</html>
（5）
<html>
<head>
<meta http-equiv="content-type" content="text/html" content="utf-8" />
<title></title>
<style type="text/css">
p#red { color:red; } /!-- 定义ID 设置为红色 --/
p#green { color:green; } /!-- 定义ID 设置green --/
</style>
</head>
<body>
<p id="red" id="green"><a href="http://www.baidu.com" target="_blank">真喜欢这样绵绵的雨，长长的落着，忘记烦恼。</a></p> /!-- 在加入ID和target标签打开新的网页 --/
</body>
</html>
第五章：用CSS控制文本样式
字体控制：
以下是font-family属性通用的语法：
font-family:name;
其中，name值代表字体的名称，
示列：
font-family:宋体，黑体，幼圆； /*设置中文字体*/
font-family:Arial,"Times New Roman",Times,serif; /*设置英文字体*/
列子：
<html>
<head>
<meta http-equiv="content-type" content="text/html" content="utf-8" />
<title></title>
<style type="text/css">
body { font-family:宋体，黑体，幼圆; } /*设置网页文字字体样式依次为宋体、黑体和幼圆*/
</style>
</head>
<body>
改变字体
<p>我是一名计算机爱好者！</p>
</body>
</html>
列子：
<html>
<head>
<meta http-equiv="content-type" content="text/html" content="utf-8" />
<title></title>
<!-- 设置网页文字样式依次为 Arial、Times New Roman、Times和serif -->
<style type="text/css">
body { font-family:Arial,"Times New Roman",Times,serif;}
</style>
</head>
<body>
<p style="font-family:Arial,"Times New Roman",Times,serif;">Change font face</p>
</body>
</html>
文字大小概述：
（1）使用相对长度单位定义文字大小：
<html>
<head>
<title>EM</title>
<style type="text/css">
p { font-family:Arial, Helvetica, sans-serif;} /*设置p标签的字体属性*/
.px1 { font-size:12px;} /*设置文字大小为12像素*/
.px2 { font-size:30px; } /*设置文字大小为30像素*/
.em { font-size:2em;} /*设置文字大小为2em*/
.percent { font-size:200%;} /*设置文字大小为200%*/
</style>
</head>
<body>
<p class=".px1">文字12px<span class="em">文字em</span><span class="percent">文字200%</span><span class="px2">文字24px</span></p>
</body>
</html>
（2）使用相对关键字定义文字大小：
CSS提供了larger和smaller关键字用于设定font-size属性：larger意思大、smaller意思小。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用相对关键字定义文字大小</title>
<style type="text/css">
p { font-family:Arial, Helvetica, sans-serif;} /*设置p标签的文字属性*/
p { font-size:24px; font-weight:bold;} /*设置文字大小为24像素，字体为粗体*/
.smaller { font-size:smaller;} /*设置关键字为smaller，小*/
.larger { font-size:larger;} /*设置关键字为larger，大*/
</style>
</head>
<body>
<p>aqcx<span class="smaller">1234567890</span><span class="larger">0987654321</span></p>
<p class="smaller">北京大！</p>
<p class="larger">北京小！</p>
</body>
</html>
（3）使用关键字定义文字大小
CSS提供了：xx-small,x-small,small,medium,large,x-large,xx-large共七个关键字设定font-size属性。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用绝对关键字定义文字大小</title>
<style type="text/css">
p { font-family:Arial, Helvetica, sans-serif;}
p.xxsmall { font-size:xx-small;}
p.xsmall { font-size:x-small;}
p.small { font-size:small;}
p.medium { font-size:medium;}
p.large { font-size:large;}
p.xlarge { font-size:x-large;}
p.xxlarge { font-size:xx-large;}
</style>
</head>
<body>
<p class="xxsmall"><a href="#" target="_blank">1</a></p>
<p class="xsmall"><a href="#" target="_top">2</a></p>
<p class="small"><a href="#">3</a></p>
<p class="medium"><a href="#">4</a></p>
<p class="large"><a href="#">5</a></p>
<p class="xlarge"><a href="#">6</a></p>
<p class="xxlarge"><a href="#">7</a></p>
</body>
</html>
（4）文字颜色
CSS提供的color属性
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>设置文字颜色</title>
<style type="text/css">
.a { color:red;} /*使用颜色名称设置文字颜色为红色*/
.b { color:rgb(255,0,0);} /*使用RGB值设置文字颜色为红色*/
.c { color:rgb(100%,0%,0%);} /*使用RGB百分比设置文字颜色为红色*/
.d { color:#ff0000;} /*使用十六进制设置文字颜色为红色*/
.g { color:#f00;} /*使用十六进制缩写设置文字颜色为红色*/
</style>
</head>
<body>
<p class="a">使用关键字设置文字颜色<span>文字颜色具体继承性</span></p>
<p class="b">使用RCB数值设置文字颜色</p>
<p class="c">使用RGB百分比设置文字颜色</p>
<p class="d">使用十六进制设置文字颜色</p>
<p class="g">使用十六进制缩写设置文字颜色</p>
</body>
</html>
（5）文字粗细
CSS提供font-weight属性，最为常用的关键字bold、normal
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>设置文字粗细</title>
<style type="text/css">
body { font-family:Arial, Helvetica, sans-serif;}
.100 { font-weight:100;}
.200 { font-weight:200;}
.300 { font-weight:300;}
.400 { font-weight:400;}
.500 { font-weight:500;}
.600 { font-weight:600;}
.700 { font-weight:700;}
.800 { font-weight:800;}
.900 { font-weight:900;}
.bold { font-weight:bold;}
.bolder { font-weight:bolder;}
.lighter { font-weight:lighter;}
.normal { font-weight:normal;}
</style>
</head>
<body>
<p><span class="100">100</span><span class="200">200</span><span class="300">300</span><span class="400"></span><span class="500">500</span></p>
<p><span class="600">600</span><span class="700">700</span><span class="800">800</span><span class="900">900</span></p>
<p class="bold">bold</p>
<p class="bolder">bolder</p>
<p class="lighter">lighter</p>
<p class="normal">normal</p>
<p><b>b</b></p>
<p><b class="lighter">b</b></p>
</body>
</html>
（6）斜体
本文出自 “dsafsa_技术博客” 博客，谢绝转载！