css-11.4

1.引入css的三种方式:

    1)内嵌式:直接将样式书写在style标签中,style标签放在head标签中,这种方式将结构与样式初步解耦,但解耦不彻底,代码重用性较差

    2)外链式:使用最多的一种引入方式,彻底将结构与样式解耦,引入一个独立的css文件到本页面

        rel:表示引入一个样式表    href:表示独立css文件的路径    <link rel="stylesheet" href="./css/mystyle.css">

    3)行内式:直接将css代码写在标签内,这种方式严重违背了解耦初衷,但因其优先级极高,所以使用较多

    优先级:行内式优先级最高,外链式和内嵌式如果出现冲突,则谁放在后面则会覆盖前面的;

    font-family:方正静蕾简体:设置字体

    color:red :设置颜色

    font size:设置字体大小

2.标签:

    1)div:此标签表示划定一个区域,此标签自带换行,若不指定宽度,自动占满父元素的宽度

    2)p:表示一个段落,自动换行,再空一行

    3)span与label都称之为便签元素多搭配js或者表单等使用，

    用来进行信息的提示和表单项的绑定等，单独使用没有任何特殊结构和样式    

3.选择器

    选择是css中引入的一个重要的知识点，可以用非常简单的代码从页面中拿取元素，

    这种技术之后影响了许许多多的前端js类库等,例如jQuery直接照搬了css的选择器机制

    在css中分为两种选择器:基本选择器和复合选择器

    1)基本选择器 

         标签选择器:target{ 直接使用标签名作为选择元素的依据,这种选择器极易引起误操作,几乎不会单独使用 }

         类名选择器.classname{使用类名作为选择元素的依据},class不唯一,可随意书写

         ID选择器:#idname{使用id作为选择元素的依据} 注意id在前端中全文唯一   

    CSS层叠特性:当几种基本选择器冲突时的优先级问题:标记<类名<ID,若存在行内式则以行内式为准 

    2)复合选择器

        1)交集选择器:由一个基本选择器后紧跟一个类别或者Id选择器,必须满足两者才可选取;

        targer.classname{}  ;  span#id{}

        2)并集选择器

        sel1,sel2,sel3{} 满足其中一个即可进行选取

        3)后代选择器

        sel1 sel2 sel3{} 根据左祖先右后代的关系选取具有特定层级关系的元素

    CSS继承特性:在没有任何冲突的前提下,子元素会集成父元素的所有css渲染样式

4.页面元素类型:在CSS中有将元素分为多种类型,根据其特点主要有一下三种:

    1)块元素(block)

        eg:div p h1~h6 布局元素 ul li

        块元素在结束时自带换行,一行只能书写一个,如果不设置其宽度,则元素占满父元素的宽度,设置盒子模型有效,设置对齐方式有效,

        页面中大多元素都是块元素

    2)内联元素(inline)

        eg:span label a

        内联元素在结束时没有换行,一行可以书写多个,从左往右排列,设置盒子模型无效,设置对齐方式无效

        img:内联块元素(inline-block):内联块元素,img是一个具有所有块元素特征的内联元素

    3)空元素(empty)

        eg:br hr meta

        空元素一般不嵌套任何内容,主要用来进行对页面的设置和渲染某些样式

   display:设置元素类型  <span style="display: block;">

5.盒子模型:

    在网页中,一个元素占有空间的大小有几个部分构成,其中包括元素的内容(content),元素的内边距(padding)

    元素的边框(border),元素的外边距(margin)四个部分组成,这四个部分占有的空间中,有的部分可以显示相应的

    内容,有的部分用来分隔相邻的区域,四个部分一起组成了盒子模型

    关于标准文本流:

        在css中将页面中各种元素看做一个一个矩形的盒子这些盒子具有四个边框，由于大部分元素是块元素

        所以整个页面在不设置css的前提下从上到下依次排列就像水流一样，这种默认从上到下排列的状态称之为

        文档流，或者标准文本流

6.浮动

float:left/right

    一个块元素在不设置其宽度的前提下会占满整个父元素的所有宽度,如果我们设置浮动后,则元素开始向浮动方向

    不断减小,,减小到内部内容宽度为止,之后漂浮在页面上,原先的位置被之后的元素顶替,继续维持文档流

    如果想让元素不受到其它元素浮动的影响  : clear:left|right|both;