初识CSS

最新推荐文章于 2022-07-09 16:32:19 发布

dev_coding

最新推荐文章于 2022-07-09 16:32:19 发布

阅读量89

点赞数

分类专栏：前端学习文章标签： css

本文链接：https://blog.csdn.net/qq_41033768/article/details/124266338

版权

前端学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、认识CSS

CSS表示层叠样式表（CascadingStyleSheet,简称CSS）,是为网页添加样式的代码
MDN解释：CSS也不是正真的编程语言，甚至不是标记语言。它是一门样式表语言；
维基百科解释：CSS是一种计算机语言，但不是一种编程语言；
美化HTML，使结构和样式分离

2、编写css样式

CSS提供了三种方式将样式应用到元素上
- 内联样式表（行内样式：inline）
  - 内联样式表存在与HTML元素的style属性之中
- 内部样式表（internal style sheet）
- 外部样式表（external style sheet）

3、css注释

/* 方式一 */
@import url(./style.css);
@import url(./test.css);

/* 方式二 不推荐 */
@import "./style.css"

4、常见的css属性

https://www.w3.org/TR/?tag=css
MDN
由于浏览器版本、CSS版本问题，查询CSS是否可用：caniuse.com
常用css属性
- font-size：文字大小
- color：前景色
- background-color：背景色
- width：宽度
- height：高度

5、案例练习

<!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>
  <style>
    .item{
      width: 500px;
      background-color: #eee;
      display: inline-block;
      vertical-align: top;
    }
    .item img{
      width: 500px;
    }

    .item span{
      background-color: orange;
      color: #fff;
      font-size: 24px;
    }
  </style>
</head>

<body>
  <h2>星球介绍</h2>
  <div>
    <div class="item">
      <h3>木星</h3>
      <img
        src="https://tse4-mm.cn.bing.net/th/id/OIP-C.AoeQLBZhcUeGdrecXp8MNQHaE-?w=231&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7"
        alt="木星">
      <div>
        <span>木星（Jupiter）</span>是距离太阳第五近的行星，也是太阳系中体积最大的行星，截至2019年已知有79颗卫星。古人早已认识这颗行星 ，罗马人以主神朱庇特命名这颗行星。古代中国则称木星为岁星，取其绕行天球 [19]。 一周约为12年，与地支相同之故。到西汉时期，《史记‧天官书》作者司马迁从实际观测发现岁星呈青色，与“五行”学说联系在一起，正式把它命名为“木星”。
      </div>
    </div>
    <div class="item">
      <h3>地球</h3>
      <img
        src="https://tse1-mm.cn.bing.net/th/id/OIP-C.bf_TVjVoN6NFerbK9jpPOAHaEK?w=302&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7"
        alt="地球">
      <div>
        <span>地球（英文名：Earth；拉丁文：Terra）</span>是距离太阳的第三颗行星，也是目前已知的唯一孕育和支持生命的天体。地球表面的大约 29.2% 是由大陆和岛屿组成的陆地。剩余的 70.8%
        被水覆盖，大部分被海洋、海湾和其他咸水体覆盖，也被湖泊、河流和其他淡水覆盖，它们共同构成了水圈。
      </div>
    </div>
  </div>
</body>

</html>

dev_coding

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识CSS

1、认识CSSCSS表示层叠样式表（CascadingStyleSheet,简称CSS）,是为网页添加样式的代码MDN解释：CSS也不是正真的编程语言，甚至不是标记语言。它是一门样式表语言；维基百科解释：CSS是一种计算机语言，但不是一种编程语言；美化HTML，使结构和样式分离2、编写css样式CSS提供了三种方式将样式应用到元素上内联样式表（行内样式：inline）内联样式表存在与HTML元素的style属性之中内部样式表（internal style sheet）外部样
复制链接

扫一扫