Day22—HTML和CSS

2018-09-18  本文已影响0人  C0mpass

1 表单标签和input标签

1.1 表单标签

表单标签：form标签，<form></form>
表单标签是用来收集用户信息的，是一个容器，用来获取这个标签中相应的其他标签(input标签)的数据。可以将收集到的数据，通过method对应的方式，去发送请求(发送给action对应的接口)。

1.2 input标签

input标签：单标签，<input />
a.type属性：决定input标签的样式
text(默认)：文本输入框
password：密码输入框
radio：单选按钮
注意：input标签放在form外面同样可以使用，只是不能直接使用重置和提交功能

1.2.1 Type属性

<input type="text" name="username" value="" placeholder="账号" maxlength="16"/>

<input type="password" name="password" id="password" value="" placeholder="密码" />

<input type="radio" name="sex" id="" value="boy" checked="checked" /><span>男</span>
<input type="radio" name="sex" id="" value="girl" /><span>女</span>

<input type="checkbox" name="hobby" id="" value="篮球" /><span>篮球</span>
<input type="checkbox" name="hobby" id="" value="乒乓球" /><span>乒乓球</span>
<input type="checkbox" name="hobby" id="" value="羽毛球" /><span>羽毛球</span>
<input type="checkbox" name="hobby" id="" value="排球" /><span>排球</span>

<input type="button" name="" id="" value="登录" />

<input type="submit" name="" value="提交" />

<input type="reset" name="" id="" value="重置" />

<input type="file" name="icon" id="" value="选择文件" />

2 下拉、多行文本、按钮

2.1 下拉

<select name="">
    <option value="成都">成都</option>
    <option value="北京" selected="selected">北京</option>
    <option value="重庆">重庆</option>
    <option value="沈阳">沈阳</option>
</select>

<select name="city">
    <optgroup label="四川省">
        <option value="成都">成都</option>
        <option value="绵阳">绵阳</option>
        <option value="峨眉山">峨眉山</option>
    </optgroup>
    <optgroup label="广东省">
        <option value="广州">广州</option>
        <option value="深圳" selected="selected">深圳</option>
        <option value="中山">中山</option>
        <option value="佛山">佛山</option>
    </optgroup>
</select>

2.2 多行文本

<textarea name="message" rows="10" cols="20" placeholder="消息" maxlength="16"></textarea>

2.3 按钮

使用button标签

<button>注册</button><br />

<button><img src="img/lufei.jpg"/></button>

3 div和span标签

4 CSS基础

CSS是Web标准中的表现标准，用来规定网页上内容的布局和样式(CSS又叫样式表)，目前广泛使用的是CSS3。
1.怎么来写样式表(CSS)，写在哪儿？
a.内联样式表：
将样式写在标签的style属性中(每个标签都有style属性)
示例如下：

<!--内联样式表-->
<p style="background-color: cornflowerblue; color: yellow;">
    样式表的内容
</p>

b.内部样式表
将样式表写在head标签中的style标签里面
示例如下：

<!--内部样式表-->
<style type="text/css">
    h1{
        background-color: skyblue;
        color: crimson;
    }
    a{
        font-size: 20px;
    }
</style>

c.外部样式表
将样式表写在一个CSS文件中，然后再在head标签中通过link标签来导入。
示例如下：

<!--外部样式表-->
        <link rel="stylesheet" type="text/css" href="css/04-CSS.css"/>

注意：不管在什么情况下，内联样式表的优先级最高。内部和外部的优先级看谁后写，谁的优先级高

2.固定语法
选择器(属性1：属性值1；属性2：属性值2...)
说明：
a.选择器：选择器的作用是用来确定后面的样式到底是给哪个/哪几个标签写的
b.属性：属性是CSS中本来就支持和拥有的属性，属性的顺序可以随意写；属性和属性值之间使用冒号连接；属性后面必须写分号。
c.属性值：
(1)数值：如果数值是用来表示大小，后面必须跟单位px或者%
　　　　px -- 像素 　　　　% -- 百分比(前提是父类对应的宽度或者高度是确定的)
(2)颜色：
a.颜色对应的英语单词
b.#加RGB对应的16进制值(一个颜色值对应两位十六进制)
c.直接用RGB值：rgb(R,G,B)，rgba(R,G,B,A) R,G,B的范围是0-255，Alpha：0-1

常见的属性
color：设置字体的颜色
background-color：背景颜色
width：宽度
height：高度
font-size：字体大小

5 选择器

常用的选择器
一、选择器
1.标签/元素选择器：将标签名作为选择器，同时选中网页中所有同类型的标签
a{} -- 选中所有的A标签

2.id选择器：通过在id属性值前加#，就构成了id选择器。选中id等于对应的值的标签
id属性：所有标签都有id属性，并且设置的值必须唯一
#p1{} -- 选中id值是p1的标签

3.class选择器：通过在class属性值前加.，就构成了类型选择器。选中class等于对应的值的标签
.c1{} -- 选中所有class值是c1的标签

4.群组选择器：多个选择器中间使用逗号隔开。选中所有的单独的选择器
a,p,#p1,.c1{} -- 选中所有的a标签，p标签和所有id值是p1以及所有class值是c1的标签

5.包含选择器：多个选择器之间使用空格隔开。从前往后找，找到最后一个选择器
div .c1 p{} -- 选中div中class是c1的标签中的p标签

6.通配符*：直接将*作为选择器。选中当前页面中所有的标签

二、选择器的优先级
通过不同的选择器选中了同一个标签，并且设置了同一个属性，谁的优先级高就谁有效。
看谁的优先级高就看谁的权重值大，权重值一样的情况下，后写的优先级高
伪类选择器：0001
元素选择器：0001
class选择器：0010
id选择器：0100
群组选择器：直接看单独每一个的权重
包含选择器：多个选择器的权重和
通配符：0001

注意：不管选择器的权重有多高，内联样式的优先级都是最高的！

6 伪类选择器

前面的元素选择器、id选择器、class选择器选中的都是标签。
伪类选择器是选中标签的某个状态

伪类选择器：选中某个标签的不同状态(一般适用于超链接和按钮等)
1.语法：--- 标签：状态
标签：状态{}
说明：
a.状态：
link：初始状态(a标签对应的初始状态是没有访问成功过对应的状态)
visited：访问后的状态(使用a标签)
hover：鼠标悬停在标签上的时候
active：被激活对应的状态(一般用于超链接)---鼠标按下的时候对应的状态
focus：成为焦点(在输入框中用的比较多)
b.标签：可以通过不同的选择器去选中

2.爱恨原则：LoVeHAte - 先爱后恨
如果想要给一个标签同时给link/visited/hover/active中的两个或者两个以上的状态
设置样式，必须遵守爱恨原则(如果不按照爱恨原则可能会出问题)

上一篇 下一篇

猜你喜欢

热点阅读