CSS大全

定义和应用样式

• 使用元素内嵌样式

• 使用文档内嵌样式

• 使用外部样式表

  html文件使用link引用css文件，css文件使用@import引用css文件，@import语句必须位于样式表顶端。

  可以使用@chartset声明样式表的字符编码，只有@chartset可以位于@import前面。

  css没有声明编码的话使用html声明的，HTML也没有的话使用默认的UTF-8。

以上三者统称作者样式。

样式还有两个来源：浏览器样式、用户样式（例如谷歌浏览器中用户可以编辑custom.css文件自定义样式）

样式层叠顺序

元素内嵌样式——文档内嵌样式——外部样式表——用户样式——浏览器样式

可以使用 !important设置重要样式用来调整层叠顺序，但如果作者样式和用户样式同时设置重要样式，则用户样式优先。

选择器优先级

1. id值的数目
2. 其他属性和伪类的数目
3. 元素名和伪元素的数目

继承

与元素外观相关的样式会被继承，与元素在页面上的布局相关的样式不会被继承；

在样式中使用 inherit可以强行实施继承，明确指示浏览器在该属性上使用父元素样式中的值。

颜色

颜色名称、十进制、十六进制、函数

长度

• 绝对长度

  in	英寸
  cm	厘米
  mm	毫米
  pt	磅
  pc	pica

• 相对长度

  em	与元素字号挂钩
  ex	与元素字体的“x高度”挂钩
  rem	与根元素的字号挂钩
  px	css像素
  %	另一属性的值的百分比

  css的属性值还可以设置为算式，算是包含在关键字calc之后的括号中。

css角度单位

deg	度（0-360）
grad	百分度（0-400）
rad	弧度（0-6.28）
turn	圆周（1 turn = 360 deg）

css选择器

基本选择器

• *选取所有元素
• 选取指定类型的元素
• .类选择器
• #id选择器
• [attr]属性选择器，选取定义了attr属性，且属性值任意的元素
• [attr=“val”]属性值等于val
• [attr^=“val”]属性值以val开头
• [attr$=“val”]属性值以val结尾
• [attr*=“val”]属性值包含val
• [attr~=“val”]属性值有多个值，其中一个为val
• [attr|=“val”]属性值为连字符分割的多个值，其中第一个为val

复合选择器

• <选择器>,<选择器> 选择同时匹配所有选择器的元素
• <> <>后代选择器，目标元素是第一个选择器的元素的后代，且匹配第二个选择器
• <> > <>选择子元素，目标元素是第一个选择器的元素的直接后代，且匹配第二个选择器
• <> + <>相邻兄弟选择器，目标元素紧跟在匹配第一个选择器的元素之后，且匹配第二个选择器
• <> ~ <>普通兄弟选择器，目标元素跟在匹配第一个选择器的元素之后，且匹配第二个选择器
  • 匹配的元素在指定元素之后，但不一定相邻

伪元素选择器

• ::first-line选取块级元素文本的首行
• ::first-letter选取块级元素文本的首字母
• :before :after选取元素之前或之后插入内容
  • 两者经常跟css计数器特性一起使用，结合两者可生成数值内容

结构性伪类选择器

​ 根据元素在文档中的为孩子匹配元素。

• :root选取文档中的根元素
• :first-child选取元素的第一个子元素
• :last-child选取元素的最后一个子元素
• :only-child选取元素的唯一一个子元素
• :only-of-type选取属于父元素的特定类型的唯一子元素
• :nth-child(n)选取父元素的第n个子元素，索引从1开始
• :nth-last-child(n)选取父元素的倒数第n个子元素
• :nth-of-type(n)选取属于父元素的特定类型的第n个子元素
• :nth-last-of-type(n)选取属于父元素的特定类型的倒数第n个子元素

UI伪类选择器

​ 根据元素的状态匹配元素。

• :enabled选取已启用的元素
• :disabled选取被禁用的元素
  • 以上两个匹配的是自带禁用状态的元素
• :checked选取所有选中的复选框和单选按钮
• :default选取默认按钮
• :valid :invalid选取基于输入验证判定的有效或者无效的input元素
• :in-range :out-of-range选取被限定在指定范围之内或者之外的input元素
• :required :optional根据是否允许使用required属性选取input元素

动态伪类选择器

​ 根据条件的改变匹配元素。

• :link 选取未访问的链接元素
• :visited选取用户已访问的链接元素
• :hover选取鼠标指针悬停在其上面的元素
• :active选取被当前用户激活的元素，这意味着用户即将点击该元素
• :focus选取获得焦点的元素

其他伪类选择器

