AI大模型全栈开发 | 前端基础：css初识、css基础选择器、css文本样式
CSS初识基础选择器文本样式课程前言Course Intr...
CSS初识基础选择器文本样式
课程前言Course Introduction同学们，大家好！欢迎来到今天的AI大模型全栈开发课程。今天，我们将开启一段全新的旅程，深入探索网页设计的灵魂——CSS。CSS，即层叠样式表（Cascading Style Sheets），是现代网页开发中不可或缺的一部分。它就像一位神奇的美容师，能够为网页增添色彩、调整布局，让单调的HTML页面焕发出无限生机。大家准备好了吗？让我们开始吧！一CSS初识
CodingFuture
1.1CSS层叠样式表
HTML只关注内容的语义，例如：<h1>表示大标题<p>表示段落<img>表示图片<a>表示链接早期网站设计单一，修改样式需要大量重复操作，HTML无法满足设计者需求，操作不方便，且代码臃肿繁琐。1.2 CSS 网页的美容师
CSS让网页更加丰富多彩，布局灵活。*大贡献：将HTML从样式中脱离，实现结构与样式的分离。理想结果：结构（HTML）与样式（CSS）相分离。1.3CSS初识
概念：CSS（Cascading Style Sheets），层叠样式表。作用：设置HTML页面中的文本内容、图片外形、版面布局和外观显示样式。特点：以HTML为基础，提供丰富的功能，如字体、颜色、背景控制及排版等，还可以针对不同浏览器设置样式。1.4引入CSS样式表
1.4.1 行内式（内联样式）概念：通过HTML标签的style属性设置样式。语法：<标签名 style="属性1:属性值1; 属性2:属性值2;"> 内容</标签名>案例：<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>注意：style其实就是标签的属性 样式属性和属性值中间是【 : 】 多组属性值之间用【 ; 】隔开。只能控制当前的标签和以及嵌套在其中的子标签，造成代码冗余 缺点：没有实现样式和结构分离。1.4.2 内部样式表（内嵌样式表）概念：将CSS代码集中写在HTML文档的<head>标签中，用<style>标签定义。语法：<head> <style> 选择器 { 属性1: 属性值1; 属性2: 属性值2; } </style></head>案例：<head> <style> div { color: red; font-size: 12px; } </style></head>缺点：没有彻底分离样式和结构，只能控制当前页面。1.4.3 外部样式表（外链式）概念：将样式放在以.css为扩展名的外部文件中，通过<link>标签引入。语法：<head> <link rel="stylesheet" type="text/css" href="css文件路径"></head>案例：<link rel="stylesheet" href="../01.css">优点：完全实现结构和样式分离，便于维护和复用。缺点：需要引入外部文件。1.4.4 三种样式表总结
1.4.5 样式优先级优先级顺序：行内样式 > 内部样式 > 外部样式。原则：遵循就近原则，离标签最近的样式优先级*高。推荐：在项目中选择一种引入方式，推荐使用小写字母书写样式选择器、属性名和属性值关键字。二CSS基础选择器
CodingFuture
2.1CSS选择器（重点）
理解：能说出选择器的作用。理解id选择器和类选择器的区别。应用：能够使用基础选择器给页面元素添加样式。示例问题：如何快速将页面中的小黄人分为两组。选择器的作用：CSS选择器用于选择HTML页面中的特定元素。示例代码：h3 { color: red;}2.2CSS基础选择器
2.2.1 标签选择器概念：使用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。语法：标签名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }作用：可以选择页面中所有同类型的标签，例如所有div标签或所有span标签。优点：能快速为页面中同类型的标签统一样式。缺点：无法设计差异化样式。2.2.2 类选择器语法：.类名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }标识：使用“.”（英文点号）标识，后面紧跟类名。优点：可以为元素定义单独或相同的样式，可以选择一个或多个标签。注意事项：类名可以使用中横线命名，避免使用纯数字、中文，尽量使用英文字母。示例代码：<p class="类名"></p>2.2.3 类选择器特殊用法 - 多类名可以给标签指定多个类名，从而达到更多选择目的。示例代码：<span class="blue">G</span><span class="red">o</span><span class="orange">o</span><span class="blue">g</span><span class="green">l</span><span class="red">e</span>注意事项：各个类名中间用空格隔开。多类名选择器在复杂布局中使用较多。2.2.4 id选择器语法：#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }标识：使用“#”标识，后面紧跟id名。特点：元素的id值是的，只能对应文档中某一个具体元素。用法与类选择器类似。区别：类选择器（class）可以多次重复使用，类似人的名字。id选择器类似身份证号码，全页面，不得重复。应用场景：id选择器一般用于页面性元素，常与JavaScript搭配使用。示例代码：<h1 id="box1">码上未来</h1>2.2.5 通配符选择器概念：使用“*”号表示，选择页面中所有标签。作用范围*广，能匹配所有元素。语法：* {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }示例：清除所有HTML标记的默认边距：* { margin: 0; padding: 0;}注意事项：会匹配页面所有元素，可能降低页面响应速度，不推荐随意使用。2.2.6 基础选择器总结标签选择器：作用：选择所有相同标签。缺点：无法差异化选择。使用场景：较多。示例：p { color: red; }类选择器：作用：选择一个或多个标签。使用场景：非常广泛。示例：.nav { color: red; }id选择器：作用：选择标签。缺点：只能使用一次。使用场景：不推荐。示例：#nav { color: red; }通配符选择器：作用：选择所有标签。缺点：选择过多，部分不需要。使用场景：不推荐。示例：* { color: red; }2.2.7 团队约定推荐：尽量使用class选择器（.jdc {}）。推荐使用标签选择器（li {}、p {}）。不推荐：尽量少用通配符选择器（* {}）。尽量少用id选择器（#jdc {}）。三CSS文本样式
CodingFuture
3.1font字体
3.1.1 font-size: 字号作用：设置字号大小。单位：相对长度单位（常用像素单位px）和长度单位（较少使用）。注意：cm是固定大小，而像素是相对单位，不同屏幕的1像素大小不同。谷歌浏览器默认字号为16px，最小字号为12px，不同浏览器的默认字号可能不同。建议为body指定整个页面的字号。示例代码：p { font-size: 20px;}3.1.2 font-family: 字体作用：设置字体类型。常用字体：宋体、微软雅黑、黑体等。设置方式：可以同时指定多个字体，中间用逗号隔开，浏览器会依次尝试，直到找到合适的字体。技巧：中文字体需加引号，英文字体一般不需要加引号。字体名包含空格或特殊符号时，需加引号。英文字体名应位于中文字体名之前。示例代码：p { font-family: Arial, "Microsoft YaHei", "微软雅黑";}3.1.3 font-weight: 字体粗细作用：定义字体粗细。属性值：lighter：更细的字符（100）。normal：默认值（不加粗）。bold：加粗。100~900：数字表示粗细，400等同于normal，700等同于bold。示例代码：p { font-weight: 500;}3.1.4 font-style: 字体风格作用：定义字体风格，如斜体、倾斜或正常。属性值：normal：正常。italic：斜体。示例代码：p { font-style: italic;}3.1.5 font总结font属性可以简写，顺序为：font-style font-weight font-size font-family。3.2CSS外观属性
3.2.1 color: 文本颜色作用：定义文本颜色。取值方式：预定义颜色值（如red、green）。十六进制（如#FF0000）。RGB代码（如rgb(255,0,0)）。示例代码：p { color: #AAA;}3.2.2 text-align: 文本水平对齐方式作用：设置文本内容的水平对齐方式。属性值：left：左对齐（默认值）。right：右对齐。center：居中对齐。注意：是对盒子内容的水平对齐，而不是盒子本身的对齐。示例代码：p { text-align: right;}3.2.3 line-height: 行间距作用：设置行间距，即行与行之间的距离。单位：像素px、倍数、相对值em、百分比%，常用px。示例代码：p { line-height: 24px;}3.2.4 text-indent: 首行缩进作用：设置首行文本的缩进。单位：像素px、em（1em等于一个字的宽度）、百分比%。建议：使用em作为单位。示例代码：p { text-indent: 2em;}3.2.5 text-decoration: 文本装饰作用：定义文本的装饰效果。属性值：none：默认，取消装饰。underline：下划线。overline：上划线。line-through：中划线。示例代码：p { text-decoration: underline;}a { ;}2.6 外观属性总结常用属性：color：设置颜色。line-height：控制行间距。text-align：水平对齐方式。text-indent：首行缩进。text-decoration：文本修饰。3.3开发者工具（Chrome）用途：调试代码、检查页面元素。快捷键：F12或Shift + Ctrl + I。功能：查找页面元素。查看HTML结构和CSS样式。动态修改样式并查看效果。放大开发者工具代码大小（Ctrl + 滚轮）。复原浏览器大小（Ctrl + 0）。3.4VSCode快捷操作与Emmet语法Emmet：通过缩写快速生成HTML/CSS代码。常用操作：生成标签：输入标签名后按Tab键，如div + Tab。生成多个标签：div*3生成3个div。父子级关系：ul > li。兄弟关系：div + p。添加类名或ID：.demo或#two + Tab。自动生成内容：div*5{nihao}。自动排序：div*5{$}。类名自增：.demo$*3生成类名为demo1、demo2、demo3的div。
结言陈词Closing statement同学们，今天我们学完了有关CSS的三个知识点，大家都掌握了吗？接下来我们会继续学习CSS的相关内容，下周我们再见啦！下期课程预告：css样式美化码上未来为同学们安排统一答疑扫码添加微信领取详细课程大纲
微信号:CodingFuture2020
The CodingFuture&The Future is Already Here<<< END >>>
