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

视频网站开发浙江企业网站建设

wzjs 2025/7/31 2:23:24

视频网站开发,浙江企业网站建设,网站建设微信营销,杭州做网站外包公司CSS（层叠样式表）是网页设计的核心语言之一，它让我们的网页从单调的结构变得生动美观。今天，我将带大家快速了解CSS的基础知识，包括基本概念、引入方式、选择器、字体与文本样式以及调试工具的使用。 1. CSS基本概念 …

CSS（层叠样式表）是网页设计的核心语言之一，它让我们的网页从单调的结构变得生动美观。今天，我将带大家快速了解CSS的基础知识，包括基本概念、引入方式、选择器、字体与文本样式以及调试工具的使用。

1. CSS基本概念

1.1 认识CSS

CSS全称为"层叠样式表"(Cascading Style Sheets)，它的主要作用是为HTML标签设置样式，控制网页的外观表现。

网页开发有三大核心：

结构：HTML（决定了身体骨架）
表现：CSS（决定了样式美观）
行为：JavaScript（决定了交互动态效果）

1.2 CSS引入方式

CSS有三种主要引入方式，各有适用场景：

引入方式	书写位置	作用范围	使用场景
内嵌式	`<style>`标签中	当前页面	小案例、快速测试
外联式	单独的.css文件，通过`<link>`引入	多个页面	实际项目开发
行内式	标签的style属性中	当前标签	配合JS动态修改样式

实例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css引入</title><link rel="stylesheet" href="css/index.css"><style>h1{color: green;}</style>
</head>
<body>
<!--内嵌式-->
<h1>标题1</h1>
<!--外联式-->
<h2>标题1</h2>
<!--行内式-->
<h3 style="color: red">标题1</h3>
</body>
</html>

h2{color: #d44b81;
}

项目结构视图：

运行结果：

2. 基础选择器

