Web-3-CSS基础入门:从零开始打造网页样式

myzbx 2024-12-02 22:45 20 浏览

1.CSS介绍

HTML学习完以后，以及可以使用HTML开发网页了，但是在呈现的效果上没有那么美观，所以接下来我们要学习CSS,CSS就是可以让我们页面变得更加美观，接下来我们开始学习CSS
第一步：在IDEA中创建名为08_CSS-介绍.html的文件：

第二步:编写如下代码，需要注意的是style标签中书写的是css样式，我们先照着写即可

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS介绍</title>
<style>
h1{
background-color:yellow;
color: red;
}
</style>
</head>
<body>
<h1>
Hello CSS
</h1>
</body>
</html>

第三步：浏览器打开页面，效果如下：

很明显，如果没有css，我们只会呈现黑色的效果，而我们加入了css，此处呈现红色大号字体，让我们的网页变得更加的美观的(ps:此处我们审美问题，修饰的并不美丽)。所以css可以美化我们的页面。

2.CSS概念和作用 2.1CSS格式规范HTML,元素名称在规则集开始位置

格式说明 大括号 开头和结尾，所有的样式放在里面 样式名 左边是样式名，样式名和样式值是固定的，中间使用冒号分隔 样式值 右边是样式值 样式结尾 每个样式以分号结尾

2.2CSS介绍

2.2.1CSS概念

层叠样式表，用于控制页面的样式（表现）。

2.2.2 CSS作用

美化网页

CSS格式规范

选择器:位于规则集开始位置，用于选择HTML元素
属性：改变HTML元素样式
属性值: 在属性右边，冒号后面
存放位置：<head>标签中创建<style>标签

3.CSS三种引入方式

我们知道了css可以美化html的页面，那么我们该如何再html中书写css呢？接下来我们需要学习html中书写css的方式，具体有3种，语法如下表格所示：

名称 语法描述 内联样式在标签内使用style属性，属性值是css属性键值对内部样式定义<style>标签，在标签内部定义css样式外部样式定义<link>标签，通过href属性引入外部css文件

对于上述3种引入方式，企业开发的使用情况如下：

内联样式会出现大量的代码冗余，不方便后期的维护，所以不常用。
内部样式，通过定义css选择器，让样式作用于指定的标签上
外部样式，html和css实现了完全的分离，企业开发常用方式。

接下来，我们通过IDEA编写代码，来演示css的引入方式
第一步：我们IDEA中创建名为09_CSS-引入方式.html的文件：

第二步：我们首先演示内联样式，按照内联样式的语法，我们编写如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS引入方式</title>
</head>
<body>


<p style="color: red;font-size: 40px">CSS内联样式</p>
</body>
</html>

第三步：我们通过浏览器打开观察效果如下：

第四步：我们接下来注释掉内联样式，按照内部样式的语法演示内部样式，修改代码如下：

Bash

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS引入方式</title>
    <!--    2.内部样式-->
    <style>
      p{
        color: yellow;
        font-size: 50px;
      }
    </style>
  </head>
  <body>


    <!--    1.内联样式-->
    <!--      <p style="color: red;font-size: 40px">CSS内联样式</p>-->

    <!--2.内部样式-->
    <p>CSS内部样式1</p>
    <p>CSS内部样式2</p>
  </body>
</html>

新增内容：

Bash

<!--    2.内部样式-->
<style>
  p{
    color: yellow;
    font-size: 50px;
  }
</style>

第五步：打开浏览器观察效果如下：

第七步：在resources目录下创建demo.css文件中编写如下的css代码：

p{
color: blue;
font-size: 60px;
}

第八步：我们注释掉内部样式，新增标签来引入外部css文件，完整代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS引入方式</title>
    <!--    2.内部样式-->
    <!--    <style>
    p{
    color: yellow;
    font-size: 50px;
    }
  </style>-->
    <link rel="stylesheet" href="demo.css">
  </head>
  <body>


    <!--    1.内联样式-->
    <!--      <p style="color: red;font-size: 40px">CSS内联样式</p>-->

    <!--2.内部样式
    <p>CSS内部样式1</p>
    <p>CSS内部样式2</p>-->

    <!--3.外部样式-->
    <p>CSS内部样式1</p>
    <p>CSS内部样式2</p>
  </body>
</html>

新增内容：

    <link rel="stylesheet" href="demo.css">

第九步：打开浏览器观察效果如图所示：

4.CSS选择器

上一小节我们学习了css的引入方式，其中内联样式和外部样式都书写了css选择器，那么本小节主要来讲解css的选择器，包括css选择器中的属性。顾名思义：选择器是选取需设置样式的元素（标签），但是我们根据业务场景不同，选择的标签的需求也是多种多样的，所以选择器有很多种，我们只学习最基本的3种
选择器通用语法如下：

