CSS样式表的使用

文章目录

前言
一、CSS样式表是什么？
二、使用内容
- 1.CSS选择器
- 2.在页面中包含CSS
总结

前言

如果我们只是使用HTML那些东西做个网站的前端界面，毫无疑问会是10年、05年才有翻盖手机时候的上网风格。因为传统的HTML语句要实现页面美化在设计上时十分麻烦的，而CSS的出现改变了这个情况。

一、CSS样式表是什么？

CSS样式表是为弥补HTML在显示属性设定上的不足而指定的一套拓展样式标准。

CSS规则：CSS样式表包含三部分，选择器、属性和属性值。语法格式如下：

选择器{   属性1:属性值;
         属性2：属性值；
        <!--...-->
    }

选择器： 所有的HTML语言中的标记都是通过不同的CSS选择器来控制的。对于选择器的命名，和我们创建类名时一样，可以自定义，但不同的是有的选择器命名时，需要按照一定的格式。

属性：主要包括字体属性、文本属性、背景属性、布局属性、边界属性、列表属性、表格属性等内容。当有多个属性时用“;”分号隔开。这些属性的使用取决于浏览器的支持程度，因此，当我们在一个高级浏览器中搭建网站时，可能在其他的浏览器不适用，需要进行调试。

属性值：某属性的指定值。属性值和属性之间用冒号（:）分开。

以下表格将介绍CSS样式表各个属性，以及各个属性的属性值：

CSS样式表各个属性及解释
属性	解释	对应属性值举例
color	定义文本颜色	red、#00ff00、rgb(255,0,0)
font-size	定义字体大小	12px、16px等像素值
font-family	定义字体类型	宋体、楷体
background-color	定义背景颜色	blue、#00ff00、rgb(255,0,0)
margin	定义元素外边距	18px、10px等像素值
padding	定义元素内边距	20px、9px等像素值
border	定义边框的样式、宽度和颜色	1px solid black（1px厚，实心，黑色的边框）
width	定义元素宽度	24px、36px等像素值
height	定义元素高度	28px、30px等像素值
text-align	定义文本对齐方式	left、right、center、jusify等
display	定义元素的显示方式	block、inline、inline-block、flex、grid等
position	定义元素的定义方式	static、relative、absolute、fixed等
float	定义元素的浮动方式	left、right、none等
text-decoration	定义文本装饰效果	none、underline、overline、line-through等
text-transform	定义文本转换效果	uppercase、lowercase、capitalize、none
text-overflow	定义文本溢出时的处理效果	clip、ellipsis、string
box-shadow	定义元素的阴影效果	h-shadow v-shadow blur spread color inset（控制阴影效果的六个不同的属性值）
border-radius	定义元素的圆角效果	24px、36px等像素值
opacity	定义元素的透明度	0（完全透明）到1（不透明）之间的值
z-index	定义元素的堆叠顺序	整数值

实操展示：

<style>
    h1{    <--! h1为选择器名 -->
        font-family:宋体；    <!-- 属性:属性值 -->
        color:red;
    }
</style>

<style>标签是用来在HTML文档中嵌入CSS样式代码，并控制元素的外观和布局。需要注意的是，要使用<style>标签生效，需要将它放置在<head>标签的内部。

选择器名h1可以根据需求自定义。

二、使用内容

1.CSS选择器

CSS选择器经常使用的是标记选择器、类别选择器、id选择器等。这些选择器可以根据不同的HTML进行控制，实现各种效果。

（1）标记选择器

CSS标记选择器用于声明页面中哪些标记采用哪些CSS样式。例如，创建a标记选择器用于声明中所有<a>标记的样式风格。

实操展示：定义h1标记选择器，在该标记选择器中定义<h1>标记的样式风格

<head>
<style>
    h1{
          font-size:9px;
          color:#F80;  
    }
</style>
<head>

这便是一个普普通通的标记选择器。

进一步展示一下它是如何使用的：

<html>
<head>  
    <style>
        h1{
            font-size:90px;
            color:#F90;  
        }
    </style>
</head>
<title>网站</title>
<body>
    <h1> 仙人已乘黄鹤去 此地空余黄鹤楼  </h1>   
    <!-- 注释：此处在html中所有创建的h1,会自动调用title中同名为h1的标记选择器，采用相同的样式 -->
</body>
</html>

运行结果：

第一，无论是什么选择器，<style>标记和所有选择器要写在<head>标记中。

第二，标记选择器的名称与标记同名，定义的样式对所有同名标记风格统一。

（2）类别选择器

类别选择器和标记选择器一样，名称都是由开发者自己定义，属性和属性值的使用也一样。不同处是，类别选择器以"."点号开头。

语法如下：

<head>
<style>
    .类别选择器名1{
          属性名:属性值1;
    }

    .类别选择器名2{
          属性名:属性值2;
    }
</style>
</head>

使用标记选择器十分便捷，但是使用它后，所有该标记的样式都会被迫统一，无法实现每个标记的样式不同。这时候使用如上的类别选择器就十分轻巧了。将对于的效果引用于不同的标记即可。

