day21 - css基础（总结）

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.伪类选择器

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>

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,362评论 5赞 477
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,330评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,247评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,560评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,580评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,569评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,929评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,587评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,840评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,596评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,678评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,366评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,945评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,929评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,165评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 43,271评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,403评论 2赞 342

day21 - css基础（总结）

1.细线表格制作步骤

2.表单标签

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

4.div和span

5.css基础

6.选择器

7.伪类选择器

推荐阅读更多精彩内容