css手册总结(三)

颜色

1.color

设置文本颜色。无默认值。

  • transparent:用来指定全透明色彩。
  • currentColor: currentColor是 color 属性的值,具体意思是指:currentColor关键字的使用值是color属性值的计算值。

2.opacity

定义元素的不透明度。
取值:number:使用浮点数指定对象的不透明度。值被约束在0.0~1.0范围内,如果超过了这个范围,其计算结果将截取到与之最相近的值。

  • 当一个元素定义了opacity属性,并且值小于1时,那么它的子元素也会同样拥有相同的透明度。
  • 当一个元素定义了opacity属性,并且值小于1时,将会创建一个新的堆叠上下文;如果其它的元素为非定位元素,那么该元素的堆叠级别将会高于其它元素。
  • 对于尚不支持opacity属性的IE浏览器可以使用IE私有的滤镜属性来实现与opacity相同的效果

字体

1.font

  • font-style:指定文本字体样式,指定元素的文本是否为斜体。
    取值:
    normal:指定文本字体样式为正常的字体
    italic:指定文本字体样式为斜体。对于没有设计斜体的特殊字体,如果要使用斜体外观将应用oblique
    oblique:指定文本字体样式为倾斜的字体。人为的使文字倾斜,而不是去选取字体中的斜体字
  • font-variant:定义元素的文本是否为小型的大写字母。
    取值:
    normal:正常的字体
    small-caps:小型的大写字母字体
    font-variant.jpg
  • font-weight:定义元素文本字体的粗细。
    取值:
    normal:正常的字体。相当于数字值400
    bold:粗体。相当于数字值700。
    bolder:定义比继承值更重的值
    lighter:定义比继承值更轻的值
    <integer>:用数字表示文本字体粗细。取值范围:100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
  • font-size:定义元素的字体大小。
  • font-family:定义元素文本的字体名称序列。
  • font-stretch:定义元素的文字是否横向拉伸变形。

取值:
normal:正常文字宽度
ultra-condensed:比正常文字宽度窄4个基数。
extra-condensed:比正常文字宽度窄3个基数。
condensed:比正常文字宽度窄2个基数。
semi-condensed:比正常文字宽度窄1个基数。
semi-expanded:比正常文字宽度宽1个基数。
expanded:比正常文字宽度宽2个基数。
extra-expanded:比正常文字宽度宽3个基数。
ultra-expanded:比正常文字宽度宽4个基数。

  • font-size-adjust:定义元素的 aspect 值,用以保持首选字体的 x-height。

文本

1.text-transform:定义元素的文本如何转换大小写。

取值:
none:无转换
capitalize:将每个单词的第一个字母转换成大写
uppercase:将每个单词转换成大写
lowercase:将每个单词转换成小写
full-width:将所有字符转换成fullwidth形式。如果字符没有相应的fullwidth形式,将保留原样。这个值通常用于排版拉丁字符和数字等表意符号。(CSS3)

2.white-space:指定元素是否保留文本间的空格、换行;指定文本超过边界时是否换行。

取值:
normal:默认处理方式。会将序列的空格合并为一个,内部是否换行由换行规则决定。
pre:原封不动的保留你输入时的状态,空格、换行都会保留,并且当文字超出边界时不换行。等同 pre 元素效果
nowrap:与normal值一致,不同的是会强制所有文本在同一行内显示。
pre-wrap:与pre值一致,不同的是文字超出边界时将自动换行。
pre-line:与normal值一致,但是会保留文本输入时的换行。

3.tab-size:定义元素内容中制表符的长度。

  • 该属性决定了制表符(U+0009)的宽度,number代表空格(U+0020)的倍数(如:tab-size:4; 表示制表符宽度是4个空格的宽度)
  • 只有当white-space的属性值为:pre | pre-wrap时,该属性的定义才有效

通俗说就是在pre预格式下或者white-space属性为pre-wrap下可以设置空格的宽度。

4.word-break:定义元素内容文本的字间与字符间的换行行为。

