1、Child Selectors.
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
what is a child, what is a parent? for example , <body> is child of <html>, <html> is parent of <body>
例：
<html>
<head>
<style type="text/css">
p > a{
color:red;
font-size:30px;
}
</style>
</head>
<body>
<a href="http://google.com">first</a>
<p><a href="http://google.com">second</a></P>
<h3><a href="http://google.com">third</a></h3>
</body>
</html>效果：
2、Pseudo Elements: 修改文本首字母
例：
<html>
<head>
<style type="text/css">
p:first-letter{
font-weight:bold;
font-size:30px;
color:green;
}
</style>
</head>
<body>
<p>Today is Wednesday</p>
<p>My name is zyearn</p>
<p>welcome to my blog!</p>
</body>
</html>效果：3、External Style Sheets:
引用外部的css文件
例：
test.css:
h1 {color:green;}
p {font-family:Tahoma;
color:red;
font-size:20px;
}
a {color:orange;}
index.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css"/>
</head>
<body>
<h1>Today is Wednesday</h1>
<p>My name is zyearn</p>
<a href="http://google.com">google</a>
</body>
</html>
效果：
4、Overriding Styles：在笔记3中，如果对css文件中的某个样式不满意，则可以进行重新写样式达到override的目的
例：
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css"/>
<style type="text/css">
h1 {color:blue;}
</style>
</head>
<body>
<h1>Today is Wednesday</h1>
<p>My name is zyearn</p>
<a href="http://google.com">google</a>
</body>
</html>则css中的对h1的样式将被下面的代码覆盖。 并且override有时间先后顺序。
5、Absolute Position: 相对于最左上角那个点进行偏移
Relative Position:相对于原本的位置进行偏移
Relative Position:相对于原本的位置进行偏移
例：
<html>
<head>
<style type="text/css">
#third{
border:1px solid red;
position:relative;
top:60px;
left:30px;
}
</style>
</head>
<body>
<p>first</p>
<p>second</p>
<p id="third">third</p>
<p>fourth</p>
</body>
</html>效果：
6、fixed positioning：和absolute类似，区别就是对于一个能上下拖动的网页，fixed positioning会固定在设定的地方。
7、Max width & Height：限制图片的大小。如果图片的大小超过设定的max值，则使之缩小到max值。
例：
<html>
<head>
<style type="text/css">
img{
max-height: 200px;
max-width: 200px;
}
</style>
</head>
<body>
<img src="xxx.png" />
<img src="xxx.jpg" />
</body>
</html> 8、Introduction to Forms:the way you give data to the website, such as user name, password.
input的一些attribute：
type：输入的类型
name：为这个input取个名字
size：方框大小
maxlength：用户输入的最大长度
value：默认初值
例：
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<form>
Username: <input type="text" name="username" size="20" maxlength="10" value="Enter here"/>
</form>
</body>
</html>效果：
9、Check Boxes & Radio Buttons
例：
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<form>
Username: <input type="text" name="username" size="20" maxlength="10" value="Enter here"/>
<br />
Male: <input type="radio" name="sex" value="male"/>
Female: <input type="radio" name="sex" value="female" />
<br />
<p>Select the foods that you would like to order</p>
Bacon <input type="checkbox" name="food" value="bacon">
Ham <input type="checkbox" name="food" value="ham">
Tuna <input type="checkbox" name="food" value="tuna">
Soda Pop <input type="checkbox" name="food" value="soda">
</form>
</body>
</html> 效果：
10、Drop Down Lists:下拉列表
例：
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<form>
What do you want to do today?
<select name="activities">
<option value="play">play the guitar</option>
<option value="game">play games</option>
<option value="cut">cut hairs</option>
<option value="learn">learn a language</option>
</select>
</form>
</body>
</html>效果：
11、Text Areas:
例：
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<form>
Tell me about yourself:
<br />
<textarea name="bio" rows="8" cols="40">
Type something here
</textarea>
</form>
</body>
</html>效果：
12、Passwords & Upload Buttons:
例:
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<form>
Password: <input type="password" name="pword"/>
<p>Submit a file!</p>
<input type="file" name="myfile"/>
</form>
</body>
</html>效果：
13、Submitting Forms:
例：（其中的action="dosomething"要等到学Javascript或PHP才会学到）
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<form action="dosomething" method="post">
Username: <input type="text" name="username" />
<br />
Password: <input type="password" name="pass" />
<br />
<input type="submit" value="Submit!">
</form>
</body>
</html>效果：
至此，这个简易学习笔记的（一）、（二）、（三）都写完了，之所以“简易”，是因为还有很多细节没有涉及到。
感谢 http://thenewboston.com/ （需FQ）制作了简单易懂的学习教程。
另外这个网站上还有很多别的教程，虽然是英语，但作者用了最朴实口语化的单词，很好懂，强烈推荐大家看一看。
