第1天 HTML，CSS基础知识

最新推荐文章于 2024-10-09 11:42:00 发布

味无味，

最新推荐文章于 2024-10-09 11:42:00 发布

阅读量37

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_70413569/article/details/131658293

版权

本文介绍了HTML的基本结构和元素，包括元数据、标题、图片和段落的使用。同时，讲解了CSS的基础知识，如如何为HTML元素添加样式，以及颜色、字体、边距等属性的设置。还提到了CSS选择器的概念，如元素选择器、ID选择器、类选择器等，并展示了如何通过GoogleFonts引入自定义字体。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>/*(规定)*/
<html>
  <head>/*(表头)*/
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images\5G.bmp" alt="My test images">/*(地址)*/

    <p>At Mozilla, we're a global community of</p>/*(段落)*/

    <ul>
      <li>technologists</li>
      <li>thinkers</li>
      <li>builders</li>
    </ul>
                         /*<ul></ul>无序表<ol></ol>有序表*/
    <p>working together… </p>
    <a href = "">Mozilla Manifesto</a>/*链接锚点*/

  </body>
</html>

CSS基础

CSS 是一门样式表语言，这也就是说人们可以用它来选择性地为 HTML 元素添加样式。举例来说，以下 CSS 代码选择了所有的段落文字，并将它们设置为红色。

p {
  color: red;
}

在文本编辑器中，将上述的三行 CSS 代码粘贴到一个新的文件中，将文件命名为 style.css 并保存到 styles 文件夹下。

为了使代码发挥作用，我们仍然需要将上述 CSS 样式应用到你的 HTML 文档中。否则，这些样式不会改变 HTML 的外观。

打开 index.html 文件，然后将下面一行粘贴到文档头部（也就是 <head> 和 </head> 标签之间）。

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

css规则

Selector ：选择器

Declaration ：声明

Property ：属性

Property value ：属性的值

注意：

1.除了选择器部分，每个规则都应该包含在{ }中；

2.属性和属性值之间要加：（冒号）

3.每个规则需要用；(分号)将各个声明分隔开；

共用规则只需要用逗号即可，如下，

p,
li,
h1 {
  color: red;
}

选择器多种多样，上述描述的是元素选择器（也称作标签或类型选择器）；

ID选择器: #my-id,选择 <p id="my-id"> 或 <a id="my-id">

类选择器：.my-class，选择 <p class="my-class"> 和 <a class="my-class">

属性选择器：img[src]，选择 <img src="myimage.png"> 但不是 <img>

伪类选择器：a:hover，选择仅在鼠标指针悬停在链接上时的 <a> 元素（特定状态下的特定元素（比如鼠标指针悬停于链接之上）

选择器指南：CSS 选择器 - 学习 Web 开发 | MDN

字体和文本

1.并以 <link> 元素的形式添加进 index.html 文档头部（ <head> 和 </head> 之间的任意位置）。代码如下：

<link
  href="https://fonts.googleapis.com/css?family=Open+Sans"
  rel="stylesheet" />

这段代码将你的页面链接到一个样式表，该样式表将 Open Sans 字体家族与你的网页一起加载。

2.添加以下几行（如下图所示），这个规则为整个页面定义了一个全局的基本字体和字体大小。

html {
  font-size: 10px; /* px 表示“像素（pixel）”: 基础字号为 10 像素 */
  font-family: "Open Sans", sans-serif; /* 这应该是你从 Google Fonts 得到的其余输出。 */
}

接下来可以从css中调节HTML主题内的元素

3.常用的规则

width：元素的宽度
background-color：元素内容和内边距底下的颜色
color：元素内容（通常是文本）的颜色
text-shadow：为元素内的文本设置阴影
display：设置元素的显示模式

更改页面颜色

html {
  background-color: #00539f;
}

文档体样式

body {
  width: 1000px;/*强制页面保持1000像素点*/
  margin: 0 auto;/*第一个值影响上下方向，第二个值影响水平方向，（auto将水平空间均匀分给左右）*/
  background-color: #b37013;/*背景颜色*/
  padding: 0 300px 200px 200px;/*上右下左内边距*/
  border: 7px solid black;/*边框线*/
  
}

图像居中

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

今天就这麽多

学习来源：

HTML 基础 - 学习 Web 开发 | MDN

CSS 基础 - 学习 Web 开发 | MDN

味无味，

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