前端学习笔记 CSS 基础内容

参考视频：【极客学院】Web前端开发教学 - 第一部分：H5+CSS+JS

参考文档：CSS 教程 W3school

概述

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

HTML引入CSS

外部引入

作用域：所有源文件只要引用皆可使用

• CSS：

  h1{
    color: #b3d4fc;
    font-size: medium;
  }

• HTML：

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

内部引入

作用域：单个源文件，只要引用后单个文件内有效

  <style type="text/css">
    h2{
      color: aqua;
    }
  </style>

内联引入

作用域：单个标签有效

  <h3 style="color: blueviolet">
    标题h3
  </h3>

语法

形式

  selector{
  	property：value
  }

• 例：

  p{
  	color:red;
  }

继承

继承的概念：A标签包含B和C。只有A和B有定义样式。那么B使用B的样式，C继承使用A的样式。

  h1{
    color: #999999;
  }

  body{
    color: #888888;
  }

例子中，在body标签内部：
h1标签使用h1的样式；
其他标签使用body的样式。

选择器

通配符

使用*。
指定区域内，凡是无定义CSS，均继承使用通配符格式。
可以用来统一定义边距、边框等。

  *{
    color: #b3d4fc;
  }

关系：分组选择器

使用,。

  h1,h2,a,p{
    color: #b3d4fc;
    font-size: medium;
  }

多个标签共用一个CSS样式.

关系：派生(后代)选择器

使用 space。

  h1 p{
    color: blue;
  }

多层标签嵌套时指定的CSS样式，和继承类似。

• 单标签多定义问题：

  h1 p{
    color: blue;
  }
  p{
    color: red;
  }

h1中的p使用第一种，其他情况的p使用第二种。

元素选择器

使用标签名。

  p{
    color: #888888;
  }
  a{
    color: #888888;
  }

id选择器

使用#。

  

  
"p1">
  
"p2">
  
"d1">

• id选择器和派生选择器一起使用：

  

  
"p1">
    "index.html">text
  

id只可以唯一使用，不可重复使用，如果重复使用应该选择class。
在JS里有较多应用。

类(class)选择器

使用.。

  

  
"p1">text

• 类选择器和其他选择器共同使用：

    p.p1{
      color: #888888;
    }

• 多类选择器：使用.class1.class2。

"p1 p2">内容

属性(值)选择器

使用[]。

• 属性选择：

    [title]{ 
      color: #888888;
    }

• 值选择：

    [title="t1"]{ 
      color: #b3d4fc;
    }

• 值选择模糊匹配：

    [title~="t1"]{ /
      color: #b3d4fc;
    }

属性和值之间亦有继承效果。

IE6及之前不支持。

子元素选择器

使用>。

  #p1>#p2{
    color: #b3d4fc;
  }

和派生选择器最大的区别在于：

• 子元素选择器：#p1>#p2，只有在直接从属关系下生效，#p1直接包含#p2生效，#p1包含其它标签再包含#p2则无效。
• 派生选择器：#p1 #p2，只要#p1包含#p2就生效。可以是直接从属关系，也可以是间接从属关系。
  
  
  

相邻兄弟选择器

使用+。

可以选择紧跟在一个元素后面的另一个元素，二者具有相同的父元素。使用较少。

<article>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  </br>
  <ol>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
  </ol>
</article>

• 代码结果：
  

样式

计量单位

%表示相对于原来固有长度宽度的缩放比例。

px表示“绝对尺寸”（并非真正的绝对），实际上就是css中定义的像素（此像素与设备的物理像素有一定的区别，后续详细说明见文末说明1），利用px设置字体大小及元素宽高等比较稳定和精确。Px的缺点是其不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站。

em表示相对尺寸，其相对于当前对象内文本的font-size（如果当前对象内文本的font-size计量单位也是em，则当前对象内文本的font-size的参考对象为父元素文本font-size）。使用em可以较好的相应设备屏幕尺寸的变化，但是在进行元素设置时都需要知道父元素文本的font-size及当前对象内文本的font-size，如有遗漏可能会导致错误。

rem也表示相对尺寸，其参考对象为根元素html的font-size，因此只需要确定这一个font-size。

