CSS元素总结及HTML布局

HTML标签

<div>布局标签           <h1-h6>标题标签              <p>段落标签             <a>超链接标签          <b>粗体文本

<span>内容标签       <button>按钮标签             <table>表格标签       <ul>无序标签    <li>搭配ul使用<link>引入外部样式           <style>css内部样式           <script>JS内部样式           <select>下拉框

<Input>输入框标签            <i>斜体文本标签       <big>大号字体标签           <img>嵌入图片标签

<input type=”text”>文本框 placeholder默认值          <input type=”date”>日历控件  <input type=”button” value=”按钮”>   <input type=”checkbox”>勾选框        <input type=”color”>调色板

<input type=”file”>选择文件       <input type=”password”>密文框        <textarea>文本域

CSS元素

1. display:block将行内元素转换为块级元素             inline将块级元素转换为行内元素

inline-block行内块级元素

1. background:no-repeat图片背景不重复       background-position:背景位置  background-color:背景颜色      background-size背景的尺寸     background-repeat背景重复    background-image:url(“”)背景图片                    background是复合属性

2. text-decoration文字修饰   none取消修饰线       underline下划线        overline上划线

line-through中划线

1. position定位      relative相对定位       absolute绝对定位     fixed固定定位

2. width宽度          height高度        auto自动          margin外边距           padding内边距         cover包裹      float浮动(浮动可以将行内元素块级化)                clear清除浮动           border边框       border-style边框样式    font-size字体大小             color字体颜色           left左        right右     top上 bottom下         ::before伪元素开头            box-sizing:盒子的样式

::after伪元素结尾        zoom兼容IE8以下浏览器         opacity:透明度0-1

CSS样式表的基本使用 内联样式>内部样式>外部样式

为文档添加样式的4种方式：

1、使用内联样式：直接将样式定义到HTML元素中(写在标签里)。

                       这种作用范围有限，只影响它所在的标签，

              而且总是覆盖嵌入样式和链接样式。

              <div style="width:200px;height:200px;"></div>

2、使用内部样式：写在<style>标签中。作用范围仅限于当前页面，

              内部样式覆盖链接样式，但

                       也会被内联样式覆盖。

              <style type="text/css"> CSS样式</style>

3、链接样式：写在单独的CSS样式表中。链接样式的作用范围可以是整个网站。

       只要使用<link>

                     标把样式表链接到页面，相应页面就可以使用样式。

            <link href="链接表地址" rel="stylesheet" type="text/css"/>

4、@import指令导入外部样式文件：和链接样式类似。

       引用@import指令在某些浏览器(IE)

                     可能会出现“屏闪”。所以我们应该尽量的避免使用@import指令。

            而是尽量使用

            链接外部样式表。

            <style type="text/css">@import url(地址);</style>

CSS选择器

1、CSS样式的语法格式：

 p    {color:red;}     元素选择器(元素选择器是最简单的选择器)

 选择器 属性    值

 根据这个结构我们可以扩展：

 例如：p{color:red;font-size:14pt;font-weight:bold;}

        h1,p,a{color:blue;font-size:14pt;}//组合选择器

2、所有用于选择特定元素的选择器分三种：

       上下文选择器(迭代选择器)：基于祖先或同胞元素选择一个元素

    ID和类选择器：基于id#和class的属性值进行选择元素。

    属性选择器：基于属性的有无和特征进行选择。

   

    ①上下文选择器：

    上下文选择器的语法格式：标签1 标签2{属性:值;}

    //注意：组合选择器和上下文选择器的区别，组合选择器以逗号隔开，

    上下文选择器以空格隔开

   

    ②特殊的上下文选择器

    子选择器> :

           语法格式:标签1>标签2  解释说明：标签1和标签2是父子关系。

    紧邻同胞选择器+ :

           语法格式:标签1+标签2  解释说明：标签2紧跟同胞标签1的后面。

    一般同胞选择器~ :

           语法格式:标签1~标签2  解释说明:CSS3新增的兄弟选择器，标签1、2是同胞即可，不一定紧挨着。

        通用选择符* : *       .

        解释说明:通用选择器*是一个通配符，匹配任何元素。

    ③id选择器和class选择器

    id选择器：语法格式: #idValue

    class选择器：语法格式: .classValue 

    ④属性选择器

    属性名选择器：

           语法格式：标签名[属性名]

    属性值选择器：

           语法格式：标签名[属性名="属性值"]

