当前位置：首页 > news >正文

前端2.0

news 2025/9/27 6:06:34

一、什么是CSS

1.0 定义

2.0 基本语法规范

3.0 引入方式

(1)内部样式表

(2)行内样式表

(3)外部样式

4.0 选择器

5.0常用CSS

6.0Chrome调试工具--查看css属性

7.0 代码案例

(1)实现一个广告板

(2)实现一个百度热榜

一、什么是CSS

1.0 定义

层叠样式表页面样式和结构分离(美颜技术）

html是大体的页面布局

2.0 基本语法规范

选择器+{一条/n条声明}

通常style在head里

3.0 引入方式

(1)内部样式表

写在style标签中，嵌入到html内部（哪里都可以但一般在head中）

样式和页面结构分离但是分离不够彻底

將css嵌套到html頁面中但是如果特别多就有点繁杂

控制台 control F搜索在页面源码搜索关键字

(2)行内样式表

通过style 来指定某个标签的样式只适合于写简单样式，只针对某个标签有效

不能写太复杂的样式

行内里面 <h1 style=“ font-size= "80" ”>

行内样式表比内部样式表优先级高如果出现冲突以行内样式表的内容为主

(3)外部样式

实际开发中最常用的方式

创建一个css文件使用link标签引入css

stylesheet是一个样式表 href是地址

样式和结构彻底分离了修改后不一定立刻生效

4.0 选择器

基础选择器复合选择器其他（参考文档 CSS 选择器参考手册）

(1)标签选择器元素名大括号

(2)id选择器给元素起名字 <div id="div1 "></div> #div1 { color:red}

(3)class选择器类选择器 <div class="fong40"></div> 可以重复起 .font40{ font-size:40px}

(4)通配符选择器 *{color : red}

(5)复合选择器 #div1，#div2{color ：red} 逗号表示取的是并集 ul li 表示ul下面的li标签的渲染

甚至可以ul标签下的li标签下的a标签写法是：ul li a{color：red}

甚至可以 ul标签小的li标签里面的 class ul .first{color：red}

5.0常用CSS

CSS：层叠样式表 | MDN w3school 在线教程 css样式的介绍

(1) color 表示方式：英文单词 rbg（三原色）十六进制

(2)font-size 字体大小默认是16px

(3)border 复合属性可以同时设置多个样式

(4)width/height

(5) 内边距 padding 外边距margin 相对而言（相对路径绝对路径的感觉）

6.0Chrome调试工具--查看css属性

打开方式 f12 鼠标右键-->检查

标签页含义：elements 查看标签结构 console控制台 network 前后端交互过程

7.0 代码案例

(1)实现一个广告板

先写页面布局

开始美化设置边框的颜色

最终代码和效果图：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 308px;height:204px;border: #d8d8d8 solid 2px;}.title{border-bottom: 2px dotted #000;padding-top:40px;padding-left:40px;}.item{font-size:16px;flood-color:#d8d8d8;padding-left: 25px;line-height: 28px;padding-top:10px;}</style>
</head>
<body><div class="box"><div class="title">广告板</div><divc class="content"><div class="item">赔钱甩卖，全场一律八折优惠</div><div class="item">赔钱甩卖，全场一律八折优惠</div><div class="item">赔钱甩卖，全场一律八折优惠</div><div class="item">赔钱甩卖，全场一律八折优惠</div></divc></div>
</body>
</html>

(2)实现一个百度热榜

下面是效果图和代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.col-1{}.col-2{width:20%;text-align: center;}.col-2{width:20%;text-align: center;}.col-2{width:20%;text-align: center;}.icon{background-imag:url(./refresh.png);width:24px;height:24px;background-size:100% 100%;display:inline-block;vertical-align:bootom;}.content{font-size:18px;line-height:40px;}.content.col-1, .content.col-2{border-bottom:2px solid #f3f3f3;}.num{font-size:20px;color:#fffff3;}.first{background-color: #f54545;padding-right:8px;}.second{background-color: #ff8547;padding-right:8px;}.third{background-color: #ffac38;padding-right:8px;}.forth{background-color: #8eb9f5;padding-right:8px;}</style>
</head>
<body><table cellspcing="0px"><th class="title col-1">千度热榜</th><th class="title col-2"><a href=#"">换一换<span class="icon"></span></a></th><tr class="content"><td class="col-1"><span class="num first">1</span><a href="#">小茂密小茂密小茂密小茂密</a></td><td class="col-2">445万</td> </tr><tr class="content"><td class="col-1"><span class="num second">2</span><a href="#">中茂密中茂密中茂密中茂密</a></td><td class="col-2">445万</td> </tr><tr class="content"><td class="col-1"><span class="num third">3</span><a href="#">大茂密大茂密大茂密大茂密</a></td><td class="col-2">445万</td> </tr><tr class="content"><td class="col-1"><span class="num forth">4</span><a href="#">略略略略略略略略略略略略</a></td><td class="col-2">445万</td> </tr></table>
</body>
</html>

感谢大家的支持