CSS的美化（文字、背景） Day02-CSDN博客

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6

一、文字控制属性

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

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-size20px /em --相对单位【最常用的单位 px】

2.font-sizesmall、medium、large。--关键词单位

3.font-size % -相对父类元素字体大小

p{
    font-size: 30px;
}

Chorme、Edge浏览器文字有默认大小 16px

属性必须有单位否则属性不生效

1.1.3 字体粗细 属性值 font-weight

用于定义字体的粗细

属性值normal【正常】、bold【加粗】、bolder、lighter、100~900100的整数倍其默认值为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>1234</em>
    <div>345</div>
    <i>23424</i>
  </body>

1.2 CSS文本样式属性

1 line-height 行间距

2 text-align 水平对齐方式

3 text-indent 首行缩进

4 wordletter)-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>
<!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>

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

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

解决方案让文字的行高等于盒子的高度就可以让文字在当前盒子内垂直居中。
<style>
    div {
        height: 100px;
        background-color: lightcoral;
        line-height: 100px;

    }
</style>


<div>文字</div>

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

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

text-align属性用于设置元素内文本内容的水平对齐

属性值

  1. left左对齐默认值
  2. right右对齐
  3. center居中对齐
  4. justify自适应相当于两端对齐

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

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


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

1.2.4 字间距 letterword)-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不改变

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

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

  2. <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 复合属性

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.>背景图:网页中使用背景图实现<b>装饰性</b>图片效果使得网页效果更为丰富
属性名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 是左 上开始的
    同样效果的 bgpleft 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;
  
}
6.>背景复合属性
属性名: background (bg)
属性值:背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定(空格隔开各个属性值不区分顺序
<!-- 背景图固定极少出现在符合属性中因为不常用大图一般用 -->

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

background: pink url(./images/1.png) no-repeat right center/cover;
} -->
阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6
标签: CSS
返回列表

上一篇：借助 ZooKeeper 生成唯一 UUID

下一篇：C#8.0本质论第八章--接口

“CSS的美化（文字、背景） Day02-CSDN博客” 的相关文章

第五届字节跳动青训营 前端进阶学习笔记（三）CSS基本概念1年前 (2023-02-02)
CSS 实例系列 - 02 - 2023 兔年祝福1年前 (2023-02-02)
CSS.前端基础.html1年前 (2023-02-02)
九寨沟静态页面（html+css）1年前 (2023-02-02)
29. CSS简介：PyQuery模块的铺垫1年前 (2023-02-02)
[前端笔记——CSS] 9.CSS处理文件的标准流程+DOM1年前 (2023-02-02)
python爬虫学习笔记-CSS(大致了解)1年前 (2023-02-02)
前端学习——CSS1年前 (2023-02-02)
css层叠性和继承性1年前 (2023-02-02)
盘点一些惊艳一时的 CSS 属性1年前 (2023-02-02)

阿里云国际版