伪类

       没有类会附加到标记中的标签上。

       伪类分为两种(以及新增的伪类选择器)：

    UI伪类：会在HTML元素处于某种状态时(例如：鼠标指针位于连接上)，

           为该元素应用CSS样式。hover

    结构化伪类：会在标记中存在某种结构上的关系时(

           例如：某元素是一组元素中的第一个或最后一个)，

                    为该元素应用CSS样式。

    :not和:target(CSS3新增的两个特殊的伪类选择器)

             

    UI元素状态伪类选择器有如下几个：

    Selector:link ：匹配Selector选择器且未被访问前的元素(通常只能是超链接)。

    Selector:visited ：匹配Selector选择器且已被访问前的元素(通常只能是超链接)。

    Selector:hover ：匹配Selector选择器且处于鼠标悬停状态的元素。

    Selector:active ：匹配Selector选择器且处于被用户激活(在鼠标点击与释放之间的状态)

                                的状态的元素。

    Selector:focus ：匹配Selector选择器且已得到焦点的元素。

    Selector:enabled ：匹配Selector选择器且当前用于处于不可用状态的元素。

    Selector:disabled:匹配Selector选择器且当前处于不可用状态的元素。

    Selector：checked :匹配Selector选择器且当前处于选中状态的元素。

   

    Selector：default :匹配Selector选择器且页面处于打开时选中状态的元素

                                       (即使当前没有被选中亦可)。

    Selector：read-only :匹配Selector选择器且当前处于只读状态的元素

    Selector：read-wirte :匹配Selector选择器且当前处于读写状态的元素

       Selector：selection :匹配Selector选择器的元素中当前被选中的内容。

   

    特别提示：1、一个冒号(:)表示伪类，两个冒号(::)表示CSS3新增的伪元素。

                  2、上面的Selcotor选择器可以省略，如果省略则可以匹配处于某种

            状态下的多个元素。

结构化伪类

Selector:root :匹配文档的根元素。在HTML文档中，根元素永远是<html>元素

       Selector:first-child : 表示一组同胞元素中的第一个元素。

    Selector:last-child  : 表示一组同胞元素中的最后一个元素。

    Selector:nth-child(n)  : 表示一组同胞元素中的第n个元素。(顺数第n个)

    Selector:nth-last-child(n)  : 表示一组同胞元素中的倒数第n个元素。(倒数第n个)

   

    Selector:only-child : 匹配符合Selctor选择器，而且必须只有一个子节点。

    还有其他的几个结构化选择器：和上面的类似

    Selector:first-of-type

    Selector:last-of-type

    Selector:nth-of-type(n)

    Selector:nth-last-of-type(n)

      Selector:empty

特殊的伪类选择器

Selector1:not(Select or2)匹配Selector1,但不匹配Selector2,相当于从Selector1中减去Selector2

Selector:target(target 目标)说明：如果用户点击一个指向页面中其他元素的链接则那个元素就是目标(target)

 

层叠

