H5 CSS样式 小结

如何查询相关文档

推荐查询相关网址:http://devdocs.io/

第一行代码

  div {
        width: 500px;
        height: 500px;
        background-color: red;
      }
      
    <div>我是divdiv>

css样式的继承

body {
        color: blue;
      }

如果不给标签添加额外的字体颜色 页面所有的文字颜色都会设置为蓝色

CSS 常用属性举例

属性 描述
width 设置长度 单位px
height 设置高度 单位px
float float: left / right/ none; 让元素浮动起来 用于布局
position absolute/relative/fixed 元素定位
font 字体格式
background 背景颜色 / 背景图象 / 背景重复 / 背景附件 / 背景位置
border width /style /color 边框样式
list-style 列表样式
margin 外边距
padding 内边距
cursor 光标样式

css float属性

.left {
                width: 200px;
                height: 200px;
                background-color: red;
                float: left;
            }

            .right {
                width: 200px;
                height: 200px;
                background-color: blue;
            }
            <div class="left">div>
        <div class="right">div>

div 本身是块级标签 使用两个div同级时候 两个div会紧紧相邻 使用浮动属性后可以发现两个div重合
这里可以认为第一个div浮起来了 之前紧靠的div发现之前的div不见了就占领了第一个div的位置

使用浮动会造成的一些问题

.box{
    width: 800px;
    border: 4px red solid;
    margin: 50px auto;
}
.left{
    width: 200px;
    height: 200px;
    background: blue;
    float: left;
}
.right{
    width: 200px;
    height: 200px;
    background: gold;
    float: right;
}
<div class="box">
            <div class="left">div>
            <div class="right">div>
        div>

一个父级div中有两个子div 父级没有设置高度 两个子div分别使用了左浮动和有浮动 这时会造成父级的高度塌陷
解决方法:
使用 clear: both;
在添加一个div < div style=”clear: both;”>< /div> 这样就恢复正常了

表单样式


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style type="text/css">

    style>
head>
<body>
    
    
    
    
    <form id="first" action="" method="">
        
        <label for="name">用户名: label>
        <input id="name" type="text" placeholder="请输入用户名" name="username" value="">
        <br/>
        <input type="password" placeholder="请输入密码">
        <br/>
        <input type="radio" name="gender">
        <input type="radio" name="gender">
        <input type="radio" name="gender" value="3">
        <br/>
        <input type="checkbox" name="inster" value="work">
        <input type="checkbox" name="inster" value="play">
        <input type="checkbox" name="inster" value="watch">
        <br/>
        
        <input type="file" multiple>
        <br/>
        <input type="email" >
        <br/>
        <input type="date" >
        <br/>
        <input type="search" >
        <br/>
        <input type="button" value="不要按">
        <br/>
        
        <input type="hidden" name="type" value="Mac">
        <br/>
        <input type="submit" value="注册">
        <br/>
        <textarea>textarea>
        <select>
            <option>1option>
            <option>2option>
            <option>3option>
            <option>4option>
        select>
        

        <br/>
    form>
    
    <input form="first" type="reset">
body>
html>

表格样式


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style type="text/css">
        table{
            /* collapse 合并边框
               separate 不合并边框
            */
            border-collapse: collapse;
            border:  1px blue solid;
            /*不合并边框的时候 可以让空的单元格隐藏*/
            /*empty-cells: hide;*/
            text-align: center;
        }
        tbody{
            /*改变表格垂直居中方式*/
            vertical-align: top;
        }
    style>
head>
<body>
    
    <table border="1" width="200" height="100" cellspacing="0" cellpadding="10">
        
        
        
        
        
            <tr>
                <th width="100" height="200">1th>
                <th width="250">2th>
            tr>
            <tr>
                <td>11td>
                <td>22td>
            tr>
        
    table>
    <table border="1" width="280" height="280">
        <tr>
            <td rowspan="2">1td>
            <td>2td>
            <td>3td>
            <td>4td>
        tr>
        <tr>
            
            <td colspan="2">2td>
            
            <td>4td>
        tr>
        <tr>
            <td>1td>
            <td>2td>
            <td colspan="2" rowspan="2">3td>
            
        tr>
        <tr>
            <td>1td>
            <td>2td>
            
            
        tr>
    table>
body>
html>

你可能感兴趣的:(html5)