5.17css

xiaoxiao2021-02-28  44

文字CSS样式:

属性名含义举例font-family设置字体类型font-family:"黑体";font-size设置字体大小font-size:12px;font-style设置字体风格font-style:italic;font-weight设置字体的粗细font-weight:bold;font在一个声明中设置所有字体属性font:italic bold 36px "黑体";

文本css样式:

属性含义举例color设置文本颜色color :red;text-align设置元素水平对齐方式text-align:right;text-indent设置首行文本的缩进text-indent:20px;line-height设置文本的行高line-height:25px;text-decoration设置文本的装饰(下划线之类的)   none、underline、overlinetext-decoration:underline;

超链接伪类css样式:

伪类名称含义示例a:link未单击访问时超链接样式a:link{color:red;}a:visited单击访问后超链接样式a:visited{color:#333;}a:hover鼠标悬浮其上的超链接样式a:hover{color:#ff7300;}a:active鼠标单击未释放的超链接样式a:active{color:blue;} 若要设置多个伪类样式,请按照从link到active的顺序排放,否则部分样式无效。背景css样式设置: background-color   ←设置背景颜色                                         background-image:url('图片路径');    ←设置背景图片 background-repeat ←设置背景重复方式,其参数有 repeat全面重复覆盖  no-repeat不平铺,只显示一次 repeat-x/y 只向x或y方向平铺 列表:无序列表 <ul>                                           有序列表<ol>                                                     自定义列表<dl>                 <li>        </li>                                             <li>          </li>                                                   <dt>标题</dt>                 </ul>                                                          </ol>                                                                      <dd>子内容</dd>                                                                                                                                                                </dl> 列表css样式: list-style-type←管理列表编号,无序默认是实心,有序是数字   参数有none(无标记符号) decimal(数字)等等

表格:

<table border="2">    dorder代表着表格边框大小     colspan="合并的个数"  col代表着列的意思,这个colspan代表着合并列  <tr>    ←代表着一行                                                   rowspan="合并个数"   row代表着行的意思,这个代表着合并行 <td> </td>    ←代表着一列 </tr>  </table> <!--<table border="2">--> <!--<tr>--> <!--<td colspan="3">大数据学士后32班的成绩列表</td>--> <!--</tr>--> <!--<tr>--> <!--<td rowspan="2">李子豪</td>--> <!--<td>语文</td>--> <!--<td>90</td>--> <!--</tr>--> <!--<tr>--> <!--<td>数学</td>--> <!--<td>80</td>--> <!--</tr>--> <!--<tr>--> <!--<td rowspan="2">李子</td>--> <!--<td>语文</td>--> <!--<td>90</td>--> <!--</tr>--> <!--<tr>--> <!--<td>数学</td>--> <!--<td>80</td>--> <!--</tr>--> <!--</table>-->

表单:

<form method="post" action="需要输出信息的地址"><input type="text" name="username" value="用户名">        所有表单类型中,type代表类型,不同类型不同效果。name代表着该表单的名字(不会主动在网页显示)。value代表该表单的值,若是文本框则代表文本框初始值。</form> 属性说明type指定元素的类型:text(文本框)、password、checkbox(多选按钮框)、radio(单选按钮框)、submit、reset、file、hidden、image、button,默认为textname指定表单元素的名称value元素的初始值。type为radio时必须指定一个值size指定表单元素的初始宽度。当type为text或password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位maxlengthtype为text或password时,指定输入的最大字符串数checkedtype为radio或checkbox时,指定按钮是否是被默认选择 注意:若选择radio或submit时,其name必须一致,否则后续录入信息时不匹配等情况。 <form action="reply.html"method="post"> <!--<p>--> <!--用户名<input type="text" name="name">--> <!--</p>--> <!--<p>--> <!--密码 <input type="password" e="password"name="pwd">--> <!--</p>--> <!--<p>--> <!--<p>--> <!--<input type="checkbox" name="sports">篮球--> <!--<input type="checkbox" name="sports">羽毛球--> <!--<input type="checkbox" name="sports">足球--> <!--</p>--> <!--<p>--> <!--<input type="radio" name="sports">看书--> <!--<input type="radio" name="sports">拖地--> <!--<input type="radio" name="sports">跳舞--> <!--</p>--> <!--<input type="submit" value="确定">--> <!--<input type="reset" value="重置">--> <!--</p>--> <p> 用户名<input type="text" name="name"> </p> <p> 密码<input type="passward" name="pwd"> </p> <p> 确认密码<input type="passward" name="pwd"> </p> <p> 手机号码<input type="phone number" name="pnb"> </p> <p> 邮箱<input type="mailbox" name="mailbox"> </p> <p> 年龄<input type="mailbox" name="mailbox"> </p> <p> <input type="radio" name="sex"><input type="radio" name="sex"></p> <p> <input type="submit" value="确定"> <input type="reset" value="重置"> </p> </form>

转载请注明原文地址: https://www.6miu.com/read-2627536.html

最新回复(0)