CSS

CSS基本语法及页面引用

CSS基本语法

css定义的方法是：
选择器{属性:值;属性:值;}
选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性都有一个或多个值。
示例：

div {width:100px;height:100px;color:red}

css 页面引入的方法

1. 外联式；通过link标签，链接到外部样式表到页面中。

<link rel="stylesheet" type="text/css" href="css/main.css"

2. 嵌入式；通过style标签，在网页上嵌入的样式表。

<style type="text/css">
     div{width:100px;height:100px;color:red}
<style>

3. 内联式（行间样式）；通过标签的style属性，在标签上直接写样式。

<div style="width:100px;height:100px;color=red"></div>

CSS 文本设置

常用的应用文本的css样式

• color 设置文字的颜色，如：color:red
• font-size 设置文字的大小，如：font-size:12px
• font-family 设置文字的字体，如：font-family="微软雅黑"
• font-style 设置文字是否倾斜，如：font-style:'normal'设置不倾斜，font-style:'italic'设置文字倾斜
• font-weight 设置文字是否加粗，如：font-weight:bold;设置加粗，font-weight:’normal’设置不加粗
• font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照以下顺序写：font:是否加粗 字号/行号 字体；如：font:normal 12px/36px ‘微软雅黑’
  -line-height 设置字体的行高，如：line-height:24px
• text-decoration 设置文字的下划线，如：text-decoration:none 将文字下划线去掉
• text-indent:设置文字首行缩进，如：text-indent:24px设置文字首行缩进24px
• text-align设置文字水平对齐方式；如：text-align:center设置文字水平居中

颜色表示法

css颜色值主要有三种表示方法：

1. 颜色名表示：red红色，gold金色
2. rgb表示：rgb(255,0,0)表示红色
3. 16进制表示，#ff0000表示红色，这种可以简写成#f00

CSS 选择器

常用的选择器有以下几种：

1. 标签选择器
   标签选择器，此种选择器的影响范围最大，尽量应用在层级选择器中

  <style>
    *{margin:0;padding:0}
    div{color:red}
  </style>
<!--对应以上两条样式-->
  <div>...</div>
<!--对应以上两条样式-->
<div class="box">...</div>

2. id选择器
   通过id来选择元素，元素的ID名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id一般给程序使用，所以不推荐id作为选择器

#box{color:red}
<!--对应以上一条样式，其他元素不允许使用该样式-->
<div id="box">...</div>

3. 类选择器
   通过类名来选择元素，一个类可以应用于多个元素，一个元素也可以使用多个类，应用灵活，可以复用，是css中应用最多的一种选择器

<style>
    .red{color:red}
    .big{font-size:20px}
    .mt10{margin-top:10px}
</style>
<div class="red">...</div>
<h1 class="red mt10 big">hello</h1>
<p class="red mt10">hello</p>

4. 层级选择器
   主要应用选择父元素的子元素，或者子元素下面的子元素，可以与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突

  <style>
    .box span{color:red}
    .box .red{color:pink}
    .red{color:blue}
  </style>
<div class="box">
  <span>...</span>
  <a href="#" class="red">...</a>
</div>

5. 伪元素选择器
   常用的伪元素选择器有hover,表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after，他们可以通过样式在元素中插入内容。

<style>
    .box1:hover{color:red}
    .box2:before{content:'行首文字'}
    .box3:after{content:'行尾文字'}
</style>
<div class='box1'>...</div>
<div class='box2'>...</div>
<div class='box3'>...</div>

CSS盒子模型

元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实生活中盒子来做比喻，帮助我们设置元素对应的样式，如下：

image.png

把元素叫做盒子，设置的样式分别为：盒子的边框（border）,盒子内的内容和边框之间的间距（padding）,盒子与盒子之间的间距（margin）

