<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>样式使用</title>
<style>
@import url("CSS3-3.css");
</style>
</head>
<body>
<a href="http://www.baidu.com" id="myCSS">
百度
</a><br />
<a href="http://www.baidu.com">百度</a>
</body>
</html>
#myCSS{
color:red;
font-size:28px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>样式优先级</title>
<link href="css3-5.css" rel="stylesheet" type="text/css">
<style>
h2{color:green;}
</style>
</head>
<body>
<h2>内部样式定义的颜色和外部定义字体大小起作用</h2>
<h2 style="color:pink; font-size:20px;">
内嵌样式起作用，文字粉色，文字大小20像素
</h2>
</body>
</html>
h2{
color:red;
font-size:16px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>元素选择器</title>
<style>
h2{ color:red;}
span{ color:blue; font-size:48px;}
</style>
</head>
<body>
<h2>hello</h2>
<h2>hello</h2>
<span>world</span>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>类选择器</title>
<style>
.youClass{
color:red; /*颜色为红色*/
}
.myClass{
font-size:16px; /*字体大小为16像素色*/
text-decoration:underline; /*文字加下划线*/
}
</style>
</head>
<body>
<h2 class="youClass">hello</h2>
<span class="myClass youClass">world</span>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>id选择器</title>
<style>
#youID{
color:red;
}
#myID{
color:red;
font-size:16px;
text-decoration:underline;
}
</style>
</head>
<body>
<h2 id="youID">hello</h2>
<span id="myID">world</span>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>包含选择器</title>
<style>
h2 span{color:red; font-size:48px;}
</style>
</head>
<body>
<h2 >hello <span>world!</span></h2>
<span >world</span>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>组合选择器</title>
<style>
h2,span{
color:red;
font-size:48px;
}
</style>
</head>
<body>
<h2 >hello </h2>
<h3> hello world!</h3>
<span >world</span>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>子选择器</title>
<style>
h2 span {color:blue}
h2>span{color:red; font-size:48px;}
</style>
</head>
<body>
<h2 >hello <span>world!</span></h2>
<h2>hello <p> <span >world</span> </p> </h2>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>相邻选择器</title>
<style>
h2+span{color:red; font-size:48px;}
</style>
</head>
<body>
<h2 >hello <span>world!</span></h2>
<span >world</span>
<span >hello world too!</span>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style>
p[align]{color:red; font-size:48px;}
p[align=right]{color:blue; font-size:24px;}
</style>
</head>
<body>
<p align="center">Hello world!</p>
<p align="right">Hello world too!</p>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>通用选择器</title>
<style>
*{color:blue; font-size:36px;}
</style>
</head>
<body>
<p >Hello world!</p>
<span >Hello world too!</span>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>字体属性</title>
<style>
#fontCSS1{
font-family:"Times New Roman",Georgia,Serif; /*设置字体类型*/
font-size:28px; /*设置字体大小*/
font-weight: bold; /*设置字体粗细*/
}
#fontCSS2{
font-family:Arial,Verdana,Sans-serif;
font-size:20px;
font-style:italic; /*设置字体风格*/
font-weight: 900;
}
#myFont{
/*设置字体为倾斜、加粗，大小24像素，行高像素，字体为arial,sans-serif*/
font: oblique bold 24px/36px arial,sans-serif;
}
</style>
</head>
<body>
<p id="fontCSS1">hello world1!</p>
<p id="fontCSS2">hello world2!</p>
<p id="myFont">hello world3!</p>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文本属性</title>
<style>
#one{
text-align:left; /* 文字左对齐*/
word-spacing:30px; /*单词之间的间距30像素*/
}
#two{
text-align:center; /* 文字居中对齐*/
word-spacing:-15px; /*单词之间的间距-15像素*/
}
#three{
text-align:right; /* 文字右对齐*/
letter-spacing:5px; /* 字母之间的间距8像素*/
text-decoration:underline; /*文字修饰：加下划线*/
text-transform:uppercase; /*文字全部大写*/
}
</style>
</head>
<body>
<h2 id="one">hello CSS world!</h2>
<h2 id="two">hello CSS world!</h2>
<h2 id="three">hello CSS world!</h2>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文本属性</title>
<style>
h2{
font-size:48px;
font-family:隶书;
text-shadow:red 6px -7px 5px,green 16px -17px 15px;
}
</style>
</head>
<body>
<h2>Web程序设计基础</h2>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景综合应用</title>
<style>
div
{
width:170px;
height:150px;
background-image:url(images/fivestar.jpg);
background-position:-340px -325px;
float:left;
}
div:hover{
background-position:0px 0px;}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>背景属性</title>
<style>
body{
background-image:url(images/1.jpg);
background-position:right;
background-repeat:repeat-y;
}
</style>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景裁剪属性</title>
<style>
div
{
width:300px; /*设置DIV块宽度300px*/
height:300px; /*设置DIV块高度300px*/
padding:20px; /*设置DIV块内边距20px*/
background-color:yellow; /*设置DIV块背景色黄色*/
background-clip:content-box; /*设置DIV块裁剪属性从内容向外裁剪*/
border:3px solid red; /*设置DIV块边框3像素、实心线、红色*/
}
</style>
</head>
<body>
<div>
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景渐变</title>
<style>
#box1
{
width:100px;
height:100px;
border-radius:50%;
background-image:linear-gradient(45deg,#f00 30%,#ff0 60%);
}
#box2
{
width:100px;
height:100px;
border-radius:50%;
background-image:repeating-radial-gradient(circle at 50% 50%,red,yellow 10%,blue 15%);
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>边框样式</title>
<style type="text/css">
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
</style>
</head>
<body>
<p class="dotted">A dotted border</p>
<p class="dashed">A dashed border</p>
<p class="solid">A solid border</p>
<p class="double">A double border</p>
<p class="groove">A groove border</p>
<p class="ridge">A ridge border</p>
<p class="inset">An inset border</p>
<p class="outset">An outset border</p>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>边框样式</title>
<style type="text/css">
#circle{ width:200px; height:200px; border:3px solid red; border-radius:50%;
background:blue;
}
</style>
</head>
<body>
<div id="circle"></div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>列表样式</title>
<style type="text/css">
#box{ background-color:#FC6;
margin:0 auto;
height:40px;
}
#box ul{
list-style:none;
}
#box ul li{
width:80px;
height:40px;
text-align:center;
line-height:40px;
float:left;
}
#box ul li.strong{
font-weight:bold;
}
#box ul li:hover{
background-color:black;
text-decoration:underline;
cursor:pointer;
}
#box ul li:hover a{text-decoration:underline; color:#fc6;}
#box ul li a{text-decoration:none; color:black;}
</style>
</head>
<body>
<div id="box">
<ul>
<li class="strong"><a href="#">新闻</a></li>
<li><a href="#">军事</a></li>
<li><a href="#">社会</a></li>
<li><a href="#">国际</a></li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类</title>
<style>
a:link { /* 未访问链接*/
color:#000000;
}
a:visited { /* 已访问链接 */
color:#00FF00;
}
a:hover { /* 鼠标移动到链接上 */
color:#FF00FF;
}
a:active { /* 鼠标点击时 */
color:#0000FF;
}
input:focus /*input标记获得焦点时*/
{
background-color:yellow;
}
p:last-child /*P标记的最后一个标记*/
{
font-size:24px;
}
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
<p>你可以使用 "first-letter" 伪元素向文本的首字母设置特殊样式：</p>
First name: <input type="text" name="fname" /><br>
<p>This is some text.</p>
<p>This is some text.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪元素</title>
<style>
p.fl:first-line
{
color:#ff00ff;
font-size:24px;
}
p.myClass:first-letter{
color:#ff0000;
font-size:xx-large;
}
p.youClass:before{
content: "您好，"
}
p.youClass:after{
content: "您好帅!"
}
</style>
</head>
<body>
<p class="fl">向文本的首行设置特殊样式<br/>可以使用 "first-line" 伪元素。</p>
<p class="myClass">可以使用 "first-letter" 伪元素向文本的首字母设置特殊样式：</p>
<p class="youClass"> 先生!</p>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS实验</title>
<style>
ul{font-size:24px; color:red;}
p{font-size:18px; color:#FFF; background-color:grey; text-align:center; width:200px;}
p.active{background:#fff; border:1px solid red; color:#000;}
</style>
</head>
<body>
<ul>
我的主要爱好有：
<p class="active">足球</p>
<p>篮球</p>
<p>排球</p>
<p class="active">羽毛球</p>
<p>音乐</p>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>习题3－1</title>
<style>
/*body{color:red;}*/
p{color:#0F0}
/*.content { color:#00f; }
.gray { color:#666; }*/
</style>
</head>
<body>
<p id="myId" class="content gray">Hello CSS World!</p>
</body>
</html>
