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

最新推荐文章于 2022-07-25 14:58:29 发布

Jatine

最新推荐文章于 2022-07-25 14:58:29 发布

阅读量580

点赞数

分类专栏：前端文章标签： css 前端 html

本文链接：https://blog.csdn.net/asdfghjkl_zth/article/details/122782097

版权

前端专栏收录该内容

38 篇文章 3 订阅

订阅专栏

文章目录

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

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 特性

值	描述
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列表

引例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h2 class="title">全部商品分类</h2>
<ul>
    <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
    <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
    <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
    <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
    <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
    <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
    <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
</ul>
</body>
</html>

默认效果：
在这里插入图片描述
现在，我们想更改一下样式

#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;
    font-size: 16px;
    color: #000;
}
a:hover{
    color: rgb(255,80,0);
    text-decoration: underline;
}

其中
list-style：设置列表属性
list-style:none;去掉圆点
list-style:circle;空心圆
list-style:decimal;数字
list-style:square;正方形

在这里插入图片描述

3.6背景

引例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 1200px;
            height: 800px;
            border: 1px solid red;
            background-image: url("image/1.jpg");
        }
    </style>
</head>
<body>

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

在这里插入图片描述
默认是全部平铺的
添加代码：

		.div1{
            background-repeat: no-repeat;
        }

在这里插入图片描述

background-repeat 属性设置是否及如何重复背景图像。
默认地，背景图像在水平和垂直方向上重复。
可能的值：

值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承 background-repeat 属性的设置。

引例2：
回到上一个列表案例，我们要在列表右侧添加箭头图片，这里推荐一个矢量图标库网站：iconfont-阿里巴巴矢量图标库
在这里插入图片描述

添加箭头：

#nav{
    width: 280px;
}
.title{
    font-size: 20px;
    font-weight: bold;
    text-indent: 2em;
    line-height: 35px;
    background: red url("../image/下箭头.png") 240px 10px no-repeat;
}
ul{
    background: #cbc9c9;
}
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
    background: url("../image/箭头.png") 200px 5px no-repeat;
}
a{
    text-decoration: none;
    font-size: 18px;
    color: #000;
}
a:hover{
    color: rgb(255,80,0);
    text-decoration: underline;
}

background: red url("../image/下箭头.png") 240px 10px no-repeat;

在这里插入图片描述

Jatine

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS学习记录03CSS的作用及样式

文章目录CSS学习记录03CSS的作用及样式3.1美化网页元素3.2字体样式3.3文本样式CSS学习记录03CSS的作用及样式3.1美化网页元素有效传递页面信息美化网页凸显页面主题提高用户体验<div> 和 <span>标签HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，<div&gt
复制链接

扫一扫

专栏目录