前往小程序,Get更优阅读体验!
立即前往
发布
社区首页 >专栏 >CSS 让网页动起来:美化与布局的终极指南

CSS 让网页动起来:美化与布局的终极指南

作者头像
Yui_
发布2024-12-20 09:02:33
发布2024-12-20 09:02:33
2040
举报
文章被收录于专栏:Yui编程知识

🏠大家好,我是Yui_,目标成为全栈工程师~💬 🍑如果文章知识点有错误的地方,请指正!和大家一起学习,一起进步👀 🚀如有不懂,可以随时向我提问,我会全力讲解~ 🔥如果感觉博主的文章还不错的话,希望大家关注、点赞、收藏三连支持一下博主哦~! 🔥你们的支持是我创作的动力! 🧸我相信现在的努力的艰辛,都是为以后的美好最好的见证! 🧸人的心态决定姿态! 💬欢迎讨论:如有疑问或见解,欢迎在评论区留言互动。 👍点赞、收藏与分享:如觉得这篇文章对您有帮助,请点赞、收藏并分享! 🚀分享给更多人:欢迎分享给更多对编程感兴趣的朋友,一起学习!

1.什么是CSS

CSS(Cascading Style Sheets,层叠样式表)是用于控制网页样式和布局的语言。它可以让开发者轻松地设计网页的外观,从而提升用户体验和视觉吸引力。 如果以拍照来举例,HTML就是一张未经处理的额原相片,而CSS就是PS,可以美化HTML设计的框架。 那么CSS的具体核心作用就明晰了。

2. CSS的核心作用

  1. 美化网页
  • 通过设置字体、颜色、边框等样式,使网页更美观。
  • 例如:可以让一个按钮从普通的矩阵变成具有渐变色和圆角的精美设计。

2.控制布局

  • 定义元素如何排列在页面上,如居中,网格布局,弹性布局等。
  • 例如:可以轻松实现响应式布局,让网页在手机和电脑上都能完美显示。

3.分离内容与样式

  • HTML 专注于内容和结构,CSS 专注于样式和外观。两者分离使代码更 理解完什么是CSS和CSS的核心作用,那么改该怎么使用CSS呢?也就是说CSS的语法是什么?

3. CSS的基本语法

代码语言:javascript
复制
选择器{
	属性:值;
}

CSS通过选择器选择HTML元素,并为这些元素应用样式规则。

  • 选择器:指定设置样式的HTML元素。
  • 属性:定义要修改的样式,如颜色、字体大小。
  • 值:属性的具体设置。 了解完以上的内容,就可以开始CSS代码的编写了

4. CSS的简单使用

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        h1{
            color: blue;
        }
    </style>
    <h1>我是一个标题</h1>
</body>
</html>

可以看到我是一个标题变成了蓝色,这就是CSS的作用。可以看到,笔者在这段代码中将CSS代码写在style标签中,除此之外,CSS还有两种使用方式,也就是说CSS有三种使用方式。

4.1 CSS的3种使用方式

  1. 内部样式 将样式写在HTML的<style>内,也就是前文写的那样,适用于单个页面的样式。
代码语言:javascript
复制
<style>
	h1{
		color: blue;
	}
</style>
  1. 行内样式 样式直接写在HTML元素的style属性中,适合简单的样式设置。
代码语言:javascript
复制
<h1 style="color:blue;">我是一个标题</h1>
  1. 外部样式表 将样式写在独立的.css文件中,通过<link>标签引入,适用于多页面共享样式。
代码语言:javascript
复制
h1{
	color:blue;
}

在html文件中添加以下内容

代码语言:javascript
复制
<link rel="stylesheet"> href="路径">

具体如下:

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css02.css">
</head>
<body>
    <h1>我是一个标题</h1>
</body>
</html>

3种方法的优缺点

  1. 内部样式表 优点:可以使得样式和页面分离。 缺点:分离的不够彻底,尤其是css内容多的时候。
  2. 行内样式表 优点:优先级高。 缺点:不能写的太复杂,优先较高,会覆盖其他样式。
  3. 外部样式 优点:样式和结构彻底分离。 缺点:受到浏览器影响,修改后不一定立即生效。 读者可能会发现,如果每次都以标签名作为作为选择器。那么它的作用范围是不是太大了,在实际的操作中,往往有大量的相同标签存在,为此接下来,笔者会讲解选择器。

5. 选择器的种类

