关于html的样式：css_html设置样式的代码叫什么-CSDN博客

本文链接：https://blog.csdn.net/Fancy_vae/article/details/107143665

css

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种样式表语言，用于渲染HTML元素标签的样式。
在html中。
CSS的样式分为三种：行内样式、内部样式、外部样式。

行内样式

行内样式是写在html元素中，利用style属性对元素进行样式设计。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
		    <P>Lorem.</P>
  			<P style="font-size: 30px;color: #46fa4a;">Natus.</P>
		    <P style="font-size: 40px;color: #eee666;">Sit.</P>
		    <P style="font-size: 50px;color: #ef0fef;">Aliquam.</P>
		    <P style="font-size: 60px;color:#000;">Voluptas!</P>
</body>
</html>

效果图如下：
在这里插入图片描述

内部样式

内部样式通过在<head> 部分定义<style>标签书写嵌套样式，在<style>标签中可以使用标签选择器，类选择器，id选择器等去给标签设置属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box p{
            font-size: 28px;
            color: #ff4400;;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>Lorem, ipsum.</p>
        <p>Pariatur, reprehenderit!</p>
        <p>Explicabo, accusamus.</p>
    </div>
    <p>Lorem, ipsum.</p>
    <p>Explicabo, culpa.</p>
    <p>A, esse?</p>
</body>
</html>

效果图如下：
在这里插入图片描述
可以看到在div里面的p标签样式改变了，也可以去改变每一个p标签，给每个p标签设置一个class。
div外面的三个p标签的样式却没有改变，这个涉及到选择器的使用，这个外面放到下一篇博客去专门讲。

外部样式

外部样式当样式需要被应用到很多页面的时候，将会使用外联样式，通过更改一个文件来改变所以页面的样式。
我们一般是使用在<head>标签中引入<link>标签，<link rel="stylesheet" href="./css/reset.css">，
rel：指定资源跟页面的关系
href：资源的地址，为需要引入的css文件，如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">

</head>

单独的css文件是以.css为后缀名的文件，在该文件内可以直接设置标签样式，不需要包在<style>标签里，如下图所示：
在这里插入图片描述
外部样式的引用还有一种方式@import url(./index.css)
这两种方式的区别：

link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
link支持使用 js 控制DOM去改变样式；而@import不支持。

下面给大家简单的介绍一下几种样式。

颜色表示法

单词表示法
十六进制表示法
RGB三原色表示法（范围0-255）

        <p style="color: blue;">Lorem.</p>
        <p style="color: #000fff;">Vel!</p>
        <p style="color: rgb(0,0,255);">Nostrum.</p>

在这里插入图片描述

背景样式

background-color：背景颜色
background-image：背景图片（URL背景地址，默认水平垂直都铺满背景图）
background-repeat：背景图片的平铺方式（repeat-x、repeat-y、repeat、no-repeat）
background-positon：背景图片位置（x y）=>（数字[px/%] |
单词[x:left/center/right],[y:top/center/bottom]）
background-attachment：背景图随滚动条的移动方式（scroll默认值，背景位置是按当前元素进行偏移的；fixed背景位置是按照浏览器进行偏移的）
复合样式：background:red url() repeat 0 0;（颜色、背景图、平铺方式、位置）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 1200px;
            height: 160px;
            background-image: url("../img/index/217.jpg");
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

在这里插入图片描述

边框样式

边框样式：border-style:（solid实线、dashed虚线、dotted点线…）
边框大小（px）:border-width:
边框颜色:border-color:
单独对一个边框进行设置（border-top/right/bottom/left）
复合样式：border:1px solid red;（边框大小、样式、颜色）可对单个边也可以用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 1200px;
            height: 160px;
            border: 1px solid #f40;
        }
    </style>
</head>
<body>
    <div>
        <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus atque quia facere distinctio debitis, in vel expedita ullam amet nam sunt fugiat alias ducimus voluptatum illo ipsa! Totam, magnam eligendi!
        </p>
    </div>
</body>
</html>

在这里插入图片描述

文字样式

font-family：字体类型

设置多字体方式（使其能够适应更多的计算机和设备）
引号的问题（有的字体中间有空格，必须用引号引起来）

font-size：字体大小（默认大小16px），字体大小一般为偶数
font-weight：字体粗细（单词[normal正常、bold加粗]；数字[100-500正常、600-900加粗]）
font-style：字体样式（normal正常、italic斜体[italic所有带有倾斜字体的可以设置；oblique没有倾斜属性的字体也可以设置倾斜]）
color：字体颜色
复合样式：font:weight style size family、font:style weight size family、font:weight style size/line-height family

顺带提一下样式继承以及优先级