css笔记第一篇(text font link 列表)

Text

属性 描述
color 设置文本颜色
direction 设置文本方向。
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi 设置或返回文本是否被重写 
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距

color

颜色

color: red|#00ff00|rgb(255,0,0);

direction

文本方向

direction: ltr|rtl|inherit;

text-align

文本对齐方式 (justify:每一行被展开为宽度相等,左右外边距是对齐)

text-align:center|right|left|justify|inherit;

vertical-align

元素的垂直对齐

{vertical-align:text-top;}

属性值

描述
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 使元素及其后代元素的底部与整行的底部对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
length 将元素升高或降低指定的高度,可以是负数。
% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。

text-decoration

文本修饰 用来设置或删除文本的装饰。

主要是用来删除链接的下划线。

a {text-decoration:none;}

 或者用来设置下划线的位置

text-decoration: none|overline|underline|line-through|blink|inherit;

这个属性值可以叠加

text-decoration: underline overline;

text-transform

文本转换,用来指定在一个文本中的大写和小写字母。可用于所有字句变成大写或小写字母,或每个单词的首字母大写。

text-transform: none|uppercase|lowercase|capitalize|inherit;

text-indent

文本缩进,用来指定文本的第一行的缩进。

{text-indent:50px;}

属性值

描述
length 定义固定的缩进。默认值:0。
% 定义基于父元素宽度的百分比的缩进。
inherit 规定应该从父元素继承 text-indent 属性的值。

letter-spacing

字符距离

 {letter-spacing:2px;}

属性值

描述
normal 默认。规定字符间没有额外的空间。
length 定义字符间的固定空间(允许使用负值)。
inherit 规定应该从父元素继承 letter-spacing 属性的值。

line-height

行与行之间的距离

 {line-height:70%;}

属性值

描述
normal 默认。设置合理的行间距。
number 设置数字,此数字会与当前的字体尺寸相乘来设置行间距。
length 设置固定的行间距。
% 基于当前字体尺寸的百分比行间距。
inherit 规定应该从父元素继承 line-height 属性的值。

text-shadow