选择器的功能:选择页面中指定的标签元素。

5.1 基础选择器

基础选择器是由单个选择器构成的。 其中基础选择器又可以分为:

  • 标签选择器
  • 类选择器
  • id选择器
  • 通配符选择器
5.1.1 标签选择器

优点:快速把同一类型的标签都选择出来。 缺点:不能做到差异化选择。

代码语言:javascript
复制
<style>
	p{
		color: pink;
	}
	div{
		color: white;
	}
</style>
<p>关注永雏塔菲喵~<p>
<p>关注永雏塔菲喵~<p>
<p>关注永雏塔菲喵~<p>
<div>关注星瞳送溜溜梅~</div>
<div>关注星瞳送溜溜梅~</div>
<div>关注星瞳送溜溜梅~</div>
5.1.2 类选择器

特点:

  • 差异化表达不同的标签。
代码语言:javascript
复制
<style>
	.white{
		color: white;
	}
</style>
<div class="white">关注星瞳送溜溜梅~</div>
<div class="white">关注星瞳送溜溜梅~</div>
<div class="white">关注星瞳送溜溜梅~</div>

关于语法:

  • 使用类选择器,需要在类名前加上.
  • 下方的标签,需要添加类属性。
  • 一个类可以被多个标签使用,一个标签也可以使用多个类(多个类名使用空格分割)
  • 不要使用纯数字、中文、标签名来命名类。
5.1.3 id选择器

使用上和类选择器相同

代码语言:javascript
复制
<style>
	#blue{
		color: blue;
	}
</style>
<div id="blue">
	你好
</div>

特点:

  • CSS中使用#开头来表达id选择器。
  • id选择器的值和html标签中的id相同。
  • id是唯一得的,不能被多个标签使用 加粗的字体是和类选择器最大的区别。 如果要比喻的话,类就是人的姓名可以重复,id就是身份证不能重复。
5.1.4 通配符选择器

使用*,选取所有的标签。

代码语言:javascript
复制
*{
	color:red;
}

页面的所有内容都会变为红色

了解完基础选择器后,笔者用一个表格来总结一下基础选择器

基础选择器

作用

特点

标签选择器

选择所有相同标签

不能做到差异

类选择器

选择所有相同类

可以差异化选择

id选择器

选择一个id

同一个id在html中只能出现一次

通配符选择器

选择所有标签

全选,比较特殊

5.2 复合选择器

复合选择器也分为几类,分别为:

  • 后代选择器
  • 子选择器
  • 并集选择器
  • 伪类选择器
5.2.1 后代选择器

后代选择器又名包含选择器,作用是选择父元素中的某个子元素。 语法:

代码语言:javascript
复制
元素1 元素2{
	样式声明;
}

元素1是父集,元素2是子级。 演示:

代码语言:javascript
复制
<style>
	ul li{
		color: pink;
	}
</style>
<ul>
	<li>你好</li>
	<li>谢谢</li>
	<li>小笼包</li>
	<li>再见</li>
</ul>

其实后代选择器,不仅可以选择子代还可以选择孙代。

代码语言:javascript
复制
<style>
	ol li a{
		color: aqua;
	}
</style>
<ol>
	<li>
		<a href="https://blog.csdn.net/2303_79015671?spm=1000.2115.3001.5343">主页链接</a>
	</li>
</ol>

除此之外,还可以和基础选择器搭配使用

代码语言:javascript
复制
<style>
	.aqua li #xixi{
		color: aqua;
	}
</style>
<ol class="aqua">
	<li>
		<a id="xixi" href="https://blog.csdn.net/2303_79015671?spm=1000.2115.3001.5343">主页链接</a>
	</li>
</ol>
5.2.2 子选择器

后代选择的子集,只能选择子标签。 语法:

代码语言:javascript
复制
元素1>元素2{
	样式声明;
}

只能选亲儿子 因为子选择器拥有更加严格的限制,以下代码伪例:

代码语言:javascript
复制
    <style>
        ul a{
            color: pink;
        }
    </style>
    <ul>
        <li>
            前面忘了
        </li>
        <a href="https://blog.csdn.net/2303_79015671?spm=1000.2115.3001.5343">中间忘了</a>
        <li>
            <a href="https://blog.csdn.net/2303_79015671?spm=1000.2115.3001.5343">后面忘了</a>
        </li>
    </ul>

上述代码使用的后代选择器,最后的两行列表都标选择了。

