全栈之前端 | 1.CSS3必备基础知识学习

5824d97f40f2ffb804b3a8adc4c50484.jpeg

0c60c6c7b47f443d6ca98d5a0edcfd5a.gif

关注回复【学习交流群】加入【安全开发运维】答疑交流群

请朋友们【多多点击文中的广告】,支持作者更新更多文章


目录:

b8252dcedad6bb8b3c150583c8f0b909.png


0x00 前言简述

描述: 前面跟随着WeiyiGeeker作者【全栈工程师修炼指南】公众号一起学习了前端基础的知识以及HTML标签、属性、事件、字符集系列教程等相信大家已经有了一些基础了吧,此处再跟随着作者快速学习CSS系列教程吧。

e8aeb6c8af6a5d8ef54c79ad2e4bcfa2.png

CSS 背景

简述: HTML 标签原本被设计为用于定义文档内容, 通过使用 <h1>、<p>、<table>这样的标签,HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息, 同时文档布局由浏览器来完成,而不使用任何的格式化标签。

背景:初期由于两种主要的浏览器(Netscape 和 Internet Explorer)不断地将新的 HTML 标签和属性(比如字体标签和颜色属性)添加到 HTML 规范中,创建文档内容清晰地独立于文档表现层的站点变得越来越困难。

为了解决这个问题,万维网联盟(W3C),这个非营利的标准化联盟,肩负起了 HTML 标准化的使命,并在 HTML 4.0 之外创造出样式(Style),所有的主流浏览器均支持层叠样式表(CSS), 样式表定义如何显示 HTML 元素, 样式通常保存在外部的 .css文件中,通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观

由于允许同时控制多重页面的样式和布局,CSS 可以称得上 WEB 设计领域的一个突破,作为网站开发者,你能够为每个 HTML 元素定义样式,并将之应用于你希望的任意多的页面中。

CSS 概述

什么是 CSS?

答: 和 HTML 类似,CSS 也不是真正的编程语言,甚至不是标记语言,CSS 层叠样式表(Cascading Style Sheets) 是一种用于描述网页的样式和布局的标记语言, 用来描述 HTML 或 XML(包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言)文档的呈现。
总之,CSS是一种强大的样式表语言,能够使网页的外观更加美观和统一,提升用户的浏览体验。

CSS 用来干什么?
描述: 前文提到过,CSS 是用来指定文档如何展示给用户的一门语言,它可用于控制网页的屏幕/字体、颜色、间距、背景、边框等外观样式,以及元素的位置、大小和布局等渲染成什么样子。

例如, 下面我们来看一个简单的CSS示例。

<style>body {/* 字体颜色 */color: white;/* 背景颜色 */background-color: black; /* 定制边框 */border: 1px solid green;/* 使用的字体 */font-family: "Gill Sans", sans-serif;}
</style>

CSS 版本说明
描述: 当前 CSS 是开放 Web 的核心语言之一,并根据 W3C 规范在 Web 浏览器中进行了标准化,以前 CSS 规范的各个部分的开发是同步进行的,这种方式允许对最新推荐的 CSS 版本进行控制,你可能已经听说过 CSS1、CSS2.1 甚至 CSS3(当前主流), 现在都是统称为 CSS 。

CSS 有何特点?

描述: CSS(层叠样式表)具有以下特点:

  • 分离内容和样式:CSS将网页的内容和样式分离开来,使得网页的结构更加清晰,易于维护和修改。通过将样式定义在独立的CSS文件中,可以在多个页面中共享样式,提高代码的重用性。

  • 层叠性:当多个样式规则应用到同一个元素时,CSS会根据优先级和样式的特殊性来决定最终生效的样式。这种层叠性使得开发者可以方便地覆盖和修改样式,灵活地控制网页的外观。

  • 选择器和属性-值对:CSS使用选择器来选择需要样式化的HTML元素,并通过属性-值对来设置样式。选择器可以根据元素的标签名、类名、ID等来进行选择,从而实现对不同元素的不同样式设置。属性-值对则用于指定具体的样式,比如颜色、字体大小、边框样式等。

  • 继承性:CSS支持继承性,即某些样式会自动应用到元素的后代元素上。通过设置父元素的样式,可以让所有子元素都继承这些样式,减少了重复的样式定义,简化了代码。

  • 浏览器兼容性:CSS是一种标准化的样式语言,几乎所有的现代浏览器都支持CSS。开发者可以使用CSS来实现跨浏览器的一致样式,确保网页在不同浏览器中的显示效果一致。

总之,有了CSS页面才能渲染呈现出更加多姿多彩的页面,给使用者带来良好的视觉效果以及使用感受。

如何学习CSS ?

