天涯论坛

 找回密码
 立即注册
搜索
查看: 117|回复: 3

从0.1初始学习CSS - 0 什么是CSS?

[复制链接]

3074

主题

148

回帖

9911万

积分

论坛元老

Rank: 8Rank: 8

积分
99118898
发表于 2024-6-30 08:46:43 | 显示全部楼层 |阅读模式

一点前言

新开一篇文案做学习记录,由于学了又忘的场景在自学前端的经历里实在太多了....

始终觉得知识点梳理不起来,不可总结成体系,就不愿意动笔写记录。此刻做记录的目的便是先从到有,先起始写再说。

倘若一样自学前端的小伙伴( ̄ω ̄( ̄ω ̄〃 ( ̄ω ̄〃)ゝ,欢迎交流~

期盼愿意花时间翻阅新人记录的前端大佬们指出不足之处~鞠躬~

为何是0.1?

由于必须认识以下内容才可更好的理解和实践css:

HTML知识会运用集成研发环境(IDE,Integrated Development Environment)写代码,针对新人这儿举荐运用VSCode
https://code.visualstudio.com/code.visualstudio.com/
注册一个github账号(非常多地区能够用到)倘若你还运用过IDE,又想快速上手,能够运用Codepen实践css代码。(github账号一键登录)

除此之外其他限制啦,此刻起始学习css~!

什么是css

倘若已然认识什么是HTML,就能更快的认识CSS。简单描述一下HTML,CSS和网页的关系:

网页指的是咱们平时在网页浏览器上看到的各样界面。
打开后的B站,便是一个网页HTML(超文本标记语言)是一种标记语言。你能够把它看做一个描述每一部分的网页内容的文本类型(文字/照片/音频)的工具。HTML构建了网页的基本结构。下面是一个html文件实例:
<!-- 新建一个html文件写入以下内容 --> <h1>h1是一级标题</h1> <p>p一般暗示这儿有一段文字</p>
用浏览器打开上面的HTML文件后表示以下网页内容 ↓
CSS(层叠样式表)是一种Web语言,它重点用来描述HTML文件的表现形式。CSS构建了网页的样式。在上面的html文件中加入以下的css内容:
<style> h1 { <!-- 背景颜色:#0072b0 --> bac公斤round-color: #0072b0; <!-- 文字颜色:#fff --> color:#fff; } p{ <!-- 边框:2px宽 灰色 实线 --> border:2px gray solid; } </style>
用浏览器打开添加CSS后的HTML文件表示的网页内容 ↓
点击这儿能够查看在codepen上的演示

咱们再次仔细观察添加的CSS内容,你是不是发掘他其实便是描述了:

将某个元素的某属性设置为某个值。

<style> h1 { <!-- 翻译: 将 h1元素 的 背景颜色属性 设置为 #0072b0 --> bac公斤round-color: #0072b0; <!-- 翻译: 将 h1元素 的 字体颜色属性 设置为 #fff --> color:#fff; } p{ <!-- 翻译:将 p元素 的 边框属性 设置为 2px宽、灰色、实线 --> border:2px gray solid; } </style>
将P元素的color属性设置为blue

显而易见,咱们要做的便是咱们的语言转化成css的语法。

而后将HTML和CSS结合起来,咱们能够得到一个静态(指各样花里胡哨的动画效果,动态网站一般必须JavaScript)的网页了。

此刻咱们已然晓得什么是CSS了。它是用来美化咱们的网页的一种语言。

它的语法此刻看来似乎比较简单,只必须咱们想要的样式效果翻译成CSS文件,就能够得到想要的样式。

那样接下来咱们学习的内容,便是怎样根据CSS的规则,去描述咱们想要的样式。

虽然CSS看起来很简单,然则非常多隐形的规则。倘若认识这些隐形的规则,实质运用起来,最后的页面效果容易令人摸不着头脑!




上一篇:CSS 程序怎么样让让页面里的字体变清晰?
下一篇:网页设计布局div+css代码实现一(附源文件)
回复

使用道具 举报

0

主题

1万

回帖

1

积分

新手上路

Rank: 1

积分
1
发表于 2024-9-7 21:58:38 | 显示全部楼层
你的话语如春风拂面,让我心生暖意。
回复

使用道具 举报

3138

主题

3万

回帖

9996万

积分

论坛元老

Rank: 8Rank: 8

积分
99968624
发表于 2024-10-20 05:23:47 | 显示全部楼层
回顾过去一年,是艰难的一年;展望未来,是辉煌的一年。
回复

使用道具 举报

3069

主题

3万

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99138952
发表于 2024-11-9 19:12:21 | 显示全部楼层
论坛的成功是建立在我们诚恳、务实、高效、创新和团结合作基础上,我们要把这种精神传递下去。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|天涯论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-23 05:57 , Processed in 0.151918 second(s), 22 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.