背景

  p{
    height: 100px; /*长*/
    width: 50px; /*宽*/
    background-color: #b3d4fc; /*背景颜色*/
  }
  body{
    background-image: url("myjpg.jpg"); /*背景图片*/
    background-repeat: repeat-y; /*设置背景图片是否重复*/
    background-position: center top; /*背景图片的起始位置*/
    /*background-position: 100px 100px; */
    background-attachment: scroll; /*是否随内容滚动*/
  }

• CSS3背景：

  body{
    background-image: url("myjpg.jpg");
    background-size: 100px 200px; /*图片尺寸*/
    background-origin: content-box; /*定位区域*/
    background-clip: padding-box; /*绘制区域*/
  }

文本

  p{
    color: #b3d4fc; /*颜色*/
    direction: ltr; /*方向*/
    line-height: 15px; /*行高*/
    letter-spacing: 2px; /*字符间距*/
    text-align: center; /*对齐*/
    text-decoration: #888888; /*文本修饰*/
    text-indent: 2em; /*首行缩进*/
    padding-left: 2em; /*内边距向左*/
    text-transform: lowercase; /*英文字母形式*/
    unicode-bidi: embed; /**/
    white-space: normal; /*空白的处理方式*/
    word-spacing: 15px; /*字间距*/
  }

• CSS3文本：

 p{
    text-shadow: 15px 15px 1px #888888; /*阴影*/
      /*距离左 距离上 偏离度 颜色*/
    word-wrap: break-spaces; /*换行规则*/
      /*需要先规定宽度width*/
  }

字体

p{
    font-family: Arial; /*字体*/
    font-size: 50px; /*大小*/
    font-style: normal; /*字体风格*/
    font-variant: all-small-caps; /*字体类别：小型大写字体等*/
    font-weight: lighter; /*粗细*/
  }

• CSS3引入下载字体文件：

  @font-face{
    font-family: my_font; /*自定义名称*/
    src: url(""); /*url*/
  }

链接

  a:link{ /*普通的，未被访问的链接*/
    color: #FF0000;
  }
  a:visited{ /*用户已访问的链接*/
    color: #00FF00;
  }
  a:hover{ /*鼠标指针位于链接上方*/
    color: #0000FF;
  }
  a:active{ /*链接被点击的时刻*/
    color: #000000;
  }

  a{ /*链接下划线颜色 or 去除下划线*/
    text-decoration: none;
  }

列表

  ul li{
    list-style: inside; /*简写列表项*/
    list-style-type: armenian; /*列表项-内置类型*/
    list-style-image: url("myjpg.jpg"); /*列表项-用本地图片*/
    list-style-position: inside; /*列表标志位置*/
  }

表格

参考文档：四款好看实用的CSS表格样式分享

  table{
    border: 10px; /*外边框长度 颜色*/
    border-collapse: collapse; /*外边框折叠*/
    padding: 15px; /*内边距*/
  }

轮廓

  p{
    outline: black; /*轮廓属性*/
    outline-color: #b3d4fc; /*轮廓颜色*/
    outline-style: groove; /*轮廓样式*/
    outline-width: 10px; /*轮廓宽度*/
  }

定位

定位

参考文档：CSS position 属性

  #d1{
    position: absolute; /*位置布局*/
    left: 50px; /*偏移量*/
    right: 50px;
    top: 50px;
    bottom: 50px;
    z-index: 1; /*（有元素覆盖时的）覆盖顺序优先级*/
  }

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

浮动

"d1">

常用操作

对齐

  #d1{
    margin: 100px 100px auto; /*外边框*/ /*auto为自适应，一般居中*/
    position: absolute; /*位置*/ /*absolute为绝对布局*/
    float: left; /*浮动*/ /*left为从左浮动*/
  }

尺寸

  #d1{
    width: 100px; /*宽度*/
    height: 100px; /*高度*/
    max-height: 50px; /*元素最大高度*/
    min-height: 10px; /*元素最小高度*/
    max-width: 50px; /*元素最大宽度*/
    min-width: 10px; /*元素最小宽度*/
    line-height: 5px; /*行高*/
  }

显示

  #d1{
    float: left; /*浮动方向*/
    clear: left; /*清除浮动*/
    position: absolute; /*位置*/
    visibility: inherit; /*可见*/
    display: block; /*显示模式*/ /*列表常用*/
    cursor: cell; /*指向时显示的指针类型*/
  }

盒子模型

通常使用div分块。

从内到外，依次是：
content，内容。
padding，内边距。
border，边框。
margin，外边距。

四部分内容详解

内容content

其大小靠width和height属性指定。