描述: 学习CSS的过程可以分为以下几个步骤:

  • 理解基本概念:首先了解CSS的基本概念和术语,比如选择器、属性、值等。可以通过阅读教程或者相关书籍来获得这些知识。

  • 掌握语法规则:学习CSS的语法规则,了解如何使用选择器来选择HTML元素,并为其添加样式。了解CSS属性和值的用法,以及如何使用样式表来组织和管理样式。

  • 实践练习:通过实际的练习来巩固所学知识。可以尝试创建简单的网页,并为其中的元素添加样式。也可以参考一些在线的练习平台或者项目来提升技能。

  • 深入学习:掌握基础知识后,可以深入学习CSS的高级特性和技巧,比如响应式布局、动画效果等。可以参考一些高级的教程或者专业书籍来进一步提升自己的技能。

  • 持续学习和实践:CSS是一个不断发展的技术,新的特性和技巧不断涌现。因此,持续学习和实践是非常重要的。可以关注一些CSS相关的博客、社区或者论坛,了解最新的动态和分享,同时也可以参与到开源项目中,与其他开发者交流和学习。

总之,学习CSS需要理论与实践相结合,通过不断练习和实践来提升自己的技能。

如何在HTML中使用 CSS?

描述: 下面是一个简单的CSS层叠样式表的示例, 通过内部样式表方式:

<!-- HelloWorld.html -->
<head><title>简单的CSS层叠样式表的示例</title><style>/* 选择器 */h1 {color: blue; /* 属性-值对 */font-size: 24px;}p {color: red;font-size: 16px;}/* 属性继承,类选择器 */.container {font-family: Arial, sans-serif;}/* 优先级 */.special {color: green !important; /* 使用!important可以提高优先级 */}
</style>
</head>
<body><h1>我是h1标签显示标题</h1><p class="container" >我是p标签显示文本段落</p><p class="special">我是p标签显示文本段落, 颜色会被覆盖</span>
</body>

执行结果:

42f314626cb782cac0aaac87a35732b8.png


0x01 基础语法

CSS 规则集

描述: 前面我们已经简单的使用了CSS,此时可能你并不了解其如何绑定到我们的HTML标签中,使之根据我们编写的CSS进行渲染, 所以此章节将主要介绍CSS规则及格式。

CSS 规则由两个主要的部分构成:选择器(Selector),以及一条或多条声明(Declaration) 整个结构称为规则集(规则集通常简称规则)例如

/* # 语法  */
/* # 方式1.写在一行 */
selector {declaration1[Property:PropertyValue]; declaration2; ... declarationN }
/* # 方式2.多重声明 */
selector {declaration1[Property:PropertyValue];declaration2;... declarationN;
}/* # 示例 */
p { color:red;font-weight:10px; }  
p { color: red;font-weight: 10px;
}

规则集名称及基础语法说明:

  • 选择器(Selector) :HTML 元素的名称位于规则集开始,它选择了一个或多个需要添加样式的元素(本示例中使用的是 <p> 元素).

  • 声明(Declaration): 一个单独的规则包含一个或者多个Properties: PropertyValue键,如 color: red; 用来指定添加样式元素的属性.

    属性(Properties) : 改变 HTML 元素样式的途径(本例中 color 就是 <p>元素的属性), CSS 中有大量的CSS属性并且存在有对应值.
    属性的值(Property value): 在属性的右边冒号后面即属性的值,它从指定属性的众多外观中选择一个值(本示例中指定 red 为 color 属性的值 ).

  • 在每个规则集都应该包含在成对的大括号里({}).

  • 在每个声明里要用冒号(:)将属性与属性值分隔开.

  • 在每个规则集里要用分号(;)将各个声明分隔开.

2128f8beb4efb9498536cf1d22959aa6.png

CSS 多重声明
描述: 如果CSS要定义不止一个声明,则需要用分号将每个声明分开,并若使用上面方式2进行换行表示时,多重声明应在属性与值之间使用空格分隔开,使得样式表更容易被编辑, 例如:

p {/* 位置 */text-align: center;/* 颜色 */color: black;/* 字体 */font-family: arial;
}
温馨提示: 虽然 CSS 对大小写不敏感,但是如果涉及到与 HTML 文档一起工作的话 class 和 id 属性名称对大小写是敏感的,从而CSS中选择元素时也要对应大小写。

CSS 注释设置

描述: 在 CSS 中采用/* 注释内容*/格式进行CSS的单行多行注释。