选择器是CSS的核心，用于指定哪些元素应用样式。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基础选择器</title><style>/*  1.1 标签选择器（复用性）*//*结构：标签名 { css属性名：属性值； }*//*作⽤范围：对引入页面的同类标签有效*/h2 {/*字体为红色*/color: red;!important;font-size: 50px;}/*1.2 类选择器*//*    结构：.类名 { css属性名：属性值； }*//*    作⽤范围：对引入的页面的同class类名有效*/.myh2 {/*字体为天蓝色*/color: #0be4d5;font-size: 40px;}/*2.3 id选择器（唯一性）*//*    结构：#id属性值 { css属性名：属性值； }*//*    作⽤范围：对引入的页面的指定id名称有效有效*/#subTitle {/*字体为蓝色*/color: blue;font-size: 30px;}/*2.4、*通用选择器 *//*    结构：*{ css属性名：属性值； }*//*    作⽤：对引入页面的所有标签有效*/*{/*字体为绿色*/color: #19ff32;font-size: 20rpx;}</style>
</head>
<body>
<!--字体为天蓝色：说明类选择器的权重大于标签选择器-->
<h2 class="myh2">标签选择器</h2>
<!--字体为蓝色：说明id选择器的权重大于标签选择器和类选择器-->
<h2 id="subTitle" class="myh2">id选择器</h2>
<!--字体为红色，说明通用选择器的权重小于标签选择器，权重最低-->
<h2 >通用选择器</h2>
</body>
</html>

运行结果：

总结：

2.1 标签选择器（复用性）：权重第三结构：标签名 { css属性名：属性值； }作⽤范围：对引入页面的同类标签有效
2.2 类选择器:权重第二结构：.类名 { css属性名：属性值； }作⽤范围：对引入的页面的同class类名有效
2.3 id选择器（唯一性）：权重最高结构：#id属性值 { css属性名：属性值； }作⽤范围：对引入的页面的指定id名称有效有效
2.4、*通用选择器:权重最低结构：*{ css属性名：属性值； }作⽤：对引入页面的所有标签有效
2.5、优先级别：
!important>id选择器>类选择器>标签选择器>通用选择器

3. 字体与文本样式

3.1 字体样式

（1）字体⼤⼩：font-size----值：数字+px
（2）字体粗细：font-weight---值：normal不加粗，bold加粗
（3）字体样式：font-style---值：normal不倾斜，italic倾斜
（4）字体类型：font-family---谷歌浏览器默认字体为思源黑体，值："字体名称（系统已经安装的字体）"

实例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>字体与文字样式</title><style>h1{font-weight: normal;font-size: 100px;}p {/*字体大小*/font-size: 50px;/*字体粗细：bold加粗，normal正常*/font-weight: bold;/*字体样式：italic倾斜，normal正常*/font-style: italic;/*设置字体：谷歌浏览器默认字体为思源黑体，值："字体名称（系统已经安装的字体）"*/font-family: "方正舒体";}i{/*斜体字变为正常字体*/font-style: normal;font-size: 50px;}</style>
</head>
<body><h1 align="center">春</h1>
<p>盼望着，盼望着，东风来了，春天的脚步近了。</p>
<p>一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。</p>
<p>小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。</p>
<p>桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味；闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿。花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的， 没名字的，散在花丛里，像眼睛，像星星，还眨呀眨的。 “吹面不寒杨柳风”，不错的，像母亲的手抚摸着你。风里带来些新翻的泥土的气息，混着青草味，还有各种花的香，都在微微润湿的空气里酝酿。鸟儿将窠巢安在繁花嫩叶当中，高兴起来了，呼朋引伴地卖弄清脆的喉咙，唱出宛转的曲子，与轻风流水应和着。牛背上牧童的短笛，这时候也成天在嘹亮地响着。</p>
<p>雨是最寻常的，一下就是三两天。可别恼。看，像牛毛，像花针，像细丝，密密地斜织着，人家屋顶上全笼着一层薄烟。树叶子却绿得发亮，小草也青得逼你的眼。傍晚时候，上灯了，一点点黄晕的光，烘托出一片安静而和平的夜。在乡下，小路上，石桥边，有撑起伞慢慢走着的人；还有地里工作的农夫，披着蓑，戴着笠的。他们的草屋，稀稀疏疏的在雨里静默着。</p>
<p>天上风筝渐渐多了，地上孩子也多了。城里乡下，家家户户，老老小小，他们也赶趟儿似的，一个个都出来了。舒活舒活筋骨，抖擞抖擞精神，各做各的一份事去。“一年之计在于春”；刚起头儿，有的是工夫，有的是希望。</p>
<p>春天像刚落地的娃娃，从头到脚都是新的，他生长着。</p>
<p>春天像小姑娘，花枝招展的，笑着，走着。</p>
<p>春天像健壮的青年，有铁一般的胳膊和腰脚，他领着我们上前去。</p>
<i>我是斜体字标签！</i>
</body>
</html>

运行结果：

3.2 文本样式

 ⽂本样式：（1）⽂本缩进：text-indent---缩进两个字符大小2em(1em=亲父级)（2）⽂本⽔平对⻬⽅式：text-align---值：left,right,center（3）⽂本修饰：text-decoration---值：underline下划线,none不添加下划线（4）line-height⾏⾼：①直接数字，表示的是倍数关系②数字+px：表示的是具体行高

实例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文本样式属性</title><style>p{/*em是相对单位，相当于父元素的字体大小，默认为16px*，2em表示的是缩进两个字符*/text-indent: 2em;/*text-indent: 32px;*//*设置行高为1.5倍*/line-height: 1.5;}body {font-size:20px;}h1{/*⽂本⽔平对⻬⽅式：left,right,center*/text-align: center;/*文本修饰：underline下划线 none正常*/text-decoration: underline;}a{text-decoration: underline;}</style>
</head>
<body>
<h1>春</h1>
<p>盼望着，盼望着，东风来了，春天的脚步近了。</p>
<p>一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。</p>
<p>小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。</p>
<p>桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味；闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿。花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的， 没名字的，散在花丛里，像眼睛，像星星，还眨呀眨的。 “吹面不寒杨柳风”，不错的，像母亲的手抚摸着你。风里带来些新翻的泥土的气息，混着青草味，还有各种花的香，都在微微润湿的空气里酝酿。鸟儿将窠巢安在繁花嫩叶当中，高兴起来了，呼朋引伴地卖弄清脆的喉咙，唱出宛转的曲子，与轻风流水应和着。牛背上牧童的短笛，这时候也成天在嘹亮地响着。</p>
<p>雨是最寻常的，一下就是三两天。可别恼。看，像牛毛，像花针，像细丝，密密地斜织着，人家屋顶上全笼着一层薄烟。树叶子却绿得发亮，小草也青得逼你的眼。傍晚时候，上灯了，一点点黄晕的光，烘托出一片安静而和平的夜。在乡下，小路上，石桥边，有撑起伞慢慢走着的人；还有地里工作的农夫，披着蓑，戴着笠的。他们的草屋，稀稀疏疏的在雨里静默着。</p>
<p>天上风筝渐渐多了，地上孩子也多了。城里乡下，家家户户，老老小小，他们也赶趟儿似的，一个个都出来了。舒活舒活筋骨，抖擞抖擞精神，各做各的一份事去。“一年之计在于春”；刚起头儿，有的是工夫，有的是希望。</p>
<p>春天像刚落地的娃娃，从头到脚都是新的，他生长着。</p>
<p>春天像小姑娘，花枝招展的，笑着，走着。</p>
<p>春天像健壮的青年，有铁一般的胳膊和腰脚，他领着我们上前去。</p>
<i>我是斜体字！</i>
<a href="https://www.baidu.com/index.htm" target="_blank">百度一下</a>
</body>
</html>

运行结果：

3.4 颜色表示（综合文字和文本样式）

CSS有多种颜色表示方式：

表示方式	示例	说明
关键词	`red`, `blue`	预定义颜色名
RGB	`rgb(255,0,0)`	红绿蓝三原色
RGBA	`rgba(255,0,0,0.5)`	带透明度的RGB
十六进制	`#ff0000` 或 `#f00`	常用网页色表示

颜⾊：（1）⽂字颜⾊：color（2）背景颜⾊：background-color(3)颜色表示方式：①关键字（颜色单词）：red black blue green white②rgb(三原色：红绿蓝)：rgb(255,255,255)白色 rgb(255,0,0)红色 rgb(0,0,0)黑色③rgba(三原色+透明度)：rgba(255,0,0,0,0.5),rgba(255,0,0,0)④十六进制：#6位数字或者#3位数字#ff0000红色，#00ff00绿色，#0000ff蓝色，#000000黑色，ffffff白色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>字体与文字样式</title><style>h1{font-weight: normal;font-size: 100px;}p {font-size: 50px;font-weight: bold;font-style: italic;font-family: "方正舒体";text-indent: 100px;text-align: left;text-decoration: #efc3d3;line-height: 1;/* ine-height : 1 可以取消上下间距 */color: #da6c9b;background-color: beige;}i{font-style: normal;font-size: 50px;}</style>
</head>
<body><h1 align="center">春</h1>
<p>盼望着，盼望着，东风来了，春天的脚步近了。</p>
<p>一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。</p>
<p>小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。</p>
<p>桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味；闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿。花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的， 没名字的，散在花丛里，像眼睛，像星星，还眨呀眨的。 “吹面不寒杨柳风”，不错的，像母亲的手抚摸着你。风里带来些新翻的泥土的气息，混着青草味，还有各种花的香，都在微微润湿的空气里酝酿。鸟儿将窠巢安在繁花嫩叶当中，高兴起来了，呼朋引伴地卖弄清脆的喉咙，唱出宛转的曲子，与轻风流水应和着。牛背上牧童的短笛，这时候也成天在嘹亮地响着。</p>
<p>雨是最寻常的，一下就是三两天。可别恼。看，像牛毛，像花针，像细丝，密密地斜织着，人家屋顶上全笼着一层薄烟。树叶子却绿得发亮，小草也青得逼你的眼。傍晚时候，上灯了，一点点黄晕的光，烘托出一片安静而和平的夜。在乡下，小路上，石桥边，有撑起伞慢慢走着的人；还有地里工作的农夫，披着蓑，戴着笠的。他们的草屋，稀稀疏疏的在雨里静默着。</p>
<p>天上风筝渐渐多了，地上孩子也多了。城里乡下，家家户户，老老小小，他们也赶趟儿似的，一个个都出来了。舒活舒活筋骨，抖擞抖擞精神，各做各的一份事去。“一年之计在于春”；刚起头儿，有的是工夫，有的是希望。</p>
<p>春天像刚落地的娃娃，从头到脚都是新的，他生长着。</p>
<p>春天像小姑娘，花枝招展的，笑着，走着。</p>
<p>春天像健壮的青年，有铁一般的胳膊和腰脚，他领着我们上前去。</p>
<i>我是斜体字！</i>
</body>
</html>

运行结果：

4.综合练习

通过css和HTML完成一下平衡车效果图：

示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>盒子属性</title><style>div{width: 234px;height: 300px;background-color: #ffffff;text-align: center;}.myimge{width: 160px;}.a{font-size: 14px;line-height: 25px;}.b{font-size: 12px;line-height: 30px;color: #cccccc;}.c{font-size: 14px;color: #ffa500;}</style>
</head>
<body>
<div><img src="imges/nine.jpg" class="myimge"><br><p class="a">九号平衡车</p><p class="b">成年人的玩具</p><p class="c">1999元</p>
</div>
</body>
</html>

运行结果: