实验指导书(CSS-1)

案例1-1

实现图1-1效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				font-size: 40px;
				color: red;
			}
		</style>
	</head>
	<body>
		<p>这是一个段落</p>
	</body>
</html>

实现图1-2效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style type="text/css">
			h1{
				color: blue;
			}
		</style>
		<h1>标题1</h1>
	</body>
</html>

案例1-2

实现

  • 根据上面的分析，通过嵌入样式来引入CSS代码，具体代码如下：
    1
    2
    3
    4
    5
    <style type="text/css">
    			h1{
    				color: blue;
    			}
    </style>
  • 根据上面的分析，通过外部样式来引入CSS代码，具体代码如下：
    1
    <link rel="stylesheet" type="text/css" href="css/mycss.css"/>
  • 根据上面的分析，通过内联样式来引入CSS代码，具体代码如下：
    1
    <h1 style="color: red;">标题1</h1>

    案例1-3

    实现1_3效果

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			h1{
    				color: red;
    			}
    			p{
    				color: yellow;
    			}
    			div{
    				color: blue;
    			}
    		</style>
    	</head>
    	<body>
    		<h1>这是一个标题</h1>
    		<p>这是一个段落</p>
    		<div>这是一个盒子</div>
    	</body>
    </html>

    案例1-4

    实现图1_4效果

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			.stop {
    				color: red;
    			}

    			.warning {
    				color: yellow;
    			}

    			.normal {
    				color: green;
    			}
    		</style>
    	</head>
    	<body>
    		<p class="stop">这是stop的样式</p>
    		<p class="warning">这是warning的样式</p>
    		<p class="normal">这是normal的样式</p>
    	</body>
    </html>

    实现图1_5效果

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			.title {
    				color: blue;
    				text-align: center;
    			}

    		</style>
    	</head>
    	<body>
    		<p class="title">蓝色的段落</p>
    		<h1 class="title">蓝色的标题</h1>
    		<h2 class="title">蓝色的标题</h2>
    	</body>
    </html>

    案例1-5

    实现图1_6效果

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			#red {
    				color: red;
    			}

    			#green {
    				color: green;
    			}
    		</style>
    	</head>
    	<body>
    		<p id="red">这个段落是红色。</p>
    		<p id="green">这个段落是绿色。</p>
    	</body>
    </html>

    案例1-5

    实现图1_7效果

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			.red {
    				color: red;
    			}

    			.orange {
    				color: orange;
    			}
    			.green {
    				color: green;
    			}
    			table{
    				font-size: 50px;
    			}
    			.yellow{
    				color: yellow;
    			}
    			.gray{
    				color: gray;
    			}
    		</style>
    	</head>
    	<body>
    		<p class="red">Hello,Beijing!</p>
    		<p class="red">Hello world!</p>
    		<h1 class="orange">World Cup Competition</h1>
    		<table border="1" cellspacing="" cellpadding="">
    			<tr style="color: red;">
    				<th>Country</th>
    				<th>Win</th>
    				<th>Even</th>
    				<th>Lost</th>
    			</tr>
    			<tr>
    				<td>Spain</td>
    				<td class="yellow">6</td>
    				<td class="gray">0</td>
    				<td class="green">1</td>
    				
    				
    			</tr>
    			<tr>
    				<td>Netherlands</td>
    				<td class="yellow">6</td>
    				<td class="gray">0</td>
    				<td class="green">1</td>
    			</tr>
    		</table>
    	</body>
    </html>

    其余题目略 需要可联系本人

文本字体相关属性

总结：

[字体设置]
加粗：font-weight: normal/bold/bolder/lighter/100-900
倾斜：font-style: normal/italic/oblique
字体：font-family: serif
字号: font-size: 1.5em 50% 默认16px 12px
小型大写字母font-variant: small-caps
颜色: color: blue
下划线：text-decoration: underline/none
文本相关的属性
居中 text-align:center
居左text-align:left
居右text-align:right
两端对齐 text-align:justify
字符间距 letter-spacing:20px
词间距word-spacing:20px
字母大写text-transform:uppercase
字母小写text-transform:lowercase
首字母大写text-transform:capitalize
[段落设置]
缩进text-indent:5em
行高 line-height:150%
段间距padding margin