标签: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>
7.26内联样式表
<div style="color:red;border:1px solid black;"> 我是一个div</div> <span style="color:purple ;border:1px solid pink; ">我是一个span</span>
内部样式表
局限在于只能在当前页面适使用
在<head>标签中通过<style>标签添加样式。可以实现样式的复用,缺点在于只是用于当前页面,在实际工作中使用的不多,但是在学习过程中使用,方便演示
外部样式表
样式代码写在页面外部,通过link引入其他页面,优点在于样式可以定义在单独的*.css文件中,实现在多个页面复用
三种样式表的引入优先级
1、内联样式表优先级最高
2 内部样式表和外部样式表,后执行的会覆盖先执行的
如果三种引入方式作用的样式不同则全部生效
如果三种引入方式作用的样式相同则遵循上述优先规则
css的选择器
基础选择器
1、标签名选择器
标签名称{
样式名称:值
样式名称:值
}
2、id选择器
#标签ID{
样式名称:值
样式名称:值
}
3、类选择器(选择多个标签名相同标签时可以设置)
class 注意:不同元素名之间也就可以使用
通过标签的class属性找到对应的标签,当需要对页面中的多个元素应用同一样式时使用
其他各种的选择器
1、属性选择器,通过标签名[type="" ]{
样式名:样式值
}
标签:nan name lap 技术分享 ace 优先 for 上海 名称
原文地址:https://www.cnblogs.com/oskw-1992/p/9370841.html