CSS:行内样式:字体 / 颜色 / 背景色 ……

更多
2021年05月07日 10点10分 作者:叶飞 修改

复习:CSS负责样式呈现


行内样式

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>


表格

表格中有两个特有的样式:

  • border-collapse:折叠边框
  • vertical-align:设置垂直位置,可以是top/center/bottom,仅在表格中有用。其他标签文字内容都是左上对齐

(演示:略)


CSS 入门 基础
赞: 0 踩: 0

打赏
已收到打赏的 帮帮币

你的 打赏 非常重要!
为了保证文章的质量,每一篇文章的发布,都已经消耗了作者 1 枚 帮帮币
没有“帮帮币”,作者无法发布新的文章。

全系列阅读
评论 / 0

Web前端


HTML和CSS

HTML最常用的标签和属性,含HTML5的语义标签和新属性,但不包含需要JavaScript操作的HTML5 API,以及CSS基础(简述CSS 3动画相关),以及bootstrap.js以外的Bootstrap的内容。

Javascript入门

Javascript的基本语法:为能使用JQuery和Bootstrap.js的使用打下基础

ES进阶

借助于ES6,讲解JavaScript中一些更复杂的语法特性,如作用域、闭包、面向对象、原型链、this变化、module等

Bootstrap和JQuery

CSS框架Bootstrap,和JavaScript的JQuery类库(含Ajax)

Vue.js

全部
关键字



帮助

反馈