<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 2.内部样式:在style元素内写的样式 -->
<style>
/*选择所有的h2,声明它们的样式。*/
h2{
color:blue;
}
</style>
<!-- 3.外部样式 :在独立的CSS文件中写样式,并将其引入到当前网页中。-->
<link rel="stylesheet" href="my.css"/>
</head>
<body>
<!-- 内联样式:在元素的style属性中直接写样式。 -->
<h1 style="color:red;">CSS</h1>
<h2>CSS的使用方式</h2>
<p>1.内联样式</p>
<p>2.内部样式</p>
<p>3.外部样式</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
/*1.继承性:子元素可以继承父元素的样式。
字体、颜色可以继承。其他不可以*/
body{
font-family:
"微软雅黑","文泉驿正黑","黑体";
}
/*2.层叠性:先后给一个元素增加不同的声明时,它们的效果会叠加在一起。*/
h1{
color:red;
}
/*...*/
h1{
font-size:50px;
}
/*3.优先级:先后多次给一个元素增加相同的声明,效果以后者为准(就近原则)。*/
h2{
color:green;
}
/*...*/
h2{
color:yellow;
}
</style>
</head>
<body>
<h1>苍老师</h1>
<h2>范传奇</h2>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
/*1.类选择器:根据class选择一批元素。*/
.female{
color:pink;
}
/*2.id选择器:根据id选择唯一的元素。*/
#p4{
color:blue;
}
/*3.选择器组:写出一组选择器,可以选中每个选择器所对应的目标的并集。*/
.female,#p4{
font-weight: bold;
}
/*4.派生选择器*/
/*4.1选择某元素下满足条件的子孙*/
#p5 b{
font-size: 30px;
}
/*4.2选择某元素下满足条件的儿子*/
#p5>b{
color: red;
}
/*5.伪类选择器:根据元素的状态选择在这个状态下的*/
/*5.1选择未访问过的超链接*/
a:link{
color:green;
}
/*5.2选择已访问过的超链接*/
a:visited{
color:red;
}
/*5.3选择激活态(正在点)的按钮*/
#b1:ACTIVE{
background-color:yellow;
}
/*5.4选择有焦点(闪烁的光标)的文本框*/
#t1:FOCUS{
background-color:green;
}
/*5.5选择鼠标悬停的图片*/
img:hover{
width:250px;
height:250px;
}
</style>
</head>
<body>
<p class="female">苍老师</p>
<p>王老师</p>
<p class="female">吉泽老师</p>
<p id="p4">赵老师</p>
<p id="p5">北京市<u>海淀区<b>北三环</b>西路</u>甲18号<b>中鼎大厦</b>B座8层</p>
<p>
<a href="http://www.baidu.cn">百度</a>
<a href="http://www.xb.cn">瞎编</a>
</p>
<p>
<input type="button" value="百度一下" id="b1"/>
</p>
<p>
<input type="text" id="t1"/>
</p>
<p>
<img src="../images/01.jpg"/>
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
/*1.单个边设置边框
left/right/top/bottom*/
h1{
border-left:10px solid blue;
}
/*2.四个边一起设置边框*/
p{
border:1px dashed red;
}
/*3.内容溢出时的处理:
默认不会溢出,因为p的高度会自适应,
即内容越多它就越高。只有给它设置了
固定的高度时它才会可能溢出。*/
p{
width:400px;
height:50px;
overflow: auto;
}
</style>
</head>
<body>
<h1>苍老师</h1>
<p>
优秀的电影演员。
同时他也是一名摄影爱好者,
他拍的片都很么么哒。他最擅长
捕捉肉体和灵魂的契合点,可以
折射出对人性的思考与鞭挞!
</p>
</body>
</html>