CSS

一、Css初识

CSS(Cascading Style Sheets)

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

二、Css样式规则

使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，具体格式如下

 

在上面的样式规则中:

    1.选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。

    2.属性和属性值以“键值对”的形式出现。

    3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。

    4.属性和属性值之间用英文“:”连接。

    5.多个“键值对”之间用英文“;”进行区分。

    可以用段落 和 表格的对齐的演示。

三、Css字体样式属性

    1、font-size:字号大小

       font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。具体如下：

      

   2、font-family:字体

       font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：

     p{ font-family:"微软雅黑";}

     可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。

***常用技巧：

    1. 现在网页中普遍使用14px+。
    2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
    3. 各种字体之间必须使用英文状态下的逗号隔开。
    4. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
    5. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。
    6. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

   3、CSS Unicode字体

       在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文。

     方案一： 你可以使用英文来替代。 比如 font-family:"Microsoft Yahei"。

     方案二： 在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。 font-family: "\5FAE\8F6F\96C5\9ED1"，表示设置字体为“微软雅黑”。

    4、font-weight:字体粗细

     字体加粗除了用 b 和 strong 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。

***小技巧：

     数字 400 等价于 normal，而 700 等价于 bold。  但是我们更喜欢用数字来表示。 

    5、font-style:字体风格

             字体倾斜除了用 i 和 em 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。

             font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

            normal：默认值，浏览器会显示标准的字体样式。

            italic：浏览器会显示斜体的字体样式。

            oblique：浏览器会显示倾斜的字体样式。

    6、font:综合设置字体样式 (重点)

          font属性用于对字体样式进行综合设置，其基本语法格式如下：

               选择器{font: font-style  font-weight  font-size/line-height  font-family;}

         -------------------------------------------------------------------------------------------------------------------------------------

           使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。

           注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

四、开发者工具（chrome）

         此工具是我们的必备工具，以后代码出了问题，我们首先第一反应就是：

        “按F12”或者是 “shift+ctrl+i” 打开 开发者工具。

         菜单： 右击网页空白出---查看

***小技巧：

1. ctrl+滚轮 可以 放大开发者工具代码大小。

2. 左边是HTML元素结构 右边是CSS样式。

3. 右边CSS样式可以改动数值和颜色查看更改后效果。

五、选择器（重点）

        要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。

  1、标签选择器（元素选择器）

           标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：

  

       标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。

例子：

        /*  p  div  h1  span  em  i 这是标签作为选择器 我们成为 标签选择器 */

         div {
                color: purple;
              } 

  2、类选择器

      类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：

    

     例子： .blue {
                     color: blue;
                    }

      类选择器最大的优势是可以为元素对象定义单独或相同的样式。

***小技巧：

    1.长名称或词组可以使用中横线来为选择器命名。
    2.不建议使用“_”下划线来命名CSS选择器。

     输入的时候少按一个shift键; 　浏览器兼容问题 (比如使用tips的选择器命名，在IE6是无效的) 　能良好区分JavaScript变量命名(JS变量命名是用“”)

    3.不要纯数字、中文等命名， 尽量使用英文字母来表示。

 3、多类名选择器

   我们可以给标签指定多个类名，从而达到更多的选择目的。

注意：

      1. 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
      2. 各个类名中间用空格隔开。

 多类名选择器在后期布局比较复杂的情况下，还是较多使用的。

 4、id选择器

      id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：

                #id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

     该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。

    用法基本和类选择器相同。

 5、id选择器和类选择器区别

     W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

     类选择器（class） 好比人的名字， 是可以多次重复使用的， 比如 张伟 王伟 李伟 李娜

     id选择器 好比人的身份证号码， 全中国是唯一的， 不得重复。 只能使用一次。

     id选择器和类选择器最大的不同在于 使用次数上。

 6、通配符选择器

 7、伪类选择器

   

 8、链接伪类选择器

• :link /* 未访问的链接 */

• :visited /* 已访问的链接 */

• :hover /* 鼠标移动到链接上 */

• :active /* 选定的链接 */

    注意写的时候，他们的顺序尽量不要颠倒 按照 lvha 的顺序。 love hate 爱上了讨厌 记忆法 或者 lv 包包 非常 hao

     

 9、结构(位置)伪类选择器（CSS3)

• :first-child :选取属于其父元素的首个子元素的指定选择器

• :last-child :选取属于其父元素的最后一个子元素的指定选择器

• :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型

  例子： :nth-child(odd) :nth-child(even) :nth-child(2n) 等，如果用公式，n从0开始(0、1、2、3....)，2n(0、2、4 ....)，3n(0、3、6.....)

