[ 理解 CSS | 青训营笔记]

Haite
31 阅读3分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第2天。

一、视频课笔记：

1.本堂课重点内容：

CSS是什么，在页面中使用CSS，CSS是如何工作的，选择器，组合，属性，调试CSS，布局相关技术。

2.详细知识点介绍：

理解CSS：

CSS(Cascading Style Sheets):用来定义页面元素的样式（eg.设置字体和颜色，设置位置和大小，添加动画效果）。

CSS是如何工作的：

加载HTML -> 解析HTML -> 创建DOM树 -> 展示页面
                |
                 -> 加载CSS -> 解析CSS

在页面中使用CSS:

  1. 外链方式
  2. 嵌入方式
  3. 内联方式

选择器（Selector）：找出页面中的元素，以便给他们设置样式。

               1.按照标签名，类名或id。
               2.按照属性。
               3.按照DOM树中的位置。
  • 通配选择器 标签选择器 id选择器 类选择器 属性选择器 伪类

CSS组合：

image.png

CSS颜色:

1.RGB(red红+green绿+blue蓝)。

2.HSL(HUE色相+Saturation饱和度+Lightness亮度)。 可添加alpah透明度属性

常用属性：

  • 字体 font-family
  • 字体大小 font-size
  • 行高 line-height
  • 文本排列 text-align
  • 文本装饰 text-decoration
  • 文本缩进 text-indent
  • 间隔 spacing

调试CSS:Ctrl+Shift+I（windows）

深入CSS：

选择器特异度：id选择器可以看作百位数，（伪）类选择器可以看作十位，标签选择器可以看作个位。组成的三位数越大选择器优先级越高。

属性的继承：属性会自动继承其父元素的计算值，除非显示指定一个值

初始值：每个元素都有一个初始值，可以使用intial关键字显示重置为初始值

布局：

image.png

image.png

  • 宽度 width：指定content box宽度。
  • 高度 height：指定content box高度。
  • 内边距 padding：指定元素四个方向的内边距。
  • 容器边框 border：指定容器边框样式（共有三种属性width，style，color，四个方向）。
  • 外边距 margin：指定四个方向外边距。
  • 块级元素 vs 行级元素：相同的和不同点&行级上下文排班与块级上下文排版。
  • display属性：设置展示效果。
  • position属性：static、relative、absolute和fixed。

二、实践练习例子：

learn-css-basics-assessment.png

CSS:

body {
    font-family: Arial, Helvetica, sans-serif;
}

h1 {
    color: hotpink;
    font-size: 2em;
    font-family: Georgia, 'Times New Roman', Times, serif;
    border-bottom: 10px dotted purple;
}

h2 {
    font-size: 1.5em;
}

.job-title {
    color: #999999;
    font-weight: bold;
}

a:link, a:visited {
    color: #fb6542;
}

a.link1{
    color: green;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

.test{
    background-color: #DDDDDD;
    border: 5px solid purple;
}

HTML:

<h1>Jane Doe</h1>
<div class="job-title">Web Developer</div>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>

<p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. </p>

<h2>Contact information</h2>
<ul class="test">
    <li>Email: <a class="link1" href="mailto:jane@example.com">jane@example.com</a></li>
    <li>Web: <a href="http://example.com">http://example.com</a></li>
    <li>Tel: 123 45678</li>
</ul>

三、个人思考与总结：

  1. CSS中语言和属性和标签太多难以在短时间的学习中熟记及使用，需要边查阅手册边进行代码编写。
  2. 在代码编写时常常会漏写";"或者少了“:”，在书写时要细心仔细，不能马虎。
avatar
文章
阅读
粉丝