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;} 和 ~~标签都可以在文本上添加删除线，但它们的用途和语义含义有所不同。~~

1.2.7 文本阴影 text-shadow

1.3 font 复合属性

二、背景

1.>背景图:网页中，使用背景图实现装饰性图片效果，使得网页效果更为丰富

一、文字控制属性

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

1.1 CSS字体样式属性


1.color定义元素内文字颜色
 
2.font-size 字号大小
 
3 font-family 字体
 
4 font-weight 字体粗细
 
5.font-style 字体风格
 
6.font 字体综合属性

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

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


<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： % -相对父类元素字体大小
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属性值可以书写多个字体名，各个字体名用逗号
隔开，执行顺序是从左向右依次查找
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


  <style>
    em{
      font-style: normal;
    }
 
    div{
      font-style: italic;
    }
    i{
      font-style: normal;
    }
  style>
  head>
  <body>
    <em>1234em>
    <div>345div>
    <i>23424i>
  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是相对长度单位。相对于当前对象内文本的字体尺寸。
<p>行高原理：p>
<p>上间距 + 文本高度 + 下间距p>
<p>行高的测量方法:从一行文字的最顶端(最底端)量到下一行文字的最顶端(最底端)p>


html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行高--line-heighttitle>
    <style>
    p{
      line-height: 30px;
    }
 
    div{
      line-height: 2;
    }
  style>
  head>
  <body>
    <p>行高值 30pxp>
 
    <div>此时没有设置行高的px，则是当前行高 * line-height的属性值div>
  body>
html>

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

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

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

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


 
 
<div>文字div>

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

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

属性值：

left：左对齐（默认值）
right：右对齐
center：居中对齐
justify：自适应（相当于两端对齐）


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

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

给图片水平对齐


<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.设置文字段落的缩进()
  有时在文档中，需要对某段落进行缩进显示，例如显示引用的内容等，这时可以使用文本缩进标记和
。

1.2.4 字间距 letter（word)-spacing

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

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

1.2.5 文本字母大小写 text-transform

属性值：

capitalize：首字母大写

uppercase：全部大写

lowercase：全部小写

none：不改变
语法：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>
<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;} 和标签都可以在文本上添加删除线，但它们的用途和语义含义有所不同。

1. p{text-decoration: line-through;}：这是 CSS 的一个属性，用于给指定的元素（在这个例子中是 p
标签）添加删除线。它只是视觉效果，没有特殊的语义含义。

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

总的来说，如果你只是想要视觉上的删除线效果，可以使用 text-decoration:
line-through;。如果你想要表示某段文本已经被删除，应该使用 ~~标签。~~

1.2.7 文本阴影 text-shadow

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

h-shadow   必需。水平阴影的位置。允许负值。
v-shadow   必需。垂直阴影的位置。允许负值。
blur   可选。模糊的距离。
color   可选。阴影的颜色。参阅 CSS 颜色值。

1.3 font 复合属性


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 属性不生效

二、背景


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

1.>背景图:网页中，使用背景图实现装饰性图片效果，使得网页效果更为丰富

属性名L:输入bgi即可 background-image
属性值： url（背景图URL)


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

2.>背景图平铺方式

属性名:(bgr)background-repeat
属性值;
no-repeat:不平铺
repeat:平铺(默认效果)
repeat-x:水平方向平铺
repeat-y:垂直方向平铺


  <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，正负都可以)

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


<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)


 
    <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


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

测试文字，撑开body，让浏览器有滚动条

body的


背景图固定
作用背景不会随着元素的内容滚动
属性名: background-attachment (bga)
属性值: fixed
 
"en">
  
    "UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">
    Document
    
 
  
  <body>
 //篇幅原因，请测试者自行复制
    <p>测试文字，撑开body，让浏览器有滚动条p>
 
  body>
html>

换成p的就有百叶窗的效果--这个和p标签本身的边距有关


  p{
    background-image: url(../Day01/img/a20231224191805\(1\).jpg);
    background-repeat: no-repeat;
    background-position: center top;
  /*背景图固定，主要是网页大图*/
     background-attachment: fixed;
  
  }

6.>背景复合属性

属性名: background (bg)
属性值:背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定(空格隔开各个属性值，不区分顺序


 
html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
  div{
    width:  3000px;
    height: 3000px;
    background: pink url(../Day01/img/a20231224191805\(1\).jpg) no-repeat right center/ contain;
  }
style>
    <title>Documenttitle>
  head>
  <body>
    <div>div 标签div>
  body>
html>

三、Test


html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>title>
    <style>
  /* 默认效果 */
  a{
    display: block; /*没有就会是一行，无宽高效果*/
    width: 200px;
    height: 80px;
    background-color: rgb(36, 213, 36);
    color: #fff;
    text-decoration: none;
    text-align: center;
    line-height: 80px;/*要垂直居中：行高=盒子高度*/
    font-size: 18px;
  }
 
  /* 鼠标悬停效果 */
  a:hover{
    background-color: #32beba;
  }
style>
  head>
  <body>
    <a href="#">HTMla>
    <a href="#">CSSa>
    <a href="#">JSa>
    <a href="#">Vuea>
    <a href="#">Reacta>
 
  body>
html>

相关阅读:
深入浅出计算机网络OSI模型之应用层（此文重点剖析http协议）
MySQL存储引擎介绍
 【算法每日一练]-图论（保姆级教程篇5（LCA，最短路，分层图）） #LCA #最短路计数 #社交网络 #飞行路线 # 第二短路
 java计算机毕业设计网上书城网站源代码+数据库+系统+lw文档
 建筑建材行业经销商协同系统解决方案：赋能企业构建核心竞争力
 Worthington血浆胺氧化酶 (PAO) 说明书
 CSDN客诉周报第6期｜本周解决25个用户问题，修复1个漏洞，收到4条建议
 python导入的缓存机制
 朴素，word，任何参考文献导入endnote
分库表数据倾斜的处理让我联想到了AKF模型
原文地址：https://blog.csdn.net/m0_74154295/article/details/133826935

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;} 和 标签都可以在文本上添加删除线，但它们的用途和语义含义有所不同。

1.2.7 文本阴影 text-shadow

1.3 font 复合属性

二、背景

1.>背景图:网页中，使用背景图实现装饰性图片效果，使得网页效果更为丰富

2.>背景图平铺方式

3.>背景图位置：

4.>背景图缩放

5.>背景图固定 【有滚动条的】

6.>背景复合属性

三、Test

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

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

5.>背景图固定【有滚动条的】