码迷,mamicode.com
首页 > Web开发 > 详细

7.26 css

时间:2018-07-26 13:25:54      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:nan   name   lap   技术分享   ace   优先   for   上海   名称   

 

css美化页面的技术:

 Cascading 层叠    style 样式    sheet  表

 7.25 注册表代码

 

技术分享图片
<! DOCTYPE html>

<head>

<meta charset="utf-8"> 
<title> welcome to register </title>

</head>

<body>

<form action ="#">

<table border="1" collspacing="0"   align="center"  width="400" bgcolor="pink">
<h3 align="center">注册表单</h3>
<tr>

<td align="center">用户名</td>
<td><input type="text" name="username" maxlength="16"  placeholder="请输入用户名"></td>


</tr>

<tr>

<td align="center">密码</td>
<td><input type="password" name="password1" maxlength="16"  placeholder="请输入密码"></td>


</tr>

<tr>

<td align="center">确认密码</td>
<td><input type="password" name="password2" maxlength="16"  placeholder="请确认输入的密码"></td>


</tr>

<tr>

<td align="center">昵称</td>
<td><input type="text" name="nickname" maxlength="16"  placeholder="请输入昵称"></td>


</tr>

<tr>

<td align="center">性别</td>
<td><input type="radio" name="gender" id="nan" value="nan"><lable for="nan"></lable>

<input type="radio" name="gender" id="nv" value="nv"><lable for="nv"></lable>

</td>


</tr>

<tr>
<td align="center">爱好</td>
<td>
<input type="checkbox" name="hobby" value="lq"  id="lq"><lable for="lq">篮球</lable>
<input type="checkbox" name="hobby" value="dy"  id="dy"><lable for="dy">电影</lable>
<input type="checkbox" name="hobby" value="bm"  id="bm"><lable for="bm">把妹</lable>


</td>

</tr>
<tr>
<td align="center">生日</td>
<td><input type="date"  name="birthday"></td>

</tr>

<tr>
<td align="center">头像</td>
<td><input type="file"  name="pic"></td>

</tr>
<tr>
<td align="center">城市</td>
<td>
<select name="location">
<option >请选择</option>
<option value="bj" selected="selected">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
<option value="sz">深圳</option>

</select>

</td>

</tr>

<tr>
<td align="center"> 自我介绍</td>
<td><textarea rows="3" cols="30">说点什么。。。</textarea></td>

</tr>

<tr>
<td align=center>验证码</td>
<td><img src="https://img.soogif.com/DV7ldtpUq56FxsRqqRX0gEKJtxEU7PQ1.gif_s400x0" width="100" height="30">
<input type="button" value="下一张"> 
</td>
</tr>

<tr>
<td colspan="2" align="center">
<input type="button" value="注册">
<input type="reset">
</td>

</tr>

</table>

</form>

</body>


</html>
View Code

 

 

 

7.26内联样式表

 

技术分享图片
<div style="color:red;border:1px solid black;"> 我是一个div</div>

<span style="color:purple ;border:1px solid pink; ">我是一个span</span>
View Code

 

内部样式表

局限在于只能在当前页面适使用

<head>标签中通过<style>标签添加样式。可以实现样式的复用,缺点在于只是用于当前页面,在实际工作中使用的不多,但是在学习过程中使用,方便演示

外部样式表

样式代码写在页面外部,通过link引入其他页面,优点在于样式可以定义在单独的*.css文件中,实现在多个页面复用

三种样式表的引入优先级

1、内联样式表优先级最高
2  内部样式表和外部样式表,后执行的会覆盖先执行的

如果三种引入方式作用的样式不同则全部生效
如果三种引入方式作用的样式相同则遵循上述优先规则

css的选择器

基础选择器

1、标签名选择器

   标签名称{
     样式名称:值
     样式名称:值
}



2、id选择器
#标签ID{
样式名称:值
样式名称:值
}



3、类选择器(选择多个标签名相同标签时可以设置)
class 注意:不同元素名之间也就可以使用

通过标签的class属性找到对应的标签,当需要对页面中的多个元素应用同一样式时使用

 

其他各种的选择器

1、属性选择器,通过标签名[type="" ]{


 样式名:样式值

}

 

7.26 css

标签:nan   name   lap   技术分享   ace   优先   for   上海   名称   

原文地址:https://www.cnblogs.com/oskw-1992/p/9370841.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!