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

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

文章目录

• • CSS学习记录03CSS的作用及样式
  • • 3.1美化网页元素
    • 3.2字体样式
    • 3.3文本样式
    • • 3.3.1颜色
      • • 3.3.1.1文本颜色
        • 3.3.1.2文本颜色和背景色
      • 3.3.2文本对齐方式
    • 3.4阴影
    • 3.5列表
    • 3.6背景

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

3.1美化网页元素

• 有效传递页面信息
• 美化网页
• 凸显页面主题
• 提高用户体验

<div> 和 <span>标签

• HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
  <div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
  如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
  <div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
• HTML <span> 元素是内联元素，可用作文本的容器。
  <span> 元素也没有特定的含义。
  当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

<style>#title1{font-size:50px;}
</style><span id="title1">Java</span>

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

3.2字体样式

样例：

 <style>body{font-family: 仿宋;}</style><h1>故事介绍</h1>
<p>《长津湖》是由陈凯歌、徐克、林超贤联合执导，吴京、易烊千玺领衔主演，段奕宏、欧豪特别出演，朱亚文、李晨、胡军、韩东君等主演的抗美援朝电影 ，该片于2021年9月30日在中国大陆上映  。
</p>
<p>该片以抗美援朝战争第二次战役中的长津湖战役为背景，讲述了一段波澜壮阔的历史，在极寒严酷环境下，中国人民志愿军东线作战部队凭着钢铁意志和英勇无畏的战斗精神，扭转战场态势，为长津湖战役胜利作出重要贡献的故事 。
</p>

常用Font 特性

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 属性设置元素的垂直对齐方式。
如，设置文本中图像的垂直对齐方式：

p {vertical-align: top;
}img.middle {vertical-align: middle;
}img.bottom {vertical-align: bottom;
}

3、首行缩进：

		h3 {/*首行缩进*/text-indent: 2em;}

4、行高：