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

你可能感兴趣的:(html+css+js,css)