<style media="screen" type="text/css">h1 {/* css 单行注释 *//* css 多行注释1css 多行注释2*/background-color: #000000;}
</style>

CSS 尺寸单位

描述: 在网页样式常常会遇到需要设置 CSS 长度的属性有 width, margin, padding, font-size, border-width 等, 所以 CSS 有几个不同的单位用于表示长度,划分为两种类型的长度单位即相对长度绝对长度

语法格式:
长度有一个数字和单位(之间不能出现空格)组成, 例如 10px, 2em 等,若长度值为 0 则可以省略单位,在某些CSS属性是支持负数表示(了解即可)。

相对长度单位
描述: 相对长度单位指定了一个长度相对于另一个长度的属性,适用于不同的设备样式长度的设置。

  • em: 它是描述相对于应用在当前元素的字体尺寸,所以它也是相对长度单位。一般浏览器字体大小默认为1em ==16px2em == 32px;

  • ex: 依赖于英文字母小 x 的高度

  • %: 百分比

  • ch : 数字 0 的宽度

  • rem : 是根 em(root em)的缩写,rem作用于非根元素时,相对于根元素字体大小;rem作用于根元素字体大小时,相对于其出初始字体大小。

  • vw : Viewport Width,视窗宽度,1vw=视窗宽度的1%。

  • vh : Viewport Height,视窗高度,1vh=视窗高度的1% 。

  • vmin : vw和vh中较小的那个。

  • vmax : vw和vh中较大的那个。

Q: rem与em有什么区别呢?

区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。

绝对长度单位
描述: 绝对长度单位是一个固定的值,它反应一个真实的物理尺寸,绝对长度单位视输出介质而定,不依赖于环境(显示器、分辨率、操作系统等), 所以通常响应式布局不建议采用绝对长度单位。
cm : 厘米
mm: 毫米
in : 英寸 (1in = 96px = 2.54cm)
px * : 像素 (1px = 1/96th of 1in)
pt : point,大约1/72英寸;(1pt = 1/72in = 96/72 px)
pc : pica,大约 12pt,1/6英寸;(1pc = 12 pt = 12/72in = 1152/72 px)

温馨提示: 像素或许被认为是最好的"设备像素",而这种像素长度和你在显示器上看到的文字屏幕像素无关, px实际上是一个按角度度量的单位

CSS 字体颜色

描述: CSS 中最常见的就是设置文本的字体以及颜色,此小节作者总结了Web中常见或通用安全字体,以及颜色的各种设置格式。

字体属性:
描述: CSS 中font-family属性是多种字体的名称,作为一个"应变"制度,以确保浏览器/操作系统之间的最大兼容性,如果浏览器不支持的第一个字体,它不断尝试下一个的字体, 例如p{font-family:"Times New Roman", Times, serif}

Web安全字体组合与通用的字体系列:

  • Serif 字体:

    Georgia, serif
    "Palatino Linotype", "Book Antiqua", Palatino, serif
    "Times New Roman", Times, serif

  • sans - serif字体:

    Arial, Helvetica, sans-serif
    Arial Black, Gadget, sans-serif
    "Comic Sans MS", cursive, sans-serif
    Impact, Charcoal, sans-serif
    "Lucida Sans Unicode", "Lucida Grande", sans-serif
    Tahoma, Geneva, sans-serif
    "Trebuchet MS", Helvetica, sans-serif
    Verdana, Geneva, sans-serif

  • Monospace 字体:

    "Courier New", Courier, monospace
    "Lucida Console", Monaco, monospace

4d503ff4d2437b7985843a891f159ca4.png

文本颜色:
描述: 颜色是由红(RED),绿(GREEN),蓝(BLUE )光线的显示结合,简称三原色。

在CSS中通常是使用十六进制(hex)表示法最低值是0(十六进制00)到最高值是255(十六进制FF),通常以3个双位数字的十六进制值写法,以#符号开始,例如:黑色 - #000000 。

理论上CSS是支持设置1600多万不同的颜色(256 × 256 ×256),现代大多数显示器能够显示至少16384种颜色。

温馨提示: 灰阶代表了由最暗到最亮之间不同亮度的层次级别,为了使您更容易选择合适的灰色,编制了灰色色调的表, 即rgb值一致以8的倍数:#000000 rgb(0,0,0) -> #080808 rgb(8,8,8) -> ... -> #FFFFFF rgb(255,255,255)

CSS 中color颜色属性值的不同写法和单位:

  • 十六进制颜色:#RRGGBB、#RGB , 所有值必须介于0和FF之间

  • RGB(红,绿,蓝)颜色: RGB(255,255,255) 所有值在0和255之间或一个百分比值(从0%到100%)之间的整数。

  • RGBA(红,绿,蓝,alpha)颜色: rgba(255,0,0,0.5) , Alpha 参数是一个介于0.0(完全透明)和1.0(完全不透明)之间的参数。

  • HSL(色调,饱和度,明度)颜色: hsl(120,65%,75%); , 色相是在色轮上的程度(从0到360)-0(或360)是红色的,120是绿色的,240是蓝色的, 饱和度是一个百分比值;0%意味着灰色和100%的阴影,是全彩, 亮度也是一个百分点;0%是黑色的,100%是白色的。

  • HSLA(色调,饱和度,亮度,α)颜色: hsla(120,65%,75%,0.3),Alpha参数是一个介于0.0(完全透明)和1.0(完全不透明)之间的参数。

  • 预定义/跨浏览器的颜色名称

示例演示:

/* 常规方式:颜色名称与十六进制、十六进制缩写表示 */
p { color: red; }
p { color: #ff0000; }
p { color: #f00; }/* 使用rgb、rgba表示 */
p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }
p { color: rgba(100%,0%,0%,0.5); } /* 带0.5的透明样式 *//* 使用hsl、hsla表示 */
p{ background-color:hsl(120,65%,75%); } 
p{ background-color:hsla(120,65%,75%,0.3); }  /* 带0.3的透明样式 */

温馨提示: 当使用 RGB 百分比时,即使当值为 0 时也要写百分比符号,但是在其他的情况下就不需要这么做了

温馨提示:

  • Web网络安全色:最开始计算机支持最大256个不同的颜色,一个216"网络安全颜色"列表被建议作为Web标准,保留了40个固定的系统颜色, 按照 #000000 按照 33 进行累加可得。

  • Web网络17种标准颜色:浅绿色,黑色,蓝色,紫红色,灰色,灰色,绿色,石灰,栗色,海军,橄榄,紫,红,银,蓝绿色,白色和黄色

参考地址: https://www.runoob.com/cssref/css-colornames.html


偷偷的告诉你哟?极客全栈修炼】微信小程序已开放

可直接在微信里面直接浏览博主文章哟,后续将上线更多有趣的小工具。


CSS 编码设置

描述: 我们可使用@charset关键字针对CSS文件进行编码设置,.CSS文件utf-8gb2312互转换方法,注意转换后注意其文件格式是否一致,否则中文注释便会乱码。

/* style.css */
/* # 设置 编码为 UTF-8 */
@charset "utf-8";/* # 设置 编码为 GB2312 */
@charset "gb2312";

CSS 引入方式

描述: CSS样式可以通过内联样式(Inline style)内部样式表(Internal style sheet)外部样式表(External style sheet)三种方式来应用到HTML文档中。

1.内联样式表:

内联样式直接在HTML元素的style属性中指定样式,当特殊的样式需要应用到个别元素时,就可以使用内联样式。

<!-- /* 内联样式表 */ -->
<!-- 示例1.如何使用样式属性做一个没有下划线的链接 -->
<p style="text-align:left;color:white;background-color:red;font-family:宋体;font-size:20px">左对齐文字段落</p><!-- 示例2.如何使用样式属性做一个没有下划线的链接 -->
<a href="#hellocss" style="text-decoration:none">这是一个链接!</a>

2.内部样式表:

内部样式表则通过在HTML文档的<head>标签内使用 <style> 标签来定义样式, 当单个文件需要特别样式时,就可以使用内部样式表。

<head>
<style type="text/css">/* 内部样式表 */h1{         font-size:12px;color:#930;text-align:center;}
</style>
</head>

3.外部样式表

外部样式表则是将所有样式定义在一个独立的CSS文件中,并通过 <link> 标签将其引入到HTML文档中, 当样式需要被应用到很多页面的时候,外部样式表将是理想的选择,例如:style.css 样式文件里面也有类似与上 h1{css} 样式.

<head> <!-- 绝对路径 --><link rel="stylesheet" type="text/css" href="/css/style.css" ><!-- 相对路径 --><link rel="stylesheet" type="text/css" href="./css/style.css" ><!-- URL引入方式 --><link rel="stylesheet" type="text/css" href="https://weiyigeek.top/css/style.css" /><link rel="stylesheet" type="text/css" href="https://weiyigeek.top/css/style.css" media="print" />
</head>
<body><h1>我通过外部样式表进行格式化。</h1><p>俺,也一样!</p>
</body>

温馨提示:多重样式将层叠为一个样式表允许以多种方式规定样式信息,样式可以规定在单个的 HTML 元素中,在 HTML 页的头元素中,或在一个外部的 CSS 文件中, 甚至可以在同一个 HTML 文档内部引用多个外部样式表。

当同一个 HTML 元素被不止一个样式定义(多重样式)时,会使用哪个样式呢?

描述: 一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权(优先级)!!
浏览器缺省设置 < 外部样式表 < 内部样式表(位于 <head> 标签内部) < 内联样式(在 HTML 元素内部) < 声明 !important;
因此,在无!important;关键字的样式表,其内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明 <head> 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。

CSS 选择器

描述: 前面的示例中知识介绍了元素选择器用来选择 HTML 文档中给定的元素, CSS使用选择器来选择需要样式化的HTML元素,并通过属性-值(指定具体的样式,比如颜色、字体大小、边框样式等)对来设置样式, 从而实现对不同元素的不同样式设置。。

选择器是什么?

答: CSS 选择器是 CSS 规则的第一部分,它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式, 选择器所选择的元素,叫做"选择器的对象"。

CSS 支持的选择器有许多不同的类型,除此之外还有其它的一些常用的选择器,如下所示:

选择器名称选择的内容示例
类型选择器(标签或元素选择器所有指定类型的 HTML 元素p 选择 <p>元素
ID 选择器具有特定 ID 的元素。单一 HTML 页面中,每个 ID 只对应一个元素,一个元素只对应一个 ID#my-id 选择 <p id="my-id"> 或<a id="my-id">
类选择器具有特定类的元素。单一页面中,一个类可以有多个实例.my-class 选择 <p class="my-class"> 和<a class="my-class">
属性选择器拥有特定属性的元素img[src] 选择 <img src="myimage.png"> 但不是 <img>
全局选择器它使一个(*)号指定,它的作用是匹配html中所有的标签,* 表示选择了body元素的包含的所有可见子元素
伪类选择器特定状态下的特定元素(比如鼠标指针悬停于链接之上)a:hover 选择仅在鼠标指针停在链接上时的 <a> 元素
关系选择器将其他选择器组合起来,更复杂的选择元素。article > p 表示选择了<article>元素的初代<a>子元素

CSS 层叠特性

描述: CSS样式具有层叠性,即当多个样式规则(同一个属性和值)应用到同一个元素时,会根据优先级来决定最终生效的样式。

例如: 将会渲染生成一个居中以20px大小的红色字体文字字符串,即颜色属性将被继承于内部样式表(在内部没有的样式,将会受到外部样式表里面的样式影响),而文字排列(text-alignment)字体尺寸(font-size)会被内联样式表中的规则取代。

<p  id="text" class="container" style="text-align: center;font-size: 20px;">我是一段文本。</P>
<style>/* 标签选择器 */p { color: red; }/* 类选择器 */.p { color: blue; text-align: right; }/* ID选择器 */#p {text-align: center;}
</style>

执行结果:

a2d58080eda83f774a6c78b23869b28d.png

CSS样式层叠性优先级:

描述: 优先级从高到低依次为:内联样式 > ID选择器 > 类选择器/属性选择器/伪类选择器 > 标签选择器/伪元素选择器 > 通配符选择器,如果优先级相同,则后面定义的样式会覆盖前面的样式。

CSS 继承特性

描述: CSS 规定了子元素可以从父元素继承属性,例如下面这条CSS规则集:

<style>
body {color: red;font-family: Times, "Times New Roman", serif;
}
<style>

如果你编写的HTML中Body标签包含多个标签,通过 CSS 继承,子元素将继承最高级元素(在本例中是 body)所拥有的属性(假如子元素为 p, td, ul, ol, ul, li, dl, dt,和 dd), 其文字颜色为red红色,字体为Times, "Times New Roman", serif依次查找系统中是否存在对应字体,否则使用浏览器的默认字体。

温馨提示: 若属性值中有空格的则需要为其值添加引号, 例如: p {font-family: "sans serif";Times, "Times New Roman", serif;}

如何打破继承特性?
描述: 通过给子元素设置样式,来改变父元素的样式继承,比如上面的body样式,在里面存在一个p元素,我们就可以给它设置一个独立于父元素样式的样式。

p  {color: blue;font-family: Verdana, sans-serif;
}

或者使用 CSS 为控制继承提供了五个特殊的通用属性值,每个 CSS 属性都接收这些值。

  • inherit : 设置该属性会使子元素属性和父元素相同。实际上,就是“开启继承”

  • initial : 将应用于选定元素的属性值设置为该属性的初始值。

  • revert (en-US) : 将应用于选定元素的属性值重置为浏览器的默认样式,而不是应用于该属性的默认值。在许多情况下,此值的作用类似于 unset。

  • revert-layer (en-US) : 将应用于选定元素的属性值重置为在上一个层叠层中建立的值。

  • unset : 将属性重置为自然值,也就是如果属性是自然继承那么就是 inherit,否则和 initial 一样

p  {color: unset;font-family: initial;
}

CSS 特殊属性

!important
描述: 它是一个特殊的 CSS 可以用来覆盖所有上面所有优先级计算,其用于修改特定属性的值,能够覆盖普通规则的层叠,不过使用时应该非常注意,由于!important 改变了层叠的常规工作方式,它会使调试 CSS 问题非常困难,特别是在大型样式表中。

何时使用 !important?

答: 如果要在你的网站上设定一个全站样式的 CSS 样式可以使用 !important,例如我们要让网站上所有按钮的样式都一样。

示例演示:

<style>
#winning {background-color: red;border: 1px solid black;
}
.better {color: green;background-color: gray;border: none !important;  /* 关键点*/
}
p {background-color: blue;color: white !important;  /* 关键点,覆盖优先级高的类选择其设置的颜色*/padding: 5px;
}            
</style>
<p class="better">我是一段文字</p>
<p class="better" id="winning">我是一段文字,应用了!important规则</p>

执行结果:

ca4698723b09eb96e4c04c4948bc2dff.png

使用建议:

  • 一定要优先考虑使用样式规则的优先级来解决问题而不是 !important

  • 只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important

  • 永远不要在你的插件中使用 !important

  • 永远不要在全站范围的 CSS 代码中使用 !important

CSS 一切皆盒子

描述: 编写 CSS 时你会发现,你的工作好像是围绕着一个一个盒子展开的——设置尺寸、颜色、位置,等等, 页面里大部分 HTML 元素都可以被看作若干层叠的盒子。

CSS 布局主要是基于盒子模型,在你的页面上占用空间的每个盒子都有类似的属性:

  • padding(内边距):是指内容周围的空间。在下面的例子中,它是段落文本周围的空间。

  • border(边框):是紧接着内边距的线。

  • margin(外边距):是围绕元素边界外侧的空间。

除此之外,还使用到一些样式及位置设定的CSS。

  • width:元素的宽度

  • background-color:元素内容和内边距底下的颜色

  • color:元素内容(通常是文本)的颜色

  • text-shadow:为元素内的文本设置阴影

  • display:设置元素的显示模式(继续阅读文章以了解更多细节)

2f806e36466cad1906c37e27beb8fa94.png

亲,文章就要看完了,不关注一下【全栈工程师修炼指南】吗?

9c7cd078015553b2d2e2f383cc099ab7.jpeg

CSS 编码规范

描述: 下面是作者总结的一些CSS在编写时的规范,可以让大家所写的CSS代码更加标准规范化。

  • 0.class 名称中只能出现小写字符和破折号(例如.btn 和 .btn-danger),名称可能短并且意义明确,避免过度任意的简写。

  • 1.标准格式化用两个空格来代替制表符(tab),为了代码的易读性在每个声明块的左花括号前添加一个空格,为每条声明语句的 : 后应该插入一个空格,且在每一条语句和声明后建议加上 ';'。对于以逗号分隔的属性值每个逗号后面都应该插入一个空格(例如,box-shadow)。

  • 2.为选择器分组时,将单独的选择器单独放在一行,声明块的右花括号应当单独成行。

  • 3.为了获得更准确的错误报告,每条声明都应该独占一行。

  • 4.对于属性值或颜色参数省略小于 1 的小数前面的 0 (例如,.5 代替 0.5;-.5px 代替 -0.5px)并且避免为 0 值指定单位,例如,用 margin: 0; 代替 margin: 0px;

  • 5.尽量使用简写形式的十六进制值而且全部小写,例如,用 #fff 代替 #ffffff,在扫描文档时,小写字符易于分辨,因为他们的形式更易于区分。

  • 6.为选择器中的属性添加双引号例如 input[type="text"],为了代码的一致性,建议都加上双引号。

  • 7.尽量不要使用 @import , 与 <link>标签相比,@import 指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题; (解决办法:使用多个 <link>元素,通过 Sass 或 Less 类似的 CSS 预处理器进行编译,通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能)

  • 8.媒体查询(Media query)的位置放在尽可能相关规则的附近。

  • 9.当使用特定厂商的带有前缀的属性时,通过缩进的方式,让每个属性的值在垂直方向对齐,这样便于多行编辑。

  • 10.Less 和 Sass 中避免非必要的嵌套;

  • 11.选择器要尽可能短,并且尽量限制组成选择器的元素个数,建议不要超过 3 。

CSS 声明顺序:

  • Positioning : 定位

  • Box model : 模型

  • Typographic : 字体颜色

  • Visual : 背景边框

  • Misc : 其他

总结一句化:位置大小字体颜色,背景边框与其他

CSS 规范实例代码:

/*  Use link elements  */
<link rel="stylesheet" href="core.css">/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {padding: 15px;margin-bottom: 15px;background-color: rgba(0,0,0,.5);box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}/* Eg. */
.declaration-order {/* Positioning */position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 100;/* Box-model */display: block;float: right;width: 100px;height: 100px;/* Typography */font: normal 13px "Helvetica Neue", sans-serif;line-height: 1.5;color: #333;text-align: center;/* Visual */background-color: #f5f5f5;border: 1px solid #e5e5e5;border-radius: 3px;/* Misc */opacity: 1;
}/* Prefixed properties */
//特定厂商的带有前缀的属性
.selector {-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);box-shadow: 0 1px 2px rgba(0,0,0,.15);
}/* Single declarations on one line */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }/* Multiple declarations, one per line */
.sprite {display: inline-block;width: 16px;height: 15px;background-image: url(../img/sprite.png);
}//简写形式的属性声明
/* Good example */
.element {margin-bottom: 10px;background-color: red;background-image: url("image.jpg");border-top-left-radius: 3px;border-top-right-radius: 3px;
}// class 命名
/* Good example */
.tweet { ... }
.important { ... }
.tweet-header { ... }//选择器
/* Good example */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }

