CSS的美化（文字、背景） Day02

一、文字控制属性

分为：字体样式属性、文本样式属性

1.1 CSS字体样式属性

css 复制代码

1.color定义元素内文字颜色

2.font-size 字号大小

3 font-family 字体

4 font-weight 字体粗细

5.font-style 字体风格

6.font 字体综合属性

1.1.1 > 文字颜色 color 属性名: color

颜色表示方式	属性值	说明
颜色关键字	颜色英文单词	red、green、blue、pink...
rgb表示法	rgb(r, g, b)	r,g,b表示红绿蓝三原色，取值: 0- 255
rgba表示法	rgba(r, g, b, a)	a表示透明度，取值:0-1
十六进制表示法	#RRGGBB	#000000，或者 #ffcc00，简写: #fc0
[color 文字颜色属性名: color]

html 复制代码

<style type="text/css">
    p.first{
        color: pink;
    }
    p.second{
        color: #FF6600;
    }
    p.third{
        color: rgb(200,123,167);
    }
</style>

1.1.2 字号大小属性名:font-size

1.font-size：20px /em --相对单位【最常用的单位 px】

2.font-size：small、medium、large。--关键词单位

3.font-size： % -相对父类元素字体大小
css 复制代码
p{
    font-size: 30px;
}
复制代码
Chorme、Edge浏览器文字有默认大小 16px
复制代码
属性必须有单位，否则属性不生效

1.1.3 字体粗细属性值： font-weight

用于定义字体的粗细

属性值：normal【正常】、bold【加粗】、bolder、lighter、100~900（100的整数倍），其默认值为normal

其中l选项 Normal：标准字符-400

Bold：粗体字符-700

1.1.4 字体族属性名: font-family

font-family:具体字体名，字体集
复制代码
font-family属性值可以书写多个字体名，各个字体名用逗号
隔开，执行顺序是从左向右依次查找
css 复制代码
font-family 属性最后设置字体族名，网页开发建议使用无衬线字体sans-serif;
衬线：有尖尖的
`font-family: STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑";`

复制代码

在西方国家罗马字母阵营中，字体分为两大种类：Sans Serif（无衬线体）和Serif（有衬线体），
平时所用的Georgia、Times New Roman等就属于Serif字体，而Arial、Tahoma、Verdana等则属于Sans Serif字体。对中文而言，同样存在这两大种类，很明显，宋体、细明体(繁体中常用)等就属于Serif，而黑体、幼圆等则属于Sans Serif。 
因为黑体字属于“无衬线体”（Sans-serif），而宋体字属于“有衬线体”（Serif），后者对于人眼的辨识来说会更轻松一些，所以阅读的时候会比较舒服。日本文字偏欧美的无衬线体（Sans-serif），所以大部分的人都使用歌德体(相当于西洋文字的无衬线体)。

通常文章的内文、正文使用的是易读性较佳的Serif字体，这可增加易读性，而且长时间阅读下因为会以word为单位来阅读，较不容易疲倦。而标题、表格内用字则採用较醒目的Sans Serif字体，它需要显着、醒目，但不必长时间盯着这些字来阅读。 像宣传品、海报类，为求醒目，它的短篇的段落也会採用Sans Serif字体。但在书籍、报刊杂志，正文有相当篇幅的情形下，则应採用Serif字体来减轻读者阅读上的负担。在Web设计及浏览器设置中也应遵循此原则为是。

1.1.5 字体样式(是否倾斜属性名: font-style属性值

复制代码

正常 (不倾斜): normal
倾斜:italic

html 复制代码

  <style>
    em{
      font-style: normal;
    }

    div{
      font-style: italic;
    }
    i{
      font-style: normal;
    }
  </style>
  </head>
  <body>
    <em>1234</em>
    <div>345</div>
    <i>23424</i>
  </body>

1.2 CSS文本样式属性

1 line-height 行间距

2 text-align 水平对齐方式

3 text-indent 首行缩进

4 word（letter)-spacing 单词（或中文）间距

5 text-transform 文本字母大小写

6 text-decoration 文本装饰

7 text-shadow 文本阴影

1.2.1 文本间距属性名: line-height

line-height属性用于设置行间距，表示行与行之间的距离（一行文字的高度），即字符的垂直间距，也称为行高。

语法： line-height:长度值或百分比；

属性值：像素px，相对值em、百分比%

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率。

em是相对长度单位。相对于当前对象内文本的字体尺寸。
html 复制代码
行高原理：
上间距 + 文本高度 + 下间距
行高的测量方法:从一行文字的最顶端(最底端)量到下一行文字的最顶端(最底端)

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行高--line-height</title>
    <style>
    p{
      line-height: 30px;
    }

    div{
      line-height: 2;
    }
  </style>
  </head>
  <body>
    <p>行高值 30px</p>

    <div>此时没有设置行高的px，则是当前行高 * line-height的属性值</div>
  </body>
</html>

* 垂直居中行高属性值等于盒子高度属性值*

复制代码

原理：当我们设置行高等于盒子的高度时，文字会在盒子中垂直居中，这是因为上间距和下间距会均等分配，使得文字在垂直方向上居中。

