CSS 基本选择器 和在html中引入css的方法和网页小实践
第一节：CSS 基本选择器
1，标记选择器 （比如p标签）
2，类别选择器 class
3，ID 选择器 id
使用实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style type="text/css">
#p1{
color: red;
font-size: 20px;
}
.p2{
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<p id="p1">爱编程！爱Java</p>
<p class="p2">爱生活！爱拉芳</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS引入</title>
<style type="text/css">
p{
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<p>段落一</p>
<p>段落二</p>
<p>段落三</p>
<p>段落四</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>优先级比较</title>
//链接式
<link href="red.css" type="text/css" rel="stylesheet">
//内嵌式
<style type="text/css">
p{
color: blue;
font-size: 20px;
}
//导入式
@import url(yellow.css);
</style>
</head>
<body>
<p style="color: red;font-size: 20px;">
</p>
</body>
</html>
red.css
p{
color: red;
font-size: 20px;
}
yellow.css
p{
color: yellow;
font-size: 20px;
}
导入式和链接式的区别：
上面例子中内嵌式等到要给p标签颜色和字体大小时才从链接的css文件中加载
导入式是直接加载css中所有样式
优先级比较
上面链接式是在内嵌式前面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置整体页面</title>
<style type="text/css">
/*
用CSS对页面进行美化
*/
/* 设置整体页面 */
body{
margin: 0px;
background-color: #DFDFDF;
}
/* 设置标题 */
h1{
color: white;
background-color: gray;
text-align: center;
padding: 20px;
}
/* 设置图片 */
img{
width: 150px;
height: 180px;
float: left;
margin: 5px;
}
/* 设置正文 */
p{
font-size: 12px;
line-height: 1.5;
text-indent: 2em;
}
</style>
</head>
<body>
<h1>Java之父——詹姆斯·高斯林</h1>
<img src="../java.jpg"/>
<p>Java之父——詹姆斯·高斯林出生于加拿大，是一位计算机编程天才。在卡内基·梅隆大学攻读计算机博士学位时，他编写了多处理器版本的Unix操作系统。</p>
<p>1991年，在Sun公司工作期间，高斯林和一群技术人员创建了一个名为Oak的项目，旨在开发运行于虚拟机的编程语言，同时允许程序在电视机机顶盒等多平台上运行。后来，这项工作就演变为Java。随着互联网的普及，尤其是网景开发的网页浏览器的面世，Java成为全球最流行的开发语言。因此被人称作Java之父。</p>
<p>高斯林一直对oracle公司抱有不满。这位工程师在离开甲骨文时写到，“我所说的都关乎细节与诚实，但吐露真相只会带来更多的坏处。”并称，“在Sun与oracle的并购会议上，到处是有关Sun和谷歌专利的争吵。oracle律师的眼睛闪闪发光。”
他表示，在收购Sun的早期阶段，oracle就表示出要同谷歌展开法律交锋的意愿。他本人也曾批评Android市场上的碎片化现象太过严重，足以影响软件开发者的工作。</p>
</body>
</html>
效果图：