1. 开发中，如果left，right,top,buttom属性相同，我们不用每次都写xxx-top=bala... xxx-right=bala...
   我们可以直接进行简写：

  <style type="text/css">
    .box{
      /*分别设置：上（20px）左右（100px）下（200px）*/
      padding: 10px 100px 200px;

      /*分别设置：上下（20px）左右（100px）的值*/
      padding: 20px 100px;
      
      /*分别设置：上下左右：(20px)*/
      padding: 20px;
    }
  </style>

margin相关技巧

1. 设置元素水平居中：margin: x auto
2. margin负值让元素位移以及边框合并

外边距合并

外边距合并是指：当两个垂直外边距相距时，他们将形成一个外边距，合并后的外边距的高度等于两个发生合并的外边距的高度的较大者。解决方法如下：

1. 使用这种特性
2. 设置一边的边距，一般设置margin-top
3. 将元素浮动或者定位

margin-top塌陷

在两个盒子嵌套的时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决办法如下：

1. 外部盒子设置一个边框
2. 外部盒子设置overflow：hidden
3. 使用伪元素

<sytle>
    .clearfix:before{
        content:' ';
        display: table
    }
</style>

盒子的真实尺寸

盒子的宽度：width+左右的padding+左右的border
盒子的高度：height+上下的padding+上下的border

width其实代表的是盒子内容的尺寸，并不是盒子本身的尺寸。
需求：
布局下面的标题：

image.png
实现方式1：

<style type="text/css">
    .box{
      width: 385px;
      height: 35px;
      font: 20px "微软雅黑";
      line-height: 20px;
      padding-top: 15px;
      padding-left: 15px;
      border-top: 1px solid #f00;
      border-bottom: 3px solid #666;
    }
  </style>
 <div class="box">新闻标题</div>

注意
微软雅黑字体自带大小，如果不指定line-height会导致布局异常。
实线方式2：
使用text-indent进行首行缩进，不会影响width的长度，设置line-hight=height文字自动居中。

  <style type="text/css">
    .box2{
      width:400px;
      height: 50px;
      font: 20px "微软雅黑";
      border-top: 1px solid #f00;
      border-bottom: 3px solid #666;
      text-indent: 15px;
      line-height: 50px;
    }
  </style>
  <div class="box2">新闻标题</div>

CSS元素溢出

当子元素的尺寸超过父元素时，需要设置父元素显示溢出子元素的方式，设置方法是通过overflow属性来设置。
overflow的设置项：

1. visable默认值。内容不会被修剪，会呈现在元素框之外。
2. hidden内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动，清除margin-top塌陷的功能。
3. scroll内容会被修剪，但是浏览器会显示滚动条一边查看其余的内容
4. auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
5. inherit规定应该从父元素继承overflow属性的值。

块元素、内联元素、内联块元素

块元素
块元素，也可以称为行元素，布局中常用的标签有：div,p,ul,li,h1~h6,dl,dt,dd等等都是块元素。他在布局中的行为：

• 支持全部样式
• 如果没哟设置宽度，默认宽度为父级宽度100%
• 盒子占据一行，及时设置了宽度

内联元素

内联元素，也可以称之为行内元素，布局中常用的标签如：a、span、em、b、strong、i等等都是内联元素，他们在布局中的行为：

• 支持部分样式（不支持宽，高，margin上下，padding上下）
• 宽高由内容决定
• 盒子并在一行
• 代码换行，盒子之间会产生间距
• 子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式，用line-height属性设置垂直对齐方式。

解决内联元素间隙的问题

1. 去掉内联元素之间的换行
2. 将内联元素的父级设置font-size为0，再设置自身font-size

内联块元素

内联块元素，也叫行内元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转换为这种元素，他们在布局中的表现的行为：

• 支持全部样式
• 如果没有设置宽高，宽高由内容决定
• 代码换行，盒子会产生间距
• 子元素是内联块元素，父元素可以用text-align属性设置元素水平对齐方式，用line-height属性设置子元素垂直对齐方式
  这三种元素，可以通过display属性相互转换，不过实际开发中，块元素用的比较多，所以，我们常把内联元素转换为块元素，少量转换为内联块，而要使用内联元素时，而不用块元素转换了。

