天涯论坛

 找回密码
 立即注册
搜索
查看: 82|回复: 2

CSS 认识一下

[复制链接]

2964

主题

144

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99139409
发表于 2024-6-30 11:08:03 | 显示全部楼层 |阅读模式

CSS 认识一下。

1、CSS 的哪些

CSS(Cascading Style Sheets)译「层叠样式表」,我的理解是:各样样式叠加的表。

一个网页,倘若 CSS,便是穿着“国王的新衣”,在裸奔!CSS 的要紧不问可知

做为 HTML 的衣服,CSS 为 HTML 元素供给了一种样式描述,定义其表示方式,TA 能够对网页中元素进行像素级精确掌控

CSS 的历史不做太多赘述,先认识几种引入方式以及其区别。

2、外边样式

外边样式指的是单独创立一个扩展名为 .css 的样式表,在 head 标签中采用 link 方式引入,能够运用 import 方式引入:

// link 引入 <link rel="stylesheet" type="text/css" href="css/style.css" /> // @import 引入 <style type="text/css"> @import url("css/style.css"); </style>

引入外边样式的好处便是,一个样式表能够在多个页面中复用,墙裂建议运用 link 方式引入,import 新手慎用。

3、内嵌样式

内嵌样式重点经过 <style> 标签在页面中编辑样式:

<style> .title { color: red } </style>

办法编写的样式仅在当前页面有效,法用于其他页面,<style>标签能够放在任意位置,意见放在 head 中。

4、行内样式

行内样式是在 HTML 页面中的某个元素上直接对其直接定义,以 p 元素为例:

<p style="color: red"></p>

行内样式只对其所在的标签生效,实质上写页面时意见少用不消

引用样式最好是采用第1种 link 方式引入,分离 HTML 页面代码与 CSS 样式,方便项目的守护管理,以及加强 CSS 样式的复用性。

其他两种办法少用不消尽可能降低页面的的繁杂性。

5、CSS 选取

HTML 页面中的元素样式大大都是经过 CSS 选取器进行掌控的。

想要用 CSS 对 HTML 页面中的元素实现一对一,一对多多对一的掌控,离不开 CSS 选取器。

CSS 的选取器大概有这些:

通用选取器标签选取器class 选取器(类选取器)id 选取器后代选取器子代选取器组合选取器相邻兄弟选取器伪类选取媒介查找(姑且算吧)

还有有些可能漏掉了,欢迎留言弥补,先复盘有些平常选取器。

5.1 通用选取

通用选取器用 * 开头,后面直接跟上样式,功效于所有标签,暗示通用定义。

就好比定义所有正一般人:一个头、两只手、两条腿。

例:

* { font-size: 18px; color: red }

这儿暗示所有标签中的字体体积为 18px,颜色为红色。

5.2 标签选取

标签选取能够选中所有的同类标签元素,标签后面直接跟上样式。

好比规定学生穿校服,区别工厂的工人有对应的工服。

例:

p { font-size: 16px; color: blue }

这儿暗示所有 p 标签中的字体体积为 16px,颜色为蓝色。

5.3 class 选取器(类选取器)

class 选取能够选中带有特定类名的标签进行样式定义,便是一对多,书写时以 . 开头,跟上 class 名叫作而后编写样式,在对应的标签中用 class="" 引用。

好比分配一个班级的班干部,给予她们同一类属性。

例:

// css 样式 .title{ bac公斤round-color: red } // html 页面 <div class="title">语文课表率</div> <div class="title">数学课表率</div>

这儿就能把两个课表率的背景颜色都设置成红色,一对多设置。

5.4 id 选取

id 选取器以 # 开头,后面跟上 id 名,而后书写样式。在对应的标签中运用 id="" 引用,其 id 名拥有独一性。

以一个学校为例,定义校长的属性,一个学校仅有一个校长。

例:

// css 样式 #title{ bac公斤round-col




上一篇:什么是CSS和CSS3
下一篇:技术分享 | Web测试办法与技术之CSS讲解
回复

使用道具 举报

3063

主题

3万

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99139046
发表于 2024-10-15 08:27:47 | 显示全部楼层
认真阅读了楼主的帖子,非常有益。
回复

使用道具 举报

3126

主题

3万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99108615
发表于 2024-10-26 22:51:56 | 显示全部楼层
外贸B2B平台有哪些?
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|天涯论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-23 13:05 , Processed in 0.106320 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.