学习CSS的样式基础

最新推荐文章于 2023-03-31 20:12:08 发布

叫我邱球球

最新推荐文章于 2023-03-31 20:12:08 发布

阅读量308

点赞数

分类专栏：有关CSS 文章标签：心得前端博客 css

本文链接：https://blog.csdn.net/CallMeQiuqiuqiu/article/details/57418432

版权

有关CSS 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

今天一个大神告诉我学习编程要稳扎稳打，不能求快。欲速则不达。

从CSS样式代码插入的形式来看基本可以分为以下三种：内联式、嵌入式、外部式。

----------------------------------------分割线-----------------------------------------

先介绍一下内联式：

所谓的内联式就是把CSS代码放在现有的HTML标签中（css代码要放在style=""的双引号中，如果有多个代码样式要写，则用分号分割开来）

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>

</head>
<body>
        <p style="font-style: italic;color: gold">泥萌好</p>
</body>
</html>

----------------------------------------分割线-----------------------------------------

再介绍一下嵌入式：

嵌入式就是我们平时所用到的，把CSS样式代码放在<style type="text/css"></style>之间。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style type="text/css">
        p{
            font-family: 黑体;
            color:red;
        }
    </style>
</head>
<body>
        <p >泥萌好</p>
</body>
</html>

----------------------------------------分割线-----------------------------------------

最后介绍一下外部式。

外部式css样式（也可以称为外联式）就是把css代码写在一个单独的外部文件中，这个css样式文件以".css"作为扩展名，在<head>内，（注意：不是在<style>内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：

注意：

1.css样式文件名称，以有意义的英文字母命名，如main.css

2.rel="stylesheet" type="text/css" 是固定写法不可修改

3. <link>标签位置一般写在<head>标签值内。

例如：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <p>lalala，<span>lalalala</span>、lalalalalala；<span>lalala</span>，lalala<span>lalala</span>。lalalalala！</p>
</body>
</html>

style.css中的代码为：

span{
   color:red;
   font-size:20px;
}

------------------------------------------------分割线---------------------------------------------

这样就把css样式基础知识里的三种方式都巩固了一遍。

内联式、外部式、嵌入式。都需要牢固掌握。

而且三种方式的优先级为

内联式>嵌入式>外部式。规律就是，离被设置元素的距离越近，优先级越高。

叫我邱球球

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习CSS的样式基础

今天一个大神告诉我学习编程要稳扎稳打，不能求快。欲速则不达。从CSS样式代码插入的形式来看基本可以分为以下三种：内联式、嵌入式、外部式。----------------------------------------分割线-----------------------------------------先介绍一下内联式：所谓的内联式就是把CSS代码放在现有的HTML标签中（cs
复制链接

扫一扫