博文

目前显示的是 三月, 2024的博文

「学习笔记」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其实就是标签的属性 样式属性和值中间是: 多组属性值直接用;隔开 只能控制当前的标签和以及嵌套在其中的字标签,造成代码冗余。 缺点:没有实现样式和结构相分离。 <标签名 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中可以省略。 只能控制当前的页面 缺点:没有彻底分离结构与样式 <head> <style type="text/CSS">     选择器(选择