normal:默认的换行规则。依据各自语言的规则,允许在字间发生换行。
keep-all:对于 CJK(中文,韩文,日文)文本不允许在字符内发生换行。Non-CJK 文本表现同normal。
break-all:对于 Non-CJK 文本允许在任意字符内发生换行。该值适合包含一些非亚洲文本的亚洲文本,比如使连续的英文字符断行。
break-word:与break-all相同,不同的地方在于它要求一个没有断行破发点的词必须保持为一个整体单位。这与word-wrapbreak-word值效果相同

  • break-all会在文本内容遇见边界时,强制将文本打断换行,而不考虑单词是否是完整的一个单位
  • break-word同样也会在文本内容遇见边界时,强制将文本打断换行,不同的在于它会考虑单词是否完整,如果当前行无法放下需要被打断的单词,为了保持完整性,会将整个单词放到下一行进行展示

5.word-wrap/overflow-wrap:设置或检索当内容超过指定容器的边界时是否断行。

取值:
normal:允许内容顶开或溢出指定的容器边界。
break-word:内容将在边界内换行,如果需要,单词内部允许断行。它要求一个没有断行破发点的词必须保持为一个整体单位,如果当前行无法放下需要被打断的单词,为了保持完整性,会将整个单词放到下一行进行展示。这与word-breakbreak-word值效果相同

6.text-align:定义元素内容的水平对齐方式。

取值left:内容左对齐。
center:内容居中对齐。
right:内容右对齐。
justify:内容两端对齐,但对于强制打断的行(被打断的这一行)及最后一行(包括仅有一行文本的情况,因为它既是第一行也是最后一行)不做处理。(CSS3)
start:内容对齐开始边界。(CSS3)
end:内容对齐结束边界。(CSS3)
match-parent:这个值和inherit表现一致,只是该值继承的startend关键字是针对父母的direction值并计算的,计算值可以是 left 和 right 。(CSS3)
justify-all:效果等同于justify,不同的是最后一行也会两端对齐。(CSS3)

7.word-spacing:指定单词之间的额外间隙。

  • 该属性可以将指定的额外间隙添加到每个单词之后,最后一个单词不添加,这意外着可以通过该属性控制单词间的间隙大小。
  • 判断是否为单词的依据是单词间是否有单词分割符,比如:空格。
<p>howare you!</p>
p{word-spacing:20px;}

8.letter-spacing:指定字符之间的额外间隙。

  • 该属性可以将指定的额外间隙添加到每个字符之后,最后一个单词也会被添加。

9.text-indent:定义块内文本内容的缩进。

text-indent: 30px;
//如果是想要首行空两个字大小可以用em
text-indent:2em;

9.vertical-align:定义行内元素在行框内的垂直对齐方式。

取值:
baseline:把当前盒的基线与父级盒的基线对齐。如果该盒没有基线,就将底部外边距的边界和父级的基线对齐(默认)
sub:把当前盒的基线降低到合适的位置作为父级盒的下标(该值不影响该元素文本的字体大小)
super:把当前盒的基线提升到合适的位置作为父级盒的上标(该值不影响该元素文本的字体大小)
text-top:把当前盒的top和父级的内容区的top对齐
text-bottom:把当前盒的bottom和父级的内容区的bottom对齐
middle:把当前盒的垂直中心和父级盒的基线加上父级的半x-height对齐
top:把当前盒的top与行盒的top对齐
bottom:把当前盒的bottom与行盒的bottom对齐

10.line-height:定义元素中行框的最小高度。

  • 取值:长度,白分比,长度因子

11.text-size-adjust:定义移动端页面中元素文本的大小如何调整。

文本装饰属性

1.text-decoration:简写属性。定义元素文本装饰。

  • text-decoration-line:定义元素文本装饰线条位于文本的哪个位置。

取值:
none:指定文字无装饰
underline:指定文字的装饰是下划线
overline:指定文字的装饰是上划线
line-through:指定文字的装饰是贯穿线
blink:指定文字的装饰是闪烁。

  • text-decoration-color:指定元素文本装饰线条的颜色。
  • text-decoration-style:定义元素文本装饰线条的形状。

取值:
solid:实线
double:双线
dotted:点状线条
dashed:虚线
wavy:波浪线

  • text-shadow:定义文字是否有阴影及模糊效果。

