<style type="text/css" rel="stylesheet">
.a{ width:500px; height:400px;对放置图片的div区域设置宽和高 border:1px solid red;}*{ margin:0px; padding:0px;}</style><div class="a"> <img src="oYYBAFWV2zaIKeRmAAEOr_01B-YAACktACESFgAAQ7H134.jpg" border="0px" width="500px" height="400px" />对背景图片本身的宽和高进行设置</div>效果如图
<style type="text/css" rel="stylesheet">
p:first-child{匹配第一个p元素 border:1px solid yellow;}p>i:first-child{匹配p元素中的第一个i元素 font-weight:bolder;}p:first-child i{匹配第一个p元素中的所有元素 color:blue;}</style></head><body><p>some <i>text</i>.some <i>text</i>.</p><p>some <i>text</i>.some <i>text</i>.</p></body>
<style type="text/css" rel="stylesheet">
[title]{ color:yellow;}</style></head><body><h1>title属性选择器</h1><h2 title="hello">hello</h2><a href="http://w3cschool.com" title="w3cschool">w3cschool</a></body>
<style type="text/css" rel="stylesheet">
[title]{ color:pink;}[title=w3cschool]{ border:2px solid red;}</style></head><body><h1>title属性选择器</h1><h2 title="hello">hello</h2><a href="http://w3school.com" title="w3cschool">w3cschool</a></body>
<style type="text/css" rel="stylesheet">
[title~=hello]{title属性中包含hello color:pink;}</style><h1>title属性选择器</h1>
<h2 title="this world hello">hello</h2><a href="http://w3school.com" title="w3cschool">w3cschool</a>
<style type="text/css" rel="stylesheet">
input[type="text"]{ width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial;padding:0px;}input[type="button"]{ width:110px;注意按钮实际宽度 margin-left:20px; display:block; font-family: Verdana, Arial;}</style><body><form name="input" action="" method="get"><input type="text" value="name" size="20"><input type="text" value="password" size="20"><input type="button" value="提交">
input元素默认有2px的边框和1px的内补白
此图为按钮的结构图 会发现虽然设置了宽度为110px 但是实际结构中宽度只有94px，需要加上左右边框和内边距才合计为设定的宽度值
<body>
<form action="" method="post" class="STYLE-NAME"><h1>Contact Form</h1><span id="header">Please fill all the texts in the fields</span><hr size=2px width=100% style="margin:0px auto;color:#CCC">size表示分隔线的厚度
<span>Your name:<input type="text" id="name" name="name" placeholder="Your Full Name" /></span>
<span>Your Email:<input type="email" id="email" name="email" placeholder="Vaild Email Adress" /></span>
<span>Message:<textarea id=="message" name="message" cols="20" rows="5" placeholder="Your Message To Us"></textarea></span>
<span>Subject:
<select name="selection"> <option value="Job Inquiry">Job Inquiry</option> <option value="General Question">General Question</option> </select></span><span> <input type="button" class="button" value="send" /></span>
</form></body>
css
@charset "utf-8";
*{ margin:0px; padding:0px;}form{ width:500px; height:350px;background-image:url(1.jpg); background-repeat:no-repeat;; background-position:top left; background-attachment:fixed;需要改变背景图片的大小 padding:0px; margin:10px auto;}h1{ margin-top:5px; margin-left:20px;}#header{ display:block; font-size:12px; margin:1px auto 20px 20px; font-weight:bold;}span{ display:block; margin:15px; margin-left:100px; font-weight:bold;}input{ width:200px;}input[type="button"]{ width:70px; height:40px; margin:5px auto;}效果图
