CSS要点记录

CSS要点记录

CSS 指层叠样式表 (Cascading Style Sheets)

多种样式时的优先级问题

数字越大优先级越高

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表（位于 <head> 标签内部）
  4. 内联样式（在 HTML 元素内部）

在HTML中插入样式表

插入样式表的方法有几种

  1. 在<head>中插入<link>，如
<head>
<link rel='stylesheet' type='text/css' href='/style.css' />
</head>
  1. 在<head>中插入内部样式表，如
<head>
<style type='text/css'>
    h1 {
        color: red;
    }
</style>
</head>
  1. 内联样式表，如
<p style='color: red; font-size: 12px;'>hello</p>

CSS选择器

CSS选择器可以分为派生选择器（上下文选择器），id选择器，class选择器，属性选择器等

选择器 示例 说明
.class .ClassName 类名为ClassName的元素
.class1.class2 .ClassName1.ClassName2 选择同时为ClassName1和ClassName2的元素
#id #IDName id名为IDName的元素
* * 选择全部元素
element p 选择元素p
element1,element2 div,p 选择全部div和p元素
element1 element2 div p 选择div标签中的所有p元素(注意元素间的间隔可以是任意的)
element1>element2 div>p或div > p(可以有空百符) 选择div标签中的所有p元素(注意元素间的间隔只能有一层)
element1+element2 div+p 所有紧接在div后面的p元素
[attr] [name] 所有含有name属性的元素
[attr=value] [name='Name'] 所有name属性值为'Name'的元素
[attr~=value] [name~='Name'] 所有name属性值中含有单词'Name'的元素
[attr|=value] [name|='Name'] 所有name属性值以'Name'开头的元素
[attr^=value] [name^='Name'] 所有name属性值以'Name'开头的元素
[attr$=value] [name$='Name'] 所有name属性值以'Name'结尾的元素
[attr*=value] [name*='Name'] 所有name属性含有'Name'子串的元素
:link a:link 未访问的链接
:visited a:visited 已访问的链接
:hover a:hover 鼠标悬浮在上面的链接
:active a:active 活动的链接(鼠标点击时)
:focus input:focus 获得焦点的input元素
:first-child li:first-child 所有作为第一个子元素的li元素

CSS语法

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

selector {
    property_1: value1;
    property_2: value2;
}
  • 注意不要在属性值和单位之间插入空格，如 font-size: 12 px
  • CSS对大小写不敏感，但涉及HTML时class和id值对大小写敏感
  • CSS属性具有继承的特点，如果设置body字体那么body的子元素将继承字体的CSS样式，当需要子元素有不同的字体样式时只需要定义子元素的样式就好，对于优先级高的样式会覆盖优先级低的样式

CSS中的各种属性：

颜色