• :not(<>) 否定选择
• :empty选取不包含任何子元素或者文本的元素
• :lang(<语言>)选取lang属性为指定值的元素
• :target选取url片段标识符指定的元素

属性

边框和背景属性

• 使用border简写属性border，属性值包括宽度，样式，颜色[用空格隔开]，或者用以下三个具体属性：
  • border-width定义边框宽度，属性值有长度值、百分数以及Thin、medium、thick，后三个值的具体意义由浏览器定义
  • border-style的属性值有none，dashed[破折线边框]，dotted[圆点线边框]，double[双线边框]，groove[槽线边框]，inset[内嵌]，outset[外凸]，ridge[脊线]，solid[实线]
  • 加上top，bottom，left，right任意一个就可以选择定义一条边框，例border-bottom-style，border-bottom-width，border-bottom-color
• border-radius简写属性创建圆角边框，属性值是长度或者百分数，或者用以下四个具体属性：
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-left-radius
  • border-bottom-right-radius
• border-image使用图像创建边框，在一条声明中设置以下所有值的简写属性【图片路径要写对】
  • border-image-source设置图像来源
  • border-image-slice设置切分图像的偏移，1~4个长度值或百分数
  • border-image-width设置图像边框的宽度，auto或1~4个长度值或百分数
  • border-image-outset边框图像向外扩展的部分，1~4个长度值或百分数
  • border-image-repeat设置图像填充边框区域的模式，属性值如下：
    • stretch拉伸切分图填满整个空间
    • repeat平铺切分图填满整个空间
    • round在不截断切分图的情况下，平铺切分图并拉伸填满整个空间
    • space在不截断切分图的情况下，平铺切分图并在图片之间保留一定的间距以填满整个空间
• background简写，设置所有的背景相关属性
  • background-color或background-image定义背景颜色或图像
  • background-repeat设置图像的重复样式，属性值有repeat-x,repeat-y,repeat,space,round,no-repeat
  • bakground-size设置背景图像的位置，属性值可以是长度、百分数以及预定义值cotain、cover、auto
  • background-position定义背景图像的位置，属性值是长度单位或top，left，right，bottom，center
  • background-attachment指定背景和元素滚动区域之间的关系，属性值有fixed，local，scroll
    • local是背景附着在内容上，随内容一起滚动
    • fixed背景固定到视窗上
    • scroll背景固定到元素上，将浏览器调整至无法完整显示文本区域，scroll模式会启用浏览器的滚动条
  • background-origin和background-clip属性指定背景绘制区域和可见裁剪区域
    • 两者的属性值相同，border-box（边框盒子），padding-box（内边距盒子），content-box（内容盒子）
• box-shadow设置元素的盒子阴影
  • hoffset阴影的水平偏移量
  • voffset阴影的垂直偏移量
  • blur模糊值
  • spread阴影的延伸半径
  • color阴影颜色
  • inset阴影内嵌到盒子中

轮廓

边框和轮廓最大的区别是轮廓不属于页面，因此应用轮廓不需要调整页面布局

• 使用简写属性outline
  • outline-color
  • outline-style
  • outline-offset设置轮廓距离元素边框边缘的偏移量
  • outline-width

使用盒模型

• padding设置盒子内边距区域的尺寸

• margin设置盒子外边距区域的尺寸

• width和height设置元素的尺寸

• box-sizing设置尺寸应用到盒子的哪一部分

• max-width、min-width、max-height、min-height为元素大小设置范围

• overflow、overflow-x、overflow-y设置元素溢出内容的处理方式

  • 属性值auto、hidden、visible、scroll

• visibility设置元素的可见性

  • collapse属性值，元素不可见，且在页面布局中不占据空间【只能应用到表相关元素】
  • hidden属性值，元素不可见，但在页面中占据空间
  • visible默认值，元素在页面上可见

• display设置元素盒子的类型

  • 取none值，可以设置元素的可见性
  • block值，元素在垂直方向上区别于周围元素

  
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Documenttitle>
  head>
  <body>
      <p id="toggle">
          此方法可以解决绝大多数情况的文本溢出问题，但是最后的省略号因为是定位到此处的，所以难免会出现将文字遮挡一半的情。
      p>
      <p>
          为了解决这种突兀的现象，可以通过css改变背景渐变色或者直接添加背景图片的方法解决，此处我选择采用添加背景图片的方法。
      p>
      <button>Blockbutton>
      <button>Nonebutton>
      <script>
          var buttons = document.getElementsByTagName('button');
          for(var i=0; i < buttons.length; i++){
              buttons[i].onclick = function(e){
                  document.getElementById('toggle').style.display = e.target.innerHTML;
              };
          }
      script>
  body>
  html>
  

  • inline值，元素显示为段落中的一个字
  • inline-block，元素对外具有行内元素的属性，对内具有块元素的属性，不换行有宽高
  • run-in值，显示方式依赖其周围的元素
    • 如果相邻兄弟元素是块级元素，则它设置为行内元素
    • 其他情况下作为块级元素对待