代码语言:javascript
复制
    <style>
        ul>a{
            color: pink;
        }
    </style>
    <ul>
        <li>
            前面忘了
        </li>
        <a href="https://blog.csdn.net/2303_79015671?spm=1000.2115.3001.5343">中间忘了</a>
        <li>
            <a href="https://blog.csdn.net/2303_79015671?spm=1000.2115.3001.5343">后面忘了</a>
        </li>
    </ul>

使用子选择器的话,就只选择到了中间列表。 注意,子选择器也可以和基础选择器搭配

5.2.3 并集选择器

用于选择多组标签 语法:

代码语言:javascript
复制
元素1,
元素2{
	样式声明;
}
  • 用逗号分割。
  • 可以搭配基础选择器。
  • 写法上建议一个元素占一行,如上。
代码语言:javascript
复制
    <style>
        h1,
        div{
            color: red;
        }
    </style>
    <h1>漫画推荐</h1>
    <div>
        <span>浪客行</span>
    </div>
    <div>
        <span>剑风传奇</span>
    </div>
    <div>
        <span>冰海战记</span>
    </div>
5.2.4 伪类选择器

伪类选择器可以分为两种:

  • 链接伪类选择器
  • force伪类选择器
  1. 链接伪类选择器

a:link 选择未被访问的链接。 a:visited 选择已经被访问的链接。 a:hover 选择鼠标悬停的链接。 a:active 选择活动链接(鼠标按下了却未弹起)

代码语言:javascript
复制
    <style>
        a:link{
            color: white;
            text-decoration: none;
            /*去除下划线*/
        }
        a:visited{
            /* 显示为粉色 */
            color: pink;
        }
        a:hover{
            /* 当鼠标停在链接上方时变为绿色 */
            color:green;
        }
        a:active{
            /* 鼠标点击时变为蓝色 */
            color: blue;
        }
        
    </style>
    <a href="https://blog.csdn.net/2303_79015671?spm=1000.2115.3001.5343">我是一个链接哦~~~</a>

注意:

  • 浏览器的a标签都有默认样式,一遍实际开发需要单独定制样式。
  • 实际开发主要给链接做一个样式,然后给hover做一个样式即可,link、visited、active用的不多。
  • 使用伪类链接选择器时,选哟安装LVHA顺序书写,也就是link、visited、hover,active的顺序。
  1. force伪类选择器 作用:选取获取焦点的input表单元素。
代码语言:javascript
复制
    <style>
        #haha>input:focus{
            color: green;
        }
    </style>
    <div id="haha">
        <input type="text"><br/>
        <input type="text">
    </div>

当选中文本框时,数据会变为绿色

了解完复合选择器后,笔者用一个表格来总结一下复合选择器

复合选择器

作用

注意事项

后代选择器

选择后代元素

可以是孙子元素

子选择器

选择子元素

只能选亲儿子

并集选择器

选择多组标签

做到代码重用

链接伪类选择器

选择不同状态的链接

注意顺序

focuse伪类选择器

选择被选中的元素

6. 总结

CSS 是前端开发中的关键技术,它通过定义样式和布局,让网页从单调的内容堆叠变为精美的用户界面。无论是颜色、字体,还是布局和动画,CSS 提供了无穷的可能性,让开发者可以充分发挥创造力。学习 CSS 不仅是掌握语法,更是理解设计的艺术。在实际开发中,通过灵活运用选择器、盒模型、响应式设计等核心概念,你可以轻松实现兼具美观与实用的网页。未来,随着 CSS 新特性的不断发展,它将继续为网页设计注入更多活力。掌握 CSS,是你走向前端开发世界的重要一步! 此外关于CSS常用元素属性会在以后的文章中更新,如果你已经迫不及待了可以去CSS参考手册中学习你想要实现的属性。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-12-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.什么是CSS
  • 2. CSS的核心作用
  • 3. CSS的基本语法
  • 4. CSS的简单使用
    • 4.1 CSS的3种使用方式
  • 5. 选择器的种类
    • 5.1 基础选择器
      • 5.1.1 标签选择器
      • 5.1.2 类选择器
      • 5.1.3 id选择器
      • 5.1.4 通配符选择器
    • 5.2 复合选择器
      • 5.2.1 后代选择器
      • 5.2.2 子选择器
      • 5.2.3 并集选择器
      • 5.2.4 伪类选择器
  • 6. 总结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档