day30-总结（css）

    
        
        
        
        
    
    
        
day30-总结
        

            
表单标签form
            
下拉菜单和多行文本
            
空白标签
            
初识css
            
css选择器
            
伪类选择器
        
        

            

                表单标签form
            
            表单标签

            专门用来收集信息的标签，可以提交表单中收集的信息

            action属性：设置提交信息的位置

            method属性：提交方式 - post/get
            

            <form action="" method="post">

                        input type="submit" value=""/>

            </form>

            

            input标签 (单标签) 
        
                1.是表单标签 

                2.type属性：

                

                    
text - 普通的文本输入框
                    
password - 密码输入框，输入的值密文显示
                    
radio - 单选按钮，
                        同一类型对应的name值必须一样，
                        value设置按钮提交的值，
                        checked设置为checked使其处于选中状态
                    
checkbox - 多选按钮，
                        同一类型对应的name值必须一样，
                        value设置按钮提交的值，
                        checked设置为checked使其处于选中状态
                    
button - 普通按钮
                    
reset - 重置按钮，
                        重置当前所在的form的各标签的值
                    
file - 文件选择器
  
                
                3.name属性：必须设置(a.用于提交信息) 

                4.value属性：标签内容 

                5.placeholder属性：占位符(提示信息) 

                6.maxlength属性：限制最多输入位数 

                7.readonly：输入框只读 

                8.disabled属性：按钮不可点击 disabled:disabledbr 

                

            fieldset标签 

                一个fieldset标签对应一个表单分组 

                legend属性：设置分组名 
 

                

            

                
账号信息
            
用户名：
            
密码：
            
            

                
个人信息
            
性别：男 
                女
            
爱好：篮球 
                足球 
            乒乓球 
            

            
             
            
        
        
        

        

        

        

            

                下拉菜单和多行文本
            
            1.下拉菜单 

            selected="selected"表示默认选中 

            <select name="city"> 

                        <option selected="selected" style="display: none;">请选择城市</option> 

                        <option value="无选项">无选择</option> 

                        <option value="成都">成都</option> 

                        <option value="遂宁">遂宁</option> 

                        <option value="北京">北京</option>
 
                        <option value="青岛">青岛</option>

            </select>
            

                    
                请选择城市
                无选择
                成都
                遂宁
                北京
                青岛
             

            

            2.多行文本 

            <textarea name="story" id="story" placeholder="请输入你的故事" style="width: 300px;height: 150px;" maxlength="400"><"/textarea>
            
        
        

        

        

        

            

                空白标签
            
            html中的标签分为2大类：

            块级标签：一行只能有一个(不管标签的宽度是多少) 

            h1-h6，p，hr，ol，ul，dl，table，form，div 

            行内标签：一行可以有多个 

            a，image，input，select，textarea，span 

            div和span标签，是空白标签，没有任何特殊的意义(无语义标签) 

            

            <div style="background-color: red; width: 100px; float: left;">
            我是div
        </div> 

    <div style="background-color: yellow; width: 90px; float: left;">
            我是div
    </div> 

        <div style="background-color: blue; width: 120px; float: left;">
            我是div
        </div> 

        <span style="background-color: green;">
            我是span
        </span> 

        

        

            我是div
        
        

            我是div
        
        

            我是div
        
        
            我是span
        
        
        

        

        

        

            

                初识css
            
            1.什么是css 

    CSS是web标准中的表现标准，用来对网页上标签的样式进行设置(长什么样，在哪) 

    css代码/css文件，称其为样式表 

    
    目前我们使用的是CSS3 

    


2.写在哪儿

    内联样式表：将css代码写在标签的style属性内 

    内部样式表：写在head标签中的style标签的内容中

    外部样式表：写在一个css文件中，通过head'中的link标签来关联

    
    优先级：内联的优先级最高，内部外部后加载优先级高

    


3.怎么写

选择器{属性：属性值； 属性：属性值} 

选择器：用来选中需要设置样式的标签 

属性：css属性 

属性值：数字且表示大小要加px或者% 

注意：属性之间用；隔开 




补充属性：color：设置字体颜色  background-color：设置背景颜色  width：设置宽度 height：设置高度 
 

        1.关联外部样式表 

        <link rel="stylesheet" href="css/index.css" />

        2.style标签 
 

        <style type="text/css"> 

            div{
                background-color: yellowgreen;
            } 

        </style> 

        
        

        

        

        

            

                css选择器
            
            选择器 

0.元素选择器(标签选择器)：标签名 

    选中所有的标签名对应的标签 

1.id选择器：#id属性值 

    每个标签都有一个id属性，整个html中，id的值必须唯一 

2.class选择器：.class名 

    给标签设置class属性，通过class属性引用样式 

3.通配符：* - 选中所有的标签 

4.层级选择器：选择器1 选择器2...{} 

5.群组选择器：选择器,选择器,...{} 

补充：css中的颜色值： 


1.颜色的英文单词

2.16进制颜色值0-255 -- 00-ff(#ff0000-红色)

3.rgb值:rgb(红,绿,蓝) rgba(红,绿,蓝,透明度) 透明度 0-1
 

<style type="text/css"> 

            .c2 p{ 
                color: blue;
            } 

            * {
                font-size: 25px;
            } 

            .c1 {
                background-color: green;
            } 

            a {
                text-decoration: none;
                background-color: yellow;
            } 

            #a1 {
                color: rgb(255,0,0);
            } 

            h1,span {
                color: gold;
            } 

        <"/style>
        
        

        

        

        

            

                伪类选择器
            
            伪类选择器 

    选择器:状态 

    :link - 超链接的初始状态 

    :visited - 超链接访问后的状态 

    :hover - 鼠标悬停到标签上的状态 

    :active - 鼠标点击时的状态 

    
    给同一个标签通过伪类选择器给予不同状态的样式时要遵循 

    LoVe HAte 

    <style type="text/css"> 

            a {
                text-decoration: none;
            } 

            a:link {
                color: deepskyblue;
            } 

            a:visited {
                color: purple;
            } 

            a:hover {
                font-size: 25px;
                color: red;
            } 

            a:active {
                background-color: yellow;
            } 

        <"/style> 

        百度一下
        
    

效果图

image.png

image.png

image.png