CSS学习笔记-03-美化页面元素

Lary_c

已于 2022-12-03 11:54:14 修改

阅读量111

点赞数

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

于 2022-12-03 11:06:01 首次发布

本文链接：https://blog.csdn.net/weixin_53249168/article/details/128159095

版权

CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

笔记来源：
【狂神说Java】CSS3最新教程快速入门通俗易懂

文章目录

3、美化网页元素

3.1、为什么要美化网页

1、有效的传递页面信息

2、美化网页、页面漂亮才能吸引用户

3、凹陷用户主题

4、提高用户体验

span标签：重点要突出的字，使用span标签括起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #hello{
            font-size: 50px;
        }
    </style>
</head>
<body>
欢迎学习<span id="hello">Java</span>
</body>
</html>

3.2、字体样式

字体相关的样式

字体的简写属性： font：字体大小/行高，字体族。（）注意：省略不是不写，而是使用默认样式了
font-family:字体格式

可选值：
- serif 衬线字体
- sans-serif 非衬线字体
- monospace 等宽字体
  
  -指定字体的类别，浏览器会自动使用该类别下的字体
  
  可以同时指定多个字体，多个字体之间使用逗号隔开，字体生效时优先使用第一个，第一个无法使用则使用第二个以此类推
font-size：字体大小
- 和font-size相关的单位
  - em相对于当前元素的一个font-size
  - rem相对于根元素的一个font-size
font-weight：字体粗细

可选值：
- normal 默认值不加粗
- bold 加粗
- 100 - 900 九个级别（没啥用）
font-style 字体风格

可选值：
- normal 正常的
- italic 斜体
color：字体颜色

<!--
    font-family:字体格式
    font-size：字体大小
    font-weight：字体粗细
    color：字体颜色
-->
    <style>
        body{
            font-family: 华文楷体;
            color: #922c2c;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bold;
        }
    </style>

3.3、文本样式

1.颜色 color rgb rgba

2.文本对齐的方式 text-align = center

3.首行缩进 text-indent：2em

4.行高 line-height 单行文字上下居中 line-height = height

5.下划线 text-decoration

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--
    text-align:排版 居中
    text-indent: 2em 段落首行缩进
    height: 300px;
    line-height: 300px;行高和块的高度一致，就可以上下居中
    text-decoration: underline;下划线
    text-decoration: line-through;中划线
    text-decoration: overline;上划线
    text-decoration: none 去下划线
-->
    <style>
        h1{
            color: rgba(0,255,255,0.9);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: #7a08e3;
            height: 300px;
            line-height: 300px;
        }
        .l1{
            text-decoration: underline;
        }
        .l2{
            text-decoration: line-through;
        }

        .l3{
            text-decoration: overline;
        }
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>

<p class="l1">123512</p>
<p class="l2">123512</p>
<p class="l3">123512</p>

<h1>简介</h1>
<p class="p1">《航海王》是日本漫画家尾田荣一郎作画的少年漫画作品，于1997年7月22日在集英社《周刊少年Jump》开始连载。改编的电视动画《航海王》于1999年10月20日起在富士电视台首播。</p>
<p class="p3"> 2012年5月11日，《航海王》获得第41回日本漫画家协会赏 [1]  。本作被吉尼斯世界纪录官方认证为“世界上发行量最高的单一作者创作的系列漫画” [2]  。2017年7月21日，日本纪念日协会通过认证，将每年的7月22日设立为“ONE PIECE纪念日”</pclass>

    <a href="">123</a>
</body>
</html>

3.4、阴影

/*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径*/
        #price{
            text-shadow: #7e561a 10px -10px 2px;
        }

3.5、超链接伪类

正常情况下，a,a:hover

/*默认的颜色*/
        a{
            text-decoration: none;
            color: black;

        }	
/*鼠标悬浮的颜色(只需要记住)*/
        a:hover{
            color: #7a08e3;
            font-size: 25px;
        }

3.6、列表

/*list-style:
none  去掉圆点
circle 空心圆
decimal 数字
square 正方形*/

ul{
    background: #444242;
}
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;

3.7、背景

背景颜色

背景图片

div{
    width: 1000px;
    height: 700px;
    border: 1px solid rebeccapurple;
    background-image: url("../images/1.jpg");
    /*默认全部平铺*/
}
.div1{
    background-repeat: repeat-x;
    /*水平平铺*/
}
.div2{
    background-repeat: repeat-y;
    /*垂直平铺*/
}
.div3{
    background-repeat: no-repeat;
    /*不平铺*/
}

3.8、渐变

background-color: #01fc75;
background-image: linear-gradient(248deg, #01fc75 0%, #eee706 100%);