层叠规则：

    ①层叠规则一：找到应用给每个元素和属性的声明。

                     说明：浏览器在加载每个页面时，都会据此查找到每条CSS规则，

               并标识出所有受到影响的HTML元素。

    ②层叠规则二：按照顺序和权重排序。

                     按顺序：说明：浏览器依次检查CSS样式的来源，并设定匹配的属性，如果

                          匹配的属性在下一个来源也有定义，则更新该属性的值，如此循环。

               权重排序：!important

    ③层叠规则三：按特指度排序。

                         计算特指度(ICE 公式)

                I     C      E

                id   class   Element

                1.选择器中有一个ID，就在I的位置上加1；

                2.选择器中有一个类(class),就在C的位置上加1；

                3.选择器中有一个元素(标签)名，就在E的位置上加1；

                4.得到一个三位数。得到的这个数就是我们的特指度。

             例如：     I     C      E

             p           0     0      1     特指度=1

        p.largetext           0     1      1     特指度=11

        p#largetext          1     0      1     特指度=101

        body p.largetext  0     1      2     特指度=12

        body p#largetext 1     0       2      特指度=102

       

    ④层叠规则四：顺序决定权重。

                     说明：如果两条规则都影响到某元素的同一属性，而它们的特制度也相同，

               则位置最靠下的胜出。

 

     规则一：在特指度相同的情况下，按排列顺序

字体的相关属性

color:该属性用于控制字体颜色，该属性值包括字符类型的颜色名、十六进制的颜色值、

             rgb(255,255,255)值。还有CSS3提供的HSL颜色值。

    font-famliy:设置文字的字体。因为浏览器内嵌字体的支持，该属性可以设置多个显示字体，

                       浏览器按该属性指定的多个字体依次搜索，以优先找到的字体来显示文字，

                多个属性值之间用逗号(,)隔开。

    font-size:设置字体的大小。此处的字体大小分为相对字体大小和绝对字体大小。

                    还可以使用关键字。例如：medium,samll,large,samller,larger等

              绝对字体大小：使用像素(px),点(pt),皮卡(pc),英寸(in)来设置字体的大小，

                                它们是绝对单位，设置多大就是多少，不会受到祖先元素的字体大小影响。

              相对字体大小：使用百分比(%),em或者rem,这些单位的值是相对的，该字体

                                 的大小要相对该元素最近的“被设定过字体大小”的祖先元素来确定，

                          比绝对字体大小的设定要复杂点。

   font-style:设置字体的风格。属性值有：normal(正常),italic(斜体),oblique(倾斜)。

   font-weight:设置字体是否加粗。属性值：lighter,normal,bold,bolder.

   font-variant:设置文字的大写字符的格式。属性值：normal,small-caps(小型的大写字母字体)

   font: 简写。简写规则：规则一：必须声明font-size和font-famliy的值

                                   规则二：声明顺序

                                ①font-weight,font-style,font-variant不分先后

                            ②然后是font-size

                            ③最后是font-famliy

文本属性

text-decoration:该属性用于控制文字是否有修饰线。属性值：none,underline(下划线),

                            line-through(中划线),overline(上划线),blink(闪烁)

    text-align:设置文本对齐。属性值：center,left,right,justify(两端对齐)。

    text-shadow:该属性用于设置的文字是否有阴影效果。

                         color:指定该阴影的颜色。

                xoffset:指定阴影在横向上的偏移。

                yoffset:指定阴影在纵向上的偏移。

                radius：A指定阴影的模糊半径。模糊半径越大，阴影看上去越模糊。

                多重阴影：多加几组数据即可。

                sytle="text-shadow:5px 5px 2px #cf0"

    line-height:设置文字的行高，即字体最低端与字体内部顶端之间的距离。

                         负值的行高可以实现阴影效果。

    text-transform:设置文字的大小写。属性值：none,capitalize(首字母大写),

                         uppercase(全部大写),low  ercase(全部小写)

    letter-spacing:设置字符之间的间隔。

word-spacing:设置单词之间的间隔。

边框的相关属性

