CSS学习记录03CSS的作用及样式(1)

• HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

• HTML <span> 元素是内联元素，可用作文本的容器。

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

Java

其实，标签名"span"可以自定义为任何名，但是约定俗成用span标签

3.2字体样式

样例：

故事介绍

《长津湖》是由陈凯歌、徐克、林超贤联合执导，吴京、易烊千玺领衔主演，段奕宏、欧豪特别出演，朱亚文、李晨、胡军、韩东君等主演的抗美援朝电影 ，该片于2021年9月30日在中国大陆上映 。

该片以抗美援朝战争第二次战役中的长津湖战役为背景，讲述了一段波澜壮阔的历史，在极寒严酷环境下，中国人民志愿军东线作战部队凭着钢铁意志和英勇无畏的战斗精神，扭转战场态势，为长津湖战役胜利作出重要贡献的故事 。

常用Font 特性

| 值 | 描述 |

| — | — |

| font-style | 规定字体样式。 |

| font-variant | 规定字体异体。 |

| font-weight | 规定字体粗细。 |

| font-size/line-height | 规定字体尺寸和行高。 |

| font-family | 规定字体系列。 |

3.3文本样式

3.3.1颜色

3.3.1.1文本颜色

color 属性用于设置文本的颜色。颜色由以下值指定：

1、颜色名 - 比如 “red”

2、十六进制值 - 比如 “#ff0000”

3、RGB 值 - 比如 “rgb(255,0,0)”

页面的默认文本颜色是在 body 选择器中定义的。

body {

color: blue;

}

h1 {

color: green;

}

3.3.1.2文本颜色和背景色

在本例中，我们定义了 background-color 属性和 color 属性：

例：

body {

background-color: lightgrey;

color: blue;

}

h1 {

background-color: black;

color: white;

}

3.3.2文本对齐方式

1、text-align 属性用于设置文本的水平对齐方式。

文本可以左对齐或右对齐，或居中对齐。

例：

h1 {

/居中对齐/

text-align: center;

}

h2 {

/左对齐/

text-align: left;

}

h3 {

/右对齐/

text-align: right;

}

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

div {

text-align: justify;

}

2、垂直对齐

vertical-align 属性设置元素的垂直对齐方式。

如，设置文本中图像的垂直对齐方式：

img.top {

vertical-align: top;

}

img.middle {

vertical-align: middle;

}

img.bottom {

vertical-align: bottom;

}

3、首行缩进：

h3 {

/首行缩进/

text-indent: 2em;

}

4、行高：

h3 {

/行高/

line-height: 20px;

}

5、划线：

h1 {

/下划线/

text-decoration: underline;

}

h2 {

/中划线/

text-decoration: line-through;

}

h3 {

/上划线/

text-decoration: overline;

}

3.4阴影

/text-shadow：阴影颜色，水平偏移，垂直偏移，阴影半径/

#price{

text-shadow:#3cc7f5 10px -10px 2px;

}

3.5列表

引例：

全部商品分类

• 图书  音像  数字商品
• 家用电器  手机  数码
• 电脑  办公
• 家居  家装  厨具
• 服饰鞋帽  个护化妆
• 礼品箱包  钟表  珠宝
• 食品饮料  保健食品

• 默认效果：

  

  现在，我们想更改一下样式

  #nav{

  width: 300px;

  }

  .title{

  font-size: 18px;

  font-weight: bold;

  text-indent: 1em;

  line-height: 35px;

  background: red;

  }

  ul{

  background: #cbc9c9;

  }

  ul li{

  height: 30px;

  list-style: none;

  text-indent: 1em;

  }

  a{

  text-decoration: none;

  最后

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  

  

  

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

  如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
  长，自己不成体系的自学效果低效漫长且无助。**

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  [外链图片转存中…(img-CJKvbPbH-1714843572041)]

  [外链图片转存中…(img-8OVJy1qn-1714843572042)]

  [外链图片转存中…(img-0WUJ15YE-1714843572042)]

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

  如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！