快速使用CSS技术手册

aFang
165 阅读14分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路

快速使用CSS技术手册

1. CSS概述

1.1. CSS基本概念

CSS称为层叠样式表，CSS样式表或样式表，其文件扩展名：".CSS"。

CSS用于控制网页样式，并允许将网页样式与信息分离的一种标记语言。

1.1.1 CSS的引入

由于HTML语言设计页面比较麻烦，需要多次设置，工作量大，于是部分内容由CSS来编写。

CSS的优点：(1 )结构和风格分离，设计者只需要修改css文件中的内容，就可以改变整个网站的样式风格。

(2)扩充HTML标记，HTML本身标记并不是很多，而且很多标记都是关于网页结构和网页内容的，关于内容样式的标记(如文字间距、段落缩进、行高设定等)很难在HTML中找到。

(3 )提高网站维护效率，结构和风格分离有利于修改。

(4)可以实现精关的页面布局洁的代码实现精准的定位，方便维护DIV+CSS是目前流行布局方式，它 传统的表格定位。以"块"为结构定位，用最简页面载人更快捷。  

人员的修改和维护，更大化地优化了搜系引擎的搜索，使载入快。

1.1.2 CSS 简介

CSS以HTML语言为基础，为了优化HTML而存在

  1. CSS的发展

  2. 浏览器对CSS3的支持

：由于浏览器的私有属性，会在css的细节处理上存在偏差。

  1. CSS的编辑器

NotePad+记事本)等编辑工具，也可以选择专业的Css编辑工具

1.2 CSS基本选择器

选择器的由来：让css规则与HTML的元素对应，建立的规则，使CSS对HTML选择你。

CSS的样式定义由若干条样式规则组成，这些样式可以应用到不同的、被称为选择器(Selector)的对象上。CSS 的样式定义就是对指定选择器的某个方面的属性进行设置，并给出该属性的值。

在CSS中，根据选择器的功能或作用范围，选择器主要分为标记选择器、类选择器和ID选择器3.种。另外，还包括一些复合选择器，例如交集选择器、并集选择器和后代选择器等

在CSS中，根据选择器的功能或作用范围，选择器主要分为标记选择器、类选择器和ID选择器3.种。另外，还包括一些复合选择器，例如交集选择器、并集选择器和后代选择器等

Css可以认为是由多个选择器组成的集合，每个选择器由3个基本部分组成一选择器"名称"、"属性"和"值"。

