教程「学习笔记」CSS基础

子柠 · 2023-08-03

「学习笔记」CSS基础

前言
拖延了一周的CSS学习笔记终于利用周末去补齐了，本篇文章着重梳理之前所学的CSS知识点，查漏补缺。同时，试着用git将重点案例存放到远程仓库中，更近一步贴近公司流程。💪💪

CSS构造块
「1. HTML的局限性」

HTML满足不了设计者的需求，可以将网页结构与样式相分离，这样就可以在不更改网页结构的前提下，更换网站的样式。
操作html属性不方便
HTML里面添加样式带来的是无尽的臃肿和繁琐

「2. CSS网页的美容师」

让我们的网页更加丰富多彩，布局更加灵活自如。
CSS最大的贡献：让HTML从样式中脱离，实现了HTML专注去做结构呈现，样式交给CSS

「3. CSS」CSS(Cascading Style Sheets)通常称为CSS样式表或层叠样式表(级联样式表)。

作用
- 主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)\图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。
- CSS以HTML为基础，提供了丰富的功能，如字体、样式、背景的控制及整体排版等，而且可以针对不同的浏览器设置不同的样式。

「4. CSS注释」

代码:

/* 这是注释 */

引入CSS样式表
「1.行内式(内联样式)」

通过标签的style属性来设置元素的样式

style其实就是标签的属性
样式属性和值中间是:
多组属性值直接用;隔开
只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余。
缺点:没有实现样式和结构相分离。

CSS:

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
例如：
<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>

「2.内部样式表(内嵌样式表)」

也称为内嵌式，将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义。

style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。
type="text/css" 在html5中可以省略。
只能控制当前的页面
缺点:没有彻底分离结构与样式

CSS:

<head>
<style type="text/CSS">
    选择器（选择的标签） {
      属性1: 属性值1;
      属性2: 属性值2;
      属性3: 属性值3;
    }
</style>
</head>

「3.外部样式表(外链式)」

也称链入式，是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中。

rel:定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
href:定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

CSS:

<link rel="stylesheet" href="index.css">

「4.团队约定-代码风格」

CSS:

/*1.紧凑格式 (Compact)*/
h3 { color: deeppink;font-size: 20px;}
// 2.一种是展开格式（推荐）
h3 {
 color: deeppink;
    font-size: 20px;   
}

/* 团队约定-代码大小写*/
/* 样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。*/
/* 推荐 */
h3{
 color: pink;
}


 
/* 不推荐 */
H3{
 COLOR: PINK;
}

搜索

教程「学习笔记」CSS基础

子柠

站长

教程 「学习笔记」CSS基础

子柠

站长

教程「学习笔记」CSS基础