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

2023-10-31 17:37:55 浏览数 (2)

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示例。

代码语言:javascript复制
<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层叠样式表的示例, 通过内部样式表方式:

代码语言:javascript复制
<!-- 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>

执行结果:


0x01 基础语法

CSS 规则集

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

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

代码语言:javascript复制
/* # 语法  */
/* # 方式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 属性的值 ).
  • 在每个规则集都应该包含在成对的大括号里({}).
  • 在每个声明里要用冒号(:)将属性与属性值分隔开.
  • 在每个规则集里要用分号(;)将各个声明分隔开.

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

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

CSS 注释设置

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

代码语言:javascript复制
<style media="screen" type="text/css">
  h1 {
    /* css 单行注释 */
    /* 
       css 多行注释1
       css 多行注释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

文本颜色: 描述: 颜色是由红(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(完全不透明)之间的参数。
  • 预定义/跨浏览器的颜色名称

示例演示:

代码语言:javascript复制
/* 常规方式:颜色名称与十六进制、十六进制缩写表示 */
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互转换方法,注意转换后注意其文件格式是否一致,否则中文注释便会乱码。

代码语言:javascript复制
/* style.css */
/* # 设置 编码为 UTF-8 */
@charset "utf-8";

/* # 设置 编码为 GB2312 */
@charset "gb2312";

CSS 引入方式

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

1.内联样式表:

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

代码语言:javascript复制
<!-- /* 内联样式表 */ -->
<!-- 示例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> 标签来定义样式, 当单个文件需要特别样式时,就可以使用内部样式表。

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

3.外部样式表

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

代码语言:javascript复制
<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)会被内联样式表中的规则取代。

代码语言:javascript复制
<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>

执行结果:

CSS样式层叠性优先级:

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

CSS 继承特性

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

代码语言:javascript复制
<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元素,我们就可以给它设置一个独立于父元素样式的样式。

代码语言:javascript复制
p  {
 color: blue;
 font-family: Verdana, sans-serif;
}

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

  • inherit : 设置该属性会使子元素属性和父元素相同。实际上,就是“开启继承”
  • initial : 将应用于选定元素的属性值设置为该属性的初始值。
  • revert (en-US) : 将应用于选定元素的属性值重置为浏览器的默认样式,而不是应用于该属性的默认值。在许多情况下,此值的作用类似于 unset。
  • revert-layer (en-US) : 将应用于选定元素的属性值重置为在上一个层叠层中建立的值。
  • unset : 将属性重置为自然值,也就是如果属性是自然继承那么就是 inherit,否则和 initial 一样
代码语言:javascript复制
p  {
 color: unset;
 font-family: initial;
}

CSS 特殊属性

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

何时使用 !important?

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

示例演示:

代码语言:javascript复制
<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>

执行结果:

使用建议:

  • 一定要优先考虑使用样式规则的优先级来解决问题而不是 !important
  • 只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important
  • 永远不要在你的插件中使用 !important
  • 永远不要在全站范围的 CSS 代码中使用 !important

CSS 一切皆盒子

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

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

  • padding(内边距):是指内容周围的空间。在下面的例子中,它是段落文本周围的空间。
  • border(边框):是紧接着内边距的线。
  • margin(外边距):是围绕元素边界外侧的空间。

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

  • width:元素的宽度
  • background-color:元素内容和内边距底下的颜色
  • color:元素内容(通常是文本)的颜色
  • text-shadow:为元素内的文本设置阴影
  • display:设置元素的显示模式(继续阅读文章以了解更多细节)

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 规范实例代码:

代码语言:javascript复制
/*  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

0 人点赞