前端秘法基础式(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>行也思君,&nbsp; 坐也思君</p>
</body>
</html>

二.CSS引入方式

1.内部样式表

写到style标签中,嵌入html内部

优点:可以使样式和页面结构分离

缺点:分离的不够彻底

引入方式参考上文

2.行内样式表

通过style属性来指定某个标签的样式,只适用于简单的设计,且优先级较高会覆盖其他的样式

<body><p style="color: aquamarine; font-size: 16px;">行也思君,&nbsp; 坐也思君</p>
</body>

3.外部样式

实际开发中最常用的样式,单独写一个.css文件,通过link链接

三.CSS选择器的种类

以下内容只是CSS2标准中支持的选择器

1.基础选择器(单个选择器构成的)

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

1.1类选择器

通过给标签一个class属性(可以是多个class属性,中间用空格连接,用于样式叠加),在css文件中,对于这个class进行样式选择

<p class="poem">行也思君,&nbsp; 坐也思君
</p>
<!--html文件-->
.poem{color:black;font-size: 20px;
}
<!--css文件-->

1.2id选择器

<p id="poem">行也思君,&nbsp; 坐也思君</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官方文档

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/472038.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《VulnStack》ATTCK-1

title: 《VulnStack》ATT&CK-1 date: 2024-01-29 14:53:49 updated: 2024-02-14 18:55:49 categories: WriteUp&#xff1a;Cyber-Range excerpt: 主机发现、端口扫描&#xff0c;服务探测&#xff0c;操作系统探测、nmap 漏洞库扫描、网站首页信息泄露、msf 渗透与信息收集…

题解37-42

101. 对称二叉树 - 力扣&#xff08;LeetCode&#xff09; 给你一个二叉树的根节点 root &#xff0c; 检查它是否轴对称。 示例 1&#xff1a; 输入&#xff1a;root [1,2,2,3,4,4,3] 输出&#xff1a;true示例 2&#xff1a; 输入&#xff1a;root [1,2,2,null,3,nul…

P1219 八皇后 (dfs 表格坐标关系)

一个正常的dfs&#xff08;数据范围1-13&#xff09;&#xff0c;发现一条对角线上&#xff0c;分别符合和与差相等。因为有负数&#xff0c;这里我最开始开的是map&#xff0c;发现卡了最后一个点TLE&#xff0c;记录一下时间复杂度&#xff08; map&#xff0c;set的时间复杂…

前端工程化面试题 | 09.精选前端工程化高频面试题

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

图像卷积、步长、填充、特征图、多通道卷积、权重共享、感受野、池化

图像卷积、步长、填充、特征图、多通道卷积、权重共享、感受野、池化 卷积神经网络的一些基本概念&#xff1a;图像卷积、步长、填充、特征图、多通道卷积、权重共享、感受野、池化 1.图像卷积、步长、填充 图像卷积&#xff1a;卷积核矩阵在一个原始图像矩阵上 “从上往下、…

MessageQueue --- RabbitMQ

MessageQueue --- RabbitMQ RabbitMQ IntroRabbitMQ 核心概念RabbitMQ 分发类型Dead letter (死信)保证消息的可靠传递 RabbitMQ Intro 2007年发布&#xff0c;是一个在AMQP&#xff08;高级消息队列协议&#xff09;基础上完成的&#xff0c;可复用的企业消息系统&#xff0c;…

35岁转行,是我人生中最正确的选择

前言 经常听到有人说&#xff0c;35岁是职场的分水岭&#xff0c;但我觉得我的35岁&#xff0c;人生才刚刚开始。 35岁前后&#xff0c;我生二胎&#xff0c;考研&#xff0c;跳槽&#xff0c;转行&#xff0c;从传统行业到服务业&#xff0c;从服务业到新能源行业&#xff0…

【简写MyBatis】01-简单映射器

前言 新开一个坑&#xff0c;为了学习一下MyBatis的源码&#xff0c;写代码是次要的&#xff0c;主要为了吸收一下其中的思想和手法。 目的 关联对象接口和映射类的问题&#xff0c;把 DAO 接口使用代理类&#xff0c;包装映射操作。 知识点 动态代理简单工厂模式Invocati…

嵌入式Linux平台大文件生成以及处理方法

在日常工作中&#xff0c;为了验证某些场景下的功能&#xff0c;经常需要人为构造一些大文件进行测试&#xff0c;有时需要用大文件来测试下载速度&#xff0c;有时需要用大文件来覆盖磁盘空间&#xff1b;偶尔会看到一些网络博文会教大家如何构造大文件&#xff1b;但是当需要…

大整数因数分解工具——yafu

一、安装 yafu--下载链接 二、配置环境变量&#xff0c;直接从cmd打开 1.找到yafu-x64.exe 所在的文件路径 2.点击设置——系统——系统信息——高级系统设置——环境变量——点击PATH&#xff08;上下都可以&#xff09;——新建 添加yafu-x64.exe 所在路径——点击确定 3…

《Go 简易速速上手小册》第1章:Go 语言基础(2024 最新版)

文章目录 1.1 Go 语言的安装与环境配置1.1.1 基础知识讲解案例 Demo&#xff1a;简单的 Go 程序 1.1.2 重点案例&#xff1a;搭建一个 Go Web 服务准备工作步骤 1&#xff1a;创建项目目录步骤 2&#xff1a;编写 Web 服务代码步骤 3&#xff1a;运行你的 Web 服务步骤 4&#…

迟到的2023年终总结

前言 转眼间就进入工作的第三年了&#xff0c;过去的一年&#xff0c;过的格外的快。回身一想&#xff0c;也确实&#xff0c;毕竟有半年都是在值班室度过的&#xff0c;五六场HW演练&#xff0c;从春夏交接忙到到秋冬交接。但生活绝不只有工作&#xff0c;工作只是为了更好的…