CSS Learning Notes （3）

learning website——菜鸟教程

11. 边框(border)

1. 边框样式

   border-style属性用来定义边框的样式
   

2. 边框宽度

   border-width 属性用于指定边框宽度

   为边框指定宽度有两种方法：

   • 可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)
   • 或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。

3. 边框颜色

   border-color属性用于设置边框的颜色

   • name - 指定颜色的名称，如 “red”
   • RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
   • Hex - 指定16进制值, 如 “#ff0000”

   注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式

4. 边框-单独设置各边

p
{
    
    
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
}

PS：border-style属性可以有1-4个值：

• border-style:dotted solid double dashed;
  • 上边框是 dotted
  • 右边框是 solid
  • 底边框是 double
  • 左边框是 dashed
• border-style:dotted solid double;
  • 上边框是 dotted
  • 左、右边框是 solid
  • 底边框是 double
• border-style:dotted solid;
  • 上、底边框是 dotted
  • 右、左边框是 solid
• border-style:dotted;
  • 四面边框是 dotted

12. 轮廓（outline）

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用

轮廓（outline）属性指定元素轮廓的样式(style)、颜色(color)和宽度(width)

• outline是不占空间的，既不会增加额外的width或者height（这样不会导致浏览器渲染时出现reflow或是repaint）
• outline有可能是非矩形的（火狐浏览器下）

13. 外边距（margin）

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的

margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性

1. 可能的值

值	说明
auto	设置浏览器边距。 这样做的结果会依赖于浏览器
length	定义一个固定的margin（使用像素，pt，em等）
%	定义一个使用百分比的边距

• Margin可以使用负值，重叠的内容

2. 单边外边距属性

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

3. 简写属性

   margin属性可以有一到四个值

• margin:25px 50px 75px 100px;
  • 上边距为25px
  • 右边距为50px
  • 下边距为75px
  • 左边距为100px
• margin:25px 50px 75px;
  • 上边距为25px
  • 左右边距为50px
  • 下边距为75px
• margin:25px 50px;
  • 上下边距为25px
  • 左右边距为50px
• margin:25px;
  • 所有的4个边距都是25px

14. 填充（padding）

CSS padding（填充）是一个简写属性，定义上下左右的内边距

当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充

1. 可能的值

值	说明
length	定义一个固定的填充(像素, pt, em,等)
%	使用百分比值定义一个填充

2. 单边内边距属性

   padding-top:25px;
   padding-bottom:25px;
   padding-right:50px;
   padding-left:50px;
   

3. 简写属性

   Padding属性，可以有一到四个值

   • padding:25px 50px 75px 100px;
     • 上填充为25px
     • 右填充为50px
     • 下填充为75px
     • 左填充为100px
   • padding:25px 50px 75px;
     • 上填充为25px
     • 左右填充为50px
     • 下填充为75px
   • padding:25px 50px;
     • 上下填充为25px
     • 左右填充为50px
   • padding:25px;
     • 所有的填充都是25px

15. 分组和嵌套

1. 分组选择器

   在样式表中有很多具有相同样式的元素 ， 为了尽量减少代码，可以使用分组选择器

   每个选择器用逗号分隔

   h1,h2,p
   {
         
         
       color:green;
   }
   

2. 嵌套选择器

   适用于选择器内部的选择器的样式

   p
   {
         
         
       color:blue;
       text-align:center;
   }
   .marked
   {
         
         
       background-color:red;
   }
   .marked p
   {
         
         
       color:white;
   }
   p.marked{
         
         
       text-decoration:underline;
   }
   

   • p{ }: 为所有 p 元素指定一个样式
   • .marked{ }: 为所有 class=“marked” 的元素指定一个样式
   • .marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式
   • p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式