格式定义描述如下：
selector
property:value;
其中，seleor有不同的形式，包括HIML标记(例-body，也可以用户自定义标记: popory是选择器的属性: value 指定了属性值，如果需要定义选择器的多个属性，则属性和属性值为一组，组与组之间用分号(;)格式隔开

image-20211023114936451

1.2.1标记选择器

用于统一页面中所有同类标记的显示样式

CSS语句对属性和值的要求很高，若属性不存在，值不符合要求，则代码无效

p选择器：

image-20211023115010647

1.2.2 类选择器

对部分控制，用来为一系列标记定义相同的呈现方式，语法格式

image-20211023115026560

className是选择器的名称，具体名称由CsS制定者自己命名。如果一个标记具有 class属性且属性值为Name，那么该标记的呈现样式由该选择器指定。在定义类选择符时，需要在className前面加一个句点"."。

1.2.3ID选择器

D选择器和类选择器在设置样式的功能上类似，都是对特定属性的属性值进行设置。但ID选择器的一个重要功能是用做网页元素的唯一.标识， 所以，HTML文件中一个元素的ID属性值是唯一的。

id属性值在文档中具有唯一性。在定义ID选择器时，需要在idName前面加一一个"#" 符号

image-20211023115041004

与类选择器的区别：

  • 类选择器可以给任意数量的标记定义样式，但ID选择器在页面的标记中只能使用一次。

  • ID选择器的优先性，当与类选择器冲突的时候，优先使用ID选择器。

1.3在HTML中使用CSS的方法

1.3.1行内样式

1、行内样式表，直接将css代码添加到HTML的代码行中

image-20211023115048539

1.3.2嵌入样式

可作用于整个文本，嵌入方法与行内类似仅仅是标记嵌入位置不同而已。

方便用户调试
好处是方便用户调试统一时，需要复制和粘贴样式定义，但是使用嵌人式样式表维护和更新网站非常麻烦。

image-20211023115310172

1.3.3链接样式

链接样式需要先定义一个扩展名为"css"的文件(即外部样式表)

它很好地体现了"页面内容"和"样式定义"独立、实现了内容描述和CSS代所的分离,修改的时候只需要修改CSS文件即可。

标记有很多属性，比较重要的就是上面代码中用到的几个属性。 ①rel 属性表示链接类型，定义链接的文件和HTML文档之间的关系就设为stylesheet. ②href属性指出了样式表的位置，它只是个普通的URL地址，可以是相对地址，也可以绝对地址。 ③type属性指明了链接样式表的样式语言，对于级联样式表，它的取值为text/ess。 由于只是- 个开始标记，没有相匹配的关闭标记，所以在结尾处添加一个斜杠作为束标记。

1.3.4 导入样式

导人样式和链接样式的操作过程基本相同， 都需要一个单独的外部 css文件，然后再将其导人到HTML文件中，但在语法和运行过程上有所差别。导人样式是HTML文件初始化时将外部CSS文件导人到HTML文件内，作为文件的一部分， 类似于嵌入效果。而链接样式则是在HTML标记需要样式风格时才以链接方式引入。

导入外部样式需要在HTML文件的<style>标记中使用@import导人一个外部的CSs文件,示例代码如下。

image-20211023115429090

1.3.5样式的优先级

如果同一个页面使用了多种引用Css样式的方法，比如同时使用行内样式、链接样式和嵌人样式，当不同方式的样式定义共同作用于同一元素， 就会出现优先级问题。

行内样式>嵌入样式>链接样式>导入样式

1.4 CSS复合选择器

对几种选择器的作用范围取交集、并集、子集后，再对选中的元素定义样式，这时就要用到复合选择器了。

1.4.3后代选择器

交集选择器是由两个选择器直接连接构成的，其结果是选中两者各自作用范围的交集。

**1.4.4子选择器 **

用于选中标记的直接后代(即儿子)，它的定义符号是大于号(>).语法格式：selector1>selector2

1.4.5 相邻选择器

定义符号为加，可以选中紧跟其后的一个兄弟元素，（共用一个父元素）

1.4.6 属性选择器

通过ia .性，可以区分不同的元素:通过class属性，可以设置元素的样式

属性选择器前未指定绑定元素，$和"“这3个通配符。使则该选择器适应于具有该使用通配将的属性选择器如家该属性的所有元素。

1.4.7 伪选择器

伪类选择器是在CSS中已经定义的选择器，而不是由用户自行定义的。可以分为结构伪类选择器和UI伪类选择器两种。

伪选择器作用在标记的状态上，即指定的样式，只有元素处于某种状态才起作用，默认状态不起作用

利用文档结构树实现元素过滤: 通过文档结构的位置关系来匹配特定的元素，从而减少文档对class属性和ID属性的定义，使文档简洁

  1. 基本结构伪选择器：

匹配文档特定位置

image-20211023115546768

  1. 与元素位置有关的结构伪选择器

对元素指定位置指定的样式，如第几位，奇，偶数元素指定样式1

image-20211023115610222

  1. UL伪类选择器

作用在标记的状态上

image-20211023115644813

image-20211023115653923

1.4.8 伪元素选择器

提供了更复杂的功能，但非直接对应HTML文档应以的元素

1）：first-letter 该类选择器主要用于向指定的选择器添加指定的效果。选择"块级元素"文本段落中的首个字符，只能对"块级元素"生效。 首先，元素的display计算值必须是 block, inline-block, table-cell, list-item或者table-caption，其他所有display计算值都没有用，包括display:table以及display:flex等。该选择器可以设置的值有：

  • font属性
  • color属性
  • background属性
  • margin属性
  • padding属性
  • border属性
  • text-decoration属性
  • vertical-align属性
  • text-transform属性
  • line-height属性
  • float属性

2）：first-line 该类选择器主要用于向指定的选择器添加指定的效果。选择"块级元素"文本段落中的首个字符，只能对"块级元素"生效。 该选择器可以设置的值：
3)：before 在指定的选择器之前插入一段内容。插入的内容默认为"行内元素"，可以通过"display"强制转换显示类型。

4)：after 在指定的选择器之后插入一段内容，使用方式和":before"一样。插入的内容默认也是为"行内元素"，同样可以通过"display"强制转换显示类型。代码示例同":before"。

**提示：**使用“:before”和“:after”伪元素选择器不仅能为指定的元素添加文字、图片和各种利用“width”、“height”、“border”制作出来的形状，甚至还能添加音频、视频这些多媒体文件，而且具有高度自定义性

1.5用CSS设置文本样式

3.5.1 字体属性

image-20211023115903071

控制网页文本符的显示方式，字体大小，粗细以及字体的类型

Color: 设定文字的颜色的
1、Font-family:"书法体" 字体文件：c:/windows/fonts
2、Fong-size: 像素数字  在一般网页中，正常的文字，12px  标题 24---40px  字体大小都是用数字直接指定
3、Font-style  : 文本的倾斜体  italic倾斜  normal 正常
4、font-variant :normal，| small-caps（小型大写）  把所有的字母转换成 大写，但是字母的大小 比较小

5、Font-weight: 加粗  bold
line-height: 文字所占的高度 文字本身没有变化，但是上下补上空白。常用来调整内容的垂直居中
6、组合属性：

font : font-style || font-variant || font-weight || font-size || line-height || font-family  

1.5.2文本属性

