h1{
color:red;
font-size: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<metacharset="UTF-8">
<title>Title</title>
</head>
<body>
<!—使用行内式引入CSS样式-->
<h1 style="color:red;font-size: 25px">传智播客.黑马程序员上海中心</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<metacharset="UTF-8">
<title>Title</title>
<style>
/*CSS的内嵌式写法*/
h1{
color: red;
font-size: 25px;
}
</style>
</head>
<body>
<h1 >传智播客.黑马程序员上海中心</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<metacharset="UTF-8">
<title>Title</title>
<link href="demo.css"rel="stylesheet">
</head>
<body>
<h1 >传智播客.黑马程序员上海中心</h1>
</body>
</html>
h1{
color: red;
font-size: 25px;
}
忆江南
江南好，风景旧曾谙。(2) 日出江花红胜火，春来江水绿如蓝，(3) 能不忆江南。
作者介绍
白居易(772－846) ，字乐天，太原(今属山西)人。唐德宗朝进士，元和三年(808)拜左拾遗，后贬江州(今属江西)司马，移忠州(今属四川)刺史，又为苏州(今属江苏)、同州(今属陕西大荔)刺史。晚居洛阳，自号醉吟先生、香山居士。其诗政治倾向鲜明，重讽喻，尚坦易，为中唐大家。也是早期词人中的佼佼者，所作对后世影响甚大。
注释
据《乐府杂录》，此词又名《谢秋娘》，系唐李德裕为亡姬谢秋娘作。又名《望江南》、《梦江南》等。分单调、双调两体。单调二十七字，双凋五十四字，皆平韵。(2)谙(音安)：熟悉。(3)蓝：蓝草，其叶可制青绿染料。
品评
此词写江南春色，首句“江南好”，以一个既浅切又圆活的“好”字，摄尽江南春色的种种佳处，而作者的赞颂之意与向往之情也尽寓其中。同时，唯因“好”之已甚，方能“忆”之不休，因此，此句又已暗逗结句“能不忆江南”，并与之相关阖。次句“风景旧曾谙”，点明江南风景之“好”，并非得之传闻，而是作者出牧杭州时的亲身体验与亲身感受。这就既落实了“好”字，又照应了“忆”字，不失为勾通一篇意脉的精彩笔墨。
三、四两句对江南之“好”进 行形象化的演绎，突出渲染江花、江水红绿相映的明艳色彩，给人以光彩夺目的强烈印象。其中，既有同色间的相互烘托，又有异色间的相互映衬，充分显示了作者善于著色的技巧。篇末，以“能不忆江南”收束全词，既托出身在洛阳的作者对江南春色的无限赞叹与怀念，又造成一种悠远而又深长的韵味，把读者带入余情摇漾的境界中。
<!DOCTYPE html>
<html>
<head>
<metacharset
="UTF-8">
<title></title>
<style>
body {
background: url(img/bg2.jpg);
}
h1 {
color: green;
font-size: 16px;
text-align: center;
}
p {
font-size: 14px;
color: skyblue;
text-indent: 2em;
line-height: 22px;
}
h2 {
color: red;
font-size: 14px;
font-weight: normal;
}
</style>
</head>
<body>
<p>江南好，风景旧曾谙。(2) 日出江花红胜火，春来江水绿如蓝，(3) 能不忆江南。</p>
<h2>作者介绍</h2>
<p>白居易(772－846)
，字乐天，太原(今属山西)人。唐德宗朝进士，元和三年(808)拜左拾遗，后贬江州(今属江西)司马，移忠州(今属四川)刺史，又为苏州(今属江苏)、同州(今属陕西大荔)刺史。晚居洛阳，自号醉吟先生、香山居士。其诗政治倾向鲜明，重讽喻，尚坦易，为中唐大家。也是早期词人中的佼佼者，所作对后世影响甚大。</p>
<h2>注释</h2>
<p>(1)据《乐府杂录》，此词又名《谢秋娘》，系唐李德裕为亡姬谢秋娘作。又名《望江南》、《梦江南》等。分单调、双调两体。单调二十七字，双凋五十四字，皆平韵。(2)谙(音安)：熟悉。(3)蓝：蓝草，其叶可制青绿染料。</p>
<h2>品评</h2>
<p>
此词写江南春色，首句“江南好”，以一个既浅切又圆活的“好”字，摄尽江南春色的种种佳处，而作者的赞颂之意与向往之情也尽寓其中。同时，唯因“好”之已甚，方能“忆”之不休，因此，此句又已暗逗结句“能不忆江南”，并与之相关阖。次句“风景旧曾谙”，点明江南风景之“好”，并非得之传闻，而是作者出牧杭州时的亲身体验与亲身感受。这就既落实了“好”字，又照应了“忆”字，不失为勾通一篇意脉的精彩笔墨。</p>
<p>三、四两句对江南之“好”进
行形象化的演绎，突出渲染江花、江水红绿相映的明艳色彩，给人以光彩夺目的强烈印象。其中，既有同色间的相互烘托，又有异色间的相互映衬，充分显示了作者善于著色的技巧。篇末，以“能不忆江南”收束全词，既托出身在洛阳的作者对江南春色的无限赞叹与怀念，又造成一种悠远而又深长的韵味，把读者带入余情摇漾的境界中。</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<metacharset
="UTF-8">
<title>Title</title>
<style>
div {
height: 100px;
width: 250px;
background-color: #0e90d2;
}
p {
height: 100px;
width: 250px;
background-color: #0e90d2;
}
h1 {
height: 100px;
width: 250px;
background-color: #0e90d2;
}
ul {
height: 100px;
width: 250px;
background-color: #0e90d2;
}
ol {
height: 100px;
width: 250px;
background-color: #0e90d2;
}
</style>
</head>
<body>
<div>
我是div标签
</div>
<p>我是p标签</p>
<h1>我是h1标签</h1>
<ul>
<li>ul-li</li>
</ul>
<ol>
<li>ol-li</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<metacharset
="UTF-8">
<title>常见行内元素</title>
</head>
<body>
<!--常见的行内标签-->
<span>我是span标签</span>
<a>我是a标签</a>
<font>我是font标签</font>
<strong>我是strong标签</strong>
<em>我是em标签</em>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<metacharset
="UTF-8">
<title>常见行内块元素</title>
</head>
<body>
<!--常见的行内块元素-->
<input value="我是input">
<img src="../images/lyf1.jpg" height="91" width="60"/>
<textarea rows="5" cols="20">我是textarea</textarea>
</body>
</html>
| 转换模式 | 添加的属性 |
转换成块级元素 | display:block; block还可以作为隐藏的反义词显示来用 display:none可以隐藏一个盒子 |
转换成行内元素 | display:inline; |
转换成行内块 | display:inline-block; |
<!DOCTYPE html>
<html lang="en">
<head>
<metacharset
="UTF-8">
<title>Title</title>
<style>
#_span {
font-size: 25px;
color: red;
}
</style>
</head>
<body>
<span id="_span">传智播客.黑马程序员上海中心</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
font-size: 25px;
color: red;
}
</style>
</head>
<body>
<!--标签名选择器-->
<p>传智播客</p>
<div>上海市.浦东新区</div>
<p>黑马程序员</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<metacharset
="UTF-8">
<title>Title</title>
<style>
.span {
font-size: 25px;
color: red;
}
.mySpan {
color: #0e90d2;
}
</style>
</head>
<body>
<!--class选择器-->
<span class="span">传智播客</span>
<span class="mySpan span">黑马程序员</span>
<span class="span">上海市</span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
span {
font-size: 180px;
}
.blue {
color: blue;
}
.red {
color: red;
}
.yellow {
color: yellow;
}
.green {
color: green;
}
</style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="yellow">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<metacharset
="UTF-8">
<title>Title</title>
<style>
div {
color: #000;
}
#red {
color: red;
}
.blue {
color: blue;
}
</style>
</head>
<body>
<div id="red" class="blue">
人家有的是背景，而我有的只是背影。
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset ="UTF-8">
<title>Title</title>
<style>
ul li {
font-size: 25px;
color: red;
}
</style>
</head>
<body>
<!--后代选择器-->
<ul>
<li>传智播客</li>
<li>黑马程序员</li>
</ul>
<ol>
<li>java</li>
<li>UI</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div, .test, #addr {
font-size: 25px;
color: red;
}
</style>
</head>
<body>
<!--并集选择器-->
<div>
传智播客
</div>
<h5 class="test">黑马程序员</h5>
<span id="addr">上海市.浦东新区</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<metacharset
="UTF-8">
<title>Title</title>
<style>
/*选中input标签中type属性的值为text的标签*/
input[type='text'] {
background-color: cadetblue;
}
/*选中input标签中type属性的值为password的标签*/
input[type='password'] {
background-color: rebeccapurple;
}
</style>
</head>
<body>
<!--属性选择器-->
用户名：<input type="text" name="username">
手机号码：<input type="text" name="phonenum">
密码：
<inputtype
="password" name="password">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div_a {
width: 250px;
height: 250px;
font-size: 25px;
background-color: #0e90d2;
margin: 50px;
}
</style>
</head>
<body>
<div id="div_a">
我是传智人A
</div>
</body>
</html>
| margin的写法 | 表示的定位 |
margin:10px; | 上下，左右都是10px |
margin:10px 20px; | 上下10px，左右20px |
margin:10px 20px 30px; | 上10px，左右20px，下20px |
margin:10px 20px 30px 40px; | 上10px，右20px，下30px，左40px |
| padding的写法 | 表示的定位 |
padding:10px; | 上下，左右都是10px |
padding:10px 20px; | 上下10px，左右20px |
padding:10px 20px 30px; | 上10px，左右20px，下20px |
padding:10px 20px 30px 40px; | 上10px，右20px，下30px，左40px |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div_a {
width: 250px;
height: 250px;
font-size: 25px;
margin: 0 auto;
/*设置背景颜色*/
background-color: #0e90d2;
}
</style>
</head>
<body>
<div id="div_a">
我是传智人A
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*设置背景图片*/
body {
background-image: url("../images/lyf1.jpg");
}
</style>
</head>
<body>
</body>
</html>
| color | 字体颜色 | red红 green绿 blue蓝 #fff白 #000黑 rgb(0,0,0) 取值0-255 |
font-size | 文字大小 | 必须加单位像素px 浏览器默认的字号是16px |
text-align | 文本对齐方式 | left左 center中 right右 效果等同于标签属性align |
text-indent | 文本缩进 | 1em代表一个字宽 |
line-height | 行高 | 必须加单位px |
font-weight | 文本粗细 | 不加粗：400或者normal 加粗：700或者bold |
text-decoration | 文本修饰 | 下划线：underline 清除下划线：none |
list-style | 列表样式 | 清除：none |
font-family | 字体 | 例：微软雅黑 黑体... 只要本机存在该字体 |
<table>
<tr>
<td colspan="3">
<span class="s1">会员注册</span>
<span class="s2">USER REGISTER</span>
</td>
</tr>
<tr>
<td>用户名</td>
<td colspan="2"><input type="text"/></td>
</tr>
<tr>
<td>密码</td>
<td colspan="2"><input type="password"/></td>
</tr>
<tr>
<td>确认密码</td>
<td colspan="2"><input type="password"/></td>
</tr>
<tr>
<td>Email</td>
<td colspan="2"><input type="text"/></td>
</tr>
<tr>
<td>姓名</td>
<td colspan="2"><input type="text"/></td>
</tr>
<tr>
<td>性别</td>
<td colspan="2">
<input type="radio" name="sex"/>女
</td>
</tr>
<tr>
<td>出生日期</td>
<td colspan="2"><input type="text"/></td>
</tr>
<tr>
<td>验证码</td>
<td><input type="text" class="checkcode"/></td>
<td>
<imgsrc
="img/checkcode.jpg"/>
</td>
<td></td>
<td colspan="2"><input type="image" src="img/btn.jpg"/></td>
</table>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
background: url(img/bg.jpg);
}
.bigBox {
width: 800px;
margin: 50px auto;
border: 10px solid #999;
background: #fff;
padding: 40px 60px;
}
.s1 {
font-size: 24px;
color: green;
}
.s2 {
color: #ccc;
}
input[type='text'],
input[type='password'] {
width: 100%;
height: 30px;
border: 1px solid #ccc;
}
.text {
text-align: right;
}
</style>
</head>
<body>
<div class="bigBox">
<form action="#">
<table>
<tr>
<td colspan="3">
<span class="s1">会员注册</span>
<span class="s2">USER REGISTER</span>
</td>
</tr>
<tr>
<td class="text">用户名</td>
<td colspan="2"><input type="text"/></td>
</tr>
<tr>
<td class="text">密码</td>
<td colspan="2"><input type="password"/></td>
</tr>
<tr>
<td class="text">确认密码</td>
<td colspan="2"><input type="password"/></td>
</tr>
<tr>
<td class="text">Email</td>
<td colspan="2"><input type="text"/></td>
</tr>
<tr>
<td class="text">姓名</td>
<td colspan="2"><input type="text"/></td>
</tr>
<tr>
<td class="text">性别</td>
<td colspan="2">
<input type="radio" name="sex"/>男
<input type="radio" name="sex"/>女
</td>
</tr>
<tr>
<td class="text">出生日期</td>
<td colspan="2"><input type="text"/></td>
</tr>
<tr>
<td class="text">验证码</td>
<td><input type="text" class="checkcode"/></td>
<td><img src="img/checkcode.jpg"/></td>
</tr>
<tr>
<td></td>
<td colspan="2"><input type="image" src="img/btn.jpg"/></td>
</tr>
</table>
</form>
</div>
</body>
</html>
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) | 黑马程序员IT技术论坛 X3.2 |