Day03 3.1、CSS基础

一、CSS基础之入门使用

  • 层叠样式表（Cascading Style Sheets），与HTML一样，也是一种标记语言

  • 其作用就是给HTML页面标签添加各种样式，定义网页的显示效果，将网页内容和显示样式进行分离，提高了显示功能。

  • 简单一句话就是，CSS的代码可以告诉浏览器怎么美化HTML标签的内容。

  • 入门使用

  • css代码可以写在html标签中作为标签的属性值存在

  • 也可以写在html网页中，作为附加代码存在

  • 也可以写在单独的css文档中，通过html的link标签引入使用。

1 行间样式/行内样式

  • css代码可以作为在每一个标签的style属性中作为值使用。

  • 语法格式：

    <标签名  style="样式属性: 属性效果值; 样式属性: 属性效果值;....">

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h4 style="background-color: red; color: lightblue;">黄鹤楼送孟浩然之广陵</h4>
    <p style="background-color: red; color: yellow;">
      故人西辞黄鹤楼，<br>
      烟花三月下扬州。
    </p>
    <p style="background-color: deeppink; color: yellow;">
      孤帆远影碧空尽，<br>
      唯见长江天际流。
    </p>
</body>
</html>

2 内部样式

  • css可以作为在网页中的附加代码写在style标签内部存在。

  • 代码语法格式：

    <style>
选择符1 {
    样式属性: 属性效果值; 
    样式属性: 属性效果值;
    ....
}
    
选择符2 {
    样式属性: 属性效果值; 
    样式属性: 属性效果值;
    ....
}
    
....
</style>

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部样式，达到了结构与表现分离初步的效果</title>
    <style>
    h4, p {background-color: red;}
    h4 {color: lightblue;}
    p {color: yellow;}
    .p2 {background-color: deeppink;}
    </style>
</head>
<body>
    <h4>黄鹤楼送孟浩然之广陵</h4>
    <p>
      故人西辞黄鹤楼，<br>
      烟花三月下扬州。
    </p>
    <p class="p2">
      孤帆远影碧空尽，<br>
      唯见长江天际流。
    </p>
</body>
</html>

2 外部样式

  • css还可以作为单独的css格式文件存在，通过html的link标签引入到网页中。

  • common.css，代码：

    h4, p {background-color: red;}
h4 {color: violet;}
p {color: yellow;}
.p2 {background-color: deeppink;}

  • 4.1 html，代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部样式，彻底实现结构与表现的分离</title>
    <link rel="stylesheet" href="common.css">
</head>
<body>
    <h4>黄鹤楼送孟浩然之广陵</h4>
    <p>
      故人西辞黄鹤楼，<br>
      烟花三月下扬州。
    </p>
    <p class="p2">
      孤帆远影碧空尽，<br>
      唯见长江天际流。
    </p>
</body>
</html>

  • 4.2 html，代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部样式，彻底实现结构与表现的分离</title>
    <link rel="stylesheet" href="common.css">
</head>
<body>
    <h4>赠汪伦</h4>
    <p>
      李白乘舟将欲行，<br>
      忽闻岸上踏歌声。
    </p>
    <p class="p2">
      桃花潭水深千尺，<br>
      不及汪伦送我情。
    </p>
</body>
</html>

开发中，针对css提供的三种引入使用方式，我们一般最常用的是外部样式，其次到内部样式。

而行间样式在css使用过程中基本上是禁止使用的。

而在后续的js特效编写中，行间样式是最常用的。

所以css的三种引入使用方式，我们都要掌握并熟练使用。

posted @ 2023-03-20 14:35  Chimengmeng  阅读(18)  评论(0)    收藏  举报