AI大模型全栈开发|前端基础：CSS样式美化
CSS样式美化课程前言Course Introductio...
CSS样式美化
课程前言Course Introduction同学们，网页设计中，CSS让网页从单调文字堆砌变成精美的视觉作品。今天，我们深入探索CSS，学习如何美化网页。 CSS样式美化
CodingFuture
1.1CSS复合选择器
后代选择器（重点）概念：选择元素或元素组的子孙后代，写法是外层标签在前、内层标签在后，中间用空格分隔。语法：.class h3{color:red;font-size:16px;}示例：.box san p可选择<div class="box">中的<p>标签及其中的<span>标签中的<p>标签。<head><meta charset="UTF-8"> <title>Document</title> <style>/*后代选择器 包含选择器*/.box san p {color: aqua;}</style> </head><body><div class="box"> <p><span>段落1</span> </p></div><p>段落2</p> </body></html>子元素选择器（了解）作用：选择作为某元素子元素的元素。语法：.classh>3{color:red;font-size:14px;}示例：.demo > h3表示h3是demo的亲儿子并集选择器（重点）应用：多个选择器定义相同样式时使用，使代码更简洁。语法：用逗号连接各选择器。示例：.box1, .box2{width: 300px; height: 300px;}链接伪类选择器（重点）作用：向某些选择器添加特殊效果。a:link /* 未访问的链接 */ a:visited /* 已访问的链接 */a:hover /* 鼠标移动到链接上 */a:active /* 选定的链接 */常用状态：a:hover（鼠标移动到链接上）。写法顺序：尽量按lvha顺序，否则可能引起错误。示例：a:link, a:visited {color: red;}a:hover {color: blue;}a:active {color: orange; text-decoration: underline;}a {;}`hover`的延伸用法示例： ```css .box {width: 300px; height: 300px; background-color: orange;} .box:hover {width: 500px; height: 500px; background-color: red;} ```1.2标签显示模式（display）重点
什么是标签显示模式定义：标签以什么方式进行显示，如div独占一行，span一行可放多个。作用：我们网页的标签非常多，再不同地方会用到不同类型的标签，以便更好的完成我们的网页。标签的类型：HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。标签分类：单标签和双标签标签的显示模式分类：块标签和行内标签块级元素（block-level）常见元素：<h1>~<h6>、<p>、<div>等。特点：独占一行；可设置宽高；宽度默认是父级宽度的；可作为容器。示例：.box设置宽高后，子标签.box1可按父级容器的50%设置宽度。行内元素（inline-level）常见元素：<span>、<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>等。其中 <span>标签*典型的行内元素。有的地方也称内联元素。特点：相邻元素在一行；不可直接设置宽高；默认宽度是内容宽度；只能容纳文本或行内元素。行内块元素（inline-block）常见元素：<img/>、<input/>、<td>等。特点：相邻元素在一行，可设置宽高和对齐属性。标签显示模式转换 display块转行内：display:inline;行内转块：display:block;块、行内元素转行内块：display: inline-block;三种模式总结区别块级元素：一行一个；可设置宽高；默认宽度是容器的；可包含任何标签。行内元素：一行多个；不可直接设置宽高；默认宽度是内容宽度；可容纳文本或行内元素。行内块元素：一行多个；可设置宽高；默认宽度是内容宽度。1.3行高那些事（line-height）
理解能说出 行高 和 高度 三种关系能简单理解为什么行高等于高度单行文字会垂直居中 应用使用行高实现单行文字垂直居中能会测量行高行高测量方法：图片和文字在一起时，图片与文字的基线对齐。
单行文本垂直居中行高和高度的三种关系：行高等于高度：文字垂直居中。行高大于高度：文字偏下。行高小于高度：文字偏上。原理：文字的行高等于盒子的高度时，上距离和下距离相等，文字垂直居中。
1.4CSS 背景（background）
背景颜色（color）语法：background-color:颜色值;，默认值是transparent（透明）。示例：background-color: rgba(200, 200, 200, .9);设置半透明背景。最后一个参数是alpha透明度取值范围 0~1之间。我们习惯把0.3的0省略掉，这样写:background: rgba(0, 0, 0, .3); 注意：背景半透明是指盒子背景半透明， 盒子里面的内容不受影响 背景图片（image）语法：background-image : none | url(url);参数作用：none：无背景图（默认的）url：使用或相对地址指定背景图像小技巧：我们提倡 背景图片后面的地址， url不要加引号。背景平铺（repeat）语法：background-repeat : repeat | no-repeat | repeat-x | repeat-y;参数作用：repeat背景图像在纵向和横向上平铺（默认的）no-repeat背景图像不平铺repeat-x背景图像在横向上平铺repeat-y背景图像在纵向平铺背景位置（position）重点语法：background-position : length || length;或background-position : position || position;参数作用:repeat:背景图像在纵向和横向上平铺（默认的）no-repeat:背景图像不平铺repeat-x:背景图像在横向上平铺repeat-y:背景图像在纵向平铺注意事项：必须先指定background-image属性position后面是x坐标和y坐标。可以使用方位名词或者 精确单位。如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效 果一致如果只指定了一个方位名词，另一个值默认居中对齐。如果position后面是精确坐标，那么第*个，肯定是 x 第二的一定是y 。如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中如果指定的两个值是精确单位和方位名字混合使用，则第*个值是x坐标，第二个值是y坐标背景简写语法：background: 背景颜色 背景图片地址 背景平铺 背景位置;。示例：background: red url(image.jpg) repeat-y center top;。背景总结属性作用值background-color背景颜色预定义的颜色值/十六进制/RGB代码background-image背景图片url(图片路径)background-repeat是否平铺 repeat/no-repeat/repeat-x/repeat-ybackground-position 背景位置length/position分别是x和y坐标切记:如果有精确数值单位，则必须按照先X后Y的写法背景简写更简单背景颜色、背景图片地址、背景平铺、背景滚动、背景位置; 他们没有顺序1.5CSS 三大特性
CSS层叠性概念：所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉原则：样式冲突，遵循的原则是就近原则。哪个样式离着结构近，就执行哪个样式。样式不冲突，不会层叠CSS继承性概念：子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。注意事项：恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。子元素可以继承父元素的样式（text- ，font- ，line-这些元素开头的可以继承，以及color属性）CSS优先级（重点）1). 权重计算公式关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Speci?city（特殊性）值从左到右，左面的*大， 一级大于一级，数位之间没有进制，级别之间不可超越。 关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Speci?city（特殊性）标签选择器计算权重公式继承或者 *0,0,0,0每个元素（标签选择器）0,0,0,1每个类，伪类0,0,1,0每个ID0,1,0,0每个行内样式 style=""1,0,0,0每个!important 重要的∞ 无穷大2). 权重叠加我们经常用交集选择器，后代选择器等，是有多个基础选择器组合而成，那么此时，就会出现权重叠加。就是一个简单的加法计算div ul li ------> 0,0,0,3 .nav ulli ------> 0,0,1,2 a:hover -----—> 0,0,1,1 nav a ------> 0,0,1,1注意：数位之间没有进制比如说：0,0,0,5 + 0,0,0,5 =0,0,0,10而不是0,0,1,03). 继承的权重是0这个不难，但是忽略很容易绕晕。其实，我们修改样式，一定要看该标签有没有被选中。1） 如果选中了，那么以上面的公式来计权重，谁大听谁的。2） 如果没有选中，那么权重是0，因为继承的权重为0。1.6CSS注释
CSS注释规则：/* 需要注释的内容 */ 进行注释的，即在需要注释的内容前使用 "/*" 标记开始注释，在内容的结尾使用 "*/"结束。p {/* 所有的字体是14像素大小*/font-size: 14px; }1.7文字阴影
示例：h1标签设置text-shadow: 10px 5px 2px pink;，文字有粉色阴影效果。h1 {font-size: 40px;/* x-offset y-offset 高斯模糊 颜色 */text-shadow: 10px 5px 2px pink; }
结言陈词Closing statement在本次课程中，我们深入学习了CSS的多种核心技能，从复合选择器的灵活运用到标签显示模式的精准控制，从巧妙设置行高实现文字垂直居中到打造丰富视觉效果的背景样式，再到理解CSS的三大特性。这些知识为网页设计提供了美学与功能的双重支撑。希望大家能将这些技能熟练掌握，灵活运用于实际项目中，持续探索CSS的更多可能性，为网页设计注入更多创意与活力。下期课程预告：CSS盒模型码上未来为同学们安排统一答疑扫码添加微信领取详细课程大纲
微信号:CodingFuture2020
The CodingFuture&The Future is Already Here<<< END >>>
