记录学习CSS day7（1.17）-CSDN博客

<html>

<head>
  <title>网页的标题</title>
  <style>
    p{
      color: red;
    }
    .blue{
      color: blue;
    }
    #bisque{
      background-color: bisque;
      width: 300;
      height: 100;
    }
  </style>
</head>

<body>
  <p>该字段为红色</p>
  <p>使用p标签的所有字段均为红色</p>
  <h5 class="blue">该字段为蓝色</h5>
  <h5 id="bisque">该字段背景为橘黄色</h5>
</body>

</html>

字体样式

字体大小font-size

用于设置字号，该属性的值可以使用相对长度单位，需要配合px，也可以使用绝对长度单位。2

位比较常用，绝对长度单位使用较少。

一般浏览器默认字体大小为16px

字体粗细font-weight

用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100整数倍）

normal等于400，bold等于700，但是更推荐用数字表示

字体样式font-style

用于定义字体风格，设置斜体、倾斜或正常等字体

italic：浏览器会显示斜体的字体样式。

oblique：浏览器会显示倾斜的字体样式。

normal：默认字体

字体类型font-family

用于设置字体

格式：

p{ font-family:"微软雅黑";}

可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，

直到找到合适的字体。

font相关属性连写

font属性用于对字体样式进行综合设置

格式：

选择器{font: font-style font-weight font-size font-family;}

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开

省略要求：只能省略style与weight，省略了就相当于设置了默认值

必须保留font-size和font-family属性，否则font属性将不起作用。

CSS的折叠性

如果给同一个标签设置了相同的属性，此时样式会层叠(覆盖)，写在最下面的会生效

实际代码基础运用以及成效

<html>

<head>
  <title>网页的标题</title>
  <style>
    p{
      color: red;
      font-size: 20px;
    }
    h6{
      color:red;
      color:blue;
    }
    .blue{
      color: blue;
      font-weight: 200;
    }
    #bisque{
      background-color: bisque;
      font-style: italic;
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
      height: 200;
      width: 300;
    }
    #fusion{
      font:italic 600 30px 微软雅黑;
    }
  </style>
</head>

<body>
  <p>该字段为红色</p>
  <h6>思考一下该字段是什么颜色</h6>
  <h5 class="blue">该字段为蓝色</h5>
  <h5 id="bisque">该字段背景为橘黄色</h5>
  <h5 id="fusion">注意这段的字体样式</h5>
</body>

</html>

文本样式

首行自动缩进text-indent

用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数

一般来说，推荐使用em，因为em随着fond-size变化而变化

水平对齐方式text-align

用于设置文本内容的水平对齐

设置对其方式有三种

1. left：左对齐（默认设置）

2. right：右对齐

3. center：居中对齐

文本修饰text-decoration

用于改变文本样式

1. none：默认

2. underline：下划线

3. overline：上划线

4. line-through：穿过文本的一条线

行距line-height

用于设置行间距，就是行与行之间的距离

用的属性值单位有三种，分别为像素px，相对值em和百分比%

如果设置了font与line-height的连写

顺序：

font-style font-weight font-size/line-height font-family

注：行高为文本高度和上间距与下间距之和

实际代码基础演示以及成效

<html>

<head>
  <title>网页的标题</title>
  <style>
    p {
      text-indent: 2em;      
    }
    /* 1em恒等于1个字体长度 */
    h1{
      text-align: center;
      text-decoration: underline;
    }
    /* 标题居中放置且带有下划线 */
    h5{
      text-decoration: overline;
    }
    /* 标题带有上划线 */
  </style>
</head>

<body>
  <h1>什么是CSS</h1>
  <p>层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS
    描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。CSS 是开放网络的核心语言之一，由 W3C 规范 实现跨浏览器的标准化。CSS 节省了大量的工作。样式可以通过定义保存在外部.css 文件中，同时控制多个网页的布局，这意味着开发者不必经历在所有网页上编辑布局的麻烦。CSS
    被分为不同等级：CSS1 现已废弃，CSS2.1 是推荐标准， CSS3 分成多个小模块且正在标准化中。</p>
  <h5>
    转载自菜鸟教程，只是演示这些样例。
  </h5>
</body>

</html>