文本阴影

 {text-shadow:2px 2px #FF0000;}

属性值

描述
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。

注意: text-shadow属性连接一个或更多的阴影文本。属性是阴影,指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来。已失时效的长度为0。

word-spacing

设置字间距

{word-spacing:30px;}

属性值

描述
normal 默认。定义单词间的标准空间。
length 定义单词间的固定空间。
inherit 规定应该从父元素继承 word-spacing 属性的值。

white-space

元素中的空白处理

//不进行换行
{white-space:nowrap;}

属性值

描述
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的
 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到
标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

各种 white-space 值的行为:

换行符 空格和制表符 文字换行 行尾空格
normal 合并 合并 换行 删除
nowrap 合并 合并 不换行 删除
pre 保留 保留 不换行 保留
pre-wrap 保留 保留 换行 挂起
pre-line 保留 合并 换行 删除
break-spaces 保留 保留 换行 换行

 unicode-bidi

设置或者返回文字是否重写

unicode-bidi: normal|embed|bidi-override|initial|inherit;

 属性值

描述
normal 默认。不使用附加的嵌入层面。
embed 创建一个附加的嵌入层面。
bidi-override 创建一个附加的嵌入层面。重新排序取决于 direction 属性。
initial 设置该属性为它的默认值。请参阅 initial。
inherit 从父元素继承该属性。请参阅 inherit。

Fonts 

定义字体,加粗,大小,文字样式。

font

简写属性在一个声明中设置所有字体属性。

可设置的属性是(按顺序): "font-style font-variant font-weight font-size/line-height font-family"

font-size和font-family的值是必需的。如果缺少了其他值,默认值将被插入,如果有默认值的话。

 font:15px arial,sans-serif;

Font 特性

描述
font-style 规定字体样式。
font-variant 规定字体异体。
font-weight 规定字体粗细。
font-size/line-height 规定字体尺寸和行高。
font-family 规定字体系列。
caption 定义被标题控件(比如按钮、下拉列表等)使用的字体。
icon 定义被图标标记使用的字体。
menu 定义被下拉列表使用的字体。
message-box 定义被对话框使用的字体。
small-caption caption 字体的小型版本。
status-bar 定义被窗口状态栏使用的字体。

font-family

属性指定一个元素的字体。

 可以把多个字体名称作为一个"回退"系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。

font-style

指定斜体文字的字体样式属性。

属性值

描述
normal 默认值。浏览器显示一个标准的字体样式。
italic 浏览器会显示一个斜体的字体样式。
oblique 浏览器会显示一个倾斜的字体样式。
inherit 规定应该从父元素继承字体样式。

font-variant

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

属性值

描述
normal 默认值。浏览器会显示一个标准的字体。
small-caps 浏览器会显示小型大写字母的字体。
inherit 规定应该从父元素继承 font-variant 属性的值。

font-size

设置文本的大小。

/* ,绝对大小值 */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
 
/* ,相对大小值 */
font-size: larger;
font-size: smaller;
 
/* ,长度值 */
font-size: 12px;
font-size: 0.8em;
 
/* ,百分比值 */
font-size: 80%;
 
font-size: inherit;

属性值

描述
  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large

把字体的尺寸设置为不同的尺寸,从 xx-small 到 xx-large。

默认值:medium。

smaller 把 font-size 设置为比父元素更小的尺寸。
larger 把 font-size 设置为比父元素更大的尺寸。
length 把 font-size 设置为一个固定的值。
% 把 font-size 设置为基于父元素的一个百分比值。
inherit 规定应该从父元素继承字体尺寸。

font-weight

指定字体的粗细。

属性值

描述
normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
定义由细到粗的字符。400 等同于 normal,而 700 等同于 bold。
inherit 规定应该从父元素继承字体的粗细。

Link 

a标签的四个状态:

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

当设置为若干链路状态的样式,也有一些顺序规则:

  • a:hover 必须跟在 a:link 和 a:visited后面
  • a:active 必须跟在 a:hover后面

text-decoration

属性主要用于删除链接中的下划线。

a {text-decoration:none;}

background-color

背景颜色属性指定链接背景色。

a {background-color:#B2FF99;}

列表

CSS 列表属性作用如下:

  • 设置不同的列表项标记为有序列表
  • 设置不同的列表项标记为无序列表
  • 设置列表项标记为图像

在 HTML中,有两种类型的列表:

  • 无序列表 ul - 列表项标记用特殊图形(如小黑点、小方框等)
  • 有序列表 ol - 列表项的标记有数字或字母

属性 描述
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image 将图像设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。

 

list-style

list-style 简写属性在一个声明中设置所有的列表属性。

可以设置的属性(按顺序): list-style-type, list-style-position, list-style-image.

可以不设置其中的某个值,比如 "list-style:circle inside;" 也是允许的。未设置的属性会使用其默认值。

属性值

描述
list-style-type 设置列表项标记的类型。
list-style-position 设置在何处放置列表项标记。
list-style-image 使用图像来替换列表项的标记。
initial 将这个属性设置为默认值。
inherit 规定应该从父元素继承 list-style 属性的值。

 

list-style-type

设置列表项标志的类型。

属性值

描述
none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。
decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek 小写希腊字母(alpha, beta, gamma, 等。)
lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
hebrew 传统的希伯来编号方式
armenian 传统的亚美尼亚编号方式
georgian 传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic 简单的表意数字
hiragana 标记是:a, i, u, e, o, ka, ki, 等。(日文平假名字符)
katakana 标记是:A, I, U, E, O, KA, KI, 等。(日文片假名字符)
hiragana-iroha 标记是:i, ro, ha, ni, ho, he, to, 等。(日文平假名序号)
katakana-iroha 标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名序号)

list-style-position

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

属性值

描述
inside 列表项目标记放置在文本以内,且环绕文本根据标记对齐。
outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。
inherit 规定应该从父元素继承 list-style-position 属性的值。

list-style-position属性指示如何相对于对象的内容绘制列表项标记。 

css笔记第一篇(text font link 列表)_第1张图片

list-style-image

指定列表中的列表项标记的图像。

属性值

描述
URL 图像的路径。
none 默认。无图形被显示。
inherit 规定应该从父元素继承 list-style-image 属性的值。

你可能感兴趣的:(css,html,前端)