至此,CSS 基础篇笔记,讲解完毕,希望各位看友多多支持!

原文地址: https://blog.weiyigeek.top/2023/2-25-715.html

【 如果此篇文章对你有帮助,请你将它分享给更多的人! 】

608fbbfe503165d2e913c15a8448d4ed.gif

5d2787cb362ad90c6d88b29c45543675.png 学习书籍推荐 往期发布文章 5cbbba72ab0d4f16414b8f5e249a84bc.png

回复【0014】获取【Nginx学习之路汇总】

回复【0015】获取【Jenkins学习之路汇总】

回复【10005】获取【adb工具刷抖音赚米】

回复【0011】获取【k8S二进制安装部署教程】

回复【10001】获取【WinServer安全加固脚本】

回复【0008】获取【Ubuntu22.04安装与加固脚本】

回复【10006】获取【CentOS8安全加固脚本】

回复【10002】获取【KylinOS银河麒麟安全加固脚本】

 热文推荐  

  • 全栈之路-前端篇 | 第一讲.基础前置知识【浏览器内核与网络知识】学习笔记

  • 全栈之前端 | 1.HTML基础必备知识学习篇

  • 12.HTML5下一代的HTML标准介绍与初识尝试

  • 开发必备 | 新手如何快速掌握VSCode编辑器?

  • GitOps实践 | 企业生产环境Jenkins流水线分享,从Gitlab到镜像构建到部署测试以及企业微信消息通知

  • GitOps实践 |  云原生Tekton CI流水线,从Gitlab到镜像构建以及企业微信消息通知

