Web前端学习笔记5：CSS3

最新推荐文章于 2024-09-16 23:39:36 发布

杰涅斯

最新推荐文章于 2024-09-16 23:39:36 发布

阅读量71

点赞数

分类专栏：从Java基础到开发的心路历程 Web前端 CSS3 文章标签： css3 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_63615578/article/details/129332847

版权

从Java基础到开发的心路历程同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

Web前端

5 篇文章 0 订阅

订阅专栏

CSS3

3 篇文章 0 订阅

订阅专栏

1.span标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一个网站</title>
    <style>
       #css{
           font-size: 50px;
       }
    </style>


</head>
<body>
欢迎学习<span id="css">CSS3</span>
</body>
</html>

这样css就会变成50b（￣▽￣）d　字体了

2.字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一个网站</title>
<!--   font-family 字体
        font-size 字体大小
        font-weight 字体粗细
        color 字体颜色
 -->
    <style>
        body{
            font-family: 楷体;
            color: coral;
        }
        h1{
            font-size: 50px;
        }
        .a{
            font-weight: bold;
        }
    </style>


</head>
<body>
<h1>标题</h1>
<p class="a">这是一段话</p>
</body>
</html>

效果如下：

3.文本样式

<style>

h1{
color:rgba(100,255,255,0.8);
text-align:center;
}
p{
text-indent:2em;
height:300px;
line-height:300px;
text-decoration:underline;
text-shadow:#000 10px 10px 2px;
} 
img，span{
vertical-align:middle;
}
</style>

rgba中的a为透明度，取值范围0~1;

text-indent:2em意为首行缩进两字符；

line-height:300px为行高，和块的高度一致就可以上下居中；

text-decoration:underline是给句子加线，underline是下划线，line-through是中间线，overline是上部的线;

vertical-align:middle意为让图片右边的文字上下居中;

text-shadow:#000 10px 10px 2px为字体阴影，四个值分别代表了字体颜色，水平偏移，垂直偏移，阴影半径

4.超链接伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一个网站</title>
<!--   font-family 字体
        font-size 字体大小
        font-weight 字体粗细
        color 字体颜色
 -->
    <style>
/*默认的颜色*/
a{
    text-decoration: none;
    color: #000;
}
/*鼠标按住未释放的状态（只需记住hover）*/
a:hover{
    color:blue;
    font-size: 50px;
}
    </style>


</head>
<body>
<a href="#">文本样式</a>

</body>
</html>

这样把鼠标悬停在文本上它就会变样子