• :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。 n 可以是数字、关键词或公式

• 10、目标伪类选择器(CSS3)

     

六、CSS注释

     CSS规则是使用     /*  需要注释的内容  */  进行注释的，即在需要注释的内容前使用 “/*” 标记开始注释，在内容的结尾使用 “*/”结束。

七、CSS外观属性

     1、color:文本颜色

         color属性用于定义文本的颜色，其取值方式有如下3种：

             1.预定义的颜色值，如red，green，blue等。
             2.十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。
             3.RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

             需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。

    2、line-height:行间距

          ine-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。

         一般情况下，行距比字号大7.8像素左右就可以了。

         ~例子：line-height: 26px;  /* 行间距 */

    3、text-align:水平对齐方式

             text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：

                    1）left：左对齐（默认值）
                    2）right：右对齐
                    3）center：居中对齐

            ~例子：text-align: center;  /* 文字水平对齐 */

    4、text-indent:首行缩进

            text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。

            1em 就是一个字的宽度   如果是汉字的段落， 1em 就是一个汉字的宽度

           ~例子：text-indent: 2em;  /* 此时2em 就是2个汉字的宽度 */

    5、letter-spacing:字间距

           letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。

          ~例子：letter-spacing: 2px;  /* 字间距 */

    6、word-spacing:单词间距

         word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。

         word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的间距，而word-spacing定义的为英文单词之间的间距。

        ~例子：word-spacing: 10px;  /* 单词间距 针对于英文 中文无效 */

   7、颜色半透明(css3)

        文字颜色到了CSS3我们可以采取半透明的格式了语法格式如下：

             color: rgba(r,g,b,a)  a 是alpha  透明的意思  取值范围 0~1之间    color: rgba(0,0,0,0.3)  

      

    8、文字阴影(CSS3)

         以后我们可以给我们的文字添加阴影效果了 Shadow 影子

              * text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;

     

         前两项是必须写的。 后两项可以选写 。

     9、sublime快捷方式

            sublime可以快速提高我们代码的书写方式

                1. 生成标签 直接输入标签名 按tab键即可   比如  div   然后tab 键， 就可以生成 <div></div>。
                2. 如果想要生成多个相同标签  加上 * 就可以了 比如   div*3  就可以快速生成3个div。
                3. 如果有父子级关系的标签，可以用 >  比如   ul > li就可以了。
                4. 如果有兄弟关系的标签，用  +  就可以了 比如 div+p  。
                5. 如果生成带有类名或者id名字的，  直接写  .demo  或者  #two   tab 键就可以了。

八、引入CSS样式表（书写位置）

    1、行内式（内联样式）

           是通过标签的style属性来设置元素的样式，其基本语法格式如下：

                <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

         语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。

            ~例子：<div style="color: pink; ">我很期待遇见你</div>

   2、内部样式表（内嵌式）

           内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：           

   

         语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。

   3、外部样式表（外链式）

        链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：

  

      注意： link 是个单标签哦!!!

      该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：

           1） href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
           2） type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
           3） rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

     ~例子：  <link rel="stylesheet" href="style.css" type="text/css" />    //引入外部样式style.css

    4、三种样式表总结

    

九、标签显示模式（display）

    标签的类型(显示模式)

    HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。具体如下：

   1、块级元素(block-level)

         每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

         常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

         块级元素的特点：
            （1）总是从新行开始。
            （2）高度，行高、外边距以及内边距都可以控制。
            （3）宽度默认是容器的100%。
            （4）可以容纳内联元素和其他块元素。

  2、行内元素(inline-level)

        行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

       常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。

       行内元素的特点：
           （1）和相邻行内元素在一行上。
           （2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
           （3）默认宽度就是它本身内容的宽度。
           （4）行内元素只能容纳文本或则其他行内元素。（a特殊）

        注意：
            1. 只有 文字才 能组成段落  因此 p  里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
            2. 链接里面不能再放链接（a特殊）。

   3、块级元素和行内元素区别

       一、 块级元素的特点：
          （1）总是从新行开始。
          （2）高度，行高、外边距以及内边距都可以控制。
          （3）宽度默认是容器的100%。
          （4）可以容纳内联元素和其他块元素。

        二、行内元素的特点：
          （1）和相邻行内元素在一行上。
          （2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
          （3）默认宽度就是它本身内容的宽度。
          （4）行内元素只能容纳文本或则其他行内元素。

   4、行内块元素（inline-block）

         在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

         行内块元素的特点：
             （1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
             （2）默认宽度就是它本身内容的宽度。
             （3）高度，行高、外边距以及内边距都可以控制。

    5、显现模式：

        ​        1）display: inline;         /* 块级标签转为行内标签显示模式 */
        ​        2）display: block;        /* 行内标签模式转为块级标签显示模式 */
        ​        3）display: inline-block;     /* 行内标签模式转为行内块标签显示模式 */

      ~显现模式转换-例子：

      