取值:
none:无阴影
<length>①:第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②:第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③:如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<color>:设置对象的阴影的颜色。

书写模式

1.direction:检索或设置文本流的方向。

取值:
ltr:文本流从左到右。
rtl:文本流从右到左。

2.unicode-bidi:用于同一个页面里存在从不同方向读进的文本显示。

取值:
normal:对象不打开附加的嵌入层,对于内联元素,隐式重排序跨对象边界进行工作。
embed:属性的值指定嵌入层,在对象内部进行隐式重排序。
bidi-override:属性的值重排序。忽略隐式双向运算规则。

3.writing-mode:设置或检索对象的内容块固有的书写方向。西方语言一般都是 lr-tb 的书写方式,但是亚洲语言 lr-tb | tb-rl 的书写方式都有。

取值:
horizontal-tb:水平方向自上而下的书写方式。即 left-right-top-bottom(类似IE私有值lr-tb)
vertical-rl:垂直方向自右而左的书写方式。即 top-bottom-right-left(类似IE私有值tb-rl)
vertical-lr:垂直方向自左而右的书写方式。即 top-bottom-left-right
lr-tb:左-右,上-下。对象中的内容在水平方向上从左向右流入,后一行在前一行的下面。 所有的字形都是竖直向上的。这种布局是罗马语系使用的(IE)
tb-rl:上-下,右-左。对象中的内容在垂直方向上从上向下流入,自右向左。后一竖行在前一竖行的左面。全角字符是竖直向上的,半角字符如拉丁字母或片假名顺时针旋转90度。这种布局是东亚语系通常使用的(IE)

此属性效果不能被累加使用。例如,父对象的此属性值设为 tb-rl ,子对象再设置该属性将不起作用,仍应用父对象的设置。

列表

1.list-style:复合属性。设置列表项目相关内容

  • list-style-image:设置或检索作为对象的列表项标记的图像。
    none:不指定图像,默认内容标记将被 <' list-style-type '> 代替。
    <url>:使用绝对或相对地址指定列表项标记图像。如果图像地址无效,默认内容标记将被 <' list-style-type '> 代替。
  • list-style-position:设置或检索作为对象的列表项标记如何根据文本排列。

取值:
outside:列表项目标记放置在文本以外,且环绕文本不根据标记对齐
inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐


list-sytle-position.jpg
  • list-style-type:设置或检索对象的列表项所使用的预设标记。

取值:
disc:实心圆(CSS1)
circle:空心圆(CSS1)
square:实心方块(CSS1)
decimal:阿拉伯数字(CSS1)
lower-roman:小写罗马数字(CSS1)
upper-roman:大写罗马数字(CSS1)
lower-alpha:小写英文字母(CSS1)
upper-alpha:大写英文字母(CSS1)
none:不使用项目符号(CSS1)
armenian:传统的亚美尼亚数字(CSS2)
cjk-ideographic:浅白的表意数字(CSS2)
georgian:传统的乔治数字(CSS2)
lower-greek:基本的希腊小写字母(CSS2)
hebrew:传统的希伯莱数字(CSS2)
hiragana:日文平假名字符(CSS2)
hiragana-iroha:日文平假名序号(CSS2)
katakana:日文片假名字符(CSS2)
katakana-iroha:日文片假名序号(CSS2)
lower-latin:小写拉丁字母(CSS2)
upper-latin:大写拉丁字母(CSS2)

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

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,756评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,315评论 0 11
  • 一、HTML5 1.1 认识HTML5 HTML5并不仅仅只是作为HTML标记语言的一个最新版本,更重要的是它制定...
    福尔摩鸡阅读 15,905评论 14 51
  • 一、CSS简介 1、简单介绍 CSS 指层叠样式表 (Cascading Style Sheets),样式定义如何...
    千年幸福论阅读 825评论 0 0
  • 久违的晴天,家长会。 家长大会开好到教室时,离放学已经没多少时间了。班主任说已经安排了三个家长分享经验。 放学铃声...
    飘雪儿5阅读 7,523评论 16 22