display属性

display属性是用来设置元素的类型以及隐藏的，常用的属性有：

1. none元素隐藏且不占位置
2. block元素以块元素显示
3. inline元素以内联元素显示

4. inline-block元素以内联块元素显示
   需求：

   
   image.png

  <style type="text/css">
    .menu{
      width: 694px;
      height: 50px;
      margin: 50px auto 0;
      list-style: none;
      padding: 0;
      font-size: 0;
    }
    .menu li{
      display: inline-block;
      width: 98px;
      height: 48px;
      border: 1px solid gold;
      font-size: 16px;
      margin-right: -1px;
      text-align: center;
      line-height: 48px;
    }
    .menu a{
      font-family: 'Microsoft Yahei';
      color: #25a4bb;
      text-decoration: none;
    }
    .menu li:hover{
      background-color: blanchedalmond;
    }
    .menu a:hover{
      color: red;
    }
  </style>
<body>
  <ul class="menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">公司简介</a></li>
    <li><a href="#">联系我们</a></li>
    <li><a href="#">联系我们</a></li>
    <li><a href="#">联系我们</a></li>
    <li><a href="#">联系我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</body>

image.png

浮动

文档流

文档流是指盒子按照html标签编写的顺序依次从上到下，从左到右，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子占据自己的位置。

浮动特性

1. 浮动元素有左浮动（float:left）和右浮动（float:right）两种
2. 浮动元素会向左或者向右浮动，碰到父元素边界，浮动元素，未浮动的元素才停下来
3. 相邻浮动的块元素可以并在一行，超出父级宽度就换行
4. 浮动让行内元素或者块元素自动转换为行内块元素
5. 浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动元素的内的文字会避开浮动的元素，形成文字饶图的效果
6. 父元素内整体浮动的元素无法撑开父元素，需要清除浮动
7. 浮动元素之间没有垂直margin的合并

清除浮动

• 父级元素增加属性：overflow:hidden
• 在最后一个子元素的后面增加一个空的div，给他样式属性clear:both(不推荐)
• 使用成熟的清除浮动样式类，clearfix

<style>
    /*清除浮动和解决margin塌陷*/
    .clearfix:after,.clearfix:before{
      content:"";
      display: table;
    }
    .clearfix:after{
      clear:both;
    }
    /*兼容IE*/
    .clearfix{
      zoom: 1;
    }
</style>

定位

使用position属性来设置元素的定位类型，position的设置如下：

• relative生成相应定位元素，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移
• absolute生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者绝对固定定位元素来进行定位，如果找不到，则相对于body元素进行定位。
• fixed 生成固定定位元素，元素脱离文档流，不占据文档流位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
• static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性
• inhert从父元素继承position属性的值

元素定位特征

绝对定位和固定定位的块元素和行内元素会自动转换为行内块元素

定位元素层级

定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级

典型定位布局

1. 固定在顶部的菜单
2. 水平垂直居中弹框
3. 固定在侧边的工具栏

4. 固定在底部的按钮
   案例1：
   布局上面的导航栏

   
   image.png

    <style type="text/css">
      .menu{
        /*去掉小点*/
        list-style: none;
        background-color: #55a8ea;
        padding: 0;
        width: 960px;
        height: 40px;
        margin: 50px auto 0;
        position: relative;
      }

      .menu li{
        float: left;
        height: 40px;
        width: 100px;
        text-align: center;
      }

      .menu li a{
        /*font-size: 14px;*/
        /*font-family: "Microsoft Yahei";*/
        /*color: #ffffff;*/
        font: 14px/40px 'Microsoft Yahei';
        color: #ffffff;
        text-decoration: none;
      }
      .menu .active{
        background-color: #00619f;
      }
      .menu li:hover{
        background-color: #00619f;
      }
      .menu .new{
        width: 33px;
        height: 20px;
        background:url("./new.png") no-repeat;
        background-size: 100%;
        position: absolute;
        left: 368px;
      }
      .menu .new:hover{
        background:url("./new.png") no-repeat;
        background-size: 100%;
      }

    </style>
