CSS 知识点

已于 2022-11-06 11:59:09 修改
阅读量535 收藏 1
点赞数
文章标签： css
于 2022-11-06 11:52:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54373148/article/details/127480631
版权

目录

代码风格

选择器

1 选择器的作用

2 选择器分类

CSS字体属性

1 字体系列

2 字体大小

3 字体粗细

4 文字样式

5 复合属性（节约代码）

文本属性

1 文本颜色

2 对齐文本

3 装饰文本

4 文本缩进

5 行间距格式：需要使用字体的标签名（类，id）{line-height：20px}

CSS引入方式（书写位置）

1 内部样式表（嵌入式）

2 行内样式表（行内式）

3 外部样式表（链接式）

emmet语法

1 快速生产HTML结构语法

2 快速生成css样式语法

3 快速格式化代码

CSS复合选择器

1 后代选择器（空格）重要

2 子选择器（>）重要

3 并集选择器（，）重要

4 伪类选择器（：）

元素显示模块

1 块元素

2 行内元素

3 行内块元素

4 元素显示模式转换

CSS背景

1 背景颜色

2 背景图片

3 背景平铺

4 背景图片的位置

6 背景复合写法

CSS的三大特性

 优先级​编辑

盒子模型

1 看透网页布局的本质

2 盒子模型的组成​编辑

3 border（边框）​编辑

4 表格的粗细边框（collapse）​编辑

5 内边距（padding）​编辑

6 外边距（margin）​编辑

7 外边框合并与塌陷

8 清除内外边距​编辑

9 ps测量像素​编辑

圆角边框（重点）

盒子阴影（重点）

浮动（float）

1 浮动元素经常和标准流父级搭配使用（标准流最基本布局方式）

2 浮动的特性（重难点）

3 清除浮动

CSS属性书写顺序（重要）

CSS定位

1 定位模式

2 边偏移

3 定位的叠放顺序

显示和隐藏元素

鼠标样式

字体文件

精灵图

css是层叠样式表的英语简称

规则：由选择器以及一条或多条声明

注：一般在<head>中写<style>.<style>中写css

css语法规范

代码风格

1 样式格式书写

书写格式

2 样式大小写

样式大小写

3 空格规范

选择器

1 选择器的作用

  根据不同需求把不同的标签选择出来

2 选择器分类

  分为基础选择器和复合选择器两大类

基础选择器是由单个选择器组成的，包括标签选择，类选择器，ID选择器和通配符选择器

（1 标签选择器：指用HTML标签作为选择器，按名称分类为其中一类标签指定统一CSS样式

优点：快速统一放置同类型样式  缺点：不能差异化设置

标签选择器语法

（2 类选择器（与函数调用相识）

  如果想差异化选择不同的标签，单独一个或者几个标签可以使用类选择器

   .类名（自定义）{宽，高，颜色}  （自定义函数相似）

   用class属性来调用

   口诀：样式点定义，结构类（class）调用，一个或多个，开发最常用

类选择器注意事项

  多类名使用方式（可以增加代码的复用率）

（3 id选择器

使用方法与类选择器一样#：定义  id：调用

区别：id选择器只能调用一次，被使用过一次就失效了

（4 通配符选择器

选取页面中所有元素

基础选择器总结

CSS字体属性

CSS fonts（字体）属性用于定义字体系列，大小，粗细和文字样式（如倾斜）

1 字体系列

格式：需要使用字体的标签名（类，id）{font-family：字体名，字体名}

多个字体同时定义时，按顺序选择。第一有就选一，第一没有就选二

2 字体大小

格式：需要使用字体的标签名（类，id）{font-size：大小 px（像素点）}

3 字体粗细

格式：需要使用字体的标签名（类，id）{font-weight：数字}

4 文字样式

格式：需要使用字体的标签名（类，id）{font-style：normal}

5 复合属性（节约代码）

格式：需要使用字体的标签名（类，id）{文字样式 粗细 大小 字体}

字体属性总结

文本属性

CSS text（文本）属性 可以定义文本颜色，文本对其，装饰文本，文本缩进，行间距

1 文本颜色

格式：需要使用字体的标签名（类，id）{color：颜色}

2 对齐文本

格式：需要使用字体的标签名（类，id）{text-aligm：senter}

3 装饰文本

格式：需要使用字体的标签名（类，id）{text-decoration：underline}

4 文本缩进

