CSS：行内样式：字体 / 颜色 / 背景 / 列表 / 表格·源栈课堂·一起帮

CSS：行内样式：字体 / 颜色 / 背景 / 列表 / 表格

当前系列： HTML和CSS

最基本的CSS样式，就和WPS/Word里的排版差不多：

如果确实是专注于后端，且时间非常非常非常紧张，可以略过。但还是建议至少把视频课程听完……

行内样式

CSS最简单的设置方法就是在HTML标签中style属性设置，比如：

<p style="color:red;"> 源栈欢迎您！</p>

style属性值中CSS设置也是“键值对”形式，键和值之间用冒号（:）连接；多个键值对之间用分号（;）分隔。比如：

<p style="font-size:24px;color:red;"> 源栈欢迎您！</p>

多个键值对（设置）是可以“层叠”（共同作用）的。

颜色（color）

颜色值可以使用：

文本，比如 color:red
十六进制颜色编码：比如 color:#00FF00，注意最好用#开头
rgb()函数：比如color:rgb(105,139,105)，三个参数依次代表红（red）绿（green）蓝（blue）三原色分量
rgba()函数：相比rgb()可以多传递一个表示透明度（alpha）的小数值，比如color:rgb(105,139,105,0.5)

字体（font-*）

font-size

确定字体大小

<p style="font-size:20px"> 源栈欢迎您！</p>
<p style="font-size:1em"> 源栈欢迎您！</p>

注意数字后面的单位：

px：像素，显示器屏幕分辨率单位
em：相对于父级元素定义字体尺寸，或者浏览器的默认字体尺寸的百分比值，比如0.8em就是80%

font-family

确定字体系列

<p style="font-family:宋体"> 源栈欢迎您！</p>
<p style="font-family:楷书"> 源栈欢迎您！</p>

特殊字体浏览器可能不支持。如果一定要保证特殊字体能够正常使用，要在服务器准备好字体文件并让浏览器能够下载。

font-weight

字体粗细：

<p style="font-weight:100"> 源栈欢迎您！</p>
<p style="font-weight:500"> 源栈欢迎您！</p>
<p style="font-weight:800"> 源栈欢迎您！</p>

文本（text-*）

text-align

对齐，常用候选项包括：

left：左对齐
center：居中对齐
right：右对齐
justify：撑满
……

text-indent

缩进，值为具体数值，比如：24px

text-decoration

装饰，候选值包括：underline/line-through/none……none常用于取消链接的默认下划线：

<a href="#" style="text-decoration:none;"> 源栈欢迎您！</a>

关于换行

white-space：空白符（换行也被当成空白）处理。常用于

<p style="white-space:nowrap"> 源栈欢迎您！源栈欢迎您！源栈欢迎您！源栈欢迎您！源栈欢迎您！源栈欢迎您！源栈欢迎您！</p>

word-break：

<a href="#" style="word-break:break-all">CSSssssssssssssssssssssssssssssssssssssssssssssssssssss</a>

背景（background-*）

可以简单的设置

颜色

    <p style="background-color:springgreen">源栈欢迎您！</p>

也可以设置

背景图片

    <p style="background-image:url(/images/源栈广告.png)">源栈欢迎您！</p>

注意，如果图片比元素

大，图片会被截断
小，图片会自动向右向下重复（repeat）

所以，我们可能需要对图片进一步的限定：

图片的位置：可选项包括横向（x轴）left/right，纵向（y轴）top/bottom，以及居中center
图片的重复：可选项包括（不重复）（沿x轴重复）（沿y轴重复）

<p style="background-image:url(/images/源栈广告.png); background-repeat:no-repeat">源栈欢迎您！</p>
<p style="background-image:url(/images/源栈广告.png); background-position:center">源栈欢迎您！</p>

最后，这些关于背景的设置都可以合并简写（位置不分先后），如下所示：

<p style="background:url(/images/源栈广告.png) center no-repeat">源栈欢迎您！</p>

列表

可以设置列表项的符号（如square）、位置（position，分inside和outside）和图像（同background图片一样指定url）：

<ul>
    <li style="list-style: square">大神小班</li>
    <li style="list-style-position:inside">面向实战</li>
    <li style="list-style-position:outside">面向实战</li>
    <li style="list-style-image:url(/images/eg_arrow.gif)">兼顾理论</li>
</ul>

和背景一样，多个style可以被合并简写，比如：

<li style="list-style:url(/images/eg_arrow.gif) inside">飞哥的源栈培训顶呱呱</li>

继承

实际开发中，我们通常是将样式写在 ul 或 ol 中的，这样它下面所有的 li 就都能够继承其样式，减少代码量。

如果某一个 li 需要不一样/特殊的样式，可以再独自声明，覆盖其父元素样式。

<ul style="list-style: square">
    <li >大神小班</li>
    <li>面向实战</li>
    <li>面向实战</li>
    <li style="list-style-image:url(/images/eg_arrow.gif)">兼顾理论</li>
</ul>

另外，继承和覆盖并不是只有列表才有的，该规则适用于所有的HTML元素。