本文主要是介绍前端秘法基础式(CSS)(第一卷)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一.认识CSS
CSS 指的是层叠样式表（Cascading Style Sheets），它是一种用于描述网页外观和布局的语法
CSS 可以定义网页中元素的字体、颜色、大小、位置、背景等样式，使网页具有美观的外观和统
一的风格。
通过将 CSS 样式表与 HTML 文档关联起来，可以实现对网页样式的控制和管理。CSS 的优点
在于它可以实现网页样式的分离，使得 HTML 主要负责网页的结构和内容，而 CSS 则专注于样式
定义，提高了代码的复用性和维护性。
例如，以下是一个简单的 CSS 规则：
p {
color: red;
font-size: 16px;
}上述规则将使所有 <p> 标签中的文本颜色变为红色，字体大小为 16 像素。通过这种方式，可以
方便地为整个网站或特定页面应用一致的样式。
CSS 还支持各种选择器，如类选择器、ID 选择器、元素选择器等，以便更精确地定位和样式化特
定的 HTML 元素。同时，CSS 还提供了一些高级特性，如媒体查询，可以根据不同的设备或屏幕
尺寸应用不同的样式。
<!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>p{color: aqua;font: 16px;}</style>
</head>
<body><p>行也思君, 坐也思君</p>
</body>
</html>
二.CSS引入方式
1.内部样式表
写到style标签中,嵌入html内部
优点:可以使样式和页面结构分离
缺点:分离的不够彻底
引入方式参考上文
2.行内样式表
通过style属性来指定某个标签的样式,只适用于简单的设计,且优先级较高会覆盖其他的样式
<body><p style="color: aquamarine; font-size: 16px;">行也思君, 坐也思君</p>
</body>3.外部样式
实际开发中最常用的样式,单独写一个.css文件,通过link链接
三.CSS选择器的种类
以下内容只是CSS2标准中支持的选择器
1.基础选择器(单个选择器构成的)
- 标签选择器
- 类选择器
- id选择器
- 通配符选择器
1.1类选择器
通过给标签一个class属性(可以是多个class属性,中间用空格连接,用于样式叠加),在css文件中,对于这个class进行样式选择
<p class="poem">行也思君, 坐也思君
</p>
<!--html文件-->
.poem{color:black;font-size: 20px;
}
<!--css文件-->
1.2id选择器
<p id="poem">行也思君, 坐也思君</p>
#poem{color:black;font-size: 20px;
}
1.3通配符选择器
在实际应用开发中用来针对页面中所有元素默认样式进行消除,主要用来消除边距
*{background-color: beige; }
2.复合选择器(把多种选择器综合运用起来)
- 后代选择器
- 子选择器
- 并集选择器
- 伪类选择器
2.1后代选择器
又叫包含选择器,选择某个父元素中的某个子元素
父级元素 子级元素{
.....
}
只影响被选择的子级元素
<style>ol li{color: blue;}</style>
2.2伪类选择器
链接伪类选择器
a:link选择未被访问过的链接
a:visited选择已被访问过的链接
a:hover选择鼠标指针悬停上的链接
a:active选择活动链接(鼠标按下但未弹起)
a换成input也可以哦
具体可以参考w3c官方文档
这篇关于前端秘法基础式(CSS)(第一卷)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