• float将元素移动到其包含块的左边界或右边界，或者另一个浮动元素的边界

  • left移动元素，使其左边界挨着包含块的左边界，或者另一个浮动元素的右边界

  • right移动元素，使其右边界挨着包含块的右边界，或者另一个浮动元素的左边界

  • none元素位置固定

    JS中提到float属性必须使用cssFloat ===>> **.style.cssFloat = xxxxxx

• clear设置盒子的左边界、右边界或者左右两个边界，不允许出现浮动元素，阻止浮动元素堆叠

  • left元素的左边界不能挨着另一个浮动元素
  • right元素的右边界不能挨着另一个浮动元素
  • both元素的左右边界都不能挨着另一个浮动元素
  • none元素的左右边界都可以挨着另一个浮动元素

创建布局

定位内容

• position
• z-index指定元素显示的层叠顺序，值越小，在层叠顺序中就越靠后，默认值为0

多列布局

• column-count指定列数
• column-fill指定内容在列与列之间的分布方式，属性值有balance和auto
• column-gap指定列之间的距离
• column-rule在一条声明中设置column-rule-*的简写属性，包括列之间的宽度值、样式、颜色
• columns设置column-span、column-width的简写属性，包括元素横向跨多少列的数值和列宽长度值

弹性盒布局

使用弹性布局可以创建对浏览器窗口调整响应良好的流动界面。

• -webkit-box必须先使用设置为display的属性值

• -webkit-box-flex指定元素的可伸缩性数值，分配给多个元素时，按比例分配的是多于空间，不能改变首选尺寸，所以被分配的多个元素呈现的尺寸不一定成比例

• -webkit-box-align如果内容元素的高度小于容器的高度，告诉浏览器如何处理多余的空间

  • start沿容器顶边放置
  • end沿容器底边放置
  • center多于空间被平分为两部分，分别显示在元素的上方和下方
  • strech调整元素的高度，填充可用空间

• -webkit-box-pack如果可伸缩元素达到最大尺寸，告诉浏览器如何分配空间，属性值有start[靠左]、end[靠右]、center[居中]、justify[均匀分配]

  可伸缩元素不能包含浮动元素

设置文本样式

• text-align和text-justify设置文本块对齐
  • text-align属性值有start、end、left、right、center、justify
• white-space定义如何处理空白
  • normal，压缩空白符，文本行自动换行
  • nowrap，压缩空白符，文本行不换行
  • pre，保留空白符，遇到换行符则换行
  • pre-line，压缩空白符，在一行排满或遇到换行符时换行
  • pre-wrap，保留空白符，在一行排满或遇到换行符时换行
• direction指定文本方向
• letter-spacing、word-spacing、line-height指定字母之间、单词之间、文本行之间的间隔
• word-wrap指定溢出文本如何断行
  • normal，即使不能完全放入包含块，单词也不断开
  • break-word断开单词，使其放入包含块
• text-indent指定文本缩进
• text-decoration和text-transform装饰文本或者转换文本大小写
• text-shadow为文本块应用阴影效果
• 设置字体
  • font简写属性
  • font-family字体名称
  • font-size字体大小
  • font-style字体样式
  • font-variant是否以小型大写字母展示
  • font-weight字体粗细
• @font-face使用自定义字体
  • 字体资源网站有www.google.com/webfonts

过渡、动画和变换

过渡属性

• transition-delay指定过渡开始之前的延迟时间
• transition-duration指定过渡的持续时间
• transition-property指定应用过渡的属性
• transition-timing-function指定过渡期间计算中间值的方式
• transition简写属性，指定所有过渡细节

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        p{
            padding: 5px;
            border: medium double black;
            background-color: lightgray;
            font-family: sans-serif;
        }
        #life{
            font-size: large;
            border: medium solid black;
            /* 增加反向过渡 */
            -webkit-transition-delay: 10ms;
            -webkit-transition-duration: 3s;
        }
        #life:hover{
            font-size: x-large;
            border: medium solid white;
            background-color: pink;
            color: white;
            padding: 4px;
            /* 创建过渡 */
            -webkit-transition-delay: 100ms;
            -webkit-transition-property: background-color, color, padding, font-size, border;
            -webkit-transition-duration: 500ms;
        }
    style>
