CSS从入门到喜欢，从喜欢到着魔

最新推荐文章于 2022-12-10 10:30:40 发布

前端人

最新推荐文章于 2022-12-10 10:30:40 发布

阅读量51

点赞数

分类专栏： HTML(阶段一) 文章标签： css

本文链接：https://blog.csdn.net/weixin_43880397/article/details/118493354

版权

HTML(阶段一) 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

如果把网页比作一个人的话，html就是他的骨架，而css是他的皮肤，javascript是神经控制着行动。html，css，javascript都是构建网页的核心技术。

CSS简介

css指的是层叠样式表（Cascading Style Sheet），样式就是定义如何显示html元素，设置它的背景、字体大小颜色、边框等等。通常把样式存储到样式表中，为了代码简洁便于维护，大多数放置在css文件中，引入外部css文件，css文件就是一个外部样式表。

css是如何工作的？

在《HTML元素属性及意义》那一节课程中，我们讲大多数标签都有的style属性，是规定元素的行内样式。现在我们开始设置下hello word 字体大小为40像素

<body style="font-size:40px">
  hello world
</body>

刷新网页，我们发现网页内字明显大了。

css语法介绍

css语法规则集由选择器和声明块组成。选择器指的就是您要设置样式的html元素。如标签名（body ，h1,p,div...）就是一个选择器。

CSS从入门到喜欢，从喜欢到着魔

在《 HTML文档结构》中讲过head头部可以添加style样式表。所以上边body标签内的样式可以移出来放到head中，如：

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
   body{
    font-size:40px
   }
  </style>
 </head>
 <body>
   hello world
 </body>
</html>

css代码注释：用于对代码的注释或者解释代码，以 /* 开始，以 */ 结束。如：

p{
	font-size:16px; /* 设置p标签内的文字大小为16像素 */
}

练习题：如果我们需要写两个各10条数据的列表，第一个列表字体是16px，第二个列字体大小是20px，我们该如何写代码呢?

前端人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS从入门到喜欢，从喜欢到着魔

如果把网页比作一个人的话，html就是他的骨架，而css是他的皮肤，javascript是神经控制着行动。html，css，javascript都是构建网页的核心技术。CSS简介css指的是层叠样式表（Cascading Style Sheet），样式就是定义如何显示html元素，设置它的背景、字体大小颜色、边框等等。通常把样式存储到样式表中，为了代码简洁便于维护，大多数放置在css文件中，引入外部css文件，css文件就是一个外部样式表。css是如何工作的？在《HTML元素属性及意义》那一
复制链接

扫一扫