一、CSS是什么CSSCascading Style Sheets即层叠样式表是一种用于描述HTML文档外观和格式的样式语言。HTML与CSS的关系技术角色比喻HTML网页内容的载体人的骨架CSS网页样式的表现人的衣服、妆容JavaScript网页的交互行为人的动作、表情一句话总结HTML负责有什么CSS负责长什么样JavaScript负责能做什么。为什么需要CSS如果没有CSS网页是这样的h1这是一个标题/h1p这是一段文字/p所有文字都是默认的黑色、默认大小页面毫无美感。而有了CSSh1{color:#ff6b6b;font-size:32px;text-align:center;}p{color:#4ecdc4;font-size:18px;line-height:1.8;}页面立刻变得色彩丰富、层次分明核心理念HTML专注结构呈现CSS负责样式美化实现结构与样式相分离。二、CSS语法规范2.1 基本语法结构CSS规则由选择器和声明两部分组成选择器{属性:属性值;属性:属性值;}示例h1{color:red;/* 文字颜色为红色 */font-size:20px;/* 字体大小为20像素 */}语法要点选择器指向要设置样式的HTML元素每条声明由属性: 属性值组成属性和属性值之间用英文冒号:分隔多条声明之间用英文分号;分隔所有声明包裹在英文大括号{}中2.2 代码书写风格推荐/* 展开格式推荐 */h3{color:pink;font-size:20px;}/* 紧凑格式不推荐 */h3{color:pink;font-size:20px;}规范要求选择器和大括号之间保留一个空格属性值前面、冒号后面保留一个空格选择器、属性名、属性值关键字全部使用小写字母三、CSS选择器选择器的作用是选中页面中需要设置样式的HTML元素。3.1 基础选择器① 标签选择器以HTML标签名作为选择器为某一类标签统一设置样式。p{color:red;font-size:16px;}特点优点能快速为页面中同类型的标签统一设置样式缺点不能差异化选择只能选择全部当前标签示例!DOCTYPEhtmlhtmlheadstylep{color:red;font-size:18px;}/style/headbodypp1的文字/ppp2的文字/ppp3的文字/p/body/html② 类选择器最常用通过给HTML元素添加class属性在CSS中使用.来选中。使用步骤第一步在HTML标签中添加class属性divclassred这段文字是红色/div第二步在CSS中使用.类名定义样式.red{color:red;}命名规范类名以英文字母开头不要使用纯数字或中文长名称或词组使用中横线连接如nav-menu命名要有意义让人一眼就知道用途多类名使用一个标签可以同时拥有多个类名类名之间用空格隔开divclassred font20这段文字既是红色又是20号字/div.red{color:red;}.font20{font-size:20px;}实际开发场景将公共样式提取到一个类中各元素再调用自己的独有类既节省代码又方便维护。③ ID选择器通过给HTML元素添加id属性在CSS中使用#来选中。dividpink这段文字是粉色/div#pink{color:pink;}ID选择器 vs 类选择器对比项类选择器ID选择器符号.#使用次数可以多次使用每个页面只能使用一次多样式可以同时设置多个类不能同时设置多个ID常见用途设置样式一般与JavaScript配合使用!-- 类选择器可以多次使用正确 --spanclassstress胆小如鼠/spanspanclassstress勇气/span!-- ID选择器重复使用是错误的 --spanidstress错误示范/spanspanidstress错误示范/span④ 通配符选择器使用*选中页面中所有元素。*{margin:0;padding:0;}用途常用于清除浏览器默认的内外边距让页面样式从零开始。3.2 基础选择器对比总结选择器作用特点使用情况用法标签选择器选出所有相同标签不能差异化选择较多p { color: red; }类选择器选出1个或多个标签可以根据需求选择非常多.nav { color: red; }ID选择器一次只能选择1个标签每个ID只能出现一次一般和JS搭配#nav { color: red; }通配符选择器选择所有标签选择太多部分不需要特殊情况* { color: red; }3.3 复合选择器① 后代选择器空格选中某个元素内部的所有后代元素。/* 选中 .nav 内部所有的 li */.nav li{color:red;}ulclassnavli首页/lili关于我们ulli公司介绍/li!-- 也会被选中 --/ul/li/ul② 子选择器只选中某个元素的直接子元素。/* 只选中 .food 的直接子元素 li */.food li{border:1px solid red;}后代选择器 vs 子选择器只作用于元素的第一代后代直接子元素空格作用于元素的所有后代③ 并集选择器,同时为多个选择器设置相同的样式。/* 同时设置 h1 和 span 的文字颜色为红色 */h1, span{color:red;}/* 等价于 h1 { color: red; } span { color: red; } */④ 链接伪类选择器用于设置链接在不同状态下的样式。a:link{color:#333;}/* 未访问的链接 */a:visited{color:#999;}/* 已访问的链接 */a:hover{color:#ff6b6b;}/* 鼠标悬停时的链接 */a:active{color:green;}/* 鼠标点击时的链接 */简写技巧实际开发中通常只写a和a:hovera{color:#333;text-decoration:none;/* 去掉下划线 */}a:hover{color:#ff6b6b;text-decoration:underline;/* 悬停时显示下划线 */}⑤ :focus伪类选择器用于选中获得焦点的表单元素。input:focus{background-color:yellow;outline:none;/* 去掉默认的蓝色边框 */}四、CSS字体属性4.1 字体系列font-familyp{font-family:Microsoft YaHei,微软雅黑,Arial,sans-serif;}注意多个字体之间用英文逗号隔开有空格的字体名需要加引号浏览器会按顺序查找字体如果都没有则使用默认字体通常最后加上一个通用字体族如sans-serif作为后备4.2 字体大小font-sizep{font-size:16px;/* 常用单位px像素 */}注意谷歌浏览器默认文字大小为16px不同浏览器默认字号可能不一致建议给body指定明确大小4.3 字体粗细font-weightp{font-weight:700;/* 加粗等价于 bold */}span{font-weight:400;/* 正常等价于 normal */}属性值说明normal默认值不加粗等价于400bold定义粗体等价于700100~900400等同于normal700等同于bold数字后不跟单位4.4 文字样式font-stylep{font-style:italic;/* 斜体 */}em{font-style:normal;/* 不倾斜将斜体标签恢复正常 */}属性值说明normal默认值标准字体样式italic斜体 实际开发中更常做的是把em、i等斜体标签设置为normal而不是给正常文字加斜体。4.5 字体复合属性font可以将以上字体属性简写为一行body{font:font-style font-weight font-size/line-height font-family;}示例/* 展开写法 */div{font-style:italic;font-weight:700;font-size:16px;font-family:Microsoft YaHei;}/* 复合写法更简洁 */div{font:italic 700 16pxMicrosoft YaHei;}必须遵守的规则必须按照固定顺序书写不能更换顺序font-size和font-family必须同时出现缺一不可不需要设置的属性可以省略取默认值4.6 字体属性总结属性表示注意点font-size字号常用单位px必须带单位font-family字体按团队约定书写font-weight粗细700/bold加粗400/normal正常数字不带单位font-style样式italic倾斜normal正常font复合属性有固定顺序font-size和font-family必须同时出现五、CSS文本属性5.1 文本颜色colorp{color:red;/* 预定义颜色值 */color:#ff0000;/* 十六进制最常用 */color:#f00;/* 十六进制简写 */color:rgb(255,0,0);/* RGB代码 */}表示方式属性值说明预定义颜色值red,green,blue,pink直接使用颜色英文单词十六进制#FF0000,#FF6600,#29D794开发中最常用RGB代码rgb(255,0,0)红绿蓝三原色组合5.2 对齐文本text-alignh1{text-align:center;/* 居中对齐 */}p{text-align:left;/* 左对齐默认 */}span{text-align:right;/* 右对齐 */}属性值说明left左对齐默认值right右对齐center居中对齐5.3 装饰文本text-decorationa{text-decoration:none;/* 无装饰线最常用 */}p{text-decoration:underline;/* 下划线 */}del{text-decoration:line-through;/* 删除线 */}属性值说明none默认没有装饰线最常用用于去掉链接默认下划线underline下划线链接a自带下划线overline上划线几乎不用line-through删除线不常用5.4 文本缩进text-indentp{text-indent:2em;/* 首行缩进2个字符 */}em单位说明em是一个相对单位1em等于当前元素的font-size大小如果当前元素没有设置大小则按照父元素的1个文字大小使用2em可以实现段落首行缩进两个汉字的效果5.5 行间距line-heightp{line-height:26px;/* 行高为26像素 */line-height:1.5;/* 行高为字体大小的1.5倍 */}行高的组成行高 上间距 文字高度 下间距单行文字垂直居中技巧让line-height等于元素的高度文字就会垂直居中.box{height:40px;line-height:40px;/* 文字垂直居中 */}5.6 文本属性总结属性表示注意点color文本颜色常用十六进制简写如#ffftext-align文本对齐设定文字水平对齐方式text-indent文本缩进常用text-indent: 2em实现首行缩进text-decoration文本修饰underline添加下划线none取消下划线line-height行高控制行与行之间的距离六、CSS引入方式CSS有三种引入方式各有适用场景6.1 行内样式表内联式直接在HTML标签的style属性中写CSS。divstylecolor:red;font-size:12px;青春不常在/div特点书写方便权重最高结构与样式混写不推荐大量使用仅适合对当前元素添加简单样式6.2 内部样式表嵌入式将CSS代码写在HTML文件的style标签中。!DOCTYPEhtmlhtmlheadstylep{color:red;font-size:12px;}/style/headbodyp这是一段文字/p/body/html特点部分实现了结构与样式分离适合单个页面的样式设置练习时常用这种方式6.3 外部样式表链接式⭐推荐将CSS代码写在单独的.css文件中通过link标签引入。第一步创建style.css文件/* style.css */p{color:red;font-size:16px;}第二步在HTML中引入headlinkrelstylesheethrefstyle.css/headlink标签属性说明属性作用rel定义当前文档与被链接文档的关系必须指定为stylesheethref定义所链接外部样式表文件的路径特点完全实现结构与样式分离一个CSS文件可以被多个HTML页面共用方便维护和修改开发中最常用吐血推荐6.4 三种引入方式对比样式表优点缺点使用情况控制范围行内样式表书写方便权重高结构样式混写较少一个标签内部样式表部分分离未彻底分离较多一个页面外部样式表完全分离需要引入最多推荐多个页面七、综合案例美化新闻页面下面是一个完整的新闻页面示例综合运用本章所学知识HTML文件news.html!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title科技新闻 - 人工智能新突破/titlelinkrelstylesheethrefnews.css/headbodydivclasscontainerh1classtitle人工智能新突破GPT-5即将发布/h1pclasssubtitle发布时间2026-06-22 | 来源科技日报/pdivclasscontentp近日人工智能领域迎来重大突破。据知情人士透露下一代大语言模型GPT-5已经进入最后测试阶段预计将在今年第三季度正式发布。/pp据悉GPT-5在多个关键指标上实现了质的飞跃。在自然语言理解、代码生成、数学推理等方面性能较前代提升了约40%。特别是在多模态处理能力上GPT-5可以同时处理文本、图像、音频和视频等多种数据类型。/pp这将是一个里程碑式的进步某知名AI研究员表示GPT-5的出现可能会彻底改变我们与技术交互的方式。/p/divpclassfooter本文仅代表作者观点不代表本站立场。/p/div/body/htmlCSS文件news.css/* 清除默认样式 */*{margin:0;padding:0;box-sizing:border-box;}body{font-family:Microsoft YaHei,微软雅黑,sans-serif;background-color:#f5f5f5;line-height:1.6;}.container{width:800px;margin:50px auto;background-color:#fff;padding:40px;border-radius:8px;box-shadow:0 2px 10pxrgba(0,0,0,0.1);}.title{color:#333;font-size:28px;text-align:center;margin-bottom:15px;}.subtitle{color:#999;font-size:14px;text-align:center;margin-bottom:30px;border-bottom:1px solid #eee;padding-bottom:15px;}.content p{color:#555;font-size:16px;text-indent:2em;margin-bottom:15px;line-height:1.8;}.footer{color:#999;font-size:12px;text-align:center;margin-top:30px;padding-top:15px;border-top:1px solid #eee;}八、Chrome调试工具学会使用浏览器开发者工具是前端开发的基本功。打开方式快捷键F12或Ctrl Shift I右键点击页面 → 选择检查常用功能Elements元素面板查看和修改HTML/CSSConsole控制台查看JavaScript输出和错误Network网络面板查看请求和响应调试CSS小技巧点击元素可以查看其所有CSS样式可以直接在面板中修改样式实时预览效果修改后的样式不会保存到文件中需要手动复制到代码中九、CSS三大特性9.1 层叠性当多个选择器设置了相同的属性时后面的样式会覆盖前面的样式。p{color:red;}p{color:blue;/* 最终文字显示蓝色 */}9.2 继承性子元素会继承父元素的某些样式主要是文字相关的样式。body{color:red;font-size:16px;}/* body内的所有子元素都会继承红色文字和16px字号 */9.3 优先级当多个选择器选中同一个元素时优先级高的样式生效。优先级排序从高到低选择器权重行内样式1000ID选择器100类/伪类/属性选择器10标签选择器1通配符/继承0计算示例#nav .menu li{}/* 权重100 10 1 111 */.nav li{}/* 权重10 1 11 */li{}/* 权重1 */权重叠加但不会进位0,0,1,00,0,1,00,0,2,0而不是0,1,0,0。十、本章小结知识点核心内容CSS定义层叠样式表负责网页的外观美化基础选择器标签、类.、ID#、通配符*复合选择器后代空格、子代、并集,、伪类:字体属性font-family、font-size、font-weight、font-style、font复合文本属性color、text-align、text-indent、text-decoration、line-height引入方式行内式、嵌入式、外部链接式推荐三大特性层叠性、继承性、优先级如果本文对你有帮助欢迎点赞 、收藏 ⭐、关注专栏有问题欢迎在评论区交流讨论。
【JavaWeb】CSS基础入门 —— 让你的网页美起来
一、CSS是什么CSSCascading Style Sheets即层叠样式表是一种用于描述HTML文档外观和格式的样式语言。HTML与CSS的关系技术角色比喻HTML网页内容的载体人的骨架CSS网页样式的表现人的衣服、妆容JavaScript网页的交互行为人的动作、表情一句话总结HTML负责有什么CSS负责长什么样JavaScript负责能做什么。为什么需要CSS如果没有CSS网页是这样的h1这是一个标题/h1p这是一段文字/p所有文字都是默认的黑色、默认大小页面毫无美感。而有了CSSh1{color:#ff6b6b;font-size:32px;text-align:center;}p{color:#4ecdc4;font-size:18px;line-height:1.8;}页面立刻变得色彩丰富、层次分明核心理念HTML专注结构呈现CSS负责样式美化实现结构与样式相分离。二、CSS语法规范2.1 基本语法结构CSS规则由选择器和声明两部分组成选择器{属性:属性值;属性:属性值;}示例h1{color:red;/* 文字颜色为红色 */font-size:20px;/* 字体大小为20像素 */}语法要点选择器指向要设置样式的HTML元素每条声明由属性: 属性值组成属性和属性值之间用英文冒号:分隔多条声明之间用英文分号;分隔所有声明包裹在英文大括号{}中2.2 代码书写风格推荐/* 展开格式推荐 */h3{color:pink;font-size:20px;}/* 紧凑格式不推荐 */h3{color:pink;font-size:20px;}规范要求选择器和大括号之间保留一个空格属性值前面、冒号后面保留一个空格选择器、属性名、属性值关键字全部使用小写字母三、CSS选择器选择器的作用是选中页面中需要设置样式的HTML元素。3.1 基础选择器① 标签选择器以HTML标签名作为选择器为某一类标签统一设置样式。p{color:red;font-size:16px;}特点优点能快速为页面中同类型的标签统一设置样式缺点不能差异化选择只能选择全部当前标签示例!DOCTYPEhtmlhtmlheadstylep{color:red;font-size:18px;}/style/headbodypp1的文字/ppp2的文字/ppp3的文字/p/body/html② 类选择器最常用通过给HTML元素添加class属性在CSS中使用.来选中。使用步骤第一步在HTML标签中添加class属性divclassred这段文字是红色/div第二步在CSS中使用.类名定义样式.red{color:red;}命名规范类名以英文字母开头不要使用纯数字或中文长名称或词组使用中横线连接如nav-menu命名要有意义让人一眼就知道用途多类名使用一个标签可以同时拥有多个类名类名之间用空格隔开divclassred font20这段文字既是红色又是20号字/div.red{color:red;}.font20{font-size:20px;}实际开发场景将公共样式提取到一个类中各元素再调用自己的独有类既节省代码又方便维护。③ ID选择器通过给HTML元素添加id属性在CSS中使用#来选中。dividpink这段文字是粉色/div#pink{color:pink;}ID选择器 vs 类选择器对比项类选择器ID选择器符号.#使用次数可以多次使用每个页面只能使用一次多样式可以同时设置多个类不能同时设置多个ID常见用途设置样式一般与JavaScript配合使用!-- 类选择器可以多次使用正确 --spanclassstress胆小如鼠/spanspanclassstress勇气/span!-- ID选择器重复使用是错误的 --spanidstress错误示范/spanspanidstress错误示范/span④ 通配符选择器使用*选中页面中所有元素。*{margin:0;padding:0;}用途常用于清除浏览器默认的内外边距让页面样式从零开始。3.2 基础选择器对比总结选择器作用特点使用情况用法标签选择器选出所有相同标签不能差异化选择较多p { color: red; }类选择器选出1个或多个标签可以根据需求选择非常多.nav { color: red; }ID选择器一次只能选择1个标签每个ID只能出现一次一般和JS搭配#nav { color: red; }通配符选择器选择所有标签选择太多部分不需要特殊情况* { color: red; }3.3 复合选择器① 后代选择器空格选中某个元素内部的所有后代元素。/* 选中 .nav 内部所有的 li */.nav li{color:red;}ulclassnavli首页/lili关于我们ulli公司介绍/li!-- 也会被选中 --/ul/li/ul② 子选择器只选中某个元素的直接子元素。/* 只选中 .food 的直接子元素 li */.food li{border:1px solid red;}后代选择器 vs 子选择器只作用于元素的第一代后代直接子元素空格作用于元素的所有后代③ 并集选择器,同时为多个选择器设置相同的样式。/* 同时设置 h1 和 span 的文字颜色为红色 */h1, span{color:red;}/* 等价于 h1 { color: red; } span { color: red; } */④ 链接伪类选择器用于设置链接在不同状态下的样式。a:link{color:#333;}/* 未访问的链接 */a:visited{color:#999;}/* 已访问的链接 */a:hover{color:#ff6b6b;}/* 鼠标悬停时的链接 */a:active{color:green;}/* 鼠标点击时的链接 */简写技巧实际开发中通常只写a和a:hovera{color:#333;text-decoration:none;/* 去掉下划线 */}a:hover{color:#ff6b6b;text-decoration:underline;/* 悬停时显示下划线 */}⑤ :focus伪类选择器用于选中获得焦点的表单元素。input:focus{background-color:yellow;outline:none;/* 去掉默认的蓝色边框 */}四、CSS字体属性4.1 字体系列font-familyp{font-family:Microsoft YaHei,微软雅黑,Arial,sans-serif;}注意多个字体之间用英文逗号隔开有空格的字体名需要加引号浏览器会按顺序查找字体如果都没有则使用默认字体通常最后加上一个通用字体族如sans-serif作为后备4.2 字体大小font-sizep{font-size:16px;/* 常用单位px像素 */}注意谷歌浏览器默认文字大小为16px不同浏览器默认字号可能不一致建议给body指定明确大小4.3 字体粗细font-weightp{font-weight:700;/* 加粗等价于 bold */}span{font-weight:400;/* 正常等价于 normal */}属性值说明normal默认值不加粗等价于400bold定义粗体等价于700100~900400等同于normal700等同于bold数字后不跟单位4.4 文字样式font-stylep{font-style:italic;/* 斜体 */}em{font-style:normal;/* 不倾斜将斜体标签恢复正常 */}属性值说明normal默认值标准字体样式italic斜体 实际开发中更常做的是把em、i等斜体标签设置为normal而不是给正常文字加斜体。4.5 字体复合属性font可以将以上字体属性简写为一行body{font:font-style font-weight font-size/line-height font-family;}示例/* 展开写法 */div{font-style:italic;font-weight:700;font-size:16px;font-family:Microsoft YaHei;}/* 复合写法更简洁 */div{font:italic 700 16pxMicrosoft YaHei;}必须遵守的规则必须按照固定顺序书写不能更换顺序font-size和font-family必须同时出现缺一不可不需要设置的属性可以省略取默认值4.6 字体属性总结属性表示注意点font-size字号常用单位px必须带单位font-family字体按团队约定书写font-weight粗细700/bold加粗400/normal正常数字不带单位font-style样式italic倾斜normal正常font复合属性有固定顺序font-size和font-family必须同时出现五、CSS文本属性5.1 文本颜色colorp{color:red;/* 预定义颜色值 */color:#ff0000;/* 十六进制最常用 */color:#f00;/* 十六进制简写 */color:rgb(255,0,0);/* RGB代码 */}表示方式属性值说明预定义颜色值red,green,blue,pink直接使用颜色英文单词十六进制#FF0000,#FF6600,#29D794开发中最常用RGB代码rgb(255,0,0)红绿蓝三原色组合5.2 对齐文本text-alignh1{text-align:center;/* 居中对齐 */}p{text-align:left;/* 左对齐默认 */}span{text-align:right;/* 右对齐 */}属性值说明left左对齐默认值right右对齐center居中对齐5.3 装饰文本text-decorationa{text-decoration:none;/* 无装饰线最常用 */}p{text-decoration:underline;/* 下划线 */}del{text-decoration:line-through;/* 删除线 */}属性值说明none默认没有装饰线最常用用于去掉链接默认下划线underline下划线链接a自带下划线overline上划线几乎不用line-through删除线不常用5.4 文本缩进text-indentp{text-indent:2em;/* 首行缩进2个字符 */}em单位说明em是一个相对单位1em等于当前元素的font-size大小如果当前元素没有设置大小则按照父元素的1个文字大小使用2em可以实现段落首行缩进两个汉字的效果5.5 行间距line-heightp{line-height:26px;/* 行高为26像素 */line-height:1.5;/* 行高为字体大小的1.5倍 */}行高的组成行高 上间距 文字高度 下间距单行文字垂直居中技巧让line-height等于元素的高度文字就会垂直居中.box{height:40px;line-height:40px;/* 文字垂直居中 */}5.6 文本属性总结属性表示注意点color文本颜色常用十六进制简写如#ffftext-align文本对齐设定文字水平对齐方式text-indent文本缩进常用text-indent: 2em实现首行缩进text-decoration文本修饰underline添加下划线none取消下划线line-height行高控制行与行之间的距离六、CSS引入方式CSS有三种引入方式各有适用场景6.1 行内样式表内联式直接在HTML标签的style属性中写CSS。divstylecolor:red;font-size:12px;青春不常在/div特点书写方便权重最高结构与样式混写不推荐大量使用仅适合对当前元素添加简单样式6.2 内部样式表嵌入式将CSS代码写在HTML文件的style标签中。!DOCTYPEhtmlhtmlheadstylep{color:red;font-size:12px;}/style/headbodyp这是一段文字/p/body/html特点部分实现了结构与样式分离适合单个页面的样式设置练习时常用这种方式6.3 外部样式表链接式⭐推荐将CSS代码写在单独的.css文件中通过link标签引入。第一步创建style.css文件/* style.css */p{color:red;font-size:16px;}第二步在HTML中引入headlinkrelstylesheethrefstyle.css/headlink标签属性说明属性作用rel定义当前文档与被链接文档的关系必须指定为stylesheethref定义所链接外部样式表文件的路径特点完全实现结构与样式分离一个CSS文件可以被多个HTML页面共用方便维护和修改开发中最常用吐血推荐6.4 三种引入方式对比样式表优点缺点使用情况控制范围行内样式表书写方便权重高结构样式混写较少一个标签内部样式表部分分离未彻底分离较多一个页面外部样式表完全分离需要引入最多推荐多个页面七、综合案例美化新闻页面下面是一个完整的新闻页面示例综合运用本章所学知识HTML文件news.html!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title科技新闻 - 人工智能新突破/titlelinkrelstylesheethrefnews.css/headbodydivclasscontainerh1classtitle人工智能新突破GPT-5即将发布/h1pclasssubtitle发布时间2026-06-22 | 来源科技日报/pdivclasscontentp近日人工智能领域迎来重大突破。据知情人士透露下一代大语言模型GPT-5已经进入最后测试阶段预计将在今年第三季度正式发布。/pp据悉GPT-5在多个关键指标上实现了质的飞跃。在自然语言理解、代码生成、数学推理等方面性能较前代提升了约40%。特别是在多模态处理能力上GPT-5可以同时处理文本、图像、音频和视频等多种数据类型。/pp这将是一个里程碑式的进步某知名AI研究员表示GPT-5的出现可能会彻底改变我们与技术交互的方式。/p/divpclassfooter本文仅代表作者观点不代表本站立场。/p/div/body/htmlCSS文件news.css/* 清除默认样式 */*{margin:0;padding:0;box-sizing:border-box;}body{font-family:Microsoft YaHei,微软雅黑,sans-serif;background-color:#f5f5f5;line-height:1.6;}.container{width:800px;margin:50px auto;background-color:#fff;padding:40px;border-radius:8px;box-shadow:0 2px 10pxrgba(0,0,0,0.1);}.title{color:#333;font-size:28px;text-align:center;margin-bottom:15px;}.subtitle{color:#999;font-size:14px;text-align:center;margin-bottom:30px;border-bottom:1px solid #eee;padding-bottom:15px;}.content p{color:#555;font-size:16px;text-indent:2em;margin-bottom:15px;line-height:1.8;}.footer{color:#999;font-size:12px;text-align:center;margin-top:30px;padding-top:15px;border-top:1px solid #eee;}八、Chrome调试工具学会使用浏览器开发者工具是前端开发的基本功。打开方式快捷键F12或Ctrl Shift I右键点击页面 → 选择检查常用功能Elements元素面板查看和修改HTML/CSSConsole控制台查看JavaScript输出和错误Network网络面板查看请求和响应调试CSS小技巧点击元素可以查看其所有CSS样式可以直接在面板中修改样式实时预览效果修改后的样式不会保存到文件中需要手动复制到代码中九、CSS三大特性9.1 层叠性当多个选择器设置了相同的属性时后面的样式会覆盖前面的样式。p{color:red;}p{color:blue;/* 最终文字显示蓝色 */}9.2 继承性子元素会继承父元素的某些样式主要是文字相关的样式。body{color:red;font-size:16px;}/* body内的所有子元素都会继承红色文字和16px字号 */9.3 优先级当多个选择器选中同一个元素时优先级高的样式生效。优先级排序从高到低选择器权重行内样式1000ID选择器100类/伪类/属性选择器10标签选择器1通配符/继承0计算示例#nav .menu li{}/* 权重100 10 1 111 */.nav li{}/* 权重10 1 11 */li{}/* 权重1 */权重叠加但不会进位0,0,1,00,0,1,00,0,2,0而不是0,1,0,0。十、本章小结知识点核心内容CSS定义层叠样式表负责网页的外观美化基础选择器标签、类.、ID#、通配符*复合选择器后代空格、子代、并集,、伪类:字体属性font-family、font-size、font-weight、font-style、font复合文本属性color、text-align、text-indent、text-decoration、line-height引入方式行内式、嵌入式、外部链接式推荐三大特性层叠性、继承性、优先级如果本文对你有帮助欢迎点赞 、收藏 ⭐、关注专栏有问题欢迎在评论区交流讨论。
