表单和css基础 day 02

135 阅读3分钟
缩进快捷键tab,返回操作快捷键ctrl+z

1.div和span的作用
    div修饰一个块,span修饰一段文字或者字符
2.表格 table tr td
    table属性
        width 宽
        height 高
        border 边框宽度
        bordercolor 边框颜色
        bgcolor 背景颜色
        cellspacing 边框间距
        cellpadding 边框与内容之间的间距
        align="left/center/right" 左/居中/右 水平对齐方式
        valign="top/middle/bottom" 上/居中/右 垂直对齐方式
        valign只能控制文本,不能控制表格
        colspan="合并数量" 行内合并单元格
        rowspan 列内合并单元格
3.表单 form input
    form属性
        action="后台地址" 接后台地址
        name="用户收集表名称"
        method="get/post" 递交方式
        使用get,递交时地址栏?后面接参数
    input属性
        type="text/password/radio/checkbox/submit/botton/reset"
            文本/密码/单选框/复选框/提交按钮/空按钮/重置
        size 尺寸,宽度,字符数
        maxlength 最大长度
        name="名称"        同个单选框需要命名同样的名称
        value 文本默认值
        placehoder 文本提示值
        checked 单选框或者复选框默认选中的按钮
        checked="disable"默认禁止选中
        rset 重置按钮
        button 空按钮,需要绑定js事件
4.css样式表的建立
    1. 行内<标签 style="样式属性:属性值">
    2.内联 写在head里面
        <head>
            <style>
                标签名/class/id{
                    样式属性:属性值;
                }
            </style>
        </head>
    3.外部 link引入
        <link rel="stylesheet" href="css/01-css.css">
            rel:样式类型,stylesheet指样式属性
            href后接样式路径
    4.外部 @import url 引入,写在style内部
        @import url("css路径")
        import只能引入css,link可以引入其他类型;import引入后先加载html后加载css,link引入后同时加载
5.样式表的优先级
    行内>内部
    行内>外部
    内部和外部取决于书写顺序,在下面的越高
6.css选择器
        标签 div
        id <div id="www"> #www{样式属性:属性值;}
        class <div id="www"> .www{样式属性:属性值;}
        群组
            - 相同属性 选择器1,选择器2,...{}
            - 作用:项目中会有一些相同的属性设置
        包含选择器
            <div>
                <li></li>
            </div>
            div li{样式属性:属性值;}
        通配符 *
7.伪类选择器
        a:link {color: red;}        /* 未访问的链接状态 */
        a:visited {color: green;}    /* 已访问的链接状态 */
        a:hover {color: blue;}     /* 鼠标滑过链接状态 */
        a:active {color: yellow;} /* 鼠标按下去时的状态 */
8.hover:鼠标滑过时候的状态
        - 改变自身状态 对象选择符:hover{样式属性:属性值;}
        - 让子级添加hover效果——父级元素:hover 子级元素{样式属性:属性值;}
9.权重的使用
        - 四位数字表示 0 0 0 0
        - 内联样式表 1000
        - id        0100
        - class     0010
        - 标签       0001
        - 群组      p,#text,.text 单独计算自己的权重
        - 包含      相加
        - 伪类      0010
        - 拓展:!important 权重最高 - 修改别人的代码,覆盖