内边距padding

  #d1{
    padding: 10px; /*直接设置所有内边距*/
    padding-left: 5px; /*左*/
    padding-right: 5px; /*右*/
    padding-top: 5px; /*上*/
    padding-bottom: 5px; /*下*/
  }

边框border

  #d1{
    border-width: 10px; /*宽度*/
    
    border-style: double; /*边框样式 多种类型*/
    /*四个方向单独定义边框样式*/
    border-left-style: double;
    border-right-style: double;
    border-top-style: double;
    border-bottom-style: double;
    
    border-color: #b3d4fc; /*颜色*/
    /*颜色也可以使用四个方向单独定义*/
  }

CSS3边框：

"d1">测试

代码结果：

外边距margin

通常为透明区域。

  #d1{
    margin: 10px; /*设置所有外边距*/
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
  }

• 外边距是可以覆盖的：
  
  A的右边距为100，B的左边距为100，则实际上A和B的距离为max(100, 100)。外边距和外边距之间是不冲突的，可以叠加/覆盖的。

综合示例

"margin">
  
"border">
    
"padding">
      
"content">
        具体内容
      
    
  

• 代码结果：
  
  
  
  

CSS3动画

浏览器兼容

大多数动画方法有针对不同浏览器的兼容方法。

方法前缀	对应浏览器
-webkit-	Safari、Chrome
-ms-	IE
-o-	Opera
-moz-	Firefox

转换

2D

• 浏览器兼容方法-以2D移动操作为例：

    /*不同浏览器的兼容版本方法*/
    -webkit-transform: translate(100px, 100px); /*Safari Chrome*/
    -ms-transform: translate(100px, 100px); /*IE*/
    -o-transform: translate(100px, 100px); /*Opera*/
    -moz-transform: translate(100px, 100px); /*Firefox*/

• 移动：

    transform:translate(100px, 100px); /*移动效果 (X轴, Y轴)*/

• 旋转：

    transform:rotate(60deg) /*旋转效果 (角度deg)*/

• 缩放：

    transform:scale(1,2); /*缩放效果 (X方向, Y方向)*/

• 倾斜（仿射变换）：

    transform:skew(60deg, 60deg); /*倾斜效果 (X轴旋转, Y轴旋转)*/

• Matrix：

参考文档：对CSS3中的transform：Matrix（）矩阵的一些理解

3D

• 旋转：

    transform: rotateX(50deg); /*X*/
    transform: rotateY(50deg); /*Y*/

浏览器兼容性同上。

过渡

参考文档：CSS3 过渡

• 应用于宽度属性的过渡效果，时长为 2 秒：

    transition: width 2s;

• 规定当鼠标指针悬浮于元素上时：

    .d1:hover{
        width:300px;
    }

• CSS3转换属性简介：

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。
transition-delay	规定过渡效果何时开始。默认是 0。

• 实例：

    .d1{
        transition-property: width;
        transition-duration: 1s;
        transition-timing-function: linear;
        transition-delay: 2s;
    }

• 简写：

    transition: width 1s linear 2s;

动画

关键字animation，使用@keyframes接名称定义。

• 示例：

"d1">

• 代码结果：

  • 状态1：
    
  • 状态2：
    
  • 状态3：
    
  • 状态4：
    
    
    
    

多列

可以创建多列对文本或者区域进行布局。

"d1">
  AAAAAAAAAAAAAAAAAAAAAAAAAAAA
  AAAAAAAAAAAAAAAAAAAAAAAAAAAA
  AAAAAAAAAAAAAAAAAAAAAAAAAAAA
  AAAAAAAAAAAAAAAAAAAAAAAAAAAA
  AAAAAAAAAAAAAAAAAAAAAAAAAAAA
  AAAAAAAAAAAAAAAAAAAAAAAAAAAA

• 代码结果：
  
  
  
  

瀑布流效果

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。

• 示意图片：
  
• 示例：

"d1">
  
"d2">
    "image/1.jpg ">
    "image/2.jpg ">
    "image/3.jpg ">
    "image/4.jpg ">
    "image/5.jpg ">
    "image/6.jpg ">
    "image/1.jpg ">
    "image/2.jpg ">
    "image/3.jpg ">
    "image/4.jpg ">
    "image/5.jpg ">
    "image/6.jpg ">
  

其核心是采用多列、只定义宽度不定义长度。

• 代码结果：