领取淘宝天猫优惠券:优惠淘 | 欢迎使用随心而码微信小程序,微信搜一搜【随心而码】可直接搜到。

网页的“装修工”——CSS

html&css Hicoder 572℃ 0评论

什么是CSS?

CSS,即 Cascading Style Sheet 的首字母缩写,中文名叫层叠样式表。它与HTML一样,是一种描述性语言。

CSS有什么作用?

CSS定义了如何显示HTML标签、如何控制网页对象的样式,如何进行页面排版。简单来讲,CSS使我们看到的网页显得更加美观、更加适合我们阅读。

如何使用CSS?

  • 1、内嵌样式
    即将CSS代码写在<head></head>之间,通过HTML的<style>标签括起来。使用方法如下:

<head> <meta charset="utf-8"> <title>我是标题</title> <style type="text/css"> p { text-align = center; font-size = 18px; line-height = 20px; } </style> </head>
  • 2、行内样式
    即将CSS代码直接写在HTML标签中,一般放在标签的style属性里。使用方法如下:

<div style="background-color: #999000; color: green; width: 1000px; height: 768px;"> 我是块级元素,控制一大块区域。 </div> <p style="font-size: 18px;"> 我是行内元素,控制段落。 </p>
  • 3、外部样式
    即将CSS代码写在一个以 .css 为后缀的文件中,通过HTML的<link>标签,将该CSS文件链接到HTML文档中。这是最实用、最常用的方式。这种方式实现了结构层和表示层的彻底分离,有助于维护网页。使用方法如下:

<head> <link href="style.css" type="text/css" rel="stylesheet"> </head>

一个实例——简单的404页面


<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>页面开小差啦</title> <link rel="shortcut icon" type="image/x-icon" href="./images/favicon.ico"> <style> *{margin: 0;padding: 0;border: 0;} body{margin: 0 auto;} .logo{margin: 0 auto;padding: 0;border: 0; width: 500px;margin-top: 80px; height: 120px;} img{margin: 0;padding: 0;border: 0;float: left; width: 120px;} .logo p{margin: 0;padding: 0;border: 0;margin-left: 20px;margin-right: 0; float:right;width: 360px;font-size: 2em;line-height: 120px;} .main{margin-top: 80px;margin-left:auto;margin-right: auto;width: 500px; text-align: center;line-height: 2em;} .main p a{text-decoration: none;color: #ffae00;font-size: 1.25em;font-weight: 700;background-color: black;} </style> </head> <body> <div class="logo"><img src="images/logo_s.png" alt="ORIGINSPACE|本源空间"><p>ORIGIN<span style="color: #ffae00;">SPACE</span>|本源空间</p></div> <div class="main"> <p style="color: orange;font-size: 1.85em;font-weight: 700;">提醒:</p> <p style="color: white;font-size: 1.025em;background-color: black;">啊哈!页面找不到啦,看看是不是网址输错啦!</p> <p><a href="https://originspace.cn/">点击这里重新回到小站首页</a></p> </div> </body> </html>

其在浏览器中显示如下:

转载请注明:随心而码 » 网页的“装修工”——CSS

喜欢 (3)