html第四天

伪类:   伪造    class类

链接不同的状态:
a:link{  未访问的链接   }
a:visited{ 已访问的链接  }
a:hover{ 鼠标经过   }
a:active{ 鼠标按下    }

当四个伪类一起使用的时候,使用顺序不能改变.如果四个一起使用基本是在a标签里使用.
也可以单独使用,如单独使用基本只会使用后两个.

transition:2s;   时间延迟    单位/秒s

通过伪类查找元素: 所有标签通用
1. p:first-child{ 查找第一个p标签  }
2. p:last-child{ 查找最后一个p标签}
3. p:nth-child(n){ 查找第n个p标签 }

:focus   可以设置输入框在聚焦时的样式

伪元素:  伪造的标签

:first-letter   选择元素第一个字母
:first-line     选择元素第一行
:before         在元素之前添加内容
:after          在元素之后添加内容
配合content:"内容"   

案例:
     div::before{
        content: "hahaha";
        color: blue;
        font-size: 20px;
     }

    div::before{
        content:url(img/aaa.jpg)
    }

英文字母和数字换行:
word-wrap:break-word;

权重(优先级)   用在选择器
!important>行内样式 > id > class类 > 标签 >子选择器（ul < li）>后代选择器（li a）>伪类选择（a:hover,li:nth-child）

权重的计算:
行内样式   +1000
id    +100
属性/class类/伪类   +10
标签选择器/伪元素    +1

案例:

body .it p {  12  }
div p span {  3  }
#aa .con span {  111   }

!important   提升权重

继承性:
css子类会继承最高元素的样式,子元素的子元素也一样

1、字体系列属性

　　font-family：字体系列
　　font-weight：字体的粗细
　　font-size：字体的大小
　　font-style：字体的风格

　　2、文本系列属性

　　text-indent：文本缩进
　　text-align：文本水平对齐
　　line-height：行高
　　word-spacing：单词之间的间距
　　letter-spacing：中文或者字母之间的间距
　　text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
　　color：文本颜色

　　3、元素可见性：
　　visibility：控制元素显示隐藏
　　4、列表布局属性：
　　list-style：列表风格，包括list-style-type、list-style-image等
　　5、光标属性：
　　cursor：光标显示为何种形态

table表格
th   标题
tr   行
td   列

自带的属性
width  
height
border
cellspacing   行间距    调整行与行之间的间距
cellpadding   列间距    调整内容到边框的间距
align="center"     对齐方式

合并行:rowspan
合并列:colspan

vertical-align: 垂直居中     center  top  bottom 

form表单

method=""    提交方式
get    明文提交  不安全   传值    
post   隐藏提交  安全     登录注册  

action=""    提交地址

<input />   输入框   单标记
type       类型

text        文本类型
password    密码类型
radio       单选类型
checkbox    多选类型

textarea    文本域
rows  高
cols  宽
resize: none;  禁用文本域重置大小功能
select      下拉列表
option      下拉列表项
注:默认显示第一个

submit   提交按钮
reset    重置按钮
button   按钮类型
<button>按钮</button>

单选多选默认选择:checked="checked"
单选多选不可点击:disabled="disabled"
下拉列表默认选择:selected="selected"