序
一点前言
新开一篇文案做学习记录,由于学了又忘的场景在自学前端的经历里实在太多了....
始终觉得知识点梳理不起来,不可总结成体系,就不愿意动笔写记录。此刻做记录的目的便是先从没到有,先起始写再说。
倘若有一样自学前端的小伙伴( ̄ω ̄( ̄ω ̄〃 ( ̄ω ̄〃)ゝ,欢迎交流~
亦期盼愿意花时间翻阅新人记录的前端大佬们指出不足之处~鞠躬~
为何是0.1?
由于你必须先认识以下内容才可更好的理解和实践css: HTML知识会运用集成研发环境(IDE,Integrated Development Environment)写代码,针对新人这儿举荐运用VSCode。注册一个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看起来很简单,然则有非常多隐形的规则。倘若不认识这些隐形的规则,实质运用起来,最后的页面效果容易令人摸不着头脑!
|