CSS语法

  1. CSS主要由两部分构成：选择器、一条或多条声明
  • 选择器表示需要改变样式的HTML标签名
  • 每条声明由一个属性和一个值组成，表示需要设置的样式属性。声明使用大括号括起来，属性和值使用冒号分隔，不同声明间使用分号分隔。示例如下：
    1
    2
    3
    4
    5
    p
    {
        color:red;
        text-align:center;
    }
  1. CSS注释：/*注释*/

选择器（id和class）

选择器用于选择指定的html元素设置样式

id选择器

id选择器使用id为特定的HTML元素指定样式

注意：HTML中的id属性值是不允许重复的。class值允许重复

首先在HTML为元素设置id属性，再在CSS中使用#定义id选择器，示例如下：

1
2
3
4
5
#para1
{
    text-align:center;
    color:red;
}

class选择器

class选择器用于描述一组元素的样式。class与id的区别是，class可以在多个元素中使用。
与id类似，先在HTML为元素设置class属性，再在CSS中使用.定义class选择器。

1
.center {text-align:center;}

样式表

插入样式表的方法有三种：

  • 外部样式表
  • 内部样式表
  • 内联样式

外部样式表

  1. 使用场景：样式需要应用于很多页面时。
  2. 外部样式表是写在后缀名为.css的文件中。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。
  3. 每个页面使用<link>标签链接到样式表，href后的值。<link>标签写在HTML头部。示例如下：
    1
    2
    3
    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>
  4. 在外部css文件中不能包含任何html标签，css例子如下：
    1
    2
    3
    hr {color:sienna;}
    p {margin-left:20px;}
    body {background-image:url("/images/back40.gif");}

内部样式表

  1. 使用场景：单个文档需要特殊的样式时。
  2. 使用<style>标签在HTML头部定义内部样式表，例子如下：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <head>
        <style>
            hr{
                color:sienna;
            }
            p{
                margin-left: 20px;
            }
            body{
                background-image: url("images/back40.gif");
            }
        </style>
    </head>

内联样式

  1. 使用场景：当样式仅需要在一个元素上应用一次时。（慎用，不推荐）
  2. 在相关标签内使用style属性设置CSS样式。例子如下：
    <p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式优先级

优先级顺序

  • 通用选择器（*）
  • 元素(类型)选择器
  • class选择器
  • 属性选择器
  • 伪类
  • ID选择器
  • 内联样式

背景

CSS背景属性用于定义HTML元素背景
几种定义背景的样式：

  • background：简写属性，默认颜色优先
  • background-color：设置元素背景颜色
  • background-image：将图片设为背景
  • background-repeat：背景图像是否以及如何重复
  • background-attachment：背景图像是否固定或者随着页面其余部分滚动
  • background-position：设置背景图像的起始位置
  • background-size：设置图片大小，默认单位是像素px

color

使用background-color定义颜色

1
2
3
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

image

使用background-image定义背景图片。默认情况下，背景图像为平铺重复显示。
如未设置background-position属性，图像默认显示在左上角。

repeat

先介绍下几个词的释义：

  • 平铺：div设置宽高40，图片的宽高只有20，那么图片会自动填满div剩余的空位
  • 水平平铺（X）：只填满横向的空位
  • 垂直平铺（y）：只填满纵向的空位

使用background-repeat设置图像只在水平方向平铺（repeat-x)。
使用场景：因为默认情况下image会在页面的水平和垂直方向平铺,如果看着不协调，可以设置为只在一个方向平铺。

1
2
3
4
5
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

backgrouond-repeat的几个值：

值 描述
repeat 默认，背景图像将在垂直方向和水平方向重复
repeat-x 背景图像在水平方向重复
repeat-y 背景图像在垂直方向重复
no-repeat 背景图像只显示一次
inherit 从父元素继承 background-repeat 属性的设置

position

使用background-position改变图片在背景中的位置。下面介绍几个position的值。

第一种值：

top center bottom
left left top left center left bottom
right right top right center right bottom
center center top center center center bottom

注：如果只写了一个值，那么第二个值默认为center。

第二种值：

x% y%
水平位置 垂直位置

注：左上角是0%0%，右下角是100%100%。如果只规定了一个值，另一个默认是50%

第三种值：

xpos ypos
水平位置 垂直位置

注：左上角是0 0。默认单位是像素px,可以设置为其他单位。如果只规定了一个值，另一个**默认是50%**。x%和xpos可以混用。

1
2
3
4
5
6
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

文本格式

文本颜色

color用于设置文字的颜色（即仅对文字生效）。
三种指定颜色的方式：

  • 十六进制：#FF0000
  • RGB：RGB(255,0,0)
  • 颜色英文：red
1
2
3
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

对齐方式

使用text-align属性定义对齐方式。

值 功能
left 左对齐，默认值
right 右对齐
center 居中对齐
justify 两端对齐
inherit 从父元素继承 text-align 属性的值 
1
2
3
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

文本修饰

使用text-decoration设置或删除文本的修饰。主要用于删除链接的下划线。
<p>链接到: <a href="//www.runoob.com/">runoob.com</a></p>

大小写转换

使用text-transform设置单词的大小写。

  • uppercase：全部大写
  • lowercase：全部小写
  • capitalize：单词首字母大写

文本缩进

使用text-indent指定文本第一行缩进
p {text-indent:50px;}

更多CSS文本属性

本文参考自菜鸟教程