按(扫描)二维码 关注 【全栈工程师修炼指南】(^U^)ノ~YO

6b43b5659c504057d8cbec48bddba2ff.gif

欢迎添加作者微信【weiyigeeker】,一起入坑吧!

关注回复【学习交流群】即可加入【安全开发运维沟通交流群

      各位亲爱的读者,现在公众号更改了推送规则,如果您需要第一时间看到我们推送的好内容。

一定要记得给公众号星标,经常点赞、在看、转发、分享和留下您的评论 !

点击【"阅读原文"】获取更多有趣的知识

若有帮助请点个【在看 赞 】吧

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

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

相关文章

2023年高教社杯数学建模思路 - 复盘:校园消费行为分析

文章目录 0 赛题思路1 赛题背景2 分析目标3 数据说明4 数据预处理5 数据分析5.1 食堂就餐行为分析5.2 学生消费行为分析 建模资料 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 赛题背景 校园一卡通是集…

QT版权查询

文章目录 QT工具版权QT模块版权查询 根据条件自动筛选&#xff1a; Qt Features, Framework Essentials, Modules, Tools & Add-Ons QT工具版权 Licensing QT模块版权查询 在 All Modules 中点击进入每个模块&#xff0c;在详细内容中一般有Lisence相关内容。 Licens…

