xhtml & css 简易学习笔记（三）
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:相对于原本的位置进行偏移
例：
<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>
效果：
至此，这个简易学习笔记的（一）、（二）、（三）都写完了，之所以“简易”，是因为还有很多细节没有涉及到。
另外这个网站上还有很多别的教程，虽然是英语，但作者用了最朴实口语化的单词，很好懂，强烈推荐大家看一看。
相关知识
【web前端期末大作业】简单HTML宠物猫网页（HTML+CSS）
制作一个简单HTML宠物猫网页（HTML+CSS）
使用HTML制作静态宠物网站——蓝色版爱宠之家(HTML+CSS)
【html网页设计】
宠物之家【Html+CSS+Js】前端网页界面【1】
HTML5期末大作业：宠物网站设计——蓝色版爱宠之家带留言板宠物(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码
paddleocr学习笔记（四）评估、推理
HTML学生个人网站作业设计：宠物网站设计——宠物网站带会员登陆表单验证功能7页
HTML5期末大作业：宠物网站设计——布偶猫(7页)带留言板 HTML+CSS+JavaScript web结课作业的源码 web网页设计实例作业 html大学生网站开发实践作业
网页设计htmlcssweb马尔代夫旅游网
网址: xhtml & css 简易学习笔记（三） https://m.mcbbbk.com/newsview331258.html
| 上一篇: <a href=" |
下一篇: 宠物旅游全新亮相 |
