学编程,来源栈;先学习,再交钱
当前系列: HTML和CSS 修改

复习: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>

继承

实际开发中,我们通常是将样式写在 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元素。


表格

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

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

(演示:略)


复习

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


作业

使用CSS做成以下效果内容:

  1. 注意缩进、字体大小、样式、颜色、斜体和加粗和背景图片(可自选

    文字来源

  2. 注意中划线、下划线、背景色和文字右对齐:

    文字来源
  3. 讲义右侧列表效果,注意图标样式和位置
  4. 将之前的表格边框收缩成一条线
CSS 入门 基础
觉得很 ,不要忘记分享哟!

任何问题,都可以直接加 QQ群:273534701

在当前系列 HTML和CSS 中继续学习:

我们的 特色

  • 先学习,后付费
  • 线上/线下,自由组合

更多了解

QQ群:273534701

答疑解惑,远程debug……

B站 源栈-小九 的直播间

写代码要保持微笑 (๑•̀ㅂ•́)و✧