网页制作css样式(用css定义网页样式要注意什么)

1.CSS介绍

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

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

第二步:编写如下代码,需要注意的是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>

第三步:浏览器打开页面,效果如下:

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

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

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


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

2.2CSS介绍

2.2.1CSS概念

  • 层叠样式表,用于控制页面的样式(表现)。

2.2.2 CSS作用

  • 美化网页

CSS格式规范

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

3.CSS三种引入方式

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

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

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS引入方式</title>
</head>
<body>
<!– 1.内联样式–>
<p style="color: red;font-size: 40px">CSS内联样式</p>
</body>
</html>

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

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

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

<!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>

新增内容:

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

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

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

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

Web-3-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样式值;}

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

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

4.1元素选择器

格式

  1. 选择器的名字必须是标签的名字
  2. 作用:选择器中的样式会作用于所有同名的标签上
元素名称 { css样式名:css样式值;}

例子如下:

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

4.2.id选择器:

  1. 选择器的名字前面需要加上#
  2. 作用:选择器中的样式会作用于指定id的标签上,而且有且只有一个标签
#id属性值 { css样式名:css样式值;}

例子如下:

#{ color: blue;}

4.3类选择器

  1. 选择器的名字前面需要加上.
  2. 作用:选择器中的样式会作用于所有class的属性值和该名字一样的标签上,可以是多个
.class属性值 { css样式名:css样式值;}

例子如下:

.cls{ color: aqua; }

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>
<!– 1.元素选择器–>
<style>
p{
color: #00FF00;
font-size: 30px;
}
#pp{
color: blue;
}
.cls{
color: aqua;
}
</style>
</head>
<body>
<!– 1.元素选择器–>
<p>CSS元素选择器</p>
<!– 2.id选择器–>
<p id="pp">CSS id选择器</p>
<!– 3.类选择器–>
<p class="cls">CSS类选择器</p>
</body>
</html>

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

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

css的属性有很多,这是前端做的,我们不写,想要知道详细属性的作用,参考文档***/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:

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

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

<!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>

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

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

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:dandanxi6@qq.com

(0)
上一篇 2023年 10月 16日 下午12:00
下一篇 2023年 10月 16日 下午12:06

相关推荐

  • 微信支付财付通扣款有什么规定(财付通怎么调整微信支付额度)

    随着大数据时代的到来,人们的社交、支付、出行数据被有关服务商频频采集已成常态。财付通便是其中之一。一方面,服务商基于其收集的大数据提供金融和非金融服务,确实方便了人们的生活;另一方…

    2023年 6月 6日
  • 家庭小实验 火山爆发(家庭版科学火山爆发小实验)

    孩子们都对火山爆发很好奇, 科乐多的科学队长利用酸碱反应原理, 带领着孩子们模拟了火山爆发的场景。 孩子们不仅被亲眼所见的“火山”爆发所震撼, 还因为实验而激发了更多好奇和探索的想…

    2023年 7月 10日
  • 如何将word转换成jpg格式

    有时候我们需要把word文档转换成jpg,说实话,截图,这个方法,我自己都经常用。但是截图出来的图片效果可能会有点差,如果只是几张,那完全截图下就可以解决问题了。但是如果是几百页的…

    2023年 3月 6日
  • 电脑同时登录两个微信的快捷方法

    电脑上怎么登两个微信?微信是我们平时交流办公最常用的通讯程序之一,很多用户为了区分生活和工作,都会申请两个账号,那么接下来问题来了,一台电脑上怎么登录两个微信呢?别急,下面就让小编…

    2023年 4月 4日
  • 关键词快速排名方法

    关键词快速排名的方法,是指通过一些技巧和策略,帮助网站在搜索引擎上的关键词排名迅速提升的方法。 在如今竞争激烈的网络环境下,能够快速提升关键词排名对于网站的流量和曝光度来说至关重要…

    2023年 11月 4日
  • 2022年4月1号c1驾考项目新规

    随着机动车在国内普及之后,驾考对于成年人来说,就是大部分人都要经历的,只有获得了驾驶证,生活中使用车型才会更加“随心所欲”,不用只能依赖电动自行车、自行车这样的非机动车出行,不仅舒…

    2023年 1月 14日
  • 目前比较好的大学专业有哪些

    现在越来越少的人使用纸质名片了,电子名片简单又便捷。那么有哪些软件可以制作电子名片呢~如果你不知道的话,那就看下去吧! 1、图帮主 图帮主提供大量设计模板,不止海报、宣传单、台历等…

    2023年 3月 4日
  • 直播行业怎么盈利,网上直播怎么盈利

    我目前了解到的盈利模式一方面是礼物的抽成,再一个就是外部广告费。内部中也会有一些推广的费用,比如上推荐之类的。 从这一点上来看那直播平台的痛点还在于怎么让看直播的人更有意愿去送礼物…

    互联网 2023年 9月 20日
  • 公众号模版消息是什么,微信公众号怎么编辑图文模板

    公众号模板消息,向认证后的服务号开放。所有服务号都可以在功能->添加功能插件处看到申请模板消息功能的入口,但只有认证后的服务号才可以申请模板消息的使用权限并获得该权限。 模板…

    2023年 2月 19日
  • 迅雷云盘tv版怎么安装到电视应用

    有朋友不知道迅雷云盘怎么安装到电视上,现在迅雷云盘tv版已独家首发当贝市场,智能电视、投影仪、电视盒子都可以在当贝市场里搜索XL,下载安装迅雷云盘。 迅雷云盘TV版支持4K、HDR…

    2023年 7月 11日