7.26 css

发布时间：2023-09-06 02:06责任编辑：彭小芳关键词：暂无标签

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

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

7.26 css

知识推荐