W3C-CSS学习笔记（基础）

fontWeb css
fontWeb
发布日期:   2022-08-09

一、学习基础网址

1、W3C网址 https://www.w3school.com.cn/

2、在线编辑器 https://www.w3school.com.cn/tiy/t.asp?f=css_index

3、CSS3地址 https://www.w3school.com.cn/css/index.asp

4、实例地址 https://www.w3school.com.cn/css/css_examples.asp

5、参考手册 https://www.w3school.com.cn/r.asp

二、css 基础教程

1、元素 id 名称、class类名 不能以数字开头！

2、可以指定只有特定的 HTML 元素会受类的影响，具有 class=”center” 的 p 元素会居中对齐：

p.center {
  text-align: center;
  color: red;
}

3、通用选择器（*）选择页面上的所有的 HTML 元素。

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

  • 外部 CSS
  • 内部 CSS
  • 行内 CSS

5、请勿在属性值和单位之间添加空格（例如 margin-left: 20 px;）。正确的写法是：margin-left: 20px;

6、在 CSS 中，除了标准颜色名，还可以使用 RGB 值、HEX 值、HSL 值、RGBA 值或者 HSLA 值来指定颜色

7、HSL 值：可以使用色相、饱和度和明度（HSL）来指定颜色

  • 色相（hue）是色轮上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色。
  • 饱和度（saturation）是一个百分比值，0％ 表示灰色阴影，而 100％ 是全色。
  • 亮度（lightness）也是百分比，0％ 是黑色，50％ 是既不明也不暗，100％是白色。

8、background-image 属性指定用作元素背景的图像。默认情况下，图像会重复，以覆盖整个元素。

9、background-repeat: repeat-x; repeat-y no-repeat； background-position: right top;

10、背景附着： background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）

background-attachment: scroll;/ fixed;

11、background-clip 属性规定背景的绘制区域。

background-clip: border-box|padding-box|content-box;
  • border-box 背景被裁剪到边框盒。
  • padding-box 背景被裁剪到内边距框。
  • content-box 背景被裁剪到内容框。

12、background-blend-mode 属性定义每个背景层（颜色和/或图像）的混合模式

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: multiply;
}
值 描述
normal 默认。把混合模式设置为普通。
multiply 把混合模式设置为 multiply（乘）。
screen 把混合模式设置为 screen（屏幕）。
overlay 把混合模式设置为 overlay（覆盖）。
darken 把混合模式设置为 overlay（覆盖）。
lighten 把混合模式设置为 lighten（变亮）。
color-dodge 把混合模式设置为 color-dodge（颜色减淡）。
saturation 把混合模式设置为 saturation（饱和度）。
color 把混合模式设置为 color（颜色）。
luminosity 把混合模式设置为 luminosity（亮度）。

13、border-style 属性指定要显示的边框类型

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

14、可以将 margin 属性设置为 auto，以使元素在其容器中水平居中。

15、使用继承值 inherit

/* 使 <p class="ex1"> 元素的左外边距继承自父元素（<div>） */
div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}

16、margin 外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

17、margin 允许负值，padding 不允许负值。

18、盒子模型

box-sizing:border-box; // IE盒子模型 div 保持 width 大小
box-sizing:content-box; // 标准盒子模型 Chrom div 实际 宽度 为 width + padding

19、css 轮廓

轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素。CSS 拥有如下轮廓属性：

  • outline-style
  • outline-color invert
  • outline-width
  • outline-offset
  • outline

注意：轮廓与边框不同！不同之处在于：轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。

outline-style 属性指定轮廓的样式，并可设置如下值：

  • dotted - 定义点状的轮廓。
  • dashed - 定义虚线的轮廓。
  • solid - 定义实线的轮廓。
  • double - 定义双线的轮廓。
  • groove - 定义 3D 凹槽轮廓。
  • ridge - 定义 3D 凸槽轮廓。
  • inset - 定义 3D 凹边轮廓。
  • outset - 定义 3D 凸边轮廓。
  • none - 定义无轮廓。
  • hidden - 定义隐藏的轮廓

CSS 轮廓偏移

outline-offset 属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。

属性 描述
outline 简写属性，在一条声明中设置 outline-width、outline-style 以及 outline-color。
outline-color 设置轮廓的颜色。
outline-offset 指定轮廓与元素的边缘或边框之间的空间。
outline-style 设置轮廓的样式。
outline-width 设置轮廓的宽度。

