前端之CSS基础

一只爱吃萝卜的小兔子

已于 2022-01-27 16:28:13 修改

阅读量505

点赞数 1

分类专栏：前端基础文章标签： css 前端 css3

于 2022-01-22 14:55:39 首次发布

本文链接：https://blog.csdn.net/weixin_46372074/article/details/122610357

版权

前端基础专栏收录该内容

53 篇文章 4 订阅

订阅专栏

前端之CSS基础

CSS （层叠样式表）
- 为html添加样式
- CSS 规则集
CSS 布局
修改网页

CSS （层叠样式表）

CSS 不是编程语言，也不是标记语言。它是样式表语言。选择性地为 HTML 元素添加样式。

为html添加样式

1.将css文件引入进相应的html文件里
在内添加代码

    <link rel="stylesheet" href="./styles/index.css">

在css文件修改字体大小样式
./styles/index.css：

p{
    font-size: 2em;
}

在这里插入图片描述

CSS 规则集

在这里插入图片描述

CSS 布局

一切皆盒子
CSS 布局主要是基于盒模型，尺寸、颜色、位置等等。
每个块（盒子）都有这样的属性：
padding：即内边距，围绕着内容的空间。
border：即边框，紧接着内边距的线。
margin：即外边距，围绕元素外部的空间。
在这里插入图片描述
width ：元素的宽度
background-color ：边框border内的颜色
color ：元素内容（通常是文本）的颜色

text-shadow ：为元素内的文本设置阴影
text-shadow: 3px 3px 1px black;
向右向下半径阴影颜色

display ：设置元素的显示模式

修改网页

将前端之CSS基础最下方的网页修改成下方的样子：
在这里插入图片描述
我的代码
css：

.content{
    font-size:40px;
}

/* 标题颜色 居中，加大，加阴影 */
h1{
    /* 与顶部的距离 */
    margin-top: 5px;
    color: rgb(0,83,159);
    text-align: center;
    font-size: xxx-large;
    text-shadow: 3px 3px 1px black;
}

/* 图片居中 */
img{
    /* 显示模式设为块元素 */
    display: block;
    margin: 0 auto;
    width: 250px;
}

/* 文字加粗 */
ul li,p{
    font-weight: bold;
}

html{
    background-color: rgb(0,83,159);
}

/* 给页面添加边框 背景色 */
body{
    background-color: orange;
    margin: 0 10px;
    border: 3px solid;
    padding: 10px;
}

html：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<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>CSS基础</title>
    <link rel="stylesheet" href="./styles/index.css">
</head>
<body>
    <article>
        <h1>Mozilla酷毙了!</h1>

        <img src="./images/firefox.png" alt="火狐标志：一个环绕地球的红色狐狸">

        <p>Mozilla是一个全球社区，这里聚集着来自五湖四海的
            <ul>
                <li>技术人员</li>
                <li>思考者</li>
                <li>建造者</li>
            </ul>
        </p>

        <p>我们致力于让 Internet保持活力，保持畅通，人人皆可贡献，人人皆可创造。我们坚信：开放平台的协作对于人的发展至关重要，也决定着我们共同的未来。</p>
        <p>为了达成我们共同的理想，我们遵循一系列的价值观和理念，请参阅 <a href="https://www.mozilla.org/zh-CN/about/manifesto/" target="_blank">Mozilla 宣言</a></p>
    </article>    
</body>
</html>

官方代码：
css：

html {
  font-size: 10px;
  font-family: 'Noto Sans SC', sans-serif;
  background-color: #00539F;
}

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

h1 {
  font-size: 60px;
  text-align: center;
  margin: 0;
  padding: 20px 0;
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}

p, li {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;
}

img {
  display: block;
  margin: 0 auto;
}

html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>测试页面</title>
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC" rel="stylesheet">
    <link href="styles/style.css" rel="stylesheet">
  </head>
  <body>
    <h1>Mozilla 酷毙了！</h1>
    <img src="images/firefox-icon.png" alt="Firefox 标志：一只盘旋在地球上的火狐">

    <p>Mozilla 是一个全球社区，这里聚集着来自五湖四海的</p>

    <ul>
      <li>技术人员</li>
      <li>思考者</li>
      <li>建造者</li>
    </ul>

    <p>我们致力于让 Internet 保持活力，保持畅通，人人皆可贡献，人人皆可创造。我们坚信：开放平台的协作对于人的发展至关重要，也决定着我们共同的未来。</p>

    <p>为了达成我们共同的理想，我们遵循一系列的价值观和理念，请参阅 <a href="https://www.mozilla.org/zh-CN/about/manifesto/">Mozilla 宣言</a>。</p>
  </body>
</html>