css选择器

一：css的介绍：

随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。

二：css的注释：

/注释的内容/

写注释的优势：

1.便于修改

2.有利于团队开发

3.方便维护

4.注释里不能嵌套注释

三：css的优势：

1.方便管理

2.代码可以重用

3.css浏览器可以缓存下来，提高速度

扩展知识：(可能面试的时候会问到)

网站开发的流程

1.了解市场需求

2.提出需求(boss,产品经理，客户)(弄出原型图)

3.ui设计出图

4.交给前段写html，css js 同时后台开发功能模块

5.后台嵌套页面实现业务逻辑

6.内部测试

7.公司测试部测试(黑盒，白盒，灰盒)

8上线

五：css的连接方式(三种)

1.行内样式表

style=”wdith:100px;height:100px;background:red”

2.内联样式表

要写在head里面

CSS代码

3.外联样式表

要写在head标签里面

六： css选择器(这里我们介绍八种)

//class选择器 id选择器 标签选择器 属性选择器

//伪类选择器 组合选择器 分层选择器 通配符选择器

css样式：

<style>
        /*
            通配符选择器
        */
            *{margin:0;padding:0}
            /*id选择器*/
            #box{width:100%;
                height:800px;
                background:#ccc;
            } 
            /*类选择题*/
            .header{width:100%;
                height:100px;
                background:#f90;
            }
            /*属性选择器*/
            input[name = "username"]{
                width:150px;height:20px;
            }
            /*标签选择器*/
            p{color:#blue;}
            /*伪类选择器*/
            a:link{color:#ccc;}
            a:visited{color:red;}
            a:hover{color:blue;}
            a:active{color:pink;} 
            /*组合选择器*/
            .body , .footer{margin:5px;
                            background:pink;
                        }
            /*分层选择器*/
            .nav img {width:100px;
                        height:100px;
                        background:green;
                    }
        </style>

html:

<p id = "box">
            <p class = "header">
                <form action = "" method = "" enctype ="multiple/form-data">
                    <input type = "text" value = "" name = "username"/>
                    <input type = "password" name = "password" value = ""/>
                </form>
            </p>
            <p class = "nav">
                <img src = ""/>
            </p>
            <p class = "body">
 
                <p class = "body_top">
                    <span></span>
                    <p>Hello world</p>
                </p>
                <p class = "footer"></p>
            </p>
 
            <a href = "https://www.baidu.com">我是百度</a>
        </p>