Change the words style(1)
1 |
|
in <div></div>is css syntax，style can change the word
appearence ,the parameter is bold, it means that the word will be bold,
and if you want the word to be bigger, you can put a parameter after the
first parameter, font-size:20px. CSS syntax is simple, when you want to
write CSS, you can add a contribute, and then if you want to add more
contuibute, you need to put ';' in the middle of the code ## Change the
words style(2) 1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
<meta charset = "utf-8"></meta>
<title>css</title>
</head>
<body>
<div style = "font-weight:bold;font-size:30px">今天天氣很好</div>
<div style = "height:30px;width:290px;padding:10px;border:1px dashed blue;margin-top: 10px;margin-bottom: 10px;">I go to the park, and I feed the <span style = "color:red">pigeon</span></div>
</body>
</html>
syntax: <div style = "border:margin-top:10px;margin-botton:10px"></div> : when you think two line is too close, you can use this syntax to control your box.
syntax: <div style = "border:10px solid blue"></div>:if you want to have a frame on your box,you can use this syntax.
syntax: <div style = "padding:10px"></div>:if you think your box is too narrow, you can try this code, to make your box more wider.
syntax: <div style = "height:30px;width:290px"></div>:if
you want to control the width and the height of the box, you can use
this syntax. ## CSS Selector primer Today if you want to change all of
the parameters, but there is too many same paragraph, and you are too
tired to change each of it, you can use Css Selector to make you more
easy to change the parameters at the same time. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<meta charset = "utf-8"></meta>
<title>css</title>
<style type = "text/css">
.title{font-weight:bold;font-size:30px}
.content{height:30px;width:400px;padding:10px;border:1px dashed blue;margin-top: 10px;margin-bottom: 10px;}
.keyword{color:red}
.box{position:absolute;right:0px;top:0px;width:100px;height:100px;background-color:pink}
.object{position:relative;left:0px;top:0px;width:100px;height:100px;background-color:rgb(81, 0, 128)}
</style>
</head>
<body>
<div class = "title">今天天氣很好</div>
<div class = "content">I go to the park, and I feed the <span class = "keyword">pigeon</span></div>
<div class = "box"></div>
<div class = "object"></div>
<div class = "title">今天公園裡有很多小朋友</div>
<div class = "content">There are lots of people,and I see lots of <span class = "keyword">dogs</span></div>
</body>
</html>
If you want to control the position of a box, you can use 'absolute'
or 'relative'. ## CSS Selector advanced 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
<html>
<head>
<title>CSS selectors</title>
<meta charset = "utf-8"></meta>
<style type = "text/css">
/*Type selectors*/
body{font-size:16px;font-family:"cursive"}
h3{font-size:25px;text-decoration:underline}
/*class selectors*/
div.content{padding:10px;border:1px dashed black}
/*id selectors*/
#btn{border:1px solid #888888;background-color:#ffffff;padding:5px}
/*virtual selectors,collocate with other selectors*/
/* :hover virtual selectors,when your mouse move to the bottom, and apply this set*/
#btn:hover{
background-color:#888888;
}
/* :focus virtual selectors, when the target get the focus, and apply this set*/
input:focus{border:2px solid #ff0000}
/*cascading selectors,collacate with other selectors-*/
.favorite a{color:#0000ff}
.demo a{color:#008800}
</style>
</head>
<body>
<h3>Self Introduction:</h3>
<div class = "content">My name is Max.</div>
<h3>My favorite URL</h3>
<ul class = "favorite">
<li><a href = "https://www.google.com.tw/">Google</a></li>
<li><a href = "https://zerojudge.tw">Zerojudge</a></li>
</ul>
<h3>My favorite social media</h3>
<ul class = "demo">
<li><a href = "https://www.Facebook.com/">Facebook</a></li>
<li><a href = "https://www.youtube.com/">Youtube</a></li>
</ul>
<h3>Contact Me</h3>
<div class = "content">
Writing information <input type = "text" /><button id = "btn">submit</button>
</div>
</body>
</html>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
<html>
<head>
<meta charset = "utf-8" />
<title>CSS table</title>
<style type = "text/css">
table{
width:400px;
}
td{
border-bottom:1px solid #888888;padding:10px;
}
/*對表格的第一對 tr */
tr:nth-child(1){
background-color: #7788aa;color: #ffffff;border-collapse:collapse;
}
/*表格中的偶數對 tr */
tr:nth-child(even){
background-color:#e8e8e8e8;
}
</style>
</head>
<body>
<table>
<tr>
<td>team</td>
<td>win</td>
<td>lose</td>
</tr>
<tr>
<td>yankees</td>
<td>10</td>
<td>8</td>
</tr>
<tr>
<td>red sox</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>