格式：需要使用字体的标签名（类，id）{text-inden：20px}

5 行间距格式：需要使用字体的标签名（类，id）{line-height：20px}

文本属性总结

CSS引入方式（书写位置）

1 内部样式表（嵌入式）

2 行内样式表（行内式）

3 外部样式表（链接式）

把css代码放在其他.css文件夹里，书写位置变了但代码组成方式不变

可以在.css书写多个代码

引入方式（书写位置）总结

emmet语法

1 快速生产HTML结构语法

2 快速生成css样式语法

最低0.47元/天 解锁文章
似嘲似笑
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Css Flex 弹性布局中的换行与溢出处理方法
忧郁的蛋的专栏
10-02 1万+
本文将详细介绍Flex布局中的换行与溢出处理方法，并结合具体的代码示例，帮助读者更好地理解与运用。2，使用flex属性：flex属性是flex-grow、flex-shrink和flex-basis的缩写。可以通过设置不同的flex-basis值来改变子元素的宽度，从而实现溢出内容的隐藏效果。在上述代码中，容器元素的宽度为400px，设置了flex-wrap属性为wrap，以及子元素的flex-basis属性为200px。在Flex布局中，当子元素的总宽度超过父容器的宽度时，有时我们需要进行换行处理。
hello world
alanlau596的博客
08-10 308
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
css子元素超出父元素怎么自动换行
最新发布
qq_36539696的博客
07-31 499
可以看到这里的标签超出了屏幕，标签的父元素用了flex弹性布局，但是没有自动换行，加了overflow对用户感官不好。以上就是子元素自动换行的代码。如果帮到你，有劳给个赞。
css中div超出自动换行
qq_60976312的博客
10-14 5970
css中div超出自动换行
子元素过多超出父元素时，强制在一行上显示
北筏的博客
07-07 2046
假设在.box父元素内，有多个inline-block子元素，当子元素过多，总宽度超出父元素宽度，则会换行显示。使用CSS的white-space: nowrap;可强制子元素在一行上显示。 例如： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0;
html+css知识点总结
06-24
html+css知识点总结
Css知识点归纳
04-16
Css知识点归纳总结，方便做笔记复习。 Css知识点归纳总结，方便做笔记复习 Css知识点归纳总结，方便做笔记复习 Css知识点归纳总结，方便做笔记复习 Css知识点归纳总结，方便做笔记复习
CSS知识点.xmind
08-30
里面整理了css样式,用思维导图的形式展示了,对学习css的同学们来说更清晰,css知识点整理,欢迎大家来收藏
CSS知识点汇总.xmind
04-16
CSS
CSS知识点汇总.docx
09-01
CSS 知识点汇总 CSS（Cascading Style Sheets）是一种用于描述 HTML 或 XML 文档样式的标记语言。它可以控制文档的布局、颜色、字体、间距等样式。下面是 CSS 知识点汇总： CSS 单位 在 CSS 中，单位是指用来度量...
css 一行显示_CSS笔记1
weixin_39763640的博客
11-20 131
css历史李爵士的挪威同事赖先生在1994首先提出css，倡议了web网页应该使用通用字体格式和浏览器可以支持video标签，微软的ie常常成为他的批评对象，他也是web打印概念的倡导者，用html和css写书css的牛逼之处css的全称叫做层叠样式表样式层叠可以多次对同一选择器进行样式声明选择器层叠可以用不同选择器对同一个元素进行样式声明文件层叠可以用多个文件进行层叠这些特性使得css极度灵活，...
html设置文字超出省略和超出换行
qq_44621394的博客
04-20 8380
我们都知道p标签是行内元素,p标签中的文字默认会显示一行,如果超出外层容器的宽度会换行显示。 场景一 : 设置文字超出省略 <style type="text/css"> #wrap{ width: 100px; //设置宽度 overflow: hidden; //超出隐藏 white-space: nowrap; //设置元素不还行 text-overflow: ellipsis;//超出显示... } </style>
html超出父元素,【Web前端问题】HTML CSS:子元素什么时候可以超出父元素限制的范围?...
weixin_39820158的博客
06-15 1601
疑问:子元素什么时候可以同时从水平和竖直方向超出父元素的范围?什么时候会从水平方向超出?什么时候会从竖直方向超出?首先,在HTML中,一个父元素包裹着一个子元素第二步:在CSS中设置父元素和子元素的范围,其中子元素的宽高是超大于父元素的宽高的:.parent{width:300px;height:300px;border: 2px solid blue;}.child{width:400px;he...
css设置文本，元素超出盒子自动换行，并且超出盒子范围出现滚动条，自定义滚动条的样式
wuxiaoqing_818的博客
07-12 4770
//设置文本自动换行，行内元素数字字母需要设置，块级标签一般会超出自动换行。 div { word-wrap: break-word; //设置文本自动换行 word-break: normal; } //超出盒子设置滚动条，并且自定义滚动条样式，以下滚动条样式最好都设置。 div { height: 400px; overflow: auto; /*当内容超过，出现滚动条*/ } //设置滚动条样式 div ::-webkit-scrollbar { /*滚动条整体*/ wi
html超出长度动态换行_html内容超出了div的宽度如何换行让内容自动换行在
weixin_39607090的博客
03-06 1460
html内容超出了div的宽度如何换行让内容自动换行用DIV+CSS中如何设置，超出就自动换行输出。其实，我以前也有一个每天聊到深夜的人。但是到后来，无话不说，再后来，各奔东西了。{white-space:normal}当定义的宽度之后自动换行 分析如下： html 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义 css #wrap{white-s...
CSS自动换行、强制不换行、强制断行、超出显示省略号
coder_zyz的专栏
03-25 2088
P标签是默认是自动换行的，因此设置好宽度之后，能够较好的实现效果，但是最近的项目中发现，使用ajax加载数据之后，p标签内的内容没有换行，导致布局错乱，于是尝试着使用换行样式，虽然解决了问题，但是并没有发现本质原因，本质在于，我当时获取的数据是一长串的数字，浏览器应该是对数字和英文单词处理方式相近，不会截断。  先给出各种方式，再具体介绍每一个属性。  强制不换行  p { white-sp
利用css实现文本超出N行之后显示省略号等css常用小知识点
小白变怪兽
03-01 4495
css代码如下： text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; //这儿的数字代表的就是你所需要实现效果的第N行 -webkit-box-orient: vertical; 效果如下图所示...
div超出宽度自动换行
热门推荐
你蠢哭我咯的博客
07-25 2万+
div{ width: 500px; word-break: break-all; word-wrap: break-word; }
div超出不换行_DIV元素不换行
weixin_26779013的博客
01-26 1729
DIV盒子默认是换行独占100%宽度：DIV盒子没有赋予CSS样式时，默认DIV盒子是独占一行(宽度为100%)。如下默认情况HTML代码：html>div实例www.dvicss5.com第一个div第二个盒子独占一行div盒子截图2个div对象盒子独占一行，形成自动换行布局效果截图通过以上DIV案例，我们可以观察到DIV的确默认情况下是独占一行宽度100%。如何让DIV并排不换行呢？1...
关于html和 Css知识点
07-17
关于HTML和CSS的知识点，我可以给你提供一些基本的信息。HTML（超文本标记语言）用于描述网页的结构和内容，而CSS（层叠样式表）用于定义网页的样式和布局。 以下是一些常见的HTML知识点： 1. HTML标签：HTML由一系列标签组成，例如`<html>、<head>、<body>`等。每个标签用于定义不同的元素。 2. 元素：HTML中的元素由开始标签、结束标签和内容组成。例如`<p>这是一个段落。</p>`。 3. 属性：HTML标签可以包含属性，属性提供有关元素的附加信息。例如`<img src="image.jpg" alt="图片">`中的`src`和`alt`是属性。 4. 常见的HTML元素：包括标题标签（`<h1> - <h6>`）、段落标签（`<p>`）、链接标签（`<a>`）、图像标签（`<img>`）等。 以下是一些常见的CSS知识点： 1. CSS选择器：用于选择要应用样式的HTML元素。常见的选择器包括类选择器（`.class`）、ID选择器（`#id`）、元素选择器（`element`）等。 2. 样式属性：CSS使用样式属性来定义元素的外观。例如`color`用于设置文本颜色，`font-size`用于设置字体大小等。 3. 盒模型：CSS中的每个元素都被视为一个矩形的盒子，由内容、内边距、边框和外边距组成。 4. 布局：CSS可以用于控制元素的位置和大小，例如使用`position`属性来设置元素的定位方式，使用`display`属性来设置元素的显示方式等。 这只是HTML和CSS的一小部分知识点，如果你有其他问题或需要更详细的信息，请随时告诉我。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值