head>
<body>
    <p>
        在最近时期，人类还遭受到另一种丧失，<span id="life">那就是原本作为其行为根基的传统迅速的消减。span>丧失了告诉他必须做什么的本能，丧失了告诉他应该做什么的传统，有时人甚至连自己想做什么都不知道。这样，他要么去做别人所做的事（随大流），要么做别人希望他做的事（集权主义）
    p>
body>
html>

动画

• animation-delay设置动画开始前的延迟
• animation-direction设置动画循环播放的时候是否反向播放
  • normal每次重复都向前播放，如果可以重复播放多次，每次动画都恢复初始状态，从头开始播放
  • alternate动画先向前播放，然后反方向播放，相当于animation-iteration-count属性的值为2
• animation-duration设置动画播放的持续时间
• animation-iteration-count设置动画的播放次数
• animation-name指定动画名称[必写]
• animation-play-state允许动画暂停和重新播放
  • 属性值为paused停止播放，属性值为playing开始播放
  • 结合JS动态改变属性值
• animation-timing-function指定如何计算中间动画值
• 简写属性animation:

观察以上属性，发现没有“指定作为动画的css属性”的属性。这是因为动画需要两部分定义，一部分是定义动画的样式，一部分是使用@key-frames，定义应用动画的属性，例如下面代码示例就是寻找名叫”cc“的关键帧。

动画的局限是关键帧为属性定义的值只能在动画中应用。出现这种情况的原因是css动画只是驱动新样式的应用，并没有让自身出现任何持久性变化。想让外观保持动画结束时的状态，必须使用过渡。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        p{
            padding: 5px;
            border: medium double black;
            background-color: lightgray;
            font-family: sans-serif;
        }
        #life{
            font-size: large;
            border: medium solid black;
        }
        #life:hover{
            font-size: x-large;
            border: medium solid white;
            background-color: pink;
            color: white;
            padding: 4px;
            /* 创建动画 */
            -webkit-animation-delay: 100ms;
            -webkit-animation-duration: 1s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
            -webkit-animation-name: 'cc';
        }
        @-webkit-keyframes cc {
            from{
                font-size: xx-small;
                background-color: red;
            }
            50%{
                background-color: yellow;
                padding: 1px;
            }
            75%{
                color: plum;
                padding: 2px;
            }
            to{
                font-size: x-large;
                border: medium solid white;
                background-color: pink;
                color: white;
                padding: 4px;
            }
        }
    style>
head>
<body>
    <p>
        在最近时期，人类还遭受到另一种丧失，<span id="life">那就是原本作为其行为根基的传统迅速的消减。span>丧失了告诉他必须做什么的本能，丧失了告诉他应该做什么的传统，有时人甚至连自己想做什么都不知道。这样，他要么去做别人所做的事（随大流），要么做别人希望他做的事（集权主义）
    p>
body>
html>

变换

• transform指定应用的变换功能
  • translate、translateX、translateY在水平方向、垂直方向或者两个方向上平移元素
  • scale、scaleX、scaleY在水平方向、垂直方向或者两个方向上缩放元素
  • rotate旋转元素
  • skew、skewX、skewY在水平方向、垂直方向或者两个方向上使元素倾斜一定的角度
  • matrix指定自定义变换
• transform-origin指定变换的起点
  • %指定x轴或y轴的起点
  • 长度值指定距离
  • left、center、right指定x轴上的位置
  • top、center、bottom指定y轴上的位置

其他css属性和特性

• color
• opacity透明度从0~1
• 表格样式
  • border-collapse设置相邻单元格的边框处理样式
    • collapse不要边框
    • separate要边框，可以配合border-spacing改变相邻元素边框的间距
  • border-spacing设置相邻单元格边框的间距
  • caption-side设置表格标题的位置
    • top
    • bottom
  • empty-cells设置空单元格是否显示边框
    • show显示
    • hide不显示
  • table-layout指定表格的布局样式
    • auto根据每一列中最宽的单元格设置单元格的宽度，不过这意味着确定页面布局之前，浏览器必须获得所有的表格内容
    • fixed表格的大小是由表格自身和单独每列的width值确定的，没有写width的话，浏览器会设置等距离的列宽
• 列表样式
  • list-style简写属性
    • list-style-type列表中使用的标记的类型
    • list-style-image图像作为列表标记
    • list-style-position标记相对于列表项目盒子的位置
• 光标样式
  • cursor
    • 属性值有auto、crosshair、default、help、move、pointer、progress、text、wait、n-resize、s-resize、e-resize、w-resize、ne-resize、nw-resize、se-resize、sw-resize