注意事项：行高属性值等于盒子高度属性值，仅仅支持一行
单行文字垂直居中的代码

解决方案：让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中。

css 复制代码

<style>
    div {
        height: 100px;
        background-color: lightcoral;
        line-height: 100px;

    }
</style>


<div>文字</div>

1.2.2 水平对齐方式属性名 text-align

复制代码
text-align本质是控制内容的对齐方式，属性要设置给内容的父级
复制代码
 居中的是文字内容，不是标签
text-align属性用于设置元素内文本内容的水平对齐

属性值：

left：左对齐（默认值）

right：右对齐

center：居中对齐

justify：自适应（相当于两端对齐）

css 复制代码

<style>
    h1 {
        /* 本质: 居中的是文字内容，不是标签 */
        text-align: center;
    }

    p {
        text-align: right;
    }
</style>


<h1>h1标题文字</h1>
<p>p标签的文字</p>

text-align本质是控制内容的对齐方式，属性要设置给内容的父级

给图片水平对齐

html 复制代码

<style>
  div{
   text-align:center;
  }
</style>

<div>
  <img src="../Day01/img/ww_20230807222009.jpg" alt>
</div>

1.2.3 首行缩进 text-indent

text-indent属性用于设置首行文本的缩进

语法： text-indent：数值

属性值：可为不同单位的数值、em、百分比%

复制代码

1.数字+px
2.数字 +em (推荐:1em =当前标签的字号大小) 
3.设置文字段落的缩进(<blockquote>)
  有时在文档中，需要对某段落进行缩进显示，例如显示引用的内容等，这时可以使用文本缩进标记<blockquote>和</blockquote>。

1.2.4 字间距 letter（word)-spacing

来实现中文字符（英文单词）之间的间距的设置语法： letter(word)-spacing:属性值

letter-spacing定义的为字母之间的间距，而word-spacing定义的为英文单词之间的间距，中文字符不可以。

1.2.5 文本字母大小写 text-transform

属性值：

capitalize：首字母大写

uppercase：全部大写

lowercase：全部小写

none：不改变
html 复制代码
语法：text-transform:capitalize | uppercase | lowercase | none

1.2.6 文本装饰 -text-decoration

语法：text-decoration:underline | overline | line-through | blink | none

underline ：下划线

overline ：上划线

line-through ：贯穿线

blink ：闪烁

none：不改变

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修饰线</title>

    <style>
  a{
    text-decoration: none;
  }

  div{
    text-decoration: underline;
  }

  p{
    text-decoration: line-through;
  }

  span{
    text-decoration: overline;
  }
 </style>
  </head>
  <body>
    <a href="#"> a标签，去除下划线</a>
    <div>div标签，加下划线</div>
    <p>p，添加删除先</p>
    <span>span标签，添加顶划线</span>
  </body>
</html>

p{text-decoration: line-through;} 和 <del> 标签都可以在文本上添加删除线，但它们的用途和语义含义有所不同。

p{text-decoration: line-through;}：这是 CSS 的一个属性，用于给指定的元素（在这个例子中是 p

标签）添加删除线。它只是视觉效果，没有特殊的语义含义。

<del>：这是 HTML 的一个标签，用于表示被删除的文本。它不仅会给文本添加删除线，还具有特殊的语义含义，表示这段文本已经被删除或者不再适用。

总的来说，如果你只是想要视觉上的删除线效果，可以使用 text-decoration:

line-through;。如果你想要表示某段文本已经被删除，应该使用 <del> 标签。

1.2.7 文本阴影 text-shadow

语法结构： text-shadow: h-shadow v-shadow blur color;

h-shadow 必需。水平阴影的位置。允许负值。

v-shadow 必需。垂直阴影的位置。允许负值。

blur 可选。模糊的距离。

color 可选。阴影的颜色。参阅 CSS 颜色值。

1.3 font 复合属性

html 复制代码

div {
/*文字倾斜 */font-style: italic;
/*文字加粗 */font-weight: 700;
/* 字体大小是30px*/font-size: 30px;
/* 行高为字号的2倍 */line-height: 2;
/* 字体是楷体 */font-family:楷体;
}

复制代码

font简写的使用场景: 设置网页文字公共样式
div {/* font: 是否倾斜 是否加粗 字号/行高 字体; */
font: italic 700 30px/2 楷体;
}

复制代码

复合属性:属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开

复制代码

注意:字号和字体值必须书写，否则 font 属性不生效

二、背景

html 复制代码

背景色：background-color
背景图: background-image
背景图平铺方式:background-repeat
背景图位置:background-position
背景图缩放:background-size
背景图固定:background-attachment
背景复合属性:background

复制代码

1.>背景图:网页中，使用背景图实现<b>装饰性</b>图片效果，使得网页效果更为丰富
属性名L:输入bgi即可 background-image
属性值： url（背景图URL)

html 复制代码

  div{
    width: 300px;
    height: 300px;
    /*背景图默认是平铺(复制) 的效果,文字在上，图在下面*/
    background-image: url(./ww_20230807222009.jpg);
}

