美文网首页
CSS基础 08-14

CSS基础 08-14

作者: Yehao_ | 来源:发表于2018-08-14 20:39 被阅读0次
    image.png
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/hw.css">
        <title>HTML CSS</title>
    </head>
    <body>
    <div class="content">
        <h2>目录</h2>
        <ul>
            <li><a href="#content1">表单标签</a></li>
            <li><a href="#content2">input标签</a></li>
            <li><a href="#content3">下拉菜单和文本域</a></li>
            <li><a href="#content4">空白标签</a></li>
            <li><a href="#content5">认识CSS</a></li>
            <li><a href="#content6">CSS选择器</a></li>
            <li><a href="#content7">伪类选择器</a></li>
        </ul>
    </div>
    <div class="tag_form">
        <h4 id="content1">表单标签(form)</h4>
        <div class="content">
    
                可以提交表单中收集的信息
                <ol>
                    <li>action属性:设置提交信息的位置</li>
                    <li>method属性:提交方式(post、get)</li>
                </ol>
        </div>
        <h4 id="content2">input标签(单标签)</h4>
        <ol>
            <li>是表单标签</li>
            <li>type属性:
                <ul>
                    <li>text:文本输入框</li>
                    <li>password:密码输入框</li>
                    <li>radio:单选按钮
                        <ul>
                            <li>name: 同一类型对应的name值必须一样</li>
                            <li>value:设置选中按钮提交的值</li>
                            <li>checked: 设置为checked,让按钮默认处于选中状态</li>
                        </ul>
                    </li>
                    <li>checkbox:多选按钮
                        <ul>
                            <li>name: 同一类型对应的name值必须一样</li>
                            <li>value:设置选中按钮提交的值</li>
                            <li>checked: 设置为checked,让按钮默认处于选中状态</li>
                        </ul>
                    </li>
                    <li>button:普通按钮</li>
                    <li>reset:重置按钮
                        <ul><li>disabled属性:disabled(让按钮不能点击)</li></ul>
                    </li>
                    <li>submit:提交按钮
                        <ul><li>让当前所在的form中的所有表单相关标签对应的值,回到最初的状态</li></ul>
                    </li>
                    <li>file:文件选择器</li>
                </ul>
            </li>
            <li>name属性:必须设置(用于提交信息)</li>
            <li>value属性:标签内容</li>
            <li>placeholder属性:占位符(提示信息)</li>
            <li>maxlength属性:输入框最多能输入的字符个数</li>
            <li>readonly属性:readonly - 输入框只读(不能往里面输入内容)</li>
        </ol>
        <h5>演示</h5>
        <fieldset>
            <form action="" method="post">
                <input type="text" placeholder="文本框"><br>
                <input type="password" placeholder="密码框"><br>
                性别:(单选框)
                <input type="radio" name="sex" value="Female" checked="checked">男
                <input type="radio" name="sex" value="Male">女<br>
                爱好:(复选框)
                <input type="checkbox" name="interest">吃饭
                <input type="checkbox" name="interest">睡觉
                <input type="checkbox" name="interest">打游戏
                <input type="checkbox" name="interest">敲代码
                <input type="checkbox" name="interest">刷知乎
                <input type="checkbox" name="interest">看片<br>
                <input type="submit" value="提交">
                <input type="reset" value="重置"><br>
                <input type="file">
            </form>
        </fieldset>
        <h4 id="content3">下拉菜单和文本域</h4>
        <!--fieldset:
            一个fieldset标签对应一个表单分组
            legend标签:设置分组名
        -->
        <fieldset>
            <legend>账号信息</legend>
            <input type="text" name="username" value="" placeholder="用户名" />
            <input type="password" name="username" value="" placeholder="密码" />
            <input type="reset" name="" value="重置1" />
    
        </fieldset>
    
        <fieldset>
            <legend>反馈信息</legend>
            <!--1.下拉菜单-->
            <select name="city">
                <option value="成都">成都</option>
                <option value="重庆">重庆</option>
                <option value="北京">北京</option>
                <option value="大连">大连</option>
                <!--selected:设置默认选中-->
                <option value="青岛" selected="selected">青岛</option>
            </select><br><br>
    
            <!--2.多行文本域(多行文本输入框)
            -->
            <textarea name="message" rows="8" cols="100" placeholder="请输入意见..." maxlength="200">上次没有发送信息</textarea><br>
            <input type="reset" name="" id="" value="重置2" />
        </fieldset>
        <h4 id="content4">空白标签</h4>
        <p>
            html中标签分为两大类:<br>
            &nbsp;&nbsp;1.块级标签:一行只能有一个(不管标签的宽度是多少)<br>
            &nbsp;&nbsp;&nbsp;&nbsp;h1-h6,  p, hr, 列表标签,table, form, div<br>
    
            &nbsp;&nbsp;2.行内标签:一行可以有多个<br>
            &nbsp;&nbsp;&nbsp;&nbsp;a, img, input,下拉列表(select), textarea span<br>
    
    
            div标签,是空白标签,没有任何特殊的意义(无语义标签)
    
        </p>
        <h4 id="content5">认识CSS</h4>
        1.什么是CSS<br>
        CSS是web标准中的表现标准,用设置网页上的标签的样式(长什么样,在哪儿)<br>
        CSS代码/CSS文件,我们叫样式表<br>
    
        目前我们使用的是CSS3。<br><br>
    
        2.写在哪儿<br>
        内联样式表:将css代码写在标签的style属性中<br>
        内部样式表:写在head标签中的style标签的内容中<br>
        外部样式表:写在一个css文件中,通过head中的link标签来关联<br>
    
        优先级: 内联的优先级最高;内部和外部没有绝对优先,主要看同一个属性谁最后赋值,谁就有效<br><br>
    
    
        3.怎么写(CSS语法)<br>
        选择器{属性:属性值; 属性:属性值;}<br>
    
        选择器: 用来选中需要设置样式的标签<br>
        属性:css属性(css2中的属性有两百多个)<br>
        属性值:如果属性值是数字,表示的是大小要在后面加px<br>
        注意:每个属性之间要使用分号隔开,否则属性无效<br><br>
    
    
    
        补充属性: color: 设置字体颜色  background-color:设置背景颜色  width:标签的宽度  height:标签的高度
        <h4 id="content6">CSS选择器</h4>
        0. 元素选择器(标签选择器):标签名<br><br>
        选中所有的标签名对应的标签<br>
        1.id选择器:#id属性值<br><br>
        每个标签都有一个id属性,整个html中,id的值必须唯一<br>
    
        2.class选择器:.class属性值<br><br>
        每个标签都有一个class属性,<br>
    
        3.通配符:*<br><br>
        选中所有的标签<br>
    
        4.层级选择器:选择器1 选择器2...<br><br>
    
        5.群组选择器:选择器1,选择器,....<br><br>
    
    
    
    
        补充:<br>
        css中的颜色值:<br>
        1.颜色英语单词<br>
        2.16进制的颜色值 0-255 -- 00-ff (#ff0000-红色)<br>
        3.rgb值:rgb(红,绿,蓝) rgba(红,绿,蓝,透明度) - 透明度 0~1<br>
        <h4 id="content7">伪类选择器</h4>
        link: 超链接的初始状态; -- 一次都没有访问成功的时候的状态<br>
        visited: 超链接访问后的状态 --- 已经访问成功后的状态<br>
        hover: 鼠标悬停在标签上对应的状态<br>
        active:鼠标按住的状态<br><br>
    
        给同一个标签通过伪类选择器给不同状态设置不同的样式的时候,要遵守爱恨原则(先要爱才能恨)<br>
        LoVe HAte
    
    </div>
    
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:CSS基础 08-14

          本文链接:https://www.haomeiwen.com/subject/splbbftx.html