CSS每日学习笔记(1)

7.30.2019

1.CSS 文本属性

属性

描述

color

设置文本颜色

direction

设置文本方向。

line-height

设置行高。

letter-spacing

设置字符间距。

text-align

对齐元素中的文本。

text-decoration

向文本添加修饰。

text-indent

缩进元素中文本的首行。

text-shadow

设置文本阴影。CSS2 包含该属性,但是 CSS2.1 没有保留该属性。

text-transform

控制元素中的字母。

unicode-bidi

设置文本方向。

white-space

设置元素中空白的处理方式。

word-spacing

设置字间距。

2. 一般来说,可以为所有块级元素应用 text-indent,但无法将该属性应用于行内元素,图像之类的替换元素上也无法应用 text-indent 属性。不过,如果一个块级元素(比如段落)的首行中有一个图像,它会随该行的其余文本移动。

如果想把一个行内元素的第一行“缩进”,可以用左内边距或外边距创造这种效果。

text-indent 还可以设置为负值。利用这种技术,可以实现很多有趣的效果,比如“悬挂缩进”,即第一行悬挂在元素中余下部分的左边。但是如果对一个段落设置了负值,那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题,建议针对负缩进再设置一个外边距或一些内边距。

text-indent 可以使用所有长度单位,包括百分比值。

百分数要相对于缩进元素父元素的宽度。换句话说,如果将缩进值设置为 20%,所影响元素的第一行会缩进其父元素宽度的 20%。

3. text-transform 属性处理文本的大小写。这个属性有 4 个值:

none,uppercase,lowercase,capitalize

默认值 none 对文本不做任何改动,将使用源文档中的原有大小写。顾名思义,uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后,capitalize 只对每个单词的首字母大写。

4. text-decoration 有 5 个值:

none,underline,overline,line-through,blink

underline 会对元素加下划线,就像 HTML 中的 U 元素一样。overline 的作用恰好相反,会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线,等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁。none 值会关闭原本应用到一个元素上的所有装饰。通常,无装饰的文本是默认外观,但也不总是这样。例如,链接默认地会有下划线。

text-decoration 值会替换而不是累积起来

5. white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。下面的表格总结了 white-space 属性的行为:

空白符

换行符

自动换行

pre-line

合并

保留

允许

normal

合并

忽略

允许

nowrap

合并

忽略

不允许

pre

保留

保留

不允许

pre-wrap

保留

保留

允许

6. CSS 字体属性

属性

描述

font

简写属性。作用是把所有针对字体的属性设置在一个声明中。

font-family

设置字体系列。

font-size

设置字体的尺寸。

font-size-adjust

当首选字体不可用时,对替换字体进行智能缩放。(CSS2.1 已删除该属性。)

font-stretch

对字体进行水平拉伸。(CSS2.1 已删除该属性。)

font-style

设置字体风格。

font-variant

以小型大写字体或者正常字体显示文本。

font-weight

设置字体的粗细。

 

7. 只有当字体名中有一个或多个空格(比如 New York),或者如果字体名包括 # 或 $ 之类的符号,才需要在 font-family 声明中加引号。

8. 能够设置链接样式的 CSS 属性有很多种(例如 color, font-family, background 等等)。

链接的特殊性在于能够根据它们所处的状态来设置它们的样式。

链接的四种状态:

a:link - 普通的、未被访问的链接

a:visited - 用户已访问的链接

a:hover - 鼠标指针位于链接的上方

a:active - 链接被点击的时刻

当为链接的不同状态设置样式时,请按照以下次序规则:

a:hover 必须位于 a:link 和 a:visited 之后;a:active 必须位于 a:hover 之后

text-decoration 属性大多用于去掉链接中的下划线。background-color 属性规定链接的背景色。

a:visited {text-decoration:none;}

a:hover {text-decoration:underline;}

