CSS基础样式

最新推荐文章于 2022-12-21 20:10:30 发布

怀民亦未寝，

最新推荐文章于 2022-12-21 20:10:30 发布

阅读量524

点赞数 64

文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_72466001/article/details/125950258

版权

如果想要网站展现出自己想要的样式，就要用到<style>标签，此标签需要创建在<head>和<body>之间方便我们修改与观看。

一、字体样式

1.字体样式需要我们用到font属性；

（1）字体风格：font-style,此属性可以让字体变为斜体，或者是粗体等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>
        h1{
            font-style: oblique;
        }
    </style>
<body>
    <h1>这是一个标签</h1>
</body>
</html>

具体效果为，如图：

（2）字体粗细：font-weight此属性可以改变字体粗细

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>
        h1{
            font-weight: 400;
        }
    </style>
<body>
    <h1>这是一个标签</h1>
</body>
</html>

具体效果为：如图

注意：font-weight后面的数字越大字体越粗，且数字后面没有px。

（3）字体大小：font-size此属性可以改变字体大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>
        h1{
            font-size: 20px;
        }
    </style>
<body>
    <h1>这是一个标签</h1>
</body>
</html>

具体效果如图：

此属性数字后面需要加px。

（4）字体类型：font-family此属性可以改变字体的类型比如，隶属，楷书

</head>
    <style>
        h1{
            font-family: "隶书";
        }
    </style>
<body>
    <h1>这是一个标签</h1>
</body>
</html>

具体效果为：

二、文本样式

（1）字体颜色： color此属性可以改变字体颜色

比如color：red，那么改字体显示的就是红色。可以输入改颜色的英文字母来改变颜色。

（2）字体水平对齐方式：text-align: center;此属性可以调整字体水平对齐方式

其元素有center中央，right右对齐，left左对齐

/head>
    <style>
        h1{
            text-align: center;
        }
    </style>
<body>
    <h1>这是一个标签</h1>
</body>
</html>

效果如图：

（3）文本首行缩进：text-indent此属性可以让一大段文字空出两个字符的距离

（4）设置文本行高：line-height可以调整文本的高度

</head>
    <style>
        h1{
            line-height: 100px;
        }
    </style>
<body>
    <h1>这是一个标签</h1>
</body>
</html>

效果如图：

三、设置鼠标样式

我们常见的光标样式为三种，默认光标，超链接指针，加载状态，此属性我们需要用到CSS伪类后面会提到。

如果想要光标在不同的元素上显示不同的样式就需要加上hover例如

h1:hover{

cursor:pointer

}

（1）超链接指针：cursor:pointer

   <style>
        h1:hover{
            cursor: pointer;
        }
    </style>
<body>
    <h1>这是一个标签</h1>
</body>
</html>

效果如图：

（2）等待状态：cursor:wait

具体效果如图：

三、背景样式

（1）背景颜色background-color,与字体颜色相同

</head>
    <style>
        h1{
            background-color: red;
        }
    </style>
<body>
    <h1>这是一个标签</h1>
</body>
</html>

具体效果如下：

（2）背景的高度宽度

背景的高度宽度都由weight和height赖控制大小。

四、CSS伪类

CSS 伪类用于向某些选择器添加特殊的效果

1、link单机访问前

2、visited单机访问后

3、hover鼠标悬浮于其上

4、active点击未释放

伪类，顾名思义就是假的，不存在的类，不是由class=""定义的，但元素可以具有同样的一些属性，比如鼠标悬停，那么此时就可以使用伪类，由浏览器指定它一个类，比如a:hover，效果近似于class="hover"，因为可以多次使用，所以叫伪类而不是伪ID，还有就是伪类通常是动态产生的，临时的，并非常驻属性。