css复习

<meta charset="utf-8">

使用 opacity 属性为元素的背景添加透明度时,其所有子元素都继承相同的透明度

RGBA 颜色值设置背景色而不是文本的不透明度

background-position 属性用于指定背景图像的位置。

background-attachment 属性指定背景图像是应该滚动还是固定的(不会随页面的其余部分一起滚动)

指定应该固定背景图像:background-attachment: fixed;

指定背景图像应随页面的其余部分一起滚动:background-attachment: scroll;

在使用简写属性时,属性值的顺序为:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

border-style 属性指定要显示的边框类型。

允许以下值:

  • dotted - 定义点线边框
  • dashed - 定义虚线边框
  • solid - 定义实线边框
  • double - 定义双边框

border 属性是以下各个边框属性的简写属性:

  • border-width
  • border-style(必需)
  • border-color

border-radius 属性用于向元素添加圆角边框

auto 值

您可以将 margin 属性设置为 auto,以使元素在其容器中水平居中。

然后,该元素将占据指定的宽度,并且剩余空间将在左右边界之间平均分配。

inherit 值

本例使 <p class="ex1"> 元素的左外边距继承自父元素(<div>):

实例

使用 inherit 值:

div { border: 1px solid red; margin-left: 100px; } p.ex1 { margin-left: inherit; }

使用 box-sizing 属性。这将导致元素保持其宽度。如果增加内边距,则可用的内容空间会减少。

CSS 轮廓

轮廓是在元素周围绘制的一条线,在边框之外,以凸显元素。

CSS 拥有如下轮廓属性:

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

注意:轮廓与边框不同!不同之处在于:轮廓是在元素边框之外绘制的,并且可能与其他内容重叠。同样,轮廓也不是元素尺寸的一部分;元素的总宽度和高度不受轮廓线宽度的影响。

除非设置了 outline-style 属性,否则其他轮廓属性都不会有任何作用!

使用 outline-color: invert,执行了颜色反转。这样可以确保无论颜色背景如何,轮廓都是可见的

outline-offset 属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。

下例指定边框边缘外 25px 的轮廓:

此段落的边框外有 25px 的轮廓。

实例

p { margin: 50px; border: 1px solid black; outline: 1px solid red; outline-offset: 25px; }

text-align 属性设置为 "justify" 后,将拉伸每一行,以使每一行具有相等的宽度,并且左右边距是直的

direction 和 unicode-bidi 属性可用于更改元素的文本方向:

实例

p { direction: rtl; unicode-bidi: bidi-override; }

vertical-align 属性设置元素的垂直对齐方式。

text-transform 属性用于指定文本中的大写和小写字母。

它可用于将所有内容转换为大写或小写字母,或将每个单词的首字母大写

text-indent 属性用于指定文本第一行的缩进

letter-spacing 属性用于指定文本中字符之间的间距

line-height 属性用于指定行之间的间距

word-spacing 属性用于指定文本中单词之间的间距

white-space 属性指定元素内部空白的处理方式

text-shadow 属性为文本添加阴影。

在 CSS 中,有五个通用字体族:

  • 衬线字体(Serif)- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
  • 无衬线字体(Sans-serif)- 字体线条简洁(没有小笔画)。它们营造出现代而简约的外观。
  • 等宽字体(Monospace)- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
  • 草书字体(Cursive)- 模仿了人类的笔迹。
  • 幻想字体(Fantasy)- 是装饰性/俏皮的字体。

font-family 属性规定文本的字体。

font-style 属性主要用于指定斜体文本。

此属性可设置三个值:

  • normal - 文字正常显示
  • italic - 文本以斜体显示
  • oblique - 文本为“倾斜”

font-variant 属性指定是否以 small-caps 字体(小型大写字母)显示文本

cursor 属性指定要显示的光标类型

list-style-image 属性将图像指定为列表项标记

list-style-position 属性指定列表项标记(项目符号)的位置。

"list-style-position: outside;" 表示项目符号点将在列表项之外。列表项每行的开头将垂直对齐。

"list-style-position: inside;" 表示项目符号将在列表项内。由于它是列表项的一部分,因此它将成为文本的一部分,并在开头推开文本

border-collapse 属性设置是否将表格边框折叠为单一边框

如需控制边框和表格内容之间的间距,请在 <td> 和 <th> 元素上使用 padding 属性

position: sticky; 的元素根据用户的滚动位置进行定位。

粘性元素根据滚动位置在相对(relative)和固定(fixed)之间切换

z-index 属性指定元素的堆栈顺序

overflow 属性可设置以下值:

  • visible - 默认。溢出没有被剪裁。内容在元素框外渲染
  • hidden - 溢出被剪裁,其余内容将不可见
  • scroll - 溢出被剪裁,同时添加滚动条以查看其余内容
  • auto - 与 scroll 类似,但仅在必要时添加滚动条

overflow 属性仅适用于具有指定高度的块元素

设置元素的 display 属性仅会更改元素的显示方式,而不会更改元素的种类。因此,带有 display: block; 的行内元素不允许在其中包含其他块元素。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 222,000评论 6 515
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,745评论 3 399
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 168,561评论 0 360
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,782评论 1 298
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,798评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,394评论 1 310
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,952评论 3 421
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,852评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,409评论 1 318
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,483评论 3 341
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,615评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,303评论 5 350
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,979评论 3 334
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,470评论 0 24
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,571评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 49,041评论 3 377
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,630评论 2 359

推荐阅读更多精彩内容

  • 1、css简介 css是层叠样式表,主要用来设置网页的样式,排版,布局、美化页面 2、css规则 css语句都是由...
    爱学习的陈序猿阅读 478评论 0 1
  • 1、插入视频 var myVideo=document.getElementById("video1"); fun...
    徐薇薇阅读 472评论 0 9
  • 不一定要记到繁多的样式。实际上只要通过辅助工具就可以了。样式规则选择器:HTML元素选择器Class选择器Id选择...
    200813阅读 382评论 0 0
  • CSS组成 CSS=选择器+声明(属性:属性值) 选择器 1. 简单选择器 标签选择器写法 ID选择器写法 cla...
    jdzhangxin阅读 414评论 2 1
  • 内容简述 关于CSS,确实太繁杂了,内容多。写好不易,基本上就这个调了。大家肯定听过CSS奇淫技巧吧,关于这个我还...
    lifeColder阅读 587评论 0 2