🏠大家好,我是Yui_,目标成为全栈工程师~💬 🍑如果文章知识点有错误的地方,请指正!和大家一起学习,一起进步👀 🚀如有不懂,可以随时向我提问,我会全力讲解~ 🔥如果感觉博主的文章还不错的话,希望大家关注、点赞、收藏三连支持一下博主哦~! 🔥你们的支持是我创作的动力! 🧸我相信现在的努力的艰辛,都是为以后的美好最好的见证! 🧸人的心态决定姿态! 💬欢迎讨论:如有疑问或见解,欢迎在评论区留言互动。 👍点赞、收藏与分享:如觉得这篇文章对您有帮助,请点赞、收藏并分享! 🚀分享给更多人:欢迎分享给更多对编程感兴趣的朋友,一起学习!
CSS(Cascading Style Sheets,层叠样式表)是用于控制网页样式和布局的语言。它可以让开发者轻松地设计网页的外观,从而提升用户体验和视觉吸引力。 如果以拍照来举例,HTML就是一张未经处理的额原相片,而CSS就是PS,可以美化HTML设计的框架。 那么CSS的具体核心作用就明晰了。
2.控制布局
3.分离内容与样式
选择器{
属性:值;
}
CSS通过选择器选择HTML元素,并为这些元素应用样式规则。
<!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有三种使用方式。
<style>
内,也就是前文写的那样,适用于单个页面的样式。<style>
h1{
color: blue;
}
</style>
style
属性中,适合简单的样式设置。<h1 style="color:blue;">我是一个标题</h1>
.css
文件中,通过<link>
标签引入,适用于多页面共享样式。h1{
color:blue;
}
在html文件中添加以下内容
<link rel="stylesheet"> href="路径">
具体如下:
<!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种方法的优缺点
选择器的功能:选择页面中指定的标签元素。
基础选择器是由单个选择器构成的。 其中基础选择器又可以分为:
优点:快速把同一类型的标签都选择出来。 缺点:不能做到差异化选择。
<style>
p{
color: pink;
}
div{
color: white;
}
</style>
<p>关注永雏塔菲喵~<p>
<p>关注永雏塔菲喵~<p>
<p>关注永雏塔菲喵~<p>
<div>关注星瞳送溜溜梅~</div>
<div>关注星瞳送溜溜梅~</div>
<div>关注星瞳送溜溜梅~</div>
特点:
<style>
.white{
color: white;
}
</style>
<div class="white">关注星瞳送溜溜梅~</div>
<div class="white">关注星瞳送溜溜梅~</div>
<div class="white">关注星瞳送溜溜梅~</div>
关于语法:
.
使用上和类选择器相同
<style>
#blue{
color: blue;
}
</style>
<div id="blue">
你好
</div>
特点:
#
开头来表达id选择器。使用*
,选取所有的标签。
*{
color:red;
}
页面的所有内容都会变为红色
了解完基础选择器后,笔者用一个表格来总结一下基础选择器
基础选择器 | 作用 | 特点 |
---|---|---|
标签选择器 | 选择所有相同标签 | 不能做到差异 |
类选择器 | 选择所有相同类 | 可以差异化选择 |
id选择器 | 选择一个id | 同一个id在html中只能出现一次 |
通配符选择器 | 选择所有标签 | 全选,比较特殊 |
复合选择器也分为几类,分别为:
后代选择器又名包含选择器,作用是选择父元素中的某个子元素。 语法:
元素1 元素2{
样式声明;
}
元素1是父集,元素2是子级。 演示:
<style>
ul li{
color: pink;
}
</style>
<ul>
<li>你好</li>
<li>谢谢</li>
<li>小笼包</li>
<li>再见</li>
</ul>
其实后代选择器,不仅可以选择子代还可以选择孙代。
<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>
除此之外,还可以和基础选择器搭配使用
<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>
后代选择的子集,只能选择子标签。 语法:
元素1>元素2{
样式声明;
}
只能选亲儿子 因为子选择器拥有更加严格的限制,以下代码伪例:
<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>
上述代码使用的后代选择器,最后的两行列表都标选择了。
<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>
使用子选择器的话,就只选择到了中间列表。 注意,子选择器也可以和基础选择器搭配
用于选择多组标签 语法:
元素1,
元素2{
样式声明;
}
<style>
h1,
div{
color: red;
}
</style>
<h1>漫画推荐</h1>
<div>
<span>浪客行</span>
</div>
<div>
<span>剑风传奇</span>
</div>
<div>
<span>冰海战记</span>
</div>
伪类选择器可以分为两种:
a:link 选择未被访问的链接。 a:visited 选择已经被访问的链接。 a:hover 选择鼠标悬停的链接。 a:active 选择活动链接(鼠标按下了却未弹起)
<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>
注意:
link、visited、hover,active
的顺序。 <style>
#haha>input:focus{
color: green;
}
</style>
<div id="haha">
<input type="text"><br/>
<input type="text">
</div>
当选中文本框时,数据会变为绿色
了解完复合选择器后,笔者用一个表格来总结一下复合选择器
复合选择器 | 作用 | 注意事项 |
---|---|---|
后代选择器 | 选择后代元素 | 可以是孙子元素 |
子选择器 | 选择子元素 | 只能选亲儿子 |
并集选择器 | 选择多组标签 | 做到代码重用 |
链接伪类选择器 | 选择不同状态的链接 | 注意顺序 |
focuse伪类选择器 | 选择被选中的元素 | 无 |
CSS 是前端开发中的关键技术,它通过定义样式和布局,让网页从单调的内容堆叠变为精美的用户界面。无论是颜色、字体,还是布局和动画,CSS 提供了无穷的可能性,让开发者可以充分发挥创造力。学习 CSS 不仅是掌握语法,更是理解设计的艺术。在实际开发中,通过灵活运用选择器、盒模型、响应式设计等核心概念,你可以轻松实现兼具美观与实用的网页。未来,随着 CSS 新特性的不断发展,它将继续为网页设计注入更多活力。掌握 CSS,是你走向前端开发世界的重要一步! 此外关于CSS常用元素属性会在以后的文章中更新,如果你已经迫不及待了可以去CSS参考手册中学习你想要实现的属性。