选择器名   {
css样式名：css样式值;
css样式名：css样式值;
}

我们需要学习的3种选择器是元素选择器，id选择器，class选择器，语法以及作用如下：

4.1元素选择器

格式：

选择器的名字必须是标签的名字
作用：选择器中的样式会作用于所有同名的标签上

元素名称 {
    css样式名:css样式值；
}

例子如下：


      p{
        color: #00FF00;
        font-size: 30px;
      }

4.2.id选择器:

选择器的名字前面需要加上#
作用：选择器中的样式会作用于指定id的标签上，而且有且只有一个标签

#id属性值 {
    css样式名:css样式值；
}

例子如下：

#{
    color: blue;
}

4.3类选择器

选择器的名字前面需要加上.
作用：选择器中的样式会作用于所有class的属性值和该名字一样的标签上，可以是多个

.class属性值 {
    css样式名:css样式值；
}

例子如下:

.cls{
     color: aqua;
 }

接下来我们需要通过代码来演示3种选择器的作用：
第一步：在IDEA中创建名为10_CSS-选择器.html的文件：

第二步：遵循上述的3种选择器语法，编写如下代码：

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

<style>
p{
color: #00FF00;
font-size: 30px;
}
#pp{
color: blue;
}

.cls{
color: aqua;
}
</style>
</head>
<body>

<p>CSS元素选择器</p>



<p id="pp">CSS id选择器</p>

<p class="cls">CSS类选择器</p>

</body>
</html>

第三步：打开浏览器，观察效果如下图所示：

css的属性有很多，这是前端做的，我们不写，想要知道详细属性的作用，参考文档https://developer.mozilla.org/zh-CN/docs/Learn/CSS

5.CSS常用样式

每个标签都可以设置背景，我们学习的时候以

标签为例

功能 属性名 属性取值 背景色 background-color 颜色常量，如：red 使用十六进制，如：#123 背景图片 background-image url(图片文件) 平铺方式 background-repeat repeat 默认。背景图像将在垂直方向和水平方向重复。 repeat-x 背景图像将在水平方向重复。 repeat-y 背景图像将在垂直方向重复。 no-repeat 背景图像将仅显示一次。背景大小 background-size 宽度和高度颜色 color 颜色常量，如：red 使用十六进制，如：#123 文本缩进 text-indent 用于缩进文本，可以使用em单位，表示缩进1个字符，无论字符的大小。文本对齐 text-align left 把文本排列到左边。默认值：由浏览器决定。 right 把文本排列到右边。 center 把文本排列到中间。设置大小 font-size 单位：像素设置样式 font-style 字体设置为斜体 italic 浏览器会显示一个斜体的字体样式。 normal 默认值。浏览器显示一个标准的字体样式。设置粗细 font-weight bolder加粗 normal 不加粗

接下来我们需要通过代码来演示
第一步：在IDEA中创建名为11_CSS-背景颜色设置.html：

第二步：遵循上述的背景语法，编写如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景颜色设置</title>
<style>
/*background-color: 背景颜色*/
/*background-image: 背景图片*/
/*background-repeat: 背景平铺方式 no-repeat:不平铺, repeat-x:水平平铺, repeat-y:垂直平铺*/
/*background-size: 背景图片大小*/

div{
width: 1000px;
background-color: blue;
background-image: url("img/star.png");
background-repeat:no-repeat;
background-size: 1000px;
}
</style>
</head>
<body>

<div>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>

</div>
</body>
</html>

第三步：打开浏览器，观察效果如下图所示：

HTML 样式

上一篇：[前端开发]网页设计|如何实现网页变灰效果_网站蒙灰CSS样式总汇
下一篇：css3记录页面中常用样式的写法

Web-3-CSS基础入门:从零开始打造网页样式

2.2CSS介绍

2.2.1CSS概念

2.2.2 CSS作用

3.CSS三种引入方式

4.CSS选择器

4.1元素选择器

4.2.id选择器:

4.3类选择器

5.CSS常用样式

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

8.7k star，一款超炫酷的动态可视化大屏项目

这么牛逼的cursor功能，赶紧用起来

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」

Web-3-CSS基础入门:从零开始打造网页样式

2.2CSS介绍

2.2.1CSS概念

2.2.2 CSS作用

3.CSS三种引入方式

4.CSS选择器

4.1元素选择器

4.2.id选择器:

4.3类选择器

5.CSS常用样式

微信扫一扫：分享

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

8.7k star，一款超炫酷的动态可视化大屏项目

这么牛逼的cursor功能，赶紧用起来

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」