字体属性：主要是针对文字的 大小 风格 颜色...

  • 字间隔：word-spacing 、
  • 字母间隔：letter-spacing
  • 文本缩进：text-indent 、
  • 文本对齐：text-align、
  • 字母转换：text-transform 、
  • 文本装饰：text-decoration 、
  • 处理空白符：white-space 、
  • 文本方向：decoration 、
  • 文本颜色：color 、
  • 背景颜色：background-color 、
  • text-shadow文本阴影、
  • word-wrap属性、

1.6用CSS设置颜色与背景

1.6.1颜色的设置

color属性用于控制HTML元素内文本的颜色

image-20211023120047290

------颜色名:直接使用颜色的英文名称作为属性值，

------#rrggbb: 用一个6位的十六进制数表示颜色，例如，#000FF 表示蓝色。

------#rgb:是#rrggbb的一种简写方式

------用十进制数表示颜色的红、绿、蓝分量

------gb (m% 6b9使用百分比表示颜色的红、绿、 蓝分量

1.6.2 背景设置

------background-color 属性定义了元素的背景颜色
------background-image 属性描述了元素的背景图像.
------background-repeat:repeat-x 背景图像 - 水平或垂直平铺
------background-position:right top（右上角）属性改变图像在背景中的位置:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n4PXTVh1-1634962253243)(C:/Users/Lenovo/AppData/Roaming/Typora/typora-user-images/image-20211023120107230.png)]

当使用简写属性时，属性值的顺序为：

:background-color background-image background-repeat background-attachment background-position

1.6.3 圆角边框和图像边框

1、圆角边框：border-radius属性
一个最多可指定border-*-radius属性的复合属性，这个属性允许为元素添加圆角边框

2、图像边框：

border-images属性，该属性会让处于随机变换元素字符边框能够自动调整，自定义，边框与文字的适应性问题。

1**.7用CSS设置图像效果**

1.7.1 为图片添加边框

边框的不同属性：1、border-width粗细（ px）

2、border-color颜色（颜色定义）

3、border-style线型（虚线，实线，划线）

为不同的边框设定样式

border-*-style，单独设定某一边的边框

1.7.2 图片的缩放

1. 给图片的img标签设置width或者height的任意一个，图片会自动等比例缩放

2. 可以使用CSS3方法，transform的scale 来缩放图片

1.7.3图文混排

使用float实现文字的环绕，混排现象

none :不浮动

left :流向对象的右边

right :流向对象的左边

Float属性主要定义图像往那个方向浮动，需要限定被浮动对象的宽度（浮动对象会生成一个块级框）

1.8案例美化表单

美化表单：主要就是定义了表单元素的边框和背景色

image-20211023120221698

设计网站：

image-20211023120310721

2. 使用CSS实现精美布局

2.1 CSS盒模型

页面上所有的元素都可以被看做是盒子，通过边界边框的参数设定达到对页面的布局

image-20211023120405327

  • Margin（边界****）**** ： 清除边框区域。Margin没有背景颜色，它是完全透明

  • Border（边框） ： 边框周围的填充和内容。边框是受到盒子的背景颜色影响

  • Padding（填充） ： 清除内容周围的区域。会受到框中填充的背景颜色影响

  • Content（内容****）**** ：内容，文本和图像

Margin（边界**）（盒距）**Padding（填充）（内边距）（都是边距，故可以采用属性定义*-top、*-bottom、*-left、*-right

margin：auto | length；

padding：length

边框：使用border-style属性

内容：内容的大小由属性的高宽决定。

overflow：内容的显示：属性auto，自动调整看是否需要显示滚条

visible：内容不受盒子影响，正常显示

hidden：隐藏超过盒子的范围

scroll：始终显示滚条

格式：

overflow：auto|visible|hidden|scroll

2.2 CSS布局常用属性

  1. 静态定位：static，不做设置则为默认，按照HTML规则
  2. 相对定位：relative、有参考目标，也就是父对象。相对定位的盒子占用空间
  3. 绝对定位：absolute，也有父对象，但是绝对定位的元素不占原页面，后续元素可填。
  4. 层叠定位属性：z-index，定义页面次序，用数字来安排遮盖顺序，大者在上

定位属性：按照排版：display属性

  1. 行内：html
  2. 块内：

    html

image-20211023120650901

image-20211023120703528

image-20211023120735465

2.2.2浮动属性、float

1、基本浮动定位，设置浮动方向后，盒子会浮动，也就是填充。

2、清除浮动属性

Clear:格式：none|left|right|both

image-20211023120836243

原页面，后续元素可填。 4. 层叠定位属性：z-index，定义页面次序，用数字来安排遮盖顺序，大者在上

定位属性：按照排版：display属性

  1. 行内：html
  2. 块内：

    html

[外链图片转存中...(img-sL8AlMeR-1634962253259)]

[外链图片转存中...(img-BDuXOZ5n-1634962253264)]

[外链图片转存中...(img-TV2WCKRb-1634962253267)]

2.2.2浮动属性、float

1、基本浮动定位，设置浮动方向后，盒子会浮动，也就是填充。

2、清除浮动属性

Clear:格式：none|left|right|both

[外链图片转存中...(img-qa5CV1qR-1634962253269)]

avatar
文章
阅读
粉丝