实操展示：

<html>
<head>  
    <style>
        .h1_red{
            font-size: 45px;
            color:red;  
        }
        .h1_blue{
            font-size: 45px;
            color:blue;
        }
        .h1_green{
            font-size: 45px;
            color:green;
        }
    </style>
</head>
<title>网站</title>
<body>
    <h1 class="h1_red"> 这是一个红色标题  </h1>   
    <!-- 注释：使用class选择相同类别的不同样式的选择器-->
    <h1 class="h1_blue"> 这是一个蓝色标题 </h1>

    <h1 class="h1_green"> 这是一个绿色标题</h1>
</body>
</html>

运行结果：

第一，在标记中，使用class来选择相同类别的不同样式的选择器，直接在引号中输入名称即可，没有“.”点号。

第二，类别选择器可以下划线区分样式的不同，更加直观的引用。

（3）id选择器

id选择器是通过HTML中的id属性来选择并添加样式的，与类别选择器基本相同。不同之处在于id是唯一的，即开发者定义的id选择器只能被使用一次。

命名id选择器以"#"号开始，语法如下：

<head>
<style>
    #id选择器名{
        属性名:属性值;
    }
    
    #id选择器名{
        属性名:属性值;
    }
</style>
</head>

id选择器以"#"号开头，只能使用一次。id选择器名称自定义，建议直观些。

实操展示：

<html>
<head>  
    <style>
        #t1{
            font-size:25;
            color:red;
        }
        
        #p{
            font-size:20;
        }
    </style>
</head>
<title>网站</title>
<body>
    <h1 id="t1" align="center"> 震惊！数年的食用油竟然被工业用油污染！</h1>
    <p id="p"> 
        &nbsp;&nbsp;&nbsp;&nbsp;据XX社报报道，河北散装食用油罐装车出现运完煤油、柴油等工业用油后，未经清洗，直接罐装食用油。食用油安全令人担忧。
    </p>
</body>
</html>

运行结果：

如上图所示，在使用id选择器时，在标记中直接引用id值即可，写入引号中。id选择器以#号开头，同时只能使用一次。

2.在页面中包含CSS

所谓“在页面中包含CSS”，就是在实际开发中向HTML写入CSS码的具体操作。

（1）行内样式

行内样式比较简单粗暴，直接定义在HTML标记里边，通过style属性来实现。

语法如下：

<标记 style=" 属性:属性值 ">
    <!--标记的内容-->
</标记>

行内样式直接通过style关键字在标记中明确了样式类型。

实操展示：

<html>
<title>网站</title>
<body>
    <h1 style="color:red; text-align:center;"> 红色标题</h1>
    <h1 style="color: blue; text-align:center;"> 蓝色标题</h1>
    <h1 style="color: green; text-align:center;"> 绿色标题</h1>
</body>
</html>

运行结果：

不足之处在于不能灵活多变，只是硬板地敲出标记的样式。

（2）内嵌式

内嵌式样式表就是在<head>标记中使用<style></style>标记将CSS样式包含在页面中。语法格式如下：

<head>
    <style>
        选择器名{
            属性:属性值;
        }
    </style>
</head>

所谓内嵌式，不过是我们刚接触到看到的写法，在<head>标记中使用<style>标记，在里边创建选择器，进行使用。具体的实操展示我在这里就不展示了，因为 1.CSS选择器的实操展示都是在介绍内嵌式写法。

（3）链接式

链接式式CSS样式表最常用的一种引用样式表的方法。将CSS样式定义在一个单独的文件中，然后在HTML文件中使用<link>标记引用，这是最有效的CSS样式的方式，麻烦的是更改CSS样式需要切换文件，并且要确保文件的存在。

<link>标记的语法如下：

<link rel='stylesheet' href='path' type='text/css'>

rel：定义外部文档和调用文档间的关系。

href：CSS文档的绝对或相对路径。

type：指外部文件的MME类型。

注：简单使用的话，我们通常只使用href属性即可。

实操展示：创建两个文件，一个CSS文件，一个HTML文件，HTML文件调用CSS文件。

CSS文件：

/* Style for links */  
h1{
    color: red; /* 设置链接文本颜色为蓝色 */
    font-size: 45px; /* 移除链接的下划线 */
    text-align:center;
}

p{
    font-size: 35px; /* 鼠标悬停时显示下划线 */
}

CSS文件中写明了两个选择器，一个是h1标题样式，另一个是p段落样式。

HTML文件（已引用上面的CSS文件）：

<html>
<title>网站</title>
<link rel="stylesheet" type="text/css" href="CSS.css"/>
<!--以上已经使用了链接式样式表，该HTML的样式由CSS文件的选择器决定-->
<body>
    <h1> 论人生的意义与未来的思考 </h1>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;人生的意义在于我们追求自己渴望的美好事物的过程。而对于未来的思考，非人力所可能企及，需要顺应自然和社会规律，不可执念过深。

    </p>
</body>
</html>

运行结果：