20、当 text-align 属性设置为 “justify” 后，将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的（就像在杂志和报纸中）

21、direction 和 unicode-bidi 属性可用于更改元素的文本方向

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

22、text-decoration 属性用于设置或删除文本装饰。

h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}

23、text-transform 属性用于指定文本中的大写和小写字母。

它可用于将所有内容转换为大写或小写字母，或将每个单词的首字母大写：

p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}

24、text-indent 属性用于指定文本第一行的缩进

p {
  text-indent: 50px;
}

25、letter-spacing 字符间距 字母间距

26、字间距word-spacing 属性用于指定文本中单词之间的间距。

27、white-space 属性指定元素内部空白的处理方式

禁用元素内的文本换行：white-space: nowrap;

28、文字阴影 模糊 颜色 效果

h1 {
  text-shadow: 2px 2px 5px red;
}

29、font-style 属性主要用于指定斜体文本。

此属性可设置三个值：

  • normal - 文字正常显示
  • italic - 文本以斜体显示
  • oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）

30、font-variant 属性指定是否以 small-caps 字体（小型大写字母）显示文本。

在 small-caps 字体中，所有小写字母都将转换为大写字母。但是，转换后的大写字母的字体大小小于文本中原始大写字母的字体大小。

31、1em 等于当前字体大小。浏览器中的默认文本大小为 16px。因此，默认大小 1em 为 16px。

32、如果您不想使用 HTML 中的任何标准字体，则可以使用 Google Fonts API 向页面添加数百种其他字体。

只需添加一个样式表链接并引用您选择的字体系列：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  font-family: "Sofia";
  font-size: 22px;
}
</style>
</head>
<body>

<h1>Sofia Font</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

</body>
</html>

33、为了缩短代码，也可以在一个属性中指定所有单个字体属性。

font 属性是以下属性的简写属性：

  • font-style
  • font-variant
  • font-weight
  • font-size/line-height
  • font-family
p.a {
  font: 20px Arial, sans-serif;
}

p.b {
  font: italic small-caps bold 12px/30px Georgia, serif;
}
属性 描述
font 简写属性。在一条声明中设置所有字体属性。
font-family 规定文本的字体系列（字体族）。
font-size 规定文本的字体大小。
font-style 规定文本的字体样式。
font-variant 规定是否以小型大写字母的字体显示文本。
font-weight 规定字体的粗细。

34、四种链接状态分别是：

  • a:link - 正常的，未访问的链接
  • a:visited - 用户访问过的链接
  • a:hover - 用户将鼠标悬停在链接上时
  • a:active - 链接被点击时

35、pointer 属性指定要显示的光标类型

<!DOCTYPE html>
<html>
<body>

<p>请把鼠标移动到单词上，以查看指针效果：</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>

</body>
</html>

35、在 HTML 中，列表主要有两种类型：

  • 无序列表（
      ）- 列表项用的是项目符号标记
    • 有序列表（
        ）- 列表项用的是数字或字母标记

    CSS 列表属性使您可以：

    • 为有序列表设置不同的列表项标记
    • 为无序列表设置不同的列表项标记
    • 将图像设置为列表项标记
    • 为列表和列表项添加背景色

    list-style-type 属性指定列表项标记的类型。

    ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: square;
}

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}
    图像作为列表项标记

    list-style-image 属性将图像指定为列表项标记：

    ul {
  list-style-image: url('sqpurple.gif');
}

    list-style-position 属性指定列表项标记（项目符号）的位置。

    ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}

    list-style-type:none` 属性也可以用于删除标记/项目符号。请注意，列表还拥有默认的外边距和内边距。要删除此内容，请在 <ul> 或 <ol> 中添加 `margin:0` 和 `padding:0

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

    36、表格

    border-collapse: collapse; // 表格边框合并
    属性 描述
    border 简写属性。在一条声明中设置所有边框属性。
    border-collapse 规定是否应折叠表格边框。
    border-spacing 规定相邻单元格之间的边框的距离。
    caption-side 规定表格标题的位置。
    empty-cells 规定是否在表格中的空白单元格上显示边框和背景。
    table-layout 设置用于表格的布局算法。
文章作者: 何不去高处
文章链接: https://hexo.guxinlei.cc/2022/08/09/11-css/w3c-css-xue-xi-bi-ji-ji-chu/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 何不去高处 !
fontWeb css
赏