python编程环境使用技巧-任务1-pip包管理工具

概要 任务1-pip包管理工具 pip是Python的包管理工具&#xff0c;它用于安装、升级和管理Python的第三方库以及它们的依赖关系。 在命令提示符或终端窗口中&#xff0c;可以使用以下常用的pip命令&#xff1a; 安装包&#xff1a;pip install package_name。它会自动下载并安…

【C++入门到精通】C++入门 —— 多态(抽象类和虚函数的魅力)

阅读导航 前言一、多态的概念1. 概念2. 多态的特点 二、多态的定义及实现1. 多态的构成条件2. 虚函数3. 虚函数的重写⭕虚函数重写的两个例外1.协变(基类与派生类虚函数返回值类型不同)2.析构函数的重写(基类与派生类析构函数的名字不同) 4. override 和 final&#xff08;C11 …

软件测试考试中的环路复杂度、线性无关路径的理解

题目如下&#xff0c;回答问题1至3 int GetMaxDay (int year ,int month){int maxday0; //1if (month>1 && month <12) { //2,3if (month2) { //4if (year %4 0 ) { //5if (year %100 0) { //6if (year %400 0) {//7maxday29; //8else //9maxda…

Linux网络编程:多路I/O转接服务器(select poll epoll)

文章目录&#xff1a; 一&#xff1a;select 1.基础API select函数 思路分析 select优缺点 2.server.c 3.client.c 二&#xff1a;poll 1.基础API poll函数 poll优缺点 read函数返回值 突破1024 文件描述符限制 2.server.c 3.client.c 三&#xff1a;epoll …

