编程►web

css基础

CSS概述

CSS指层叠样式表，是Cascading Style Sheets的缩写。
样式定义了如何显示HTML元素，通常存储在样式表中，使用样式解决了内容和表扬分离的问题。
使用外部样式表可以极大提高工作效率，通常存储在CSS文件中，多个样式定义可层叠为一。
同一个元素被多个样式定义时的优先级(其中数字4拥有最高的优先权)：

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

    CSS语法

    基础

    CSS规则主要由2个部分构成：选择器以及一条或多条声明。 
    1
    selector {declaration1; declaration2;... declarationN}

选择器通常是需要改变样式的HTML元素。
每条元素由一个属性和一个值组成。属性是希望设置的样式属性，每个属性有一个值，属性和值使用冒号分开。
下面代码的作用是将h1元素内的文字颜色定义为红色，字体大小设置为14px。选择器是h1，属性是color font-size 值是red 14px。

1
h1 {color:red; font-size:14px;}

选择器分组

对选择器进行分组，这样被分组的选择器可以分享相同的声明。用逗号将需要分组的选择器分开。
下面代码对所有标签元素进行分组，所有标题元素都是绿色的。

1
2
3
h1,h2,h3,h4,h5,h6{
    color: green;
}

CSS选择器

  • 派生选择器
    通过依据元素在其位置的上下文关系类定义样式。
    例如：假如希望列表中的strong元素变为斜体，可以这样定义一个派生选择器
    1
    2
    3
    4
    li strong {
        font-style: italic;
        font-weight: normal;
    }
1
2
3
4
5
6
<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>

<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>

只有li元素中的strong元素样式为斜体，无需为strong元素定义特别的class或id，代码更加整洁。

  • id选择器
    id选择器可以为标有特定id的HTML元素指定特定的样式。id选择器以#定义。
    下面示例中的id选择器，第一个定义元素颜色为红色，第二个定义元素颜色为绿色。 
    1
    2
    #red {color:red;}
    #green {color:green;}

在下面的HTML代码中，id属性为red的p元素显示为红色，id属性为green的p元素显示为绿色。

1
2
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

  • 类选择器
    类选择器以.定义。 
    1
    .center {text-align: center}

上面的示例表示所有用于center类的HTML元素均为居中。
下面的示例中，h1和p元素都有center类，豆浆遵守.center选择器的规则。

1
2
3
4
5
6
7
<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>

  • 属性选择器
    对带有指定属性的HTML元素设置样式，不仅仅限于class和id属性。
    下面示例为带有title属性的所有元素设置样式。 
    1
    2
    3
    4
    [title]
    {
        color:red;
    }

也可以指定属性的值。

1
2
3
4
[title=hello]
{
    border:5px solid blue;
}

还包括下面一些属性和值的对一个关系。
|选择器|描述|
|-|:-|
[attribute]|用于选取带有指定属性的元素
[attribute=value]|用于选取带有指定属性和值的元素
[attribute~=value]|用于选取属性值中包含指定词汇的元素
[attribute|=value]|用于选取带有以指定值开头的属性值的元素，该值必须是整个单词
[attribute^=value]|匹配属性值以指定值开头的每个元素
[attribute$=value]|匹配属性值以指定值结尾的每个元素
[attribute*=value]|匹配属性值中包含指定值的每个元素

CSS样式

背景

使用background-color属性为元素设置背景色。可为所有元素设置背景色，但是不能继承，其默认值为transparent，也就是透明。
下面的示例将元素背景色设置为灰色

1
p {background-color: gray;}

使用background-image属性将图像放入背景。默认值为none。不能继承。
下面示例为段落应用了一个背景

1
p.flower {background-image: url(/i/eg_bg_03.gif);}

使用background-repeat属性对背景图像进行平铺。
属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。
默认将从一个元素的左上角开始。

1
2
3
4
body{
    background-image: url(/i/eg_bg_03.gif);
    background-repeat: repeat-y;
}

使用background-position属性改变图像在背景中的位置。该属性对应的值有多种。

  1. 关键字，top/bottom/left/right/center。
  2. 长度值，100px/5cm
  3. 百分数，50%/70%
    示例：
    1
    2
    3
    4
    5
    body{
        background-position: center;    居中
        background-position:50% 50%;    居中
        background-position:50px 100px; 
    }

最后一个表示图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上。
使用background-attachment属性表示图像是否随着文档滚动而滚动，属性值有fixed scroll。其中scroll为默认值。

1
2
3
4
5
6
body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }

文本

字体

链接

列表

表格

CSS框模型

Recommended Posts