最近学习的内容 表单 font和text 伪类选择器 背景图片

表单

<from></from> 美 [frəm] 	用于收集用户输入
<from action="/xxxxx.php"></from> 把frome包含的表单上传到服务器xxx.php文件
action	 美 [ˈækʃn]	行动

<input>	 美 [ˈɪnpʊt]	最重要的表单元素，里面包含很多type属性

<input type="text">	文本输入
<input type="text" name="firstname" >	文本输入
type	美 [taɪp]	类型
text	美 [tekst]	文本

<input type="radio">	 单选按钮
<input type="radio" name="同样的名字可以单选" value="male" checked="checked">	单选按钮允许用户在有限数量的选项中选择其中之一
radio	美 [ˈreɪdioʊ]  收音机
value	美 [ˈvæljuː]	价值
male	美 [meɪl]	男性
checked	美 [tʃekt]	选中

<input type="submit">	表单处理程序提交按钮
submit	美 [səbˈmɪt]	提交
<input type="submit" value="显示提交按钮文字">

<input type="checkbox" name="一样的名字可以多选">	多选
checkbox	美 [ˈtʃekbɑːks] 复选框

<select></select>	下拉列表
select	美 [sɪˈlekt]	选择
<select>
    <option>输入内容</option>	下拉内容
</select>
option	美 [ˈɑːpʃn] 选项

<textarea>这里输入显示的默认内容</textarea> 文本域
textarea	美 [tekst ˈeriə] 文本区域

<label>标注标签，点击label的文字和图片可以选择上面</label>
label	美 [ˈleɪbl] 	标签
<input type="text" id="name"><label for="name">用户名</label>这样点击后用户名就可以直接把光标移动到text文本框

font和text

标题标签比较特殊，需要单独的指定文字大小

font-size:16px；	 
size 美 [saɪz]	大小
文本粗细
font-weigth:normal|bold|bolder|lighter|number（100-900）
weight	美 [weɪt]	字体粗细
normal	美 [ˈnɔːrml]	正常的 数字400
bold	美 [boʊld]	粗体 数字700
bolder	美 [ˈboʊldər]	更粗体
lighter	美 [ˈlaɪtər]	 细体
number	美 [ˈnʌmbər]	数字（100-900）
文本对其
font-align:right|center|left|
align	美 [əˈlaɪn]	排列
left	美 [left]	左边
center	美 [ˈsentər]	居中
right	美 [raɪt]	右侧
文本装饰
text-decoration：none|underline|overline|line-through
decoration	美 [ˌdekəˈreɪʃn]	装饰
none	美 [nʌn]	没有
underline	美 [ˌʌndərˈlaɪn]	下划线
overline	美 [ˈoʊvər laɪn] 上划线
line-through	美 [laɪn θruː]	删除线
文本缩进
text-indent:2em; em是相对单位，当前元素1个文字大小来针对的，2em直接缩进当前文字大小的2个文字距离。
text-indent	美 [tekst ɪnˈdent]	文字缩进
行间距
行间距是由文字本身的高度和上间距和下间距
line-height：26px
hright	美 [haɪt]	高度*/

伪类选择器

a:link 		/*选择所有未被访问的链接*/
a:visited	/*选择所有已被访问的链接*/
a:hover		/*选择鼠标指针位于其上的链接*/
a:active	/*选择活动链接（鼠标按下去未弹起的链接）*/

元素显示模式的转换

display	美 [dɪˈspleɪ]	/*显示，模式转换*/
dispaly:block; /*转换块元素*/
display:inline；/*转换行内元素*/
display:inline-block; /*转换行内块元素*/

举例

背景图片

默认情况背景图片是平铺的

可以在背景图片里面加背景颜色background-color，但是是在背景图片下面。

background-color	背景色

background-image:none|url()	指定元素背景的图像	默认情况图像是重复的
image	美 [ˈɪmɪdʒ]	图像

background-repeat:repeat|no-repeat|repeat-x|repeat-y	有一些图片只适合在莫一种方向重复才会合适
repeat	美 [rɪˈpiːt]	重复
repeat-x	水平重复
repeat-y	垂直重复
no-repat	不重复

background-position:	用于指定背景图像的位置
position	美 [pəˈzɪʃn]	位置
top left
top 25px
也可以用像素加上英文组合

background-attachment:	指定背景图像滚动还是固定
attachment	美 [əˈtætʃmənt]	附着
scroll	美 [skroʊl]	移动的
fixed	美 [fɪkst]	固定的

background:	背景简写
顺序不是固定，但是最好有一个自己的顺序大多数都会是
background-color
background-image
background-repeat
background-attachment
background-position
如果是红色、图像、不重复、在右上角
background:red url("#") no-repeat right top;

opacity	美 [oʊˈpæsəti]	不透明度
opacity	值在0.0-1.0	子元素都会继承透明度

background:rgba(0,0,0,0.3);
前面3个事对应rgb颜色，最后a事alpha的意思取值事0~1之间
这种写法事不会对子元素应用透明度只会对背景颜色产生变化