复制代码

2.>背景图平铺方式
属性名:(bgr)background-repeat
属性值;
no-repeat:不平铺
repeat:平铺(默认效果)
repeat-x:水平方向平铺
repeat-y:垂直方向平铺

html 复制代码

  <style>
    div{
      width: 10000px;
      height: 10000px;

      background-image: url(./e38ee8da0a6fd4a31a99763f0f0acec.png);
    /* 不平铺: 盒子的左上角显示一张背景图 */ 
    /* background-repeat: no-repeat;
    background-repeat : repeat; */
    /* background-repeat: repeat-x; */
    
      background-repeat: repeat-y;
    }
  </style>

复制代码

3.>背景图位置：
调整图片在“盒子”里面的位置
属性名: background-position (bgp)属性值:水平方向位置 垂直方向位置关键字
属性值：水平方向位置 垂直方向位置
方式一：
left：左侧
right;右侧
center；居中
top；顶部
bottom;底部

方式二：
坐标(数字 + px，正负都可以)

提示:
关键字取值方式写法,可以颠倒取值顺序
可以只写一个关键字，另一个方向默认为居中;
数字只写一个值表示水平方向，垂直方向为居中

html 复制代码

<style>
      div{
      width: 10000px;
      height: 10000px;
      background-color: palevioletred;
    
    background-image: url(./ww_20230807222009.jpg);
    background-repeat: no-repeat;
    /* background-position: 0 0; 
    //默认0 0 是左 上开始的
    同样效果的 bgp：left top */
     
    /* background-position: left center; */

    /* background-position: 40px -20px; */

    /* background-position: 0 100px; */
    /* background-position: 0 -100px; */

  /* 特殊写法： */  
     /* 可以只写一个关键字，另一个方向默认为居中; */
    /* background-position: left; */
    /* 数字只写一个值表示水平方向，垂直方向为居中  */
    background-position: 1000px;
    }
  </style>

复制代码

4.>背景图缩放
作用:设置背景图大小
属性名: background-size (bgz)
常用属性值:
关键字:
cover:完全覆盖背景区等比例缩放背景图片以可能背景图片部分看不见
contain:等比例缩放背景图片以完全装入背景区，可能背景区部分空白
百分比:根据盒子尺寸计算图片大小
数字+单位(例如:px)

html 复制代码

    <style>
  div{
    width:  5000px;
    height:  5000px;

    background-color: pink;

    background-image: url(./);
    background-repeat: no-repeat;
    /* contain: 如果图的宽高跟盒子尺寸相等停止缩放，可能导致盒子有露白* */
    /* background-size: contain; */
/* 
    cover: 图片完全覆盖盒子，可能导致图片显示不全 
    background-size: cover; */
/* 

    /* 百分比写法，和cover类似 */
    /* 100% 图片的宽度跟盒子宽度一样，图片的高度按照图片比例等比缩放 
    background-size: 100%; */ 
  }
 </style>

复制代码

5.>背景图固定 【有滚动条的】
作用背景不会随着元素的内容滚动
属性名: background-attachment (bga)
属性值: fixed

html 复制代码

 p{/*在换成body试试*/
    background-image: url(./ww_20230807222009.jpg);
    background-repeat: no-repeat;
    background-position: center top;
  /*背景图固定，主要是网页大图*/
     background-attachment: fixed;
  
}

复制代码

6.>背景复合属性
属性名: background (bg)
属性值:背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定(空格隔开各个属性值，不区分顺序
<!-- 背景图固定极少出现在符合属性中，因为不常用，大图一般用 -->

<!-- div {
width: 400px;
height: 400px;

background: pink url(./images/1.png) no-repeat right center/cover;
} -->

CSS的美化（文字、背景） Day02

一、文字控制属性

1.1 CSS字体样式属性

1.1.1 > 文字颜色 color 属性名: color

1.1.2 字号大小 属性名:font-size

1.1.3 字体粗细 属性值： font-weight

1.1.4 字体族 属性名: font-family

1.1.5 字体样式(是否倾斜 属性名: font-style属性值

1.2 CSS文本样式属性

1.2.1 文本间距 属性名: line-height

*** 垂直居中 行高属性值等于盒子高度属性值***

1.2.2 水平对齐方式 属性名 text-align

text-align本质是控制内容的对齐方式，属性要设置给内容的父级

1.2.3 首行缩进 text-indent

1.2.4 字间距 letter（word)-spacing

1.2.5 文本字母大小写 text-transform

1.2.6 文本装饰 -text-decoration

p{text-decoration: line-through;} 和 <del> 标签都可以在文本上添加删除线，但它们的用途和语义含义有所不同。

1.2.7 文本阴影 text-shadow

1.3 font 复合属性

二、背景

1.1.2 字号大小属性名:font-size

1.1.3 字体粗细属性值： font-weight

1.1.4 字体族属性名: font-family

1.1.5 字体样式(是否倾斜属性名: font-style属性值

1.2.1 文本间距属性名: line-height

* 垂直居中行高属性值等于盒子高度属性值*

1.2.2 水平对齐方式属性名 text-align