CSS基础笔记

CSS（Cascading Style Sheets），层叠样式表。

---

基本格式

选择器 {
    属性：值；
}

CSS注释

/*  注释内容  */

---

引入样式表

行内样式表（内联样式）

通过标签的style属性设置元素样式

<标签名 style="属性:值;属性:值;">内容

内部样式表（内嵌式）

将CSS代码集中写在head标签内，用style标签定义

外部样式表（外链式）

将CSS代码放在后缀为css的外部样式表文件中，在HTML的head标签中，用link标签链接外部样式表文件

---

选择器

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

使用HTML标签名称作为选择器

类选择器

使用"."（英文句号）进行标识，后面跟着类名，如： .classname

标签调用时添加属性class="类名"

注意：

• HTML使用多个类选择器时，显示效果与类名先后顺序无关，而与CSS书写顺序有关
• 不建议使用”_"下划线命名
• 不建议纯数字和中文命名
• 可参考《Web前端开发规范手册》

id选择器

使用“#“标识，后面紧跟id名

• W3C标准规定，同一个页面内，不允许有相同id的对象，但允许有相同class的对象

通配符选择器

用”*“表示，能匹配页面中所有的元素

伪类选择器

链接伪类选择器：

• :link 未访问的链接

• :visited 已访问的链接

• :hover 鼠标移动到链接上时

• :active 选定的链接

  注意，书写时顺序尽量不要颠倒

结构（位置）伪类选择器（CSS3）：

• :first-child 属于其父元素的第一个子元素
• :last-child 属于其父元素的最后一个子元素
• :nth-child(n) 指定属于其父元素的第n个子元素，n可以是数字、关键词、公式
• :nth-last-child(n) 指定属于其父元素的倒数第n个子元素

目标伪类选择器：

:target 选取当前活动的目标元素

复合选择器

交集选择器

更精确地定义

标签选择器.类选择器 {属性:值;}

并集选择器

定义共同拥有的属性

选择器,选择器 {属性:值;}

后代选择器

包含深层全部

外层 内层 {属性:值;}

子元素选择器

只选择子元素而不包含更深层的

父元素 > 子元素 {属性:值;}

属性选择器

选择器[属性] {属性:值;}
选择器[属性=值] {属性:值;}  /* 值完全相同的 */
选择器[属性*=值] {属性:值;}  /* 任意位置有该值的 */
选择器[属性^=值] {属性:值;}  /* 起始位置有该值的 */
选择器[属性$=值] {属性:值;}  /* 结束位置有该值的 */

伪元素选择器

• ::first-letter 文本的第一个字或词
• ::first-line 文本第一行
• ::selection 选中文本时的样式
• ::before 元素内部开始位置创建一个元素并选择
• ::after 元素内部结束位置创建一个元素并选择

---

标签显示模式

块元素（block-level）

如

~

、

、

、