三种表示方式：

  1. 用颜色的名字表示：{color: red;}
  2. 用16进制值表示：{color: #ff0000;} 或用缩写 {color: #f00}（等同于#ff0000）
  3. 用rgb表示：{color: rgb(255,0,0);} 或用百分比 {color: rgb(100%,0%,0%);}
  4. 用rgba表示：{color: rgba(255,0,0,20);}（增加透明通道）

背景

CSS中背景的设置可以为图片也可以设置颜色，颜色默认值为transparent，背景图排尿默认值为none，并且背景不能被继承：

  1. 背景颜色：{background-color: blue;}
  2. 元素内边距：{padding: 12px;}
  3. 背景图片：{background-image: url(/image.png);}
  4. 背景重复，属性值有repeat-y，repeat-x，no-repeat：{background-repeat: repeat-y;}
  5. 背景定位，属性值有top，bottom，left，right，center，百分比（eg. 10% 10%），像素（eg. 10px 10px），当只有一个关键字时另一个关键字默认为center，如值设置为top时等价于top center，有一点需要注意的是，百分数值同时应用于元素和图像，也就是说0% 0%表示图像的左上角位于元素的左上角，100% 100%表示图像的右下角位于元素的右下角，当用像素（长度）表示时，如10px 20px，表示图像的左上角距元素左侧10px，距元素上部20px：{background-position: 10% 10%;} 或者 {background-position: 10px 10px}
  6. 背景关联，可以使背景图像相对浏览器可视区域固定，属性值默认为scroll，设置为fixed可以使背景不随页面滚动：{background-attachment: fixed;}
  7. 将所有背景属性写在一个声明中：{background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;}

文本

  • 文本缩进，text-indent，文本缩进无法应用于行内元素和图像等，同时文本缩进具有继承性，文本进行负缩进时可以形成悬挂缩进，当使用百分比时指缩进占父元素宽度百分比：{text-indent: 5em;}
  • 文本对齐，text-align，属性值有left，right，center，justify，inherit分别对应左右中心和两端对齐，以及从父元素继承对齐方式：{text-align: center;}
  • 字（词）间隔，word-spacing，调整字与字之间的间隔，属性值有正负值和零：{word-spacing: 0.5em;} 注：CSS 把“字（word）”定义为任何非空白符字符组成的串，并由某种空白字符包围。这个定义没有实际的语义，它只是假设一个文档包含由一个或多个空白字符包围的字。支持 CSS 的用户代理不一定能确定一个给定语言中哪些是合法的字，而哪些不是。尽管这个定义没有多大价值，不过它意味着采用象形文字的语言或非罗马书写体往往无法指定字间隔。对英文来说word-spacing就是在词与词之间的空格
  • 字母间隔，letter-spacing，字母间隔指每个字母之间的空格，取值有正负和0，{letter-spacing: 0.5em;}
  • 字符转换，text-transform，属性值有none，lowercase，uppercase，capitalize，分别对应原始大小写，全部小写，全部大写，每个单词首字母大写：{text-transform: uppercase;}
  • 文本装饰，text-decoration，属性值有none，overline，underline，line-through，blink，分别对应无装饰，上划线，下划线，中间横线：{text-decoration: underline;}
  • 空白符处理，white-space，确定元素内处理空白符的方式，属性值有normal，pre，nowrap，pre-wrap，pre-line，inherit，分别对应：忽略多空白符，保留空白符（类似pre标签），不换行，保留空白保留换行，合并空白保留换行，从父元素继承属性值；pre和pre-wrap的区别在于pre-wrap允许自动换行：{white-space: normal;}
  • 文本方向，direction，属性值有ltr，rtl，inherit，分别对应从左往右的文本，从右往左的文本，继承父元素属性值，注：对于行内元素，只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性：{direction: rtl;}
  • 行间距，line-height，属性值可以为百分比，像素，数值：{line-height: 1.5;}

字体

CSS字体系列：
字体系列是对多种变形字体的一个集合，在CSS中定义了几个通用字体系列，它们规定了系列中字体是否成比例，是否有上下短线，字体宽度等，成比例字体根据字符大小不同而有不同的宽度，例如，小写 i 和小写 m 的宽度就不同；上下短线是字符壁画末尾的修饰，如I上下的短线：

  1. Serif字体：成比例字体，有上下短线
  2. Sans-serif字体：成比例字体，无上下短线
  3. Monospace字体：非成比例字体，不确定是否有短线
  4. Cursive字体：模仿手写体，如花体
  5. Fantasy字体：包括无法容易用特征定义的字体，包括Western、Woodblock 和 Klingon等

在CSS中定义字体系列：

  1. 定义通用字体系列
p {font-family: sans-serif;}
  1. 指定更加具体的字体
p {font-family: Georgia;}
  1. 使用多种候选字体，当系统中没有首选字体时可以使用候选字体，当系统中所有字体都无法匹配时会选择一种可用的serif字体，当字体名中含有空格或者#或$时才需要在字体名称外加引号
p {font-family: Georgia, Times, 'New York', sans-serif;}

CSS字体风格（font-style）
字体风格的属性值有三种，normal，italic，oblique，分别对应文本正常显示，文本斜体显示，文本倾斜显示

italic和oblique的区别：
italic是文本自身拥有的斜体字形，而oblique是将正常的文本倾斜显示，对于没有倾斜属性的字体要用oblique来表示，而大部分字体的italic和oblique在浏览器中看上去完全一样

  • 小型大写字母（font-variant）
    CSS可以将文本设置为小型大写字母，属性值有normal，small-caps，inherit：{font-variant: small-caps;}

  • 字体粗细和大小（font-weigth font-size）
    字体粗细使用font-weigth设置，属性值可以为normal，bold，bolder，lighter或者100-900的粗细度，其中如果设置为lighter则设置一个比继承值更粗的字体，lighter则相反，数值400等价于normal，700等价与bold
    字体大小使用font-size设置，属性值可以是绝对大小（px），也可以是相对大小（em），浏览器中默认的字体大小为16px时，1em=16px，em=npx/16px，则2em=32px

链接

  • 链接样式的四个属性L：link，visited，hover，active
  • 注意：
  • a:hover 必须位于 a:link 和 a:visited 之后
  • a:active 必须位于 a:hover 之后

列表

列表的主要样式是列表项的标志，即列表项前的图形样式，改变列表项的样式，可以用（list-style-type）

  • 列表项图形，属性值有square，circle，decimal，upper-roman，lower-alpha等：{list-style-type: square}
  • 列表项图像，属性值为图像的url：{list-style-type: url(image.gif);}

列表项位置可以配置列表项在内容以内或者内容以外，通过list-style-position

  • 将列表项放在内容以内：{list-style-position: inside;}
  • 放在内容以外：{list-style-position: outside;}

简写的列表样式，将列表的所有属性写到list-style中

  • 如：{list-style: url(image.gif) square inside;}

表格

CSS给表格提供了许多样式属性，包括边框，宽度高度，文本对齐等

  • 表格边框：为表格标题和要素加边框 table, th, td {border: 1px solid blue;}
  • 以上的表格边框会显示两层边框，因为表格跟内部元素都具有边框，要显示单线边框可以设置border-collapse属性：{border-collapse: collapse;}
  • 表格宽高：使用width和height属性：table {width: 100%;} th {height: 50px;}
  • 表格中的文本对齐
  • 文本水平对齐：{text-align: center;}
  • 文本垂直对齐：{vertical-align: bottom;}
  • 表格内容边距：设置表格内容和table边框的距离可使用padding
  • 给th设置padding：th {padding: 10px;}
  • 给td设置padding：td {padding: 10px;}
  • 表格文本和背景颜色：文本和背景颜色和其他元素一样
  • table {background-color: green; color: red;} th {color: blue;}
  • 其他表格属性：其他表格属性包括border-collapse，border-spacing，caption-side，empty-cells，table-layout
  • border-collapse：设置边框是否合为一，属性值有collapse，separate，inherit：{border-collapse: collapse;}
  • border-spacing：设置元素边框之间的距离，padding设置的是元素与元素边框之间的距离，border-spacing设置的是边框与边框间的距离，属性值是边框距离或者水平间距 垂直间距，单位为px，cm等：{border-spacing: 10px 20px;}
  • caption-side：设置表格标题位置，属性值有top，bottom，inherit：{caption-side: bottom;}
  • empty-cells：设置是否显示空的元素，属性值有hide，show：{empty-cells: hide;}
  • table-layout：设置表格布局的显示方法，属性值有fixed，automatic，inherit，当使用fixed时，表格水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关，当使用automatic时，表格的列宽度有表格中没有折行的最宽内容决定，一般fixed模式运算快，而automatic模式观感更好：{table-layout: fixed;}
  • 轮廓（outline）：CSS可以给元素增加轮廓，轮廓的样式包括轮廓线样式（outline-style），轮廓线颜色（outline-color），轮廓线宽度（outline-width）
  • outline-style：设置轮廓线样式，可选的属性值有none，dotted，dashed，solid，double，groove，ridge，inset，outset，inherit：{outline-style: dashed;}
  • outline-color：设置轮廓线颜色：{outline-color: #121212;}
  • outline-width：设置轮廓线宽度，属性值可以为thin，medium，thick，长度：{outline-width: thin;} {outline-width: 10px;}
  • outline：将属性值写在一个声明中：{outline: dotted 10px red;}

CSS框模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
[图片上传失败...(image-3ebadc-1539826777681)]
在CSS框模型中，直接包含元素的是内边距，内边距的边缘是边框，边框以外是外边距，外边距和内边距是可选的，默认为0，边框内显示的是元素的背景，外边距默认是透明的，因此不会遮挡后面的元素

当不设置内边距和外边距时，它们将由用户代理设置默认模式，可以使用选择器覆盖默认行为 * {margin: 0; padding: 0;}

CSS中设置的width，height指的是内容的宽度和高度，假设将内容设置为宽70px，内边距5px，外边距10px，则最终元素的宽度是100px，如下


Box Model Exmaple

注：外边距可以为负，边距可以同时设置四边边距也可以单独设置每边边距，如：{margin-left: 20px; padding-left: 20px;}

填充padding

padding控制的是边框与内容之间的空白区域，接受长度和百分比指，但是不接受负值

  • 统一设置四边的内边距可以只设置padding也可以按照上右下左的顺序设置四边边距：{padding: 10px} 或 {padding: 10px 10% 0.25em 2ex;}
  • 也可以分别设置各边的边距：{padding-left: 10px; padding-top: 15px;}
外边距margin

外边距在元素边框外设置额外的空白区域，可以接受长度值和百分比，同时可以接受负值和auto

  • margin的设置与padding相似：{margin: 0.5em 1em 0.5em 1em;}
  • 同时可以采用值复制的方法复制：{margin: 0.5em 1em;} 这与上面的效果是一样的
  • CSS定义了一些方法可以使的不用为每个方向的外边距赋值，它的规则如下：
  • 如果缺少左外边距的值，则使用右外边距的值。
  • 如果缺少下外边距的值，则使用上外边距的值。
  • 如果缺少右外边距的值，则使用上外边距的值。
  • 这样做有一些情况也无法省略赋值，如把右下边距设置为30px，把左上边距设置为20px：｛margin: 20px 30px 30px 20px｝或者把左边距设置为20px，其他auto：{margin: auto auto auto 20px;}
  • 当然以上的第二种情况也可以用单独设置的外边距解决：{margin-left: 20px;}

外边距的合并问题

  • 普通文档流中块框的垂直外边距会发生外边距合并
  • 当一个元素位于另一个元素上方时，这个元素的下边距会和下方元素的上边距合并，边距的大小会变成他们之中大的那个
  • 当一个元素位于另一个元素内时，元素的上下外边框也会合并
  • 没有边框和内容的元素自身的上下边距也会合并

它们的合并看起来会像这样

margin_collapsing_example_1
margin_collapsing_example_2
margin_collapsing_example_3
margin_collapsing_example_4

CSS定位属性

HTML页面内的元素都可以用框来表示，像div，h，p等作为“块框”，而span，strong等作为“行内框”

display属性可以改变元素框的类型，如display: block可以使a之类的行内元素变得像块状元素一样

在某些情况下，不显示定义也会创建块级元素，如在块级元素的开头直接写入文本

<div>
in the div
<p>in the paragraph</p>
</div>
CSS定位机制
  • CSS有三种基本定位机制：普通流，浮动，绝对定位
  • 除非专门制定，否则元素都是在普通流中定位，即
  • 块级元素从上至下垂直排列，行内元素水平排列，行内元素的间距可以通过水平内边距，边框，外边距控制，但是边框，垂直内间距，外间距不影响行间距，行框的高度足够容纳它所包含的所有行内框的高度，设置行高可以改变行框高度
CSS position属性
定位机制

position属性提供了几种定位机制，属性值为static，relative，absolute，fixed

  • static：默认值，没有定位，元素框正常生成，作为文档流的一部分，行内元素会创建行框置于父元素中
  • relative：相对定位，元素保持原有形状不改变，相对原有位置进行移动，原有位置保留，实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置，{position: relative; left: 20px;} 表示在元素左侧添加20像素，即相对原位置向右移动20px
  • absolute：绝对定位，元素从文档流中完全删除，原位置关闭，在相对与除static定位外第一个包含元素定位，包含块可能是元素或者初始包含块，元素定位后生成一个块级框而不论其原来的框类型
  • fixed：相对与浏览器窗口进行绝对定位
内容溢出滚动条

元素滚动条，当元素内容溢出时允许用户代理使用滚动机制

  • overflow属性：属性值可以为auto，hidden，visible（默认），scroll：{overflow: scroll;}
  • auto：浏览器自动判断如何处理溢出内容
  • hidden：对溢出内容进行修剪
  • visible：默认值，不对溢出内容进行修建，会显示在元素外
  • scroll：对元素溢出内容进行修剪，并提供滚动机制
文本中图像的垂直排列

对图像元素使用vertical-align属性

  • text-top：文字相对于图像在上方，文字顶端与图片顶端平行：{vertical-align: text-top;}
  • text-bottom：文字相对于图像在下方，文字底端与图片底端平行：{vertical-align: text-bottom;}
z方向堆叠顺序

修改元素的上下关系使用z-index属性

  • z-index默认值为0，数字越高优先级越高：{z-index: -1;}
CSS元素浮动
float属性

通过float属性可以使元素脱离文档流而向上浮动

  • left：当设置向左浮动时，元素从上方元素开始按顺序向上浮动，到顶部后向左浮动直到碰到框的左边缘：{float: left;}
  • right：当设置向右浮动时，元素从上方元素开始按顺序向上浮动，到顶部后向右浮动直到碰到框的左边缘：{float: right;}
  • 注：当框在一行中不够容纳浮动的元素时元素会依次叠加行，当多个浮动的元素高度不同时会发生卡住的现象，当默认情况下行内框会围绕在浮动元素周围，更改这种默认样式要用到下方的clear属性
clear属性

通过规定clear属性规定元素哪一边不允许有浮动元素，属性值可以为both，left，right，none（默认），inherit

  • both：两侧都不允许有浮动元素，不会围绕在浮动元素周围
  • left：左侧不允许有浮动元素
  • right：右侧不允许有浮动元素

CSS其它属性

对齐

对齐块元素，块元素会占用一行所有宽度，并在其前后都会换行，如h1，p，div

对齐块元素有几种办法

  • 使用margin进行中心对齐：将左右margin设置为auto可以让用户代理自动设置两侧边距对齐：{margin-left: auto; margin-right: auto; width: 50%;}
  • 使用绝对定位进行左右对齐：右对齐 {position: absolute; right: 0px;} 左对齐 {position: absolute; left: left;}
  • 使用浮动进行左右对齐：左对齐 {float: left;} 右对齐 {float: right;}
元素尺寸

CSS允许控制元素宽高，最大最小宽高等

  • height：设置元素高度
  • width：设置元素宽度
  • max-height：设置元素最大高度
  • min-height：设置元素最小高度
  • line-height：设置行高
  • max-width：设置元素最大宽度
  • min-width：设置元素最小宽度
元素分类属性

通过设置分类属性确定元素显示的方法，包括元素的位置和元素的可见性等
元素显示样式

  • 将元素设置为内联样式（行内元素），inline元素前后不换行，直至行满，只能包含inline元素：{display: inline;}
  • 将元素设置为块级元素，块级元素前后换行，且占用一行的所有宽度，可以包含block和inline元素：{display: block;}
  • 将元素设置为inline-block，inline-block既有inline的同行分布特征，又有block元素的宽高度特征：{display: inline-block;}
  • 将元素设置为run-in，此元素会根据上下文作为块级元素或内联元素显示：{display: run-in;}
  • 将元素设置为none，元素占用空间从文档中关闭：{display: none;}

鼠标指针类型

  • 通过cursor属性可以设置悬浮于元素上方时指针类型，可选的属性值有Auto，Crosshair，Default，Pointer，Move，e-resize，ne-resize，nw-resize，n-resize，se-resize，sw-resize，s-resize，w-resize，text，wait，help：{cursor: nw-resize;}

元素可见性，通过visibility属性设置

  • 默认显示：{visibility: visible;}
  • 隐藏显示：{visibility: hidden;}
  • 删除行列，collapse用于表格时可以删除一行或一列，但删除后表格的宽或高不会变，布局不变，当用于其它元素时显示为hidden：{visibility: collapse;}

导航栏

HTML中的导航栏可以使用列表来表示：

<style>
ul{
    list-style-type: none;
    background-color: green;
    color: white;
    margin: 0px;
    padding: 0px;
}
</style>
<body>
<ul>
<li><a href='#'>home</a></li>
<li><a href='#'>about</a></li>
</ul>
</body>

或者直接用a元素表示

<style>
a {
    display: block;
    background-color: green;
    color: white;
    margin: 0px;
    padding: 0px;
    width: 60px;
    text-decoration: none;
}
</style>
<body>
<ul>
<li><a href='#'>home</a></li>
<li><a href='#'>about</a></li>
</ul>
</body>

水平导航栏可以使用inline元素或者float属性

li {
    display: inline;
}
或
li {
    float: left;
}
a {
    display: block;
    width: 60px;
}

CSS2媒介类型

通过设置CSS2媒介类型可以为不同的输出媒介定义不同的样式
通过@media定义输出类型

<style>
@media screen
p {
    font-family: Verdana; font-size: 14px;
}
@media print
p {
    font-family: Times; font-size: 10px;  
}
@media screen print
p {
    font-weight: bold;
}
</style>

CSS中媒介类型有

关键字 说明
all 用于所有的媒介设备
aural 用于语音和音频合成器
braille 用于盲人用点字法触觉回馈设备
embossed 用于分页的盲人用点字法打印机
handheld 用于小的手持的设备
print 用于打印机
projection 用于方案展示，比如幻灯片
screen 用于电脑显示器
tty 用于使用固定密度字母栅格的媒介，比如电传打字机和终端
tv 用于电视机类型的设备

CSS3内容

CSS3边框

CSS3中可以为边框添加圆角，阴影和图片，分别对应border-radius，box-shadow和border-image属性

  • border-image：属性值有四边分割位置，图像平铺方式：div {border-image: url(/image.png) 20 20 20 20 round;} border-image是一个简写，它具有几个具体的属性

  • border-image-source：边框图像文件所在位置

  • border-image-slice：图形文件各边向内裁剪，输入数值或百分比，数值的单位默认为px

  • border-image-width：图片边框的宽度

  • border-image-outset：边框图像区域超出边框的量

  • border-image-repeat：控制图像平铺（repeat），铺满（round）或拉伸（stretch）

  • 其中slice指的是图片被分割的方式，参数支持值复制，四个参数分别为对图像上右下左的分割线位置，最后得到一个九宫格分别用于填充四角和四边

border-image-slice
border-image-slice1

  • border-image-repeat属性规定图像的平铺方式，round会凑整填充而进行一定的拉伸，repeat不进行拉伸且不凑整，stretch拉伸图像

  • box-shadow：边框阴影，属性值依次为阴影向右偏移量（有负值），向下偏移量（有负值），模糊量（可选），阴影大小（可选），内阴影（inset，可选）：div {box-shadow: 20px 20px 5px 5px #888888;}

  • border-radius：边框圆角，{border-radius: 25px;} 或{border-radius: 25%;}，四个边框角落可以分别设置，如

  • 同时设置四个角落：{border-radius: 25px 25px 25px 25px;}

  • 设置单个角的圆角：{border-top-right-radius: 2em;} {border-bottom-left-radius: 2em;}

CSS3背景

CSS3中提供了调整背景尺寸的属性background-size和调整背景定位的属性background-origin

  • background-size：对背景进行拉伸：{background-size: 30% 100%}
  • background-origin：设置背景的定位方式，属性值有content-box，padding-box（默认），border-box，分别对应背景相对于内容区域，填充（padding）区域，边框区域定位
  • 多背景图像：CSS3允许多背景图像重叠：{background-image: url(image1.png),url(image2.png);}
CSS3文本

文本阴影text-shadow

  • 属性值为阴影水平偏移，垂直偏移，模糊，阴影颜色：{text-shadow: 5px 5px 5px #FF0000;}

文本换行text-wrap，属性值为none，normal，unrestricted，suppress

  • none：不换行，超出位置的文本会溢出
  • normal：只在允许的换行点换行
  • unrestricted：可以在任意点换行
  • suppress：压缩元素中的换行，只在没有其它有效换行点的时候换行
  • 与word-wrap的区别：word-wrap属性值的可选值为normal，break-word，分别对应仅在断字点换行，可在单词内部换行
  • 与word-break的区别：word-break规定非中日韩文本的换行规则，属性值的可选值为normal，break-all，keep-all，分别对应默认换行规则，可在单词内换行，仅在半角空格或连字符处换行

溢出文本处理text-overflow，属性值为clip，ellipsis，string

  • clip：对溢出文本进行裁剪：{overflow: hidden; text-overflow: clip;}
  • ellipsis: 用省略号代替溢出文本：{overflow: hidden; text-overflow: ellipsis;}
  • string：用给定的字符串代替溢出文本
  • 注：设置text-overflow要先设置overflow属性为hidden
CSS3字体

在CSS3中允许使用自定义的字体而非必须用户代理上安装的字体，在使用时按需下载，Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体，Internet Explorer 9+ 支持新的 @font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)，使用方法如下

<style>
@font-face
{
    font-family: myFont;
    src: url(/font.ttf),url(/font1.eot);
}
</style>

当需要定义粗体字体时

<style>
@font-face
{
    font-family:myFont;
    src: url(font_bold.ttf), url(font1_bold);
    font-weight: bold;
}
</style>

当使用时直接使用{font-family: myFont;}

  • 其他可选的属性值有
  • font-stretch：定义如何拉伸字体
  • font-style：定义字体样式，属性值有normal，italic，oblique
  • unicode-range：定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"
CSS3转换（transform 2D）

CSS3提供了几种2D转换的方法，包括translate，rotate，scale，skew，matrix，CSS3的转换方法在某些版本chrome和safari需要加-webkit-前缀，在IE9需要加-ms-前缀

  • translate：元素的平移：提供水平移动距离，垂直移动距离：{transform: translate(20px, 20px);}

  • rotate：元素旋转，提供角度（deg），允许负数表示逆时针旋转：{transform: rotate(20deg);}

  • scale：元素的缩放，提供宽度放大倍数，高度放大倍数：{transform: scale(2,4);}

  • skew：元素两边的旋转，默认元素中心位置不改变，提供垂直边的旋转度数，第一个参数为垂直边基于上方顶点逆时针旋转的度数，第二个参数为水平边基于上方顶点顺时针旋转的度数：{transform: skew(20deg,30deg);}

  • matrix：可以将所有转换矩阵写在matrix属性中，属性接受6个参数：{transform: matrix(a,b,c,d,e,f);} 根据矩阵运算，有如下关系：x'=ax+cy+e y'=bx+dy+f


    matrix

  • 其它的属性值：scaleX（宽度缩放），scaleY（高度缩放），translateX（水平平移），translateY（垂直平移），skewX（垂直边旋转），skewY（水平边旋转）

transform-origin：设置元素变换相对点位置

CSS3转换（transform 3D）

3D转换有属性值transform-style控制3D元素显示方式，属性值有flat，preserve-3d，分别对应在平面显示3d内容，保留3d（z轴）空间

  • perspective：控制3D元素的透视程度，数值是元素与视图的距离，以像素计
  • perspective-origin控制3D元素基点位置，即3D元素所基于的X轴和Y轴，默认值为50%，50%
  • backface-visibility：规定元素背对屏幕时是否可见，属性值有visible和hidden

过渡效果transition，通过设置transition属性可以规定动画效果

  • transition：属性值为希望应用动画的属性，动画时长：{transition: width 1s;}
  • transition-property：希望应用动画的属性值
  • transition-duration：过渡动画时长，单位为秒
  • transition-delay：动画延迟开始的时间
  • transition-timing-function：过渡动画速度曲线，属性值有ease，linear，ease-in，ease-out，cubic-bezier(n,n,n,n)分别对应缓入缓出，线性，缓入，缓出，cubiz-bezier函数（n值在0-1）
  • 简写的transition属性：{transotion: width 1s ease 2s;} 延迟2s

动画关键帧（keyframes），通过设置动画关键帧可以做到多个动画的连续播放

@keyframes，自定义动画后使用时需要制定动画名称和过渡时长

  • 自定义动画：
@keyframes mytransition {
    from {background-color: red;}
    to {background-color: blue;}
}
div {
    animation: mytransition 2s;
}

同时也可以通过百分比控制动画时间

  • 通过百分比自定义动画播放时间
@keyframes myanimation {
    0% {background-color: red;left: 0px;}
    25% {background-color: blue;left: 10px;}
    50 {background-color: green;left: 20px;}
    100% {background-color: yellow;left 30px;}
}

使用animation时可选的属性值有animation: name duration timing-function delay iteration-count direction; 其中各属性值可分开赋值

  • animation-duration：动画过渡间隔
  • animation-timing-function：过渡动画时间曲线
  • animation-delay：动画执行前的延时
  • animation-iteration-count：动画循环次数，属性值为n次或infinite
  • animation-direction：动画播放的方向，属性值有normal和alternate，分别对应正常播放和轮流反向播放
  • animation-play-state：动画播放状态，控制动画播放和暂停，属性值有paused和running
  • animation-fill-mode：在动画时间以外的样式，分别有none，forwards，backwards，both
  • none：不改变默认行为
  • forwards：向前填充，即动画完成后保持最后一个关键帧状态
  • backwords：向后填充，即动画开始前，在delay时间内应用第一个关键帧的属性
  • both：前后都填充属性
CSS3多列文本布局

多列的可设置属性有column-count，column-gap，column-rule，column-span，column-width

  • column-count：规定列数
  • column-gap：规定列之间的间隔
  • column-rule：规定多列的分隔的颜色，样式，宽度，是column-rule-*的简写
  • column-rule-color：多列分隔的颜色
  • column-rule-style：多列分隔的样式，属性值与边框样式相似
  • column-rule-width：多列分隔的宽度
  • column-span：规定元素可以横跨的列数，属性值为1或all，如标题可以设置为all
  • column-width：列的宽度
  • columns：多列的简写属性，规定column-width和column-count：{columns: 100px 3;}
CSS3新的用户界面属性

调整大小元素(resize）

  • 通过resize属性可以设置元素为用户可调整大小：{resize: both; overflow: auto;}

Box-Sizing，允许定义元素大小布局

  • content-box：调整大小时以content内容为基准：{box-sizing: content-box;}
  • border-box：调整大小时以border范围为基准，content内容大小自动调整：{box-sizing: border-box;}

轮廓向外偏移（outline-offset）

  • 属性值为向外偏移量：{outline: 1px solid red; outline-offset: 15px;}

appearance
设置元素标准外观，属性值有button，icon，normal，window，field，menu

nac-index，nav-down等
定义四方向导航键分别向何处导航，以及tab键切换顺序如

button#b1 {
    nav-index: 1;
    nav-down: #b2;
}
button#b2 {
    nav-index: 2;
    nav-up: #b1;
}
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 157,298评论 4赞 360
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 66,701评论 1赞 290
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 107,078评论 0赞 237
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,687评论 0赞 202
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,018评论 3赞 286
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,410评论 1赞 211
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,729评论 2赞 310
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,412评论 0赞 194
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,124评论 1赞 239
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,379评论 2赞 242
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,903评论 1赞 257
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,268评论 2赞 251
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 32,894评论 3赞 233
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,014评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,770评论 0赞 192
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,435评论 2赞 269
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,312评论 2赞 260

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,628评论 1赞 92
  • CSS 笔记
    CSS 指层叠样式表（Cascading Style Sheets），是一种用来为结构化文档（如 HTML 文档或...
    神齐阅读 1,997评论 0赞 14
  • 前端之路——笔记（基础css）
    学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,269评论 2赞 66
  • 十·CSS常用样式
    1.块级元素和行内元素 块级(block-level)元素；行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 1,927评论 1赞 4
  • 网络技术与应用
    HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的，因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,360评论 0赞 0