宽度(border-width):可以使用thin,medium,thick等文本值，也可以使用除百分比和负数之外

                                  的任何绝对值。

    样式(border-style):有none(无边框),hidden(隐藏边框),dotted(点线边框),

                                  dashed(虚线边框),solid(实线边框),double(双线边框),

                      groove(3D凹槽边框),ridge(3D凸槽边框),inset(3D凹入边框),

                      outset(3D凸出边框)等文本值。

    颜色(border-color):可以使用任何颜色值，包括RGB,HSL,十六进制颜色值和颜色相关的关键字。

    CSS3提供的圆角边框：border-radius：该属性用于指定圆角边框的圆角半径。

                                 border-top-left-radius:该属性用于指定左上角的圆角半径。

                     border-top-right-radius:该属性用于指定右上角的圆角半径。

                     border-bottom-left-radius:该属性用于指定左下角的圆角半径。

                     border-bottom-right-radius:该属性用于指定右下角的圆角半径。

     CSS3新增的box-shadow属性为盒模型添加阴影，该属性可用于整个盒模型添加阴影。

     box-shadow:是一个复合属性。它含有以下5个属性值。

                        hOffset:该属性值控制阴影在水平方向的偏移。

                vOffset:该属性值控制阴影在垂直方向的偏移

                blurLength:该属性值控制阴影的模糊程度。

                scaleLength:该属性值控制阴影的缩放程度。

                color:该属性值控制阴影的颜色。

                {box-shadow:10px }

盒模型

盒模型：所谓盒模型，就是浏览器为页面中的每个HTML元素生成的矩形盒子。这些盒子们都要按照可见板式模型在页面上排布。可见的板式模型主要

          由三个属性控制：position属性、display属性和float属性。

          position属性控制页面上元素间的位置关系。

          display属性控制元素是堆叠、并排或者不在页面上显示。

          float属性提供控制的方法，以便于把元素组成成多栏布局。

    盒模型讲解：在默认的情况下，每个盒子的边框是不可见的，背景也是透明的。所以我们

                    不能直接的看到页面中的盒子结构。我们先从每个元素的属性开始，这些属性分为3组：

              1、边框(border):可以设置边框的宽度、样式、颜色。

              2、内边距(padding):可以设置盒子内容区(content)和边框的间距。

              3、外边距(margin):可以设置盒子和邻元素的间距。

        解释：内容(content)就是盒子里装的东西。

                内边距(padding)怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料。

             边框(border)就是盒子的本身。

             外边距(margin)就是两个盒子之间的距离。

        一个盒子有4条边，因此与边框、内边距、外边距相关联的属性也各有4个，分别是

        上(top)右(right)下(bottom)左(left)

        border-top,border-right,border-bottom,border-left

        padding-top,padding-right,padding-bottom,padding-left

        margin-top,margin-right,margin-bottom,margin-left

       

        简写样式：

        CSS为margin,border,padding分别规定了简写属性，通过一条声明就可完成设定。

        在每个声明中，属性值得顺序都是上右下左的顺序，想象一下顺时针旋转就可以了。

    例如：{margin-top:3px;margin-right:4px;margin-bottom:5px;margin-left:7px;}

    简写：{margin:3px 4px 5px 7px;}

           有时不需要将4个值全部写出，哪一边没写，就用对边的值。

        {margin:3px 4px 5px;}那么左边的值就和右边的值一样，4px。

        {margin:3px 4px;}

        {margin:3px;}

背景

背景：背景支持为元素添加背景颜色和背景图片，接下里介绍背景相关的属性。

       background-color:背景颜色。

    background-image:用于设置背景图片。注意：如果同时设置背景颜色(background-color)

1. 景图片(background-image)，背景颜色会被背景图片覆盖。该属性需要使用url()函数指定图片地址，图片的地址既可以是相对的，也可以是绝对的。

background-repeat:用于设置对象的背景图片是否平铺(重复显示)。在指定该属性之前，必须先指定背景图片(background-image)

1. 属性有repeat(纵横同时重复),no-repeat(不重复),repeat-x(x轴方向重复),repeat-y(y轴方向重复) 4个值。

2. background-position:用于控制背景图片的位置。background-position有5个关键字值分别是：top,left,bottom,right,center。可以通过任意两个关键字组合来定位。也可以通过百分比来定位。例如：background-position:50% 50%。第一个百分比对应横坐标，第二个百分比对应纵坐标。