<body>
  <ul class="menu">
    <li class="active"><a href="#">首页</a></li>
    <li><a href="#">网站建设</a></li>
    <li><a href="#">首页</a></li>
    <li><a href="#">首页</a></li>
    <li><a href="#">首页</a></li>
    <li><a href="#">首页</a></li>
    <li class="new"></li>
  </ul>
</body>

案例2：

image.png

  <style type="text/css">
    .news_list_con{
      width: 600px;
      height: 290px;
      border: 1px solid #ddd;
      margin: 50px auto 0;
    }
    .news_list_con h3{
      width: 560px;
      height: 50px;
      border-bottom: 1px solid #ddd;
      margin: 0 auto;
    }
    .news_list_con h3 span{
      display: inline-block;
      height: 50px;
      border-bottom: 2px solid red;
      font: 18px/50px 'Microsoft Yahei';
      padding: 0 15px;
      position: relative;
    }
    .news_list_con ul{
      list-style: none;
      padding: 0;
      width: 560px;
      height: 238px;
      margin: 0 auto;
    }
    .news_list_con ul li{
      height: 39px;
      border-bottom: 1px solid #ddd;
    }
    .news_list_con ul a{
      float: left;
      height: 38px;
      font: 14px/38px 'Microsoft Yahei';
      text-decoration: none;
    }
    .news_list_con ul span{
      float: right;
      height: 38px;
      font: 14px/38px 'Microsoft Yahei';
    }
    .news_list_con ul a:hover{
      color: red;
    }
    .news_list_con ul a:before{
      content: ". ";
    }

  </style>
  <div class="news_list_con">
    <h3><span>新闻列表</span></h3>
    <ul>
      <li>
        <a href="#">点我点我点我~</a>
        <span>2019-07-28</span>
      </li>
      <li>
        <a href="#">点我点我点我~</a>
        <span>2019-07-28</span>
      </li>
      <li>
        <a href="#">点我点我点我~</a>
        <span>2019-07-28</span>
      </li>
      <li>
        <a href="#">点我点我点我~</a>
        <span>2019-07-28</span>
      </li>
      <li>
        <a href="#">点我点我点我~</a>
        <span>2019-07-28</span>
      </li>
      <li>
        <a href="#">点我点我点我~</a>
        <span>2019-07-28</span>
      </li>
    </ul>
  </div>

background

他负责给盒子设置背景图片和背景颜色，backgruond是一个复合属性，他可以分解为：

• backgrround-color:设置背景颜色
• background-image:设置背景图片地址
• background-repeat:设置背景图片如何设置平铺
  background-position:设置图片的位置

• background-attachment 设置背景图片是固定的还是随着页面滚动条滚动
  案例3：

  
  image.png

    <style type="text/css">
      .pagenation{
        width: 958px;
        height: 40px;
        border: 1px solid #000;
        margin: 50px auto 0;
        font-size: 0px;
        text-align: center;
      }
      .pagenation a{
        padding: 5px 10px;
        display: inline-block;
        height: 18px;
        text-decoration: none;
        background-color: gold;
        line-height: 18px;
        font-size: 12px;
        font-family: "Microsoft Yahei";
        margin: 8px 5px;
      }
      .pagenation span{
        display: inline-block;
        font-size: 12px;
      }
      .pagenation a:hover{
        background-color: #55a8ea;
      }
    </style>
<body>
  <div class="pagenation">
    <a href="#">上一页</a>
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <span>...</span>
    <a href="#">5</a>
    <a href="#">6</a>
    <a href="#">7</a>
    <a href="#">8</a>
    <a href="#">下一页</a>
  </div>
</body>