十、CSS复合选择器

        复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。

   1、交集选择器

        交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。

 

                    

         记忆技巧：

             交集选择器 是 并且的意思。 即...又...的意思

           比如：   p.one   选择的是： 类名为 .one  的 段落标签。  

             用的相对来说比较少，不太建议使用。

             ~例子：  div.red {
                               font-size: 15px;
                            }

    2、并集选择器

          并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。

                     

          记忆技巧：

              并集选择器 和 的意思， 就是说，只要逗号隔开的，所有选择器都会执行后面样式。

              比如  .one, p , #test {color: #F00;}  表示   .one 和 p  和 #test 这三个选择器都会执行颜色为红色。  通常用于集体声明。

              ~例子：   div, 
                              p, 
                              span,
                             .daye {
                                   color:blue;
                                  font-size: 18px;
                              }

    3、后代选择器

          后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

                       

子孙后代都可以这么选择。 或者说，它能选择任何包含在内 的标签。

~例子：

     

4、子元素选择器

 

          子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。

                     

白话： 这里的子 指的是 亲儿子 不包含孙子 重孙子之类。

      

      ~例子：

5、属性选择器

    

    6、伪元素选择器（CSS3)

            1. E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
            2. E::first-line 文本第一行；
            3. E::selection 可改变选中文本的样式；

            4、E::before和E::after

                 在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。

       E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。

       E:after、E:before后面的练习中会反复用到，目前只需要有个大致了解。

       ":" 与 "::" 区别在于区分伪类和伪元素。

十一、CSS 背景(background)

      CSS 可以添加背景颜色和背景图片，以及来进行图片设置。

 1、背景图片(image)

       语法：            

           

       参数：

            none : 　无背景图（默认的）
            url : 　使用绝对或相对地址指定背景图像 

            background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。 如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺，则会覆盖背景颜色。

            小技巧：  我们提倡 背景图片后面的地址，url不要加引号。

     ~例子：background-image: url(images/l.jpg);

 2、背景平铺（repeat）

       语法：

           

       参数：

            repeat : 　背景图像在纵向和横向上平铺（默认的）
            no-repeat : 　背景图像不平铺
            repeat-x : 　背景图像在横向上平铺
            repeat-y : 　背景图像在纵向平铺 

            设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。
      ~例子：background-repeat: no-repeat;

            1）repeat-x : 　背景图像在横向上平铺

  

          2）repeat-y : 　背景图像在纵向平铺

     

          3）设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。

   

   3、背景位置(position)

       语法：

           

       参数：

            length : 　百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位 
            position : 　top | center | bottom | left | center | right 

       说明：

            设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。
            如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。

       说明：

            1. position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
            2. 如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top;   则 15px 一定是  x坐标   top是 y坐标。

            实际工作用的最多的，就是背景图片居中对齐了。
      ~例子：

            /* 1.利用方位名词 top bottom 来更改背景图片位置 */

            /*background-position: left top;   默认的是 左上角 */
            /*background-position: bottom right ;   方位名词没有顺序，谁在前都可以 */
            /* background-position: center center ;  */ 
            /* background-position: left;   如果方位名词只写一个，另外一个默认为center */
           /*  background-position: 10px 30px;               2. 精切单位 第一值一定是x坐标 第二个值一定是y坐标 */

             /* 3. 混搭 */
            background-position: center 10px ;
            /* center 10px  水平居中的 垂直是 10px 
            10px center   水平10px  垂直是 居中 */

   4、背景附着

         

    5、背景简写

 

    6、背景透明(CSS3)

   

    7、背景缩放(CSS3)

 

    8、多背景(CSS3)

 

十二、CSS 三大特性

        层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。

      1、CSS层叠性

 

      2、CSS继承性

 

      3、CSS优先级

 

      4、CSS特殊性（Specificity）

 

十三、盒子模型（CSS重点）

      1、看透网页布局的本质

 

      2、盒子模型（Box Model）

 

      3、盒子边框（border）

 

      4、表格的细线边框

       

      5、盒子边框总结表

   

      6、圆角边框(CSS3)