CSS 属性

发表于 | 分类于

html

颜色

  • color
    前景色

  • background-color
    背景色

  • opacity
    透明度

  • 颜色指定的三种方式
    RGB、RGBA；16进制；hsl、hsla（hsl指定色调、饱和度以及明度）。

文本

字体术语

  • 衬线字体（SERIF）
    字符在笔画的末端有一些额外的装饰（称为称线）。通常打印长篇文本时使用衬线字体。包括 Georgia，Times，Times New Roman。

  • 无称线字体（SANS-SERIF)
    字母拥有笔直的线条，设计更为简洁。屏幕分辨率要地于打印分辨率，因此当文本比较小时，屏幕上使用无衬线字体阅读起来会更清晰。包括 Arial， Verdana， Helvetica。

  • 等宽字体（MONOSAPCE）
    每个字母的宽度都相同。因为可以精确地对齐，通常用于显示代码。包括 Courier， Courier New。

字体

  • font-family
    指定一组字体，以逗号隔开，如：
    body {
        font-family: Geogia, Times, serif;
    }
    h1,h2 {
        font-family: Arial, Verdana, sans-serif;
    }
    .credits {
        font-family: "Courier New", Courier, monospace;
    }

如上所示，将通用字体名作为一类字体的结尾也是很常见的做法。

  • font-size
    可以以像素（px）、百分数(%)、或是EM值（em）为单位。1em相当于一个字母m的宽度。
    要保证字体以希望的大小出现，最好的方式就是以像素为单位对字体大小进行设置。

  • @font-face
    可以通过指定下载地址来获得计算机上没有的字体。

  • font-weight
    取值 normal 或 bold

  • font-style
    取值 normal 或 italic 或 oblique。其中 italic 是文本以斜体显示；而 oblique 仅仅是把文本倾斜一个角度显示而已。

  • text-transform
    改变文本的大小写。取值 uppercase 或 lowercase 或 capitalize。

  • text-decoration
    可取以下值：
    none：把应用在文本上的装饰线去掉
    underline：文本底部增加一条实线
    overline：文本顶部增加一条实线
    line-through: 用一条实线穿过文字
    blink：使文本动态闪烁（会招人烦！）

  • line-height
    行间距。一般而言，垂直的行间距应该要大于文字间距。

  • letter-spacing
    字距

  • word-spacing
    单词间距

  • text-align
    文字对齐方式。可取值 left， right， center， justify。

  • text-indent
    对首行文本进行缩进。

  • text-shadow
    创建投影。需要指定三个长度值和一种颜色。第一个长度值表明阴影向左或向右延伸的距离；第二个长度值表明阴影向上或向下延伸的距离；第三个长度值为可选项，用于指定投影的模糊程度；最后一项是投影的颜色值。

  • :first-letter
    伪元素，指定首字母。

  • :first-line
    伪元素，指定首行

p.intro:first-letter {
    font-size: 200%;
}
p.intro.first-line {
    font-weight: bold;
}

  • :link
    未访问过的链接

  • :visited
    访问过的链接

  • :hover
    光标悬停其上的元素

  • :active
    用户单击的元素

  • :focus
    占据焦点的元素

盒子

每一个元素都是一个矩形的盒子。

  • width，height
    控制盒子大小

  • min-width，max-width
    限制盒子宽度

  • min-height, max-height
    限制盒子高度

  • overflow
    内容溢出盒子的处理方式：hidden，scroll

  • border-width
    盒子边框宽度

  • border-style
    边框样式：solid, dotted, dashed, double, groove, ridge, insert, outset, hidden/none
    可以用下面的属性对各个方向的边框样式单独设置：
    border-top-style
    border-left-style
    border-right-style
    border-bottom-style

  • border-color
    边框颜色。也可以对各个方向的边框分别设置颜色。

  • border
    同时指定边框的宽度，样式和颜色

    p {
        width: 250px;
        border: 3px dotted #0088dd;
    }

  • padding
    内边距：元素内容与元素边框之间的距离。可以用下面的属性分别指定各个方向上的内边距：
    padding-top
    padding-right
    padding-bottom
    padding-left
    也可以用 padding 这个属性快速指定（以上、右、下、左的顺序）

    padding: 10px 5px 3px 1px;

  • margin
    外边距：盒子之间的距离。不同方向的指定参照 padding。
    指定 left-margin 和 right-margin 分别为 auto 可以使盒子居中显示。

  • display
    允许将一个内联元素转换为块级元素，反之亦然。取值：
    inline：使块级元素表现得像内联元素。
    block：使内联元素表现得像块级元素。
    inline-block：使块级元素像内联元素那样浮动并保持其它块级元素的特征。
    none：将一个元素从页面上隐藏。页面上会像没有这个元素一样。

  • visibility
    从用户视线中隐藏盒子，但保留了盒子原来占用的空间。取值：
    hidden：隐藏元素。
    visible：显示元素
    注意和 display 的区别。

  • border-image
    设定边框图像

  • box-shadow
    在盒子周围添加投影

  • border-radius
    在盒子上创建圆角（指定一个半径）
    创建椭圆形（指定两个半径）

