美文网首页
day21 - css基础(总结)

day21 - css基础(总结)

作者: 未醒的梦_19b0 | 来源:发表于2018-12-04 19:09 被阅读0次

    1.细线表格制作步骤

    1.1.不设置border
    1.2.设置cellcpacing的值为表格线的宽度
    1.3.设置整个表格的颜色为表格线的颜色
    1.4.设置每个单元格的颜色和整个表格的背景颜色不一样

    2.表单标签

    2.1.表单标签(form)
    表单标签的作用是用来收集用户信息,表单标签单独用没有任何意义,实质是将表单标签作为容器,来收集表单标签中其他标签信息,本身没有任何显示效果
    <form action=" " method=" ">
    action属性 - 设置提交地址
    method属性 - 设置提交方式(post/get)
    点提交按钮的时候,将表单中所有相关标签的以name=value的形式按照
    method提供的提交方式提交给action属性对应的接口
    form标签提供了两大功能:统一提交,重置
    a.input标签 - 单标签
    <input type="submit" name="" id="" value="提交"/>
    既可以放在form标签中,也可以不放在form标签中单独使用
    type属性 - type对应的值不一样input体现出来的功能就不一样
    1).test - 文本输入框
    <input type="test" name="tel" id="" value="" placeholder="请输入"/>
    name属性 - 专门用来区分不同的信息,相当于字典的key
    value属性 - 标签内容指向输入框中的内容,设值其实是设置文本框的默认值
    placeholder - 当输入框中没有内容的时候,显示的提示信息
    maxlength属性 - 设置输入框最大能输入的文字的个数
    2).password属性 - 密码输入框
    name属性 - 专门用来区分不同的信息,相当于字典的key
    value属性 - 标签内容指向输入框中的内容,设值其实是设置文本框的默认值
    placeholder - 当输入框中没有内容的时候,显示的提示信息
    maxlength属性 - 设置输入框最大能输入的文字的个数
    3).radio属性 - 单选按钮
    name属性 - 要求同一组的name属性值必须一样,才能单选
    value属性 - 用来提交的,获取区分你选择的是什么
    checked属性 - 让单选按钮处于选择状态
    4).checkbox属性 - 复选框
    5).button - 普通按钮
    value属性 - 决定按钮上显示的文字
    6).submit
    点击提交按钮当前form中所有设置了name属性的相关标签的值,以name=value的形式进行提交
    7).reset - 重置按钮
    将当前form标签中所有的标签状态设置为初始状态
    2.2.button标签(按钮标签)
    双标签,中间的内容更灵活

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>表单标签和input标签</title>
        </head>
        <body>      
            <form action="" method="">          
                <font>账号:</font><input type="test" name="tel" id="" value="" placeholder="请输入"/>
                <input type="submit" name="" id="" value="提交"/>
                <br />
                <br /><font>邮箱:</font><input type="text" name="email" maxlength="11"/>          
                <input type="submit" name="" id="" value="提交"/>
                <br />
                <br />
                <font>密码:</font><input type="password" name="" id="" value="" placeholder="密码" maxlength="6"/>          
                <br /><br />
                <font>已婚:</font><input type="radio" name="marry" id="" value="已婚" />
                <font>未婚:</font><input type="radio" name="marry" id="" value="未婚" checked="checked"/>
                <br /><br />
                <font>男:</font><input type="radio" name="sex" id="" value="男" checked="checked"/>
                <font>女:</font><input type="radio" name="sex" id="" value="女" />
                &emsp;&emsp;&emsp;&emsp;&emsp;
                <br />
                <font>篮球</font><input type="checkbox" name="hoby" id="" value="篮球" />
                <br />
                <font>足球</font><input type="checkbox" name="hoby" id="" value="足球" />
                <br />
                <font>羽毛球</font><input type="checkbox" name="hoby" id="" value="羽毛球" />
                <br />
                <font>排球</font><input type="checkbox" name="hoby" id="" value="排球" />
                <br />
                <font>乒乓球</font><input type="checkbox" name="hoby" id="" value="乒乓" />
                <br /><br />            
                <input type="button" name="" id="" value="注册" />            
                <input type="reset" name="" id="" value="" />
            </form>     
            <button><img src="../HelloHBuilder/img/6b3c88dc34561567a3267fdb2972c604.jpg"/>
            <font>登录ing</font>
            </button>
        </body>
    </html>
    

    3.下拉菜单和多行文本框

    3.1.下拉菜单(select-option)
    a.select标签 - 代表整个下拉菜单
    name属性 - 区分和提交
    b.option标签 - 下拉菜单中的选项
    内容 - 显示部分
    value属性 - 提交的内容
    selected属性 - 设置默认选中
    c.optgroup标签
    显示效果上对下拉菜单进行分组
    label属性 - 给分组设置名字
    3.2.多行文本输入框(textarea)
    可以输入多行内容,内容超出范围可以上下滚动
    name属性 - 提交和区分
    rows - 一次性可以显示的行数(决定高度)
    cols - 列数(一行最多可以显示多少个文字,决定宽度)
    placeholder - 提示语句
    内容 - 相当于value
    maxlength属性 - 最多能输入的文字个数

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <form action="" method="post">
                <font>考试科目:</font><select name="学科">
                    <optgroup label="理科"></optgroup>
                    <option value="">数学</option>
                    <option value="">物理</option>
                    <option value="">化学</option>
                    <option value="">生物</option>
                    <optgroup label="文科"></optgroup>
                    <option value="">语文</option>
                    <option value="">政治</option>
                    <option value="">地理</option>
                    <option value="">历史</option>
                </select>
                <br />
                <font>城市:</font><select name="province">
                    <option value="四川">四川省</option>
                    <option value="广西">广西省</option>
                    <option value="广东">广东省</option>
                    <option value="湖南">湖南省</option>
                    <option value="湖北">湖北省</option>
                    <option selected="selected" value="云南">云南省</option>
                    <option value="辽宁">辽宁省</option>
                    <option value="吉林">吉林省</option>
                    <option value="黑龙江">黑龙江省</option>
                </select>
                <select name="city">
                    <option value="">成都市</option>
                    <option value="">南宁市</option>
                    <option value="">深圳市</option>
                    <option value="">长沙市</option>
                    <option value="">武汉市</option>
                    <option value="">昆明市</option>
                    <option value="">沈阳市</option>
                    <option value="">长春市</option>
                    <option value="">哈尔滨</option>
                </select>
                
            
                <textarea maxlength="200" name="" rows="4" cols="20" placeholder="意见..." >默认值</textarea>
                
            </form>
        </body>
    </html>
    

    4.div和span

    div和span两个标签是无语义标签;一般用来将网页中的标签进行分组和分模块使用;

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <link rel="stylesheet" type="text/css" href="css/css基础.css"/>
        </head>
        <body>
            <div>div1</div>
            <div>div2</div>
            <span id="">
                span1
            </span>
            <span id="">
                span2
            </span>
            
            <h1>标题白体</h1>
        </body>
    </html>
    

    5.css基础

    5.1.什么是CSS
    css是web标准中的表现标准,专门负责网页中内容的布局和样式
    目前使用的是css3
    css代码又叫样式表
    5.2.CSS语法(怎么写?)
    a.基本结构
    选择器{属性名1:属性值1;属性名2:属性值2;...}
    b.说明
    选择器{} - 通过选择器决定样式是针对哪个标签写的(在内联样式表中没有这个结构)
    属性 - 属性不是随便写的,必须是CSS提供的两百多个属性中的一个;
    属性名和属性值之间用冒号连接,多个属性之间用分号隔开(如果没有分号会导致后边所有的属性无效)
    5.3.CSS代码写在哪儿?
    a.内联样式表
    将样式表作为HTML中标签的style属性值
    内联样式表只能针对一个标签有效
    b.内部样式表
    将样式表作为style标签的内容
    内部样式表可以针对当前html中所有的标签
    c.外部样式表
    将样式表写在一个css文件中,再通过link导入
    外部样式表可以针对所有html文件中的所有标签
    优先级:内联样式表的优先级最高;内部样式和外部样式,谁后写谁的优先级就高
    5.4.常用属性补充:
    color : 字体颜色
    font-size : 字体大小
    background-color : 背景颜色
    width : 宽度
    height : 高度
    CSS中的颜色值:a.颜色的英语单词
    b.rgb的十六进制值,例如:#ff0000
    c.直接使用rgb值:rgb(R,G,B), rgba(R,G,B, Alpha) Alpha:0(完全透明) ~1(不透明)
    CSS中的数字:如果数字表示大小,必须加单位:px(像素),em(空格)

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>css基础</title>
            
            <!--2.内部样式表
                style标签中的内容,必须也只能是css代码
            -->
            <style type="text/css">
                /*内部样式,可以同时写多个样式表*/
                a{
                    color: yellowgreen;
                    background-color: sandybrown;
                }
                div{
                    color: yellow;
                }
                p{
                    background-color: pink;
                }
            </style>
            
            <!--3.外部样式表
                a.link标签 - 导入外部文件
                rel属性:确定导入的文件功能;stylesheet - 设置样式表  icon - 设置网页图标
                type属性:确定文件类型; 文件类型/文件后缀; text/css - 文本/文件后缀是css
                         image/ico - 图片/文件后缀是ico
                href属性: 需要导入的文件的文件路径
            -->
            <!--导入样式表-->
            <link rel="stylesheet" type="text/css" href="css/css基础.css"/>
            <!--设置网页图标-->
            <link rel="icon" type="image/ico" href="img/aaa.ico"/>
            
        </head>
        <body>
            <!--style标签也可以放在body中-->
            <style type="text/css">
                div{
                    background-color: red;
                }
            </style>
            <!--1.内联样式表 
                body中每个有显示效果的标签都有style属性,用来设置当前标签的样式
                style属性值的引号中,写的是CSS代码
            -->
            <p style="color: #ff00ff; font-size: 40px;">我是内联样式表</p>
            <a href="http://www.baidu.com">百度一下</a>
            <div id="">
                我是div
            </div>
            <a href="#">刷新</a>
            <h1>我是标题1</h1>
        </body>
    </html>
    

    6.选择器

    选择器{属性名1:属性值;属性名2:属性值;...}
    css提供的选择器的写法大概也有十几种,常见的:
    6.1.标签选择器:直接将标签名作为选择器,选中当前html中所有指定的标签
    例如:a{} - 选中当前html中所有的a标签; div{} - 选中当前html中所有的div标签
    6.2.id选择器:将标签的id属性值前面加#作为选择器,选中所有id是指定值的标签,例如:#text{} - 选中当前html中id属性值是text的所有标签
    6.3.class选择器(类型选择器):将标签的class属性值前面加作为选择器,选中所有class是指定值的标签,例如:.test{}- 选中当前html中class属性值是test的所有标签
    6.4.群组选择器: 将多个选择器用逗号隔开作为一个选择器,同时选中每个单独的选择器选中的所有的标签
    例如:p,a,.test,#text{} - 选中所有p标签,a标签和class值是test以及id值是text的标签
    6.5.后代选择器:将多个选择器用空格隔开作为一个选择器, 从前往后一层一层的找,找到最后一个选择器对应的标签
    例如: div .test #text{} - 现在div标签中class值是test的标签中id值是text的标签
    div div p{} - 选中div中的div中的p标签
    6.6.通配符:将*作为选择器, 选中当前页面中所有的标签
    例如: *{} - 选中当前页面中所有的标签
    style表实质可以写在html文件中的任何位置

    <style type="text/css">
        /*1.标签选择器*/
        div{
            color: red;
        }
        /*2.id选择器*/
        #text{
            background-color: yellow;
        }
        
        /*3.class选择器*/
        .test{
            width: 300px;
            height: 200px;
            background-color: skyblue;
        }
        
        /*4.群组选择器*/
        div,.test{
            font-size: 50px;
        }
        /*5.后代选择器*/
        div div div{
            color: seagreen;
        }
        /*6.通配符*/
        *{
            /*设置文字的装饰效果
             * underline - 添加下划线
             * overline - 上划线
             * line-through - 删除线
             * none - 去掉下划线
             */
            text-decoration: line-through;
        }
        
    </style>
    
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <div id="">
                <div class="test">
                    div2
                </div>
                <div id="text">
                    div1
                    <div id="">
                        div0
                    </div>
                </div>
            </div>
            <div class="test">
                div3
            </div>
            <p id="text">我是段落</p>
            <h1 class="test">我是标题1</h1>
            
            
        </body>
    </html>
    

    7.伪类选择器

    伪类选择器是用来选中标签的不同的状态(为了标签的不同状态设置不同的样式)
    1.基本格式
    普通选择器:伪类选择器
    2.伪类选择器

    1. link - 标签的初始状态;一般作用于a标签,表示a标签中的连接没有成功访问过对应的状态
      标签:link{} - 标签是通过各种选择器来选中的标签
      2)visited - 超链接被访问后的状态。一般作用于a标签
      3)hover - 鼠标悬停在标签上的时候对应的状态
      4)active - 激活状态,鼠标按下还没有弹起的时候对应的状态
      3.爱恨原则:当同一个标签需要同时给多个状态添加样式的时候,要遵守爱恨原则:link-visited-hover-active LoVeHAte
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                a{
                    /*去掉下划线*/
                    text-decoration: none;
                }
                a:link{
                    color: red;
                }
                a:visited{
                    color: darkgreen;
                }
                a:hover{
                    /*添加下划线*/
                    text-decoration:underline;
                }
                a:active{
                    color: blue;
                }
                p:hover{
                    color: aqua;
                    background-color: sandybrown;
                    /*font-size: 40px;*/
                }
                p:active{
                    background-color: yellow;
                }
                
            </style>
        </head>
        <body>
            <a href="http://www.runoob.com/?s=input">第一章</a>
            <a href="http://www.runoob.com/?s=div">第二章</a>
            <a href="http://www.runoob.com/?s=p">第三章</a>
            <a href="http://www.runoob.com/?s=a">第四章</a>
            <a href="http://www.runoob.com/?s=button">第五章</a>
            
            <p>我是段落</p>
        </body>
    </html>
    

    相关文章

      网友评论

          本文标题:day21 - css基础(总结)

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