数据库事务四大特性

事务的4大特性&#xff08;ACID&#xff09;&#xff1a; 原子性(Atomicity)&#xff1a; 事务是数据库的逻辑工作单位&#xff0c;它对数据库的修改要么全部执行&#xff0c;要么全部不执行。 一致性(Consistemcy)&#xff1a; 事务前后&#xff0c;数据库的状态都满足所有的完…

LoRA继任者ReLoRA登场,通过叠加多个低秩更新矩阵实现更高效大模型训练效果

论文链接&#xff1a; https://arxiv.org/abs/2307.05695 代码仓库&#xff1a; https://github.com/guitaricet/peft_pretraining 一段时间以来&#xff0c;大模型&#xff08;LLMs&#xff09;社区的研究人员开始关注于如何降低训练、微调和推理LLMs所需要的庞大算力&#xf…

【BUG】解决安装oracle11g或12C中无法访问临时位置的问题

项目场景&#xff1a; 安装oracle时&#xff0c;到第二步出现oracle11g或12C中无法访问临时位置的问题。 解决方案&#xff1a; 针对客户端安装&#xff0c;在cmd中执行命令&#xff1a;前面加实际路径setup.exe -ignorePrereq -J"-Doracle.install.client.validate.cli…

多线程和并发(1)—等待/通知模型

