WEB前端静态网页开发

最新推荐文章于 2024-04-24 19:08:32 发布
最新推荐文章于 2024-04-24 19:08:32 发布
阅读量265 收藏
点赞数
分类专栏： 笔记 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51098062/article/details/115252336
版权

这里写目录标题

对于CSS的语法简介

在这里插入图片描述

p{
  color:red;
  text-align:center;  /* 文本居中 */
}

在这里插入图片描述

/* 注意：id选择器前有 # 号。 */
#sky{
  color: blue;
}

生成蓝色和绿色

<p id="sky">蓝色的</p>
<p id="forest">绿色的</p>

在这里插入图片描述

/* 注意：class选择器前有 . 号。 */
.center{
  text-align: center;
}
.large{
  font-size: 30px;
}
.red{
  color: red;
}

综合如下

<p class="center">在中央显示</p>
<p class="red">红色的</p>
<p class="center large red">在中央显示红色的</p>
<p class="red">还是红的</p>

CSS 如何生效

新建如下内容的一个 HTML文件

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
  <link rel="stylesheet" type="text/css" href="mycss.css">
  <title>页面标题</title>
</head>
<body>
  <h1>我是有样式的</h1>
  <hr>
  <p class="haha">还是有点丑：)</p>
</body>
</html>

在同一目录新建一个样式表文件mycss.css（注意后缀名为css）

body {
  background-color: linen;
  text-align: center;
}
h1 {
  color: red;
}
.haha {
  margin-top: 100px;
  color: chocolate;
  font-size: 50px;
}

效果如下：
在这里插入图片描述
内部样式表
我们也可以将样式放在 HTML 文件中，这称为内部样式表

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
  <link rel="stylesheet" type="text/css" href="mycss.css">
  <title>页面标题</title>
  <style>
    body {
      background-color: linen;
      text-align: center;
    }
    h1 {
      color: red;
    }
    .haha {
      margin-top: 100px;
      color: chocolate;
      font-size: 50px;
    }
  </style>
</head>
<body>
  <h1>我是有样式的</h1>
  <hr>
  <p class="haha">还是有点丑：)</p>
</body>
</html>

内联样式
所谓内联样式，就是直接把样式规则直接写到要应用的元素中，

<h3 style="color:green;">I am a heading</h3>

其实，一句话可总结为哪个样式定义离元素的距离近，哪个就生效。
在这里插入图片描述

颜色, 尺寸, 对齐

颜色
颜色在网页中的重要性不言而喻。
我们可以采用颜色名称也可以使用颜色RGB16进制值，来设定前景或背景的颜色

<h3 style="background-color:Tomato;">Tomato</h3>
<h3 style="background-color:Orange;">Orange</h3>
<h3 style="background-color:DodgerBlue;">DodgerBlue</h3>
<h3 style="background-color:MediumSeaGreen;">MediumSeaGreen</h3>
<h3 style="background-color:Gray;">Gray</h3>
<h3 style="background-color:SlateBlue;">SlateBlue</h3>
<h3 style="background-color:Violet;">Violet</h3>
<h3 style="background-color:LightGray;">LightGray</h3>
<hr>
<!-- 颜色值，3个字节分别代表RGB（Red，Green，Blue）的0～255的值 -->
<h3 style="background-color:#ff0000;">#ff0000</h3>
<h3 style="background-color:#0000ff;">#0000ff</h3>
<h3 style="background-color:#3cb371;">#3cb371</h3>
<h3 style="background-color:#ee82ee;">#ee82ee</h3>
<h3 style="background-color:#ffa500;">#ffa500</h3>
<h3 style="background-color:#6a5acd;">#6a5acd</h3>
<!-- 文本颜色 -->
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
<p style="color:MediumSeaGreen;">Ad facilis est ducimus rem consectetur, corporis omnis, eveniet esse dolor molestiae numquam odio corrupti, sed obcaecati praesentium accusamus? Tempora, dolor a?</p>

在这里插入图片描述
注意： 为演示方便，我们的样式采用了内联方式，实际中不能这样做！
尺寸
我们可以用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %等。
新建如下 HTML 文件：

<html>
  <head>
    <link rel="stylesheet" href="./mycss.css">
  </head>
  <body>
    <div class="example-1">
      这个元素高 200 pixels，占据全部宽度
    </div>
    <div class="example-2">
      这个元素宽200像素,高300像素
    </div>
  </body>
</html>

再建对应的 CSS 文件如下：

.example-1 {
  width: 100%;
  height: 200px;
  background-color: powderblue;
  text-align: center;
}
.example-2 {
  height: 100px;
  width: 500px;
  background-color: rgb(73, 138, 60);
  text-align: right;
}

!

盒子模型

新建如下 HTML 文件：