、
、
1. 等
   • 总是从新行开始
   • 宽度默认是容器的100%
   • 高度、行高、外边距及内边距都可以控制
   • 可以容纳内联元素和其他块元素

   行内元素（inline-level）

   如、、、、、、、、等

   • 和相邻元素在一行
   • 高、宽无效、水平方向的padding和margin可以设置，垂直方向无效
   • 默认宽度为内容宽度
   • 只能容纳文本或其他行内元素

   行内块元素（inline-block）

   如、、

   • 和相邻元素在一行
   • 高、宽、外边距、内边距都可以设置
   • 默认宽度为内容宽度

   标签显示模式切换

   display属性：

   • block（行内转块）
   • inline（块转行内）
   • inline-block（块、行内转行内块）

   ---

   字体样式属性

   font-size：字号

   单位	说明
   em	相对于当前对象内文本的字体尺寸
   px	像素
   绝对长度单位	说明
   in	英寸
   cm	厘米
   mm	毫米
   pt	点

   font-family：字体

   font-weight:字体粗细

   可用值normal(400)、700(bold)、bolder、lighter、数字

   font-style：字体风格

   可用值normal(默认值)、italic(倾斜)、oblique(倾斜)

   font：综合设置字体样式

   选择器 {font: font-style font-weight font-size/lin-height font-family;)
   

   • 使用font属性时，值的顺序不能更换，中间用空格隔开
   • 不需要设置的可以省略，但必须保留font-size和font-family，否则font属性不起作用

   常用技巧：

   • 现在网页普遍使用14px+
   • 尽量使用偶数字号，ie6等老式浏览器对奇数会有bug
   • 尽量使用系统默认字体，当浏览器不支持第一个字体时会尝试下一个字体
   • 当不支持字体的中文写法时，可用英文写法或者unicode写法

   外观样式

   color：颜色

   1. 预设颜色，如red、blue、pink
   2. 十六进制，如#DDDDDD
   3. RGB形式，rgb(255,255,255)或rgb(100%,0,0)
   4. 颜色透明，rgba()

   line-height：行间距

   常用单位有像素px，相对值em，百分比%

   text-align：水平对齐方式

   常用值：left（默认），center，right

   text-indent：首行缩进

   建议使用单位em

   letter-spacing：字间距

   word-spaing：单词间距

   text-shadow：文字阴影

   水平距离 垂直距离 模糊距离 颜色

   • 前两个参数必须有，后两个参数有默认值

   text-decoration: 装饰效果

   none \ underline \ overline \ line-through

   背景样式

   • background-color: 背景颜色
   • background-image: 背景图片，url(url地址)
   • background-repect: 是否平铺，repeat-x \ repeat-y \ repeat \ no-repeat \ round \ space，默认repeat
   • background-attachment: 固定还是滚动，fixed \ scroll，默认scroll
   • background-position: 位置，top \ center \ bottom \ left \ center \ right \ 百分比 \ 长度值，默认top left
   • background: 背景颜色 背景图片 平铺 滚动 位置 ，顺序无规定
   • rgba颜色可设置透明
   • background-size: 设置尺寸，宽高 \ cover \ contain
   • 多背景图片，一个元素可以设置多重背景图，每组background用 , 分隔，前面的背景图层次较高

   ---

   CSS书写规范

   1. 选择器与 { 之间包含空格
   2. 属性名与 : 之间不包含空格，: 与值之间包含空格
   3. 包含多个选择器时，每个选择器独占一行
   4. 选择器嵌套层级尽量不大于3级
   5. 每个属性定义另起一行
   6. 属性定义以 ; 结尾
   7. 更详细的看规范手册

   ---

   CSS三大特性

   层叠性

   • 出现样式冲突时，按书写顺序，以最后的样式为准

   继承性

   • 子标签会继承父标签的某些样式，如字体、字号、颜色、行距等与文字类有关的
   • 不继承的有：边框、外边距、内边距、背景、定位、元素高等与块有关的

   特殊性

   specificity用一个四位的数字串（0,0,0,0）表示，左面最大，一级大于一级，数位之间没有进制

   • 元素（标签） （0,0,0,1)
   • 类、伪类、属性 (0,0,1,0)
   • ID (0,1,0,0)
   • 行内样式 (1,0,0,0)
   • !important +∞ 属性:值!important;
   • 继承的权重为0
   • 权重相同时按顺序，最后的为准

   ---

   盒子模型

   border：边框

   • border: border-width border-style border-color

   • border-width: 边框宽度

   • border-style:

     常用属性值：none（无，默认）、solid（单实线）、dashed（虚线）、dotted（点线）、double（双实线）

   • border-collapse: collapse 边框合并

   • border-radius: 圆角半径

   padding: 内边距

   margin: 外边距

   • 宽度属性width和高度属性height仅适用于块元素，对行内元素无效（除img和input）
   • 外边框会合并
   • 没有给定宽高时，padding不会影响盒子大小

   CS3盒子模型

   box-sizing: 指定盒模型

   • content-box 默认值，盒子大小为width+padding+border
   • border-box 盒子大小为width，即width包含padding和border

   box-shadow: 盒子阴影

   • h-shadow v-shadow blur spread color inset
   • 水平位置(必需) 垂直位置(必需) 模糊距离 阴影尺寸 颜色 外部阴影(outset)转为内部阴影

   ---

   浮动

   普通流（标准流或文档流）

   上到下，左到右，块元素占一行

   float: 浮动

   left right none(默认)

   • 浮动会使元素具有行内块特性

   clear: 清除浮动

   left right both 不允许左侧、右侧、左右侧有浮动元素

   1. 额外标签法：在浮动元素末尾添加一个空标签包含clear:both;

   2. 父级元素添加overflow属性方法：在父级元素添加overflow: hidden;或值为auto\scroll都可以

   3. 使用after伪元素：

      .类名:after {  /* 一般类名为clearfix */
          content: ".";
          display: block;
          height: 0;
          visibility: hidden;
          clear: both;
      }
      .类名 {*zoom: 1;}  /* IE6、7专用 */
      

   4. before和after双伪元素：

      .clearfix:before, .clearfix:after {
          content: "";
          display: table;
      }
      .clearfix:after {clear: both;}
      .clearfix {*zoom: 1;}
      

   版心

   指网页中主题内容所在的区域

   布局流程

   1. 确定页面的版心
   2. 分析行模块和列模块
   3. 制作HTML和CSS
   4. CSS初始化

   定位

   • 定位模式：static、relative、absolute、fixed
   • 边偏移：top、bottom、left、right

   static（静态定位）

   relative（相对定位）

   相对在文档流的位置定位，在文档流中的位置保留

   absolute（绝对定位）

   相对最近的已定位父元素定位，所有父元素没定位时，以body定位，不保留原位置

   fixed（固定定位）

   相对浏览器定位，不保留原位置

   • 固定定位没有内容时，需要指定宽高
   • 居中，例如：left: 50%; margin-left: 半宽;
   • 行内元素添加绝对定位、固定定位、浮动后，会自动转换为行内块模式

   叠放次序（z-index）

   • 默认值为0，取值越大，越居上，可以为负数
   • 值相等时，按书写顺序，后来居上
   • 只有相对定位、绝对定位、固定定位有此属性

   ---

   元素的显示和隐藏

   display: 显示

   • none 隐藏，不保留位置

   visibility : 可见性

   • visible 可见
   • hidden 隐藏，保留位置

   overflow: 溢出

   • visible 默认
   • auto 超出就显示滚动条
   • scroll 一直显示滚动条
   • hidden 超出部分隐藏

   ---

   CSS用户界面样式

   cursor: 鼠标样式

   default、pointer、move、text等

   outline: 轮廓

   • outline-width outline-style outline-color
   • 去除轮廓线，outline: 0;

   resize:

   • 防止拖拽文本域，resize: none;

   vertical-align: 垂直对齐

   • baseline、top、middel、bottom
   • 对块元素无效，对行内元素或行内块元素有效
   • 常用于图片、表单、文字的对齐
   • 去除图片底侧缝隙

   溢出的文字隐藏

   work-break: 自动换行

   • normal break-all(允许在单词内换行) keep-all(只能在半角空格或连字符处换行)
   • 主要处理英文单词

   white-space: 文本显示方式

   • normal nowrap(强制同一行内显示所有文本)

   text-overflow: 文字溢出

   • clip ellipsis(溢出时显示省略标记...)
   • 前提是设置了强制一行内显示

   ---

   CSS精灵技术（sprite）

   本质就是将一些背景图像整合到一张大图中，通过background-position定位

   字体图标

   1. UI人员设计字体图标效果图（svg）
   2. 前端人员上传生成并下载兼容性字体文件包
   3. 引入字体文件包到HTML页面

   滑动门

   利用sprite技术和padding实现

   1. 外框显示左门，用padding-left撑开背景
   2. 内框显示左门以右所有，用padding-right撑开背景

   过渡

   transition: 属性 时间 运动曲线 延迟;

   • transition-property 可用all指定所有属性
   • transition-duration 默认0
   • transition-timing-function ease（默认）、linear、ease-in、ease-out、ease-in-out
   • transition-delay 默认0

   2D转换

   transform: 方法

   • translate()方法 位移，长度或百分比（按自身）
   • rotate()方法 旋转，角度deg
   • scale()方法 缩放或放大
   • skew()方法 翻转
   • matrix()方法

   transform-origin: 调整元素转换变形的原点

   3D转换

   transform: 方法

   • translate3d()方法
   • rotate()方法

   perspective: 透视，视距长度

   backface-visibility: 元素不面向屏幕时是否可见，hidden

   动画

   animation: 动画名称 时间 运动曲线 何时开始 播放次数 是否反向

   • animation-name: 引用@keyframes动画的名称
   • animation-duration: 完成一个周期的时间，默认0
   • animation-timing-function: 运动曲线，默认ease
   • animation-delay: 延迟开始，默认0
   • animation-iteration-count: 播放次数，默认1，无限次为infinite
   • animation-direction: 是否反向，normal(默认)、reverse(反向)、alternate(先正常再反向)、alternate-reverse
   • animation-play-state: 运行状态，默认running，暂停为paused
   • animation-fill-mode:

   定义动画

   @keyframes 动画名称 {
       from {属性:值}  /* 0% */
       to {属性:值}  /* 100% */
   }
   或
   @keyframes 动画名称 {
       0% {属性:值}
       14% {属性:值}
       100% {属性:值}
   }
   

   ---

   伸缩布局（CSS3)

   • display: flex; 设置为伸缩布局模式
   • flex: 份数;
   • max-width\min-width:
   • flex-direction: 指定排列方式，默认水平方向row，垂直方向column

   justify-content: 调整主轴对齐

   • flex-start 默认值，位于容器开头
   • flex-end
   • center 居中
   • space-between 元素之间空白填充
   • space-around 元素前后空白填充

   align-items: 调整侧轴对齐

   • stretch 默认值，子元素没高度时，拉伸使适用父容器
   • flex-start、flex-end、center

   flex-wrap: 控制是否换行，当子元素宽度多于容器

   • nowrap 默认值
   • wrap
   • wrap-reverse

   align-content : 垂直对齐

   • stretch 默认值
   • flex-start、flex-end、center、space-between、space-around

   order: 子元素排列顺序，整数值

   ---

   BFC（块级格式化上下文）

   一个隔离的独立容器

   触发BUFC：

   • float属性不为none
   • position为absolute或fixed
   • display为inline-block、table-cell、table-caption、inline-flex
   • overflow不为visible（没有副作用）

   BFC特性：

   1. 盒子从顶端开始垂直地接个排列
   2. 盒子垂直方向距离由margin决定，同一个BFC的相邻盒子margin会重叠
   3. BFC中每个盒子的margin-left(或margin-right)会触碰到容器的border-left(border-right)
   4. BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘
   5. 计算BFC的高度时，会检测浮动的盒子高度

   BFC用途：

   1. 清除元素内部浮动（利用特性5）
   2. 使用不同的BFC，解决外边距合并问题（利用特性1、特性2）
   3. 制作右侧自适应的盒子（利用特性4）

   ---

   浏览器前缀

   • -webkit- Chrome、Safari、Android Browser
   • -moz- Firefox
   • -o- Opera
   • -ms- Internet Explorer、Edge
   • -khtml- Konqueror

   W3C统一验证工具

   http://validator.w3.org/unic.com/

   CSS压缩工具

   站长之家：http://tool.chinaz.com/Tools/CssFormat.aspx

   CSS Rest类库

   normalize.css 用于初始化css文件