a:visited {background-color:#FFFF85;}

a:hover {background-color:#FF704D;}

9.CSS 列表属性(list)

属性

描述

list-style

简写属性。用于把所有用于列表的属性设置于一个声明中。

list-style-image

将图象设置为列表项标志。

list-style-position

设置列表中列表项标志的位置。

list-style-type

设置列表项标志的类型。

marker-offset

 

 

 

10.CSS Table 属性

属性

描述

border-collapse

设置是否把表格边框合并为单一的边框。

border-spacing

设置分隔单元格边框的距离。

caption-side

设置表格标题的位置。

empty-cells

设置是否显示表格中的空单元格。

table-layout

设置显示单元、行和列的算法。

 

11. CSS 边框属性

属性

描述

outline

在一个声明中设置所有的轮廓属性。

outline-color

设置轮廓的颜色。

outline-style

设置轮廓的样式。

outline-width

设置轮廓的宽度。

 

12. CSS框模型

 

13. 设置各边的内边距按照上、右、下、左的顺序,各边均可以使用不同的单位或百分比值。

h1 {padding: 10px 0.25em 2ex 20%;}     

也可以通过使用下面四个单独的属性,分别设置上、右、下、左内边距

h1 {

  padding-top: 10px;

  padding-right: 0.25em;

  padding-bottom: 2ex;

  padding-left: 20%;

  }

注意:上下内边距与左右内边距一致;即上下内边距的百分数会相对于父元素宽度设置,而不是相对于高度。

14. CSS 边框属性

属性

描述

border

简写属性,用于把针对四个边的属性设置在一个声明。

border-style

用于设置元素所有边框的样式,或者单独地为各边设置边框样式。

border-width

简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。

border-color

简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。

border-bottom

简写属性,用于把下边框的所有属性设置到一个声明中。

border-bottom-color

设置元素的下边框的颜色。

border-bottom-style

设置元素的下边框的样式。

border-bottom-width

设置元素的下边框的宽度。

border-left

简写属性,用于把左边框的所有属性设置到一个声明中。

border-left-color

设置元素的左边框的颜色。

border-left-style

设置元素的左边框的样式。

border-left-width

设置元素的左边框的宽度。

border-right

简写属性,用于把右边框的所有属性设置到一个声明中。

border-right-color

设置元素的右边框的颜色。

border-right-style

设置元素的右边框的样式。

border-right-width

设置元素的右边框的宽度。

border-top

简写属性,用于把上边框的所有属性设置到一个声明中。

border-top-color

设置元素的上边框的颜色。

border-top-style

设置元素的上边框的样式。

border-top-width

设置元素的上边框的宽度。

 

15. CSS 外边距属性

属性

描述

margin

简写属性。在一个声明中设置所有外边距属性。

margin-bottom

设置元素的下外边距。

margin-left

设置元素的左外边距。

margin-right

设置元素的右外边距。

margin-top

设置元素的上外边距。

 

CSS 定义了一些规则,允许为外边距指定少于 4 个值。规则如下:

如果缺少左外边距的值,则使用右外边距的值。

如果缺少下外边距的值,则使用上外边距的值。

如果缺少右外边距的值,则使用上外边距的值。

下图提供了更直观的方法来了解这一点:

 

16. 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

注意:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

转载于:https://www.cnblogs.com/zccfrancis/p/11273762.html

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

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

相关文章

vue-day03-vue组件化开发

文章目录组件组件注册全局注册组件基础用组件注意事项局部注册Vue 调试工具Vue组件之间传值父组件向子组件传值子组件向父组件传值兄弟之间的传递组件插槽匿名插槽具名插槽作用域插槽购物车案例1. 实现组件化布局2、实现 标题和结算功能组件3. 实现列表组件删除功能4. 实现组件…

智源发布《人工智能的认知神经基础白皮书》,一览“AI×脑科学”前沿

图. 智源研究院《人工智能的认知神经基础白皮书》(2021年)来源:智源研究院智源研究院发布 2021 年度《人工智能的认知神经基础白皮书》,兼具专业性与科普性,是人工智能学者探寻“AI脑科学”交叉学科研发创新的导览之作…

解决设置了display:none的元素,会先展示再隐藏

问题:元素明明设置了display:none,但是在刷新页面的时候却会先显示了出来,然后才会隐藏,实现display:none 原因:由于元素渲染的时候,样式还没有应用上去,导致的 解决办法:使用内联样…

Java : Hibernate 动态+分页+自定义字段+自定义实体类查询

// 组合查询public List<ListBookDTO> listSetDSL(PublishingHouse publishingHouse,Integer minDiscount, Integer maxDiscount, Integer minStocks, Integer maxStocks, Integer page, Integer pageSize) { CriteriaBuilder builder em.getCriteriaBuilder(); /…

VR视觉健康标准在穗发布 专家:VR使用不要超过45分钟

来源&#xff1a;VR每日必看近期&#xff0c;“元宇宙”新兴概念备受关注&#xff0c;虚拟现实&#xff08;下称“VR”&#xff09;技术也被国内外媒体评为“第四次工业革命的钥匙之一”。但是&#xff0c;有不少人对VR眼镜等设备感到担忧&#xff1a;使用它会损害视力吗&#…

vue-day04-vue前端交互

文章目录接口调用方式异步promise基于Promise发送Ajax请求Promise 基本API实例方法.then().catch().finally()静态方法.all().race()fetch概览fetch请求参数&#xff08;图片记录&#xff09;fetch API 中的 HTTP 请求fetchAPI 中 响应格式axiosaxios基础用法axios的响应结果ax…

系统上线日期被老外逼得延期了!

在我自己的印象中&#xff0c;一直以来&#xff0c;以为老外做事是比较严禁的&#xff0c;而且是比较高效的&#xff01;没有想到&#xff0c;居然完全不是这么回事&#xff01; a) 不听从中方任何建议&#xff0c;一意孤行&#xff01; b) 事实证明他们的错误之后&#xff0c;…

用数学范畴定义生命的尝试

来源&#xff1a;CreateAMind介绍一篇关于生命构建的论文Polynomial Life: the Structure of Adaptive Systems Toby St. Clere Smithe Topos Institute tobytopos.institute关键词&#xff1a;精确地形式化概念&#xff1b;是什么赋予了物理系统生命&#xff1b;贝叶斯、 信念…

git-从入门到熟悉

文章目录Git历史Git与svn对比SvnGitgit工作流程Git的安装软件下载软件安装安装git for windows安装TortoiseGit安装中文语言包使用git管理文件版本创建版本库使用GitBash使用TortoiseGit添加文件添加文件过程工作区和暂存区修改文件提交修改查看修改历史差异比较还原修改删除文…

java之spring mvc之拦截器

1. springmvc 中的拦截器是由实现 HandlerInterceptor 或者继承 HandlerInterceptorAdapter 来实现的。 2. 自定义实现一个拦截器的步骤&#xff1a; a). 定义一个实现 HandlerInterceptor 接口 的类 public class MyInterceptor implements HandlerInterceptor{/*** 在处理方法…

王飞跃谈正来临的第五次工业革命:“未来一定有多个平行的你”

来源&#xff1a;来源&#xff1a;南方周末王飞跃&#xff0c;中国自动化学会副理事长兼秘书长&#xff0c;中科院复杂系统管理与控制国家重点实验室主任。其主要研究领域为智能科学、社会计算、平行系统、知识自动化和复杂系统的建模、分析与管理&#xff0c;是智能控制方面的…

JS_01JavaScript基础笔记

文章目录JavaScript简介JavaScript简介JavaScript发展史JavaScript基础语法JavaScript_语法_与html结合方式JavaScript_语法_注释&数据类型JavaScript_语法_变量JavaScript_语法_变量_typeofJavaScript_语法_一元运算符JS-基本对象FunctionArrayDateMathRegExpGlobalJavaSc…

【一句日历】2019年8月

【2019年8月1日星期四】 没有钱、没有社会地位、没有文化&#xff0c;人很难掌握自己的命运。 ——王小波 【2019年8月2日星期五】 犹太传统认为&#xff0c;有些愤怒是允许的&#xff0c;并且认为这些愤怒是重要的和不可或缺的&#xff0c;那就是对不公正表示愤怒。但是那种毫…

著名的假设“缸中之脑”,我们怎么确定自己不是活在电脑程序中?

来源&#xff1a;科学的乐园看过电影《黑客帝国》吗&#xff0c;或者玩过游戏《恶灵附身》吗&#xff1f;黑客帝国剧照在电影《黑客帝国》中&#xff0c;主角发现自己所在的“现实世界”实际上是由一个计算机人工智能系统控制。也就是说他的世界实际上是一个由程序编码的虚拟世…

01_MySQL基础课堂笔记

文章目录数据库的基本概念MySQL数据库软件SQLDDL:操作数据库、表DML&#xff1a;增删改表中数据DQL&#xff1a;查询表中的记录1.概览2. 基础查询3. 条件查询数据库的基本概念 MySQL数据库软件 安装卸载配置 SQL 数据库的基本概念 1. 数据库的英文单词&#xff1a; DataBa…

excel保存超过15位数据不变科学计数法的方法

1.csv保存超过11位的长数字时会变成科学计数法&#xff0c;通过设置单元格格式通用0可恢复为数字。当长度超过15位时恢复后超过15位的部分全部为零是因为csv只显示15位有效数字&#xff0c;解决办法在输入前先输入英文状态的单引号&#xff0c;然后再输入数字&#xff0c;如果批…

从“诺奖级”成果到“非主观造假”,时隔6年,韩春雨带着原一作,再发高分文章!...

来源&#xff1a;募格课堂、科学网2022年1月21日&#xff0c;河北科技大学韩春雨团队在Nucleic Acids Research&#xff08;IF17&#xff09;在线发表题为“A Cas6-based RNA tracking platform functioning in a fluorescence-activation mode ”的研究论文。在这篇新论文中&a…

02_MySQL约束课堂笔记

文章目录DQL:查询语句排序插叙概览聚合函数分页查询约束非空约束唯一约束主键约束外键约束数据库的设计一对多/多对多/一对一范式数据库的备份和还原数据库的备份和还原1. DQL:查询语句1. 排序查询2. 聚合函数3. 分组查询4. 分页查询2. 约束 3. 多表之间的关系 4. 范式 5. 数据…

SQL Server 2005: Constraints

Moved to http://blog.tangcs.com/2008/05/28/sql-server-2005-constraints/转载于:https://www.cnblogs.com/WarrenTang/archive/2008/05/28/1209123.html

科技热点思考:元宇宙发展及其风险挑战

来源&#xff1a;创新研究2021年10月&#xff0c;坐拥30亿用户的全球社交巨头脸书&#xff08;Facebook&#xff09;更名“Meta”引爆元宇宙概念&#xff0c;2021年成为当之无愧的“元宇宙元年”。企业抢占高地、资本利益冲动、媒体舆论炒作、个体对虚拟世界的向往等多种因素促…