day2-表单标签和css基础

1.表单标签和input标签

代码示例

    
        
        
    
    
        
        
        

            
            
            
            
            
            男
            女
            
            

            
            篮球
            足球
            乒乓球
            
            
            点我
            
            
        
        

            
            
            
            
            
            
        
    

2.下拉菜单和多行文本

代码示例

    
        
        
    
    
        

            
            
                成都
                重庆
            
            
            
            
                
                    成都
                    雅安
                    绵阳
                
                    郑州
                    绵阳
            
            
            
            
            
            
        
    

3.div和span

代码示例

    
        
        
    
    
        
        

            aaa
        
        

            bbb
        
        
        
            aaaaaaa
        
        
            bbbbbbb
        
        
    

4.css基础

1.什么是css
    css就是web标准中的表现标准,专门用来对网页中的标签进行布局和设置样式的一门语言,
    目前使用的是css3,又叫样式表
    
    常用的css属性
    color - 设置字体颜色
    background-color - 设置背景颜色
    width - 宽度
    height - 高度
    
    css基本语法
    选择器{属性1:属性值1; 属性2:属性值2;...}
    {} - 固定写法
    属性 - 必须是css提供的属性,总共200多个
    属性值 - 如果属性的值是用来表示大小数字,后面必须加单位.例如:px,em
    
    css中的颜色值:第一种是英文单词
                            第二种是:#6位16进制值
                            第三种是:rgb(r,g,b),rgba(r,g,b,alpha) alpha - 透明度(0-1)
                            
    属性和属性值之间用:隔开,多个属性之间 用;隔开
    
    说明:
    选择器 - 用来选中需要设置样式的标签
    
    2.怎么使用css
    内联样式:将样式表写在标签的style属性中 - 只对当前的标签有效
    内部样式:将样式表写在head中style标签 - 只对当前html文件中标签有效
    外部样式:将样式表写在外部的css文件中,然后在head中通过link导入 - 对所有html有效
    
    内联样式的优先级最高,内部样式和外部样式谁后写,谁的优先级最高

html代码

    
        
        
        
        
        
        
        
        
        
        
        
        
        
        
    
    
        百度一下
        
我是一个段落
        
我是一个标题
        
我是一个段落2
        
        
        

        
        
    

css代码

a{
    color: slateblue;
    background-color: silver;
}

p{
    color: saddlebrown;
}

div{
    background-color: green;
}

5.css选择器

选择器{属性1: 属性值1;....}
    选择器 - 选中需要添加样式的标签
    
    常用的选择器：元素选择器、id选择器、class选择器、群组选择器、父子选择器、统配符
    1.元素选择器: 将标签名作为选择器，选中指定的标签。
                 用法：标签名{}
    2.id选择器: 将标签中的id属性的值作为选择器，选择id值对应的标签
                用法：#id值{}
                
    3.class选择器:将标签中的class属性的值作为选择器，选中class值对应的标签
                用法：.class值{}
    4.群组选择器: 多个选择器用逗号隔开作为一个选择器，同时选中所有选择器对应的标签
                a,p{}  -- 选中所有的a标签和p标签
                .p1, img{} -- 选中所有的img和class值是p1的标签
                #p2,#p3,p{} -- 选中所有id值是p2和p3的标签，以及所有的p标签
                
    5.父子选择器：多个选择器用空格隔开作为一个选择器，按顺序依次往后找，找到最后一层选择器对应的标签
                div div p{} -- 选中div里面的div里面的p标签
                #d1 a -- 选中id值是d1的标签中的a标签
    6.通配符: 将*作为选择器，选中当前网页中所有的标签
              *{}

代码示例

    
        
        
        
        
        
    
    
        

            

                百度一下3
            
            
我是段落1
            
我是段落11
            百度一下2
        
        
        

            
我是段落2
            
我是段落3
            
我是段落4
        
        
        百度一下1
        
    

6.伪类选择器

1.伪类选择器
    伪类选择器是选中某个标签的不同的状态。可以给不同状态设置不同的样式
    
    a.link
    标签:link{} - 选中初始状态 (a标签的初始状态指的是a对应的网址一次都没有访问成功的时候对应的状态)
    例如：a:link{}; p:link{};  #a1:link{}  .a2:link, #a1:link{}
    
    b.visited: 访问后的状态
    c.hover: 鼠标悬停在标签上对应的状态
    d.active: 鼠标按住不放对应的状态
    
    注意：使用伪类选择器的时候要遵守爱恨原则（LoVeHAte）,如果不遵守可能会导致某些状态的样式无效
    
    2.选择器的优先级: 权重值越大，优先级越高。如果权重值相同，后写的优先级高
    元素选择器权重: 0001 - 1
    class选择器权重: 0010 - 2
    id选择器权重：0100 - 4
    伪类选择器权重：0001 - 1
    群组选择器权重：单独看每个选择器的权重  
    父子选择器权重：所有选择器权重之和
    
    内联样式的优先级是最高的

代码示例