CSS

表格布局的缺陷：

1. 嵌套层级太多，一旦出现嵌套顺序错乱，整个页面达不到预期效果

2.采用表格布局，页面不够灵活，动其中某一块，整个表格布局的结构全都要变

HTML的块标签：
div标签：默认占一行，自动换行

span标签：内容显示在同一行

CSS语法：在一个style标签中，去编写CSS内容，最好将style标签写在这个head标签中

<style>

               选择器{

                        属性名称：属性的值；

                        属性名称2：属性的值2；

                }

</style>

CSS选择器：帮助我们找到我们要修饰的标签或者元素

<style>

            div{

                     color:red;

                      font-size:50px;

                 }

</style>

元素选择器：

元素的名称{

    属性名称：属性的值；

    属性名称：属性的值；

}

ID选择器：

以#号开头    ID在整个页面中必须是唯一的

#ID的名称{                                                                  

       属性名称：属性的值；

       属性名称：属性的值；

}

#div1{

         color：red；

}

 

类选择器：

以.开头

.类的名称{      

       属性名称：属性的值；

       属性名称：属性的值；

}

.shuiguo{

         color:yellow;

}

<div class="shuiguo">香蕉</div>

<div class="shucai">黄瓜</div>

CSS的引入方式：

           外部样式：通过link标签引入一个外部的CSS文件

           内部样式：直接在style标签内编写CSS代码

           行内样式： 直接在标签中添加一个style属性，编写CSS样式

                              <div class="shuiguo" style="color:greenyellow;">甘蔗</div>

 CSS浮动：浮动的元素会脱离正常的文档流，在正常的文档流中不占空间

                   float属性：

                                left

                                right

                    clear属性：清除浮动

                                  both：两边都不允许浮动

                                   left：左边不允许浮动

                                   right：右边不允许浮动

 流式布局：

 CSS选择器的优先级：

    1.按照选择器搜索精确度来编写：行内样式>ID选择器>类选择器>元素选择器

    2.就近原则

     CSS中的其它选择器：

                   1.选择器分组：选择器1，选择器2{属性的名称：属性的值}

                   2.属性选择器：

                                             a[title]

                                             a[title='aaa']

                                             a[href][title]

                                             a[href][title='aaa']

                    3.后代选择器：爷爷选择器    孙子选择器      找出所有的后代

                    4.子元素选择器：父选择器>儿子选择器

                    5.伪类选择器：通常都是用在A标签上