<html>
  <head>
    <link rel="stylesheet" href="./mycss.css">
  </head>
  <body>
    <div class="box1">我是内容一，外面红色的是我的边框。注意边框的内外都有25px的距离。</div>
    <div class="box2">我是内容二，外面蓝色的是我的边框。注意与上面元素的外边距，发生了叠加，不是50px而是25px。</div>
  </body>
</html>

再建对应的 CSS 文件如下：

.box1 {
  height: 200px;
  width: 200px;
  background-color:#615200;
  color: aliceblue;
  border: 10px solid red;
  padding: 25px;
  margin: 25px;
}
.box2 {
  height: 300px;
  width: 300px;
  background-color:#004d61;
  color: aliceblue;
  border: 10px solid blue;
  padding: 25px;
  margin: 25px;
}

在这里插入图片描述

组合选择器

后代选择器
以空格作为分隔，如：.haha p 代表在div元素内有.haha这种类的所有元素。
参见如下代码：

<html>
<head>
  <style>
    .haha p {
      background-color: blue;
    }
  </style>
   <style>
    .haha > p {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="haha">
    <p>我是黄色</p>
    <p>我是黄色</p>
    <span>
        <p>我是蓝色</p>
        
    </span>
  </div>
  <p>我没有颜色</p>
  <p>我没有颜色</p>
</body>
</html>

在这里插入图片描述

不透明度

我们可以用opacity对任何元素（不过常用于图片）设置不透明度。
值在[0.0～1.0]之间，值越低，透明度越高，如下图所示：
在这里插入图片描述
代码如下：

<html>
<head>
  <style>
    img {
      width: 25%;
      border-radius: 10px;
      float: left;
      margin: 10px;
    }
    .opacity-2 {
      opacity: 0.2;
    }
    .opacity-5 {
      opacity: 0.5;
    }
    .opacity-10 {
      opacity: 1;
    }
  </style>
</head>
<body>
  <img class="opacity-2" src="http://pic.wodingche.com/carimg/nmcnockdv.jpeg">
  <img class="opacity-5" src="http://pic.wodingche.com/carimg/nmcnockdv.jpeg">
  <img class="opacity-10" src="http://pic.wodingche.com/carimg/nmcnockdv.jpeg">
</body>
</html>
小米渣1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
大学生Web前端静态网页设计期末大作业（高分必看）.zip
06-09
大学生Web前端静态网页设计期末大作业。大学生Web前端静态网页设计期末大作业（高分必看）大学生Web前端静态网页设计期末大作业（高分必看）大学生Web前端静态网页设计期末大作业（高分必看）大学生Web前端静态网页设计期末大作业。大学生Web前端静态网页设计期末大作业（高分必看）大学生Web前端静态网页设计期末大作业（高分必看）大学生Web前端静态网页设计期末大作业（高分必看）大学生Web前端静态网页设计期末大作业。大学生Web前端静态网页设计期末大作业（高分必看）大学生Web前端静态网页设计期末大作业（高分必看）大学生Web前端静态网页设计期末大作业（高分必看）使用的是原生的 html，css，js代码大学生Web前端静态网页设计期末大作业。大学生Web前端静态网页设计期末大作业（高分必看）大学生Web前端静态网页设计期末大作业（高分必看）大学生Web前端静态网页设计期末大作业（高分必看）大学生Web前端静态网页设计期末大作业。大学生Web前端静态网页设计期末大作业（高分必看）大学生Web前端静态网页设计期末大作业（高分必看）大学生Web前端静态网页设计期末大作业（高分必看）大学生W
Web前端静态页面.zip
05-11
只包涵前端静态页面，包括html，css和js，有一整套的页面，包括首页，搜索，订单，个人主页，商标，注册，登陆和秒杀团购页面等。
web大作业 静态网页
01-31
web大作业 静态网页web大作业 静态网页web大作业 静态网页web大作业 静态网页web大作业 静态网页web大作业 静态网页web大作业 静态网页web大作业 静态网页web大作业 静态网页web大作业 静态网页
大学生Web前端静态网页设计期末大作业-问卷调查网页设计
06-21
大学生Web前端静态网页设计期末大作业-问卷调查网页设计（高分必看）
百度糯米网页
09-22
原生的js+html+css,欢迎大家学习，这里是一个百度糯米的网页书写!
前端静态页面基本开发思路（一）
海风依旧
11-12 3091
适合前端刚入门小白在捣鼓静态页面时的开发思路，可以更高效的去写出好的感受的页面！
CSS级联与优先级
AvaBlingBling的博客
09-17 2642
CSS级联与优先级 级联 就是CSS声明前加了限制条件 ps:善用 CSS 的级联属性 比如在你需要选定的对象元素前加上更多的元素，使选择的范围缩小，你的选择器就变得更有针对性，从而提高优先级 比如：下面这段代码结果红色。<h1 class="A B">标题颜色<h1>h1.B{ color: red } .A{ color: blue } 优先级 优先级就是分配给指定的CSS声明的一
Web前端开发学习1：静态网页
热门推荐
life is wonderful
10-21 1万+
一静态网页概述        在网站设计中，纯粹HTML（标准通用标记语言下的一个应用）格式的网页通常被称为“静态网页”，静态网页是 标准的HTML文件，它的文件扩展名是.htm、.html，可以包含文本、图像、声音、FLASH动画、客户端脚本和ActiveX 控件及JAVA小程序等。静态网页是网站建设的基础，早期的网站一般都是由静态网页制作的。静态网页是相对于动态 网页而言，是指没有后台
一、前端学习之HTML编写静态页面
Serven
03-27 6536
本人也是前端入门小白 先从HTML开始学起 最近花了3天时间学完HTML基础 并练了一个Demo 算是温习一下 1、如图: 2、代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML练习Demo</tit...
几种常见的优先级顺序
你好_晴天
10-22 1万+
1: * / 2: !   &&  ||
大学生Web前端期末静态网页设计作业html源代码
12-25
大学生Web前端期末静态网页设计作业html源代码 Web 前端静态网页大作业，使用的是原生的 html，css，js 代码
大学生静态网页设计期末作业源码前端静态网页大作业源码.zip
06-18
大学生静态网页设计期末作业源码前端静态网页大作业源码，使用的是原生的 html，css，js 代码，期末作业必过，高分必备。 大学生静态网页设计期末作业源码前端静态网页大作业源码，使用的是原生的 html，css，js 代码，期末作业必过，高分必备。大学生静态网页设计期末作业源码前端静态网页大作业源码，使用的是原生的 html，css，js 代码，期末作业必过，高分必备。大学生静态网页设计期末作业源码前端静态网页大作业源码，使用的是原生的 html，css，js 代码，期末作业必过，高分必备。大学生静态网页设计期末作业源码前端静态网页大作业源码，使用的是原生的 html，css，js 代码，期末作业必过，高分必备。大学生静态网页设计期末作业源码前端静态网页大作业源码，使用的是原生的 html，css，js 代码，期末作业必过，高分必备。大学生静态网页设计期末作业源码前端静态网页大作业源码，使用的是原生的 html，css，js 代码，期末作业必过，高分必备。
Web前端开发技术课程设计静态网页设计期末大作业，我的家乡静态网页
02-09
Web前端开发技术课程设计静态网页设计期末大作业，我的家乡静态网页
基于 Web 前端（静态）开发课程的课程设计网站【100011073】
03-02
项目主页主要包括：搜索栏目、菜单、时间及新闻、焦点图、课程主要知识介绍、合作企业及网站底部等几个模块。
Web前端开发职业技能等级标准.pdf
10-17
初级证书持有者具有静态网页开发能力。 初级职业技能培训时间不少于96标准课时；中级职业技能培训时间不少于224标准课时（含初级培训课时）；高级职业技能培训时间不少于320标准课时（含初级培训课时和中级培训课时...
web前端设计与开发期末作品/期末大作业
07-09
web前端设计与开发期末作品/期末大作业，共有8个静态页面，主题是中华传统美食之旅，图片非常精美且诱人噢。
CSS3新增特性（二）
m0_48670609的博客
04-24 1018
接上一篇，CSS3新增特性，包括 2D 转换（位移、缩放、旋转、倾斜）和 3D 转换，以及动画。
postcss简介
地球空间
04-21 469
2. **使用未来 CSS 特性**：PostCSS 允许开发者使用尚未被所有浏览器广泛支持的 CSS 特性，如 `var()` 变量、`@apply` 指令等，然后通过插件将它们转换为当前浏览器兼容的形式。5. **社区支持**：PostCSS 有一个活跃的社区，提供了大量的插件和工具，可以满足各种特定的需求。4. **代码格式化**：PostCSS 可以按照特定的风格指南格式化 CSS 代码，提高代码的可读性。2. **提高代码质量**：代码优化和格式化功能可以提高 CSS 代码的性能和可读性。
CSS详解（一）
最新发布
weixin_47194802的博客
04-24 823
行内元素可以通过设置内外边距（margin）、边框（border）和填充（padding）来调整其周围的间距和外观，但这些属性对行内元素的影响通常是垂直方向上的，水平方向上的影响有限。根据元素的属性值来选择元素。例如，[href] 选择具有 href 属性的所有元素，[title="example"] 选择 title 属性值为 "example" 的所有元素。选择某个元素的直接子元素。CSS 选择器允许你定义多个样式规则，这些规则可以根据选择器的优先级和特定的层叠规则来应用于元素，从而形成最终的样式。
web前端开发网页成品
05-26
如果你想要开发一个网页，需要掌握以下技术： ... 2. CSS：层叠样式表，用于定义网页的布局和样式。 3. JavaScript：用于实现网页的交互和动态效果。...通过不断地练习和学习，你可以成为一名优秀的web前端开发人员。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值