列表

  • list-style-type
    项目列表样式。
    对于无序列表，可以取值：
    none，disc，circle，square
    对于有序列表，可以取值：
    decimal， decimal-leding-zero，lower-alpha， upper-alpha， lower-roman， upper-roman

  • list-style-image
    使用图片作为项目列表符号

  • list-style-position
    默认情况下，列表会缩进到页面中。该属性用于表示标记显示的位置，是在包含主题内容的盒子内部，还是在其外部：outside， inside。

  • list-style
    使用这个属性可以同时指定列表的位置和样式。

表格

  • width

  • padding
    单元格与其内容之间的空隙

  • text-transform

  • letter-spacing，font-size
    用于为表格标题内容增加额外的样式

  • border-top, border-bottom
    用于设置表格标题上方和下方的边框

  • text-align
    设置左右对齐

  • background-color
    用于交替改变表格行的背景颜色

  • :hover
    用户把光标停在某个单元格时高亮显示

  • empty-cells
    设置空单元格的边框，取值：
    show，hide，inherit

  • border-spacing, border-collapse
    设置单元格之间的间隙

表单

文本框样式

  • font-size
    用户输入文本大小

  • color
    文本颜色

  • background-color
    文本输入框颜色

  • border
    文本输入框边框

  • background-image
    为盒子增加背景图像

提交按钮样式

  • color
    控制文本按钮颜色

  • text-shadow
    显示3D效果文本

  • border-bottom
    使按钮下方边框稍微粗一点，从而使3D效果更逼真

  • background-color

  • :hover
    鼠标悬停按钮之上

布局

  • position

三种用于控制页面布局的定位机制：
普通流

position:static

每个块级元素都换行显示，以至于页面中的每个项目都显示在前一个项目的下面。即使指定了盒子的宽度，并且也有足够的空间让两个元素并排显示，但是他们还是不会出现在一起。这是浏览器的默认行为。

相对定位

position:relative

把一个元素从它在普通流中所处的位置进行上、下、左、右的移动。这种移动不会影响周围元素的位置，他们还是处于普通流中所处的位置。

通过制定 top，left，right，bottom 属性可以把一个元素以其在普通流中所处的位置为起点进行移动。

p.example {
    position: relative;
    top: 10px;
    left: 100px;
}

绝对定位

position:absolute

绝对定位的元素的位置相对于它包含的元素。它完全脱离了普通流，也就是说不会影响到周围任何元素的位置。使用绝对定位的元素随着页面的滚动而移动。

盒子的位移属性 top，left，right，bottom 用于指定元素相对于它的包含元素应该显示什么位置。

h1 {
    position: absolute;
    top: 0px;
    left: 500px;
    width: 250px;
}

在上面的例子中，h1元素被定位于页面顶端并距离页面左侧边缘500像素的位置。

固定定位

position:fixed

固定定位是绝对定位的一种形式，与相对于包含元素的定位不同，他是将元素相对于浏览器窗口进行定位。固定定位的元素不会影响周围元素的位置，而且当页面上下滚动时，它不会移动。

  • z-index
    当使用相对定位、固定定位或者绝对定位时，盒子是可以重叠的，这时可以使用 z-index 元素指定层次。数值越大，元素的层次越靠前。

  • float
    float 属性允许将普通流中的元素在它的包含元素内尽可能地向左或向右排列。
    位于包含元素中的其它内容会在浮动元素的周围流动。

  • clear
    用来清楚某一侧的浮动元素，取值：
    left，right，both，none

  • 可以用并排的float元素创建并排布局

    .column1, .column2, .column3 {
        width: 300px;
        float: left;
        margin: 10px;
    }

选择器

  • 通用型选择器

    * {}

  • 类型选择器

    h1, h2,h3 {}

  • 类选择器

    .note {}
    p.note {}

  • ID选择器

    #intro {}

  • 子元素选择器

    li>a {}

  • 后代选择器

    p a {}

  • 相邻兄弟选择器

    h1+p {}

  • 普通兄弟选择器

    h1~p {}