一、进程通信和进程同步 1.进程通信的方法 同一台计算机的进程通信称为IPC&#xff08;Inter-process communication&#xff09;&#xff0c;不同计 算机之间的进程通信被称为 RPC(Romote process communication)&#xff0c;需要通过网络&#xff0c;并遵守共同的协议。**进…

前端基础之滚动显示

marquee滚动标签 注&#xff1a;该标签已经过时&#xff0c;被w3c弃用!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 使用样例&#xff1a; <marquee>这是个默认的marquee标签</marquee> 多条数据上下滚动&#xff1a; 代码如下&#xff1a; <body><mar…

淘宝商品详情采集接口item_get-获得淘宝商品详情(可高并发线程)

获得淘宝商品详情页面数据采集如下&#xff1a; taobao.item_get 公共参数 名称类型必须描述keyString是调用key&#xff08;必须以GET方式拼接在URL中&#xff09;注册key账号接入secretString是调用密钥api_nameString是API接口名称&#xff08;包括在请求地址中&#xff0…

基于SSM+vue框架的个人博客网站源码和论文

基于SSMvue框架的个人博客网站源码和论文061 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm &#xff08;设计&#xff09;研究背景与意义 关于博客的未来&#xff1a;在创办了博客中国(blogchina)、被誉为“…

华为手机实用功能介绍

一、内置app介绍 分四块介绍&#xff0c;包括出门款、规划款、工作款和生活款。 出门款&#xff1a;红色框框部分&#xff0c;照镜子化妆/看天气 规划款&#xff1a;黄色框框部分&#xff0c;日程表/计划表/番茄时间/计时 工作款&#xff1a;蓝色框框部分&#xff0c;便笺/录…

最新AI系统ChatGPT程序源码/微信公众号/H5端+搭建部署教程+完整知识库

一、前言 SparkAi系统是基于国外很火的ChatGPT进行开发的Ai智能问答系统。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。 那么如何搭建部署AI创作ChatGPT&#xff1f;小编这里写一个详细图文教程吧&#xff01…

五、性能测试之linux分析命令

linux分析命令 一、服务器基础知识二、linux文件结构三、linux文件权限四、linux命令1、安装应用fedora家族: 如centosdebain家族&#xff1a;如ubuntu 2、获取帮助第一种&#xff1a;command --help第二种&#xff1a;man command第三种&#xff1a;info 3、服务器性能分析基础…

英国选校8.27

目录 IC帝国理工学院 UCL伦敦大学学院 爱丁堡 曼彻斯特 KCL伦敦国王学院 Bristol布里斯托 华威 南安普顿 IC帝国理工学院 UCL伦敦大学学院 爱丁堡 曼彻斯特 KCL伦敦国王学院 24qs专业位置双非con雅思气候备注40 移动&个人通信 24fall不要双非&#xff1f; 24fall新…

C语言基础之——指针(上)

前言&#xff1a;小伙伴们又见面啦&#xff01;本期内容&#xff0c;博主将展开讲解有关C语言中指针的上半部分基础知识&#xff0c;一起学习起来叭&#xff01;&#xff01;&#xff01; 目录 一.什么是指针 二.指针类型 1.指针的解引用 2.指针-整数 三.野指针 1.野指针…

12. Oracle中case when详解

格式&#xff1a; case expression when condition_01 then result_01 when condition_02 then result_02 ...... when condition_n then result_n else result_default end 表达式expression符合条件condition_01&#xff0c;则返回…

【算法专题突破】双指针 - 快乐数(3)

目录 1. 题目解析 2. 算法原理 3. 代码编写 写在最后&#xff1a; 1. 题目解析 题目链接&#xff1a;202. 快乐数 - 力扣&#xff08;Leetcode&#xff09; 这道题的题目也很容易理解&#xff0c; 看一下题目给的示例就能很容易明白&#xff0c; 但是要注意一个点&#…