CSS的学习（关于CSS和CSS3）

关于CSS：官网（w3school 在线教程）

因为是想学习一下关于CSS和CSS3，所以写了这个笔记。可能会穿插的写两者。（也可以去看官网，本文章只是作为自己的一个笔记，以下内容为本人没掌握或者掌握不熟悉的）。

一、区别

指代不同：

1、CSS3是CSS（层叠样式表）技术的升级版本。

2、CSS是一种用来表现HTML文本样式的计算机语言。

内容不同：

1、CSS3主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

2、CSS实现各种脚本语言动态地对网页各元素进行格式化。

二、CSS

关于背景

background-attachment：背景附着

1、指定该图像背景滚动或者固定，不会跟随着页面一起变化

2、两种属性：fixed和scroll

fixed：不随页面的滚动而滚动

scroll

以上图片展示为官网上的，可前往官网查看

---

 关于边框

border-style：边框样式

border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。border-(边框位置)-style

1、边框样式允许的值有：

• dotted - 定义点线边框
• dashed - 定义虚线边框
• solid - 定义实线边框
• double - 定义双边框
• groove - 定义 3D 坡口边框。效果取决于 border-color 值
• ridge - 定义 3D 脊线边框。效果取决于 border-color 值
• inset - 定义 3D inset 边框。效果取决于 border-color 值
• outset - 定义 3D outset 边框。效果取决于 border-color 值
• none - 定义无边框
• hidden - 定义隐藏边框

2、效果如下图：

下方为给边框加上颜色

border-width ：边框宽度

1、 属性指定四个边框的宽度。

2、可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick：

3、示例图： 

---

CSS3

关于文本

white-space：空白

1、属性指定元素内部空白的处理方式。可禁用元素内的文本换行。

CSS 文本效果

• text-overflow：文本溢出
  • clip：会直接做
  • ellipis：
• word-wrap：整字换行
  • break-word：允许长单词被打断并换行到下一行
• word-break：换行规则

  • keep-all：连字符后再打断

  • break-all：在任何字符处中断
• writing-mode：书写模式

差不多就这些了，其余的查看官网或者可以看看系统学习的视频进行学习