CSS知识点全览：单位、选择器与样式引入

需积分: 0 60 浏览量更新于2024-07-09 收藏 433KB DOCX 举报

"这是一个关于CSS知识点的综合文档，涵盖了CSS中的各种单位、颜色处理、图标设置、样式表引入方式、优先级、选择器、内容属性、背景属性、字体属性、文本属性、列表属性以及表格样式等多个核心概念。" 在CSS中，单位是用于衡量元素尺寸的关键。绝对单位如像素(px)、点(pt)、英寸(in)和厘米(cm)等提供了固定的尺寸，而相对单位如百分比(%)、em、rem和视口单位(vw/vh)则根据上下文或浏览器视口大小动态调整。颜色单位包括RGB、RGBA、HSL、HSLA、十六进制颜色代码以及颜色关键词。设置网站图标是一个提升用户体验的小技巧。通过在HTML头部添加<link rel="icon" href="图标地址">，可以将图标链接到网站，常见的图标格式为favicon.ico，通常存放在网站根目录。 CSS样式表的引入有三种方式：内部样式表（在<head>中使用<style>标签）、外部样式表（通过<link>标签引用CSS文件）和行内样式表（在HTML元素的style属性中）。内部样式表和行内样式表的优先级高于外部样式表，而行内样式的优先级最高。选择器决定了哪些元素会受到CSS规则的影响，例如类型选择器、类选择器、ID选择器和伪类选择器等。 content属性主要用于生成或替换元素的内容，常在CSS伪元素:before和:after中使用。背景属性包括background-color（背景色）、background-image（背景图像）、background-repeat（背景图像的重复方式）、background-size（控制图像大小）、background-position（设置图像位置）、background-attachment（背景图像是否随滚动条移动）、background-clip（控制背景的绘制区域）和background-origin（控制背景图像的位置原点）。background简写可以合并这些属性，但需注意某些特定情况下的使用规则。字体属性，如font-family（定义字体系列）、font-size（定义字体大小）、font-weight（定义字体粗细）、font-style（定义斜体）和color（定义文字颜色），都具有继承性，意味着子元素可以从父元素继承这些属性的值。@font-face规则允许自定义字体，使用户可以在浏览器中使用非系统默认的字体。文本属性如text-indent（首行缩进）、text-align（文本对齐）、text-decoration（文本装饰，如下划线、删除线等）、text-transform（控制文本的大小写）、text-overflow（处理溢出的文本）、line-height（行高）、letter-spacing（字符间距）和word-spacing（单词间距）帮助调整文本的布局和视觉效果。vertical-align用于设置元素的垂直对齐方式，而white-space处理空白字符的处理方式。overflow属性用于控制当内容超出元素边界时的行为，text-overflow则可以定义如何显示溢出的文本。列表属性如list-style-type用于设置列表项的标记类型，list-style-image允许设置自定义列表项图标，而list-style-position控制图标的位置。表格样式方面，width和height用于设定表格的宽度和高度，caption-side属性决定表格标题的位置。理解并熟练运用这些CSS知识点能让你更有效地控制网页的外观和交互。



))"

在之前插入

例如：

&))"9

(()+/；

((

))"

在之后插入

content 属性

语法：)+属性值”；

注意： 内容默认是行内元素

属性值说明



 内容为一段字符串

+媒体”  内容为某种媒体（图像，声音，视频等内容）



背景属性

属性详细说明



作用：背景区域颜色

属性值说明

关键字

比如：

背景颜色的默认值是 透明的

十六进制比如：A310

 5 5 

 5 5 5 



默认情况下  属性放置在元素的左上角，如果图像不够大的话会在

垂直和水平方向平铺图像，如果图像大小超过元素大小从图像的左上角显示元素大小的

那部分。

属性值说明

+,-./

图片的路径

默认值 没有背景图片



从父元素那边继承

 方

向值 5 颜色一 5 颜色

二，颜色三

颜色一在开头，颜色二在结尾，中间是过渡区域

方向值说明

(("

向左渐变

((

向右渐变

((默认值 向下渐变

((

向上渐变

%%%

 是表示旋转度数。

顺时针为正度数。



作用：背景图片重复

属性值说明

默认值 在水平方向和垂直方向上同时平铺

%

只在水平方向（% 轴）上平铺

#

只在垂直方向（# 轴）上平铺



不平铺



从父元素那边继承



作用：设置背景图片大小。

属性值说明

%%PQ((%%PQ

第一个值为背景图片的宽度，第二个值为高度；

如果只设置一个值，第二个值等比例缩放。

%%7(((%%7

第一个值为背景图片的宽度，第二个值为高度；

如果只设置一个值，第二个值等比例缩放。

&

背景图片可以完全覆盖背景区域，但可能不完整显示



背景图片可以完整显示，但可能不完全覆盖背景区域

剩余41页未读，继续阅读

.....0.0.0.0.0....

粉丝: 0
资源: 10

CSS知识点全览：单位、选择器与样式引入

前端CSS面试错题精选及知识点总结

前端入门指南：大厂面试必备知识点

初中信息技术考试选择题汇总及答案解析

html和css知识点总结.docx

JavaWeb知识点汇总.docx

HTML5知识点汇总.docx

2022大一上计算机知识点汇总.docx

各种毕业设计题目汇总.docx

第二阶段面试汇总.docx

2021年前端面试题汇总.docx

最新资源