3. background-attachment:设置背景图片是随对象内容滚动还是固定。在指定该属性之前，必须先指定背景图片。该属性的两个值：scroll(默认),fixed(固定)。

background:这是一个复合属性，可以同时设置背景颜色、背景图片、背景重复、背景位置等。

CSS3还可以给元素背景添加多个背景图片。

浮动

在页面布局时，一般用float属性来实现多栏布局，导航菜单等等。

浮动(float)的三个属性值：left(左浮动),right(右浮动),none.

浮动的意思就是把元素从常规的文档流中拿出来，浮动的元素在脱离了常规的文档流之后，

原来紧跟其后的元素就会在空间允许的情况下，向上提升到浮动元素平起平坐。

如果想要浮动元素紧跟的元素停留在原始的位置，不跟着浮动，就对该元素设置clear的属性值。

       浮动(float)的三个属性值：left(左浮动),right(右浮动),none.

clear（清除浮动）的三个属性值：left（清除左侧浮动）,right,both

display属性

在html的元素中我们将元素分为块级元素和行内元素。

块级元素默认占据一行，允许通过CSS设置宽度和高度。例如<div> <p>元素。

行内元素不会占据一行，默认允许在一行中可以放置多个元素。

即使通过CSS设置宽度和高度也不会的作用。例如：<a>

 

块级元素的display属性值默认为block，行内元素的display属性默认值为inline.

那么我们可以通过设置display属性值去改变块级元素和行内元素。

display的三个属性值：block,inline,none（用于设置目标属性隐藏,隐藏之后,   其占用的页面空间也会释放）。

控制组件的滚动条

CSS提供了overflow,overflow-x,overflow-y这三个属性来控制

html组件不够容纳内容时的显示方式。这三个属性的功能基本相似，区别就是控制的方向不同。

overflow同时控制两个方向，overflow-x控制水平方向，overflow-y控制垂直方向。

属性值：hidden,auto

CSS3 transform变形

transform：该属性用于设置变形，该属性支持一个或多个变形函数。

       rotate(angle):该函数用于设置元素旋转的度数。例如：transform：rotate(30deg);

    skew(sx,yx):该函数用于设置元素的一个扭曲效果。例如：transform:skew(10deg,20deg);

       scale(sx,xy):该函数用于设置元素的缩放效果。

       translate(tx,ty):该函数用于设置元素的位移。

       matrix(m11,m12,m21,m22,dx,dy):该函数是一个基于矩阵变换的函数。前面的4个参数将组成变形矩阵,

       后面的dx,dy主要是指在坐标轴上的一个偏移量。

变形-旋转

旋转rotate(-30deg)函数通过指定的角度参数使元素相对原点进行旋转。

它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。

如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，

元素相对原点中心逆时针旋转

扭曲

扭曲skew()函数能够让元素倾斜显示。

它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。

这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。

skew()函数不会旋转，而只会改变元素的形状。

Skew()具有三种情况：

1、skew(x,y)使元素在水平和垂直方向同时扭曲

（X轴和Y轴同时按一定的角度值进行扭曲变形）；第一个参数对应X轴，

第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。

2、skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；

3、skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）

缩放

缩放 scale()函数 让元素根据中心原点对对象进行缩放。

缩放 scale 具有三种情况：

1、 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）

注意：Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。

2、scaleX(x)元素仅水平方向缩放（X轴缩放）

3、scaleY(y)元素仅垂直方向缩放（Y轴缩放）

位移

translate()函数可以将元素向指定的方向移动，类似于position中的relative。

或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，

而不影响在X、Y轴上的任何Web组件。

translate我们分为三种情况：

1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）

2、translateX(x)仅水平方向移动（X轴移动）

3、translateY(Y)仅垂直方向移动（Y轴移动）

矩阵

matrix() 是一个含六个值的(m11,m12,m21,m22,dx,dy)变换矩阵，用来指定一个2D变换，

相当于直接应用一个[m11 m12 m21 m22 dx dy]变换矩阵。就是基于水平方向（X轴）和

垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵，

我在这里只是简单的说一下CSS3中的transform有这么一个属性值，

如果需要深入了解，需要对数学矩阵有一定的知识。

原点

变形--原点 transform-origin:

任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。

在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、

位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，

我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，

以达到需要的原点位置。

transform-origin取值和元素设置背景中的background-position取值类似，如下表所示：

关键字                              百分数

top=top center                                     50% 0

left=left center                                      0  50%

bottom=bottom center                        50% 100%

right=right center                                 100

center=center center                           50% 50%

top left=left top                                     0 0

top right=right top                                0 100%

bottom left =left bottom                       100% 100%

bottom right=right bottom                   100% 0

动画-过度属性

早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。

但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，

让效果显得更加细腻。简单点说，就是通过鼠标经过、获得焦点，被点击或对元素任何改变中触发，

并平滑地以动画效果改变CSS的属性值。

在CSS中创建简单的过渡效果可以从以下几个步骤来实现：

第一，在默认样式中声明元素的初始状态样式；

第二，声明过渡元素最终状态样式，比如悬浮状态；

第三，在默认样式中通过添加过渡函数，添加一些不同的样式。

CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性：

transition-property:指定过渡或动态模拟的CSS属性

transition-duration:指定完成过渡所需的时间

transition-timing-function:指定过渡函数

transition-delay:指定开始出现的延迟时间

transition-property属性：

transition-property指定对THML元素的哪个css属性进行平滑渐变处理，该属性可以指定

例如background-color,width,height等各种标准的CSS属性。

特别注意：当“transition-property”属性设置为all时，表示的是所有中点值的属性。

用一个简单的例子来说明这个问题：

假设你的初始状态设置了样式“width”,“height”,“background”,当你在最终状态都改变了这三个属性，

那么all代表的就是“width”、“height”和“background”。

如果你的终始状态只改变了“width”和“height”时，那么all代表的就是“width”和“height”。

过度所需的时间

transition-duration属性主要用来设置一个属性过渡到另一个属性所需的时间，

也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间。

过度函数

transition-timing-function属性指的是过渡的“缓动函数”。

主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数：

ease:默认值，动画开始时比较慢，然后加快速度，达到最大速度后再减慢速度。

linear:线性速度。动画开始时的速度和结束时的速度一样（匀速）。

ease-in:动画开始的速度较慢，然后速度加快。

ease-out:动画开始的速度很快，然后速度减慢。

ease-in-out:动画开始时比较慢，然后加快速度，达到最大速度后再减慢速度.

过度延迟时间

transition-delay属性和transition-duration属性极其类似，不同的是transition-duration

是用来设置过渡动画的持续时间，而transition-delay主要用来指定一个动画开始执行的时间，

也就是说当改变元素属性值后多长时间开始执行。

有时我们想改变两个或者多个css属性的transition效果时，

只要把几个transition的声明串在一起，用逗号（“，”）隔开，

然后各自可以有各自不同的延续时间和其时间的速率变换方式。

但需要值得注意的一点：第一个时间的值为 transition-duration，第二个为transition-delay。

动画与变形

transform     transition    animation

这三大属性来实现我们的变形与动画效果。

transform是CSS3提供的一个变形的属性支持，可以对HTML元素进行常见的几何变换，

包括旋转，缩放，扭曲，位移4种变换。

也可以使用矩阵。

transform:该属性用于设置变形。该属性支持一个或多个变形函数。

CSS3提供的变形函数：

rotate(angle):该函数用于设置元素旋转的角度。

skew():该函数用于设置元素的一个扭曲效果。

scale(sx,xy):该函数用于设置元素的缩放效果。

translate(tx,ty):该函数用于设置元素的位移。

matrix(m11,m12,m21,m22,dx,dy):该函数是一个基于矩阵变换的函数。前面的4个参数将组成变形矩阵4

后面的dx,dy主要是指在坐标轴上的一个偏移量。