CSS3属性

≡放荡痞女 提交于 2020-03-01 02:03:26

 字体属性

font

font:字体风格[字体加粗]<字体大小>[/行高]<字体族科>

font-family 字体族科 宋体|微软雅黑

font-family:"Arial","Helvetica",sans-serif;

font-size 字体大小

font-style 字体风格 normal | italic | oblique (斜体)

font-weight 字体加粗 normal | bold | lighter

font-variant 字体变形 normal | small-caps

 

 文字颜色

color 设置文字颜色 

常用color#两位16进制表示

 

 文本属性

letter-spacing 字母间隔 值为长度,可以是负值

word-spacing 词的间距(通过空格识别)

text-decoration 文字修饰

underline

overline

line-through

none(默认)

text-align 横向排列 left | right | center

vertical-align 垂直对其方式

baseline: 将支持valign特性的对象的内容与基线对齐

sub: 垂直对齐文本的下标

super: 垂直对齐文本的上标

top: 将支持valign特性的对象的内容与对象顶端对齐

text-top: 将支持valign特性的对象的文本与对象顶端对齐

middle: 将支持valign特性的对象的内容与对象中部对齐

bottom: 将支持valign特性的对象的文本与对象底端对齐

text-bottom: 将支持valign特性的对象的文本与对象顶端对齐

<percentage>: 用百分比指定由基线算起的偏移量。可以为负值。基线对于百分数来说就是0%。

<length>: 用长度值指定由基线算起的偏移量。可以为负值。基线对于数值来说为0。(CSS2)

text-indent 文本缩进 2em(2个字) 50px

line-height 设置行间距离 不允许使用负值

word-break 规定自动换行的处理方法

normal        使用浏览器默认的换行规则。

break-all    允许在单词内换行。

keep-all    只能在半角空格或连字符处换行。

word-wrap 允许长单词或URL地址换行到下一行

normal        只在允许的断字点换行(浏览器保持默认处理)。

break-word    在长单词或 URL 地址内部进行换行。

overflow-wrap CSS3中把word-wrap 改名为 overflow-wrap

white-space

normal:     默认处理方式。

pre:        用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字超出边界时不换行。可查阅pre对象

nowrap:     强制在同一行内显示所有文本,合并文本间的多余空白,直到文本结束或者遭遇br对象。

pre-wrap:   用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字碰到边界时发生换行。

pre-line:   保持文本的换行,不保留文字间的空白距离,当文字碰到边界时发生换行。

 

 

css尺寸相关属性

height 高度

min-height 最小高度

max-height 最大高度

width 宽度

min-width 最小宽度

max-width 最大宽度

 

css内边距

padding 内边距

padding-left 左内边距

padding-right 右内边距

padding-top 上内边距

padding-bottom 下内边距

 

 边框

border border-left|border-right|border-top|border-bottom

 

border: 边框宽度  边框样式  边框颜色

 

border-style border-top-style | border-right-style | * border-bottom-style | border-left-style

dotted   点线

dashed  虚线

solid      实线

double 双实线

groove 槽状线

ridge     脊线

inset      内嵌效果

outset   外凸效果

 

border-color 边框颜色 border-left-color | border-right-color | border-top-color | border-bottom-color

border-width 边框宽度 border-left-width | border-right-width | border-top-width | border-bottom-width

 

 

背景

background

background:<背景颜色>|<背景图像>|<背景重复>|<背景附件>|<背景位置>

 

例:background:red url('./123.png') no-repeat 100px 10px;

 

background-color 设置背景色,或设置为transparent(透明)

background-image 背景图片 url 或者 none

background-repeat 背景重复 repeat | repeat-x | repeat-y | no-repeat

background-attachment 背景附件 scroll | fixed

background-position 背景位置

background-position: 水平方向 垂直方向

background-position:left top;

background-position:100px 100px;

 

left | center | right (横向)

top | center | bottom (纵向)

或者使用百分比或者数值

 

 

鼠标光标设置 CSS属性)

cursort

 

text  文字选择器

crosshair   十字架

wait  等待

help  帮助

pointer 小手

 

CSS列表属性

list-style-type

disc         实心点

circle       圆圈

square       小方框

decimal      数字

lower-roman  小写罗马字

upper-roman  大写罗马字

lower-alpha  小写字母

upper-alpha  大写字母

list-style-position 位置

inside   标示在li里面

outside  标示在li外面

list-style-image 使用图片 url(./123.gif)

 

list-style 复合属性

list-style: type position imagelist-style: none

 

 

CSS列表属性

table-layout 表格布局方式

auto(默认)  布局将基于各单元格的内容,换言之,可能你给某个单元格定义宽度为100px,但结果可能并不是100px。表格在每一单元格读取计算之后才会显示出来,速度很慢

fixed       平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关。也就是说,内容可能被裁切

 

border-collapse 表格的行和单元格的边是合并还是独立

separate (默认)  独立

collapse  合并

border-spacing 当表格边框独立时,行和单元格的边框在横向和纵向上的间距

caption-side caption 在table上面还是下面

top    

bottom

empty-cells 没有内容的单元格隐藏还是显示

show (默认)

hide

 

 盒子模型相关CSS属性

布局属性

display

 

| 值           | 描述                                                 |

| ------------ | ---------------------------------------------------- |

| none         | 此元素不会被显示。                                   |

| block        | 此元素将显示为块级元素,此元素前后会带有换行符。     |

| inline       | 默认。此元素会被显示为内联元素,元素前后没有换行符。 |

| inline-block | 行内块元素。(CSS2.1 新增的值)                      |

 

float

 

| 值      | 描述                                                 |

| ------- | ---------------------------------------------------- |

| left    | 元素向左浮动。                                       |

| right   | 元素向右浮动。                                       |

| none    | 默认值。元素不浮动,并会显示在其在文本中出现的位置。 |

| inherit | 规定应该从父元素继承 float 属性的值。                |

 

clear

 

| 值      | 描述                                  |

| ------- | ------------------------------------- |

| left    | 在左侧不允许浮动元素。                |

| right   | 在右侧不允许浮动元素。                |

| both    | 在左右两侧均不允许浮动元素。          |

| none    | 默认值。允许浮动元素出现在两侧。      |

| inherit | 规定应该从父元素继承 clear 属性的值。 |

 

visibility

| 值       | 描述                                                         |

| -------- | ------------------------------------------------------------ |

| visible  | 默认值。元素是可见的。                                       |

| hidden   | 元素是不可见的。                                             |

| collapse | 当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。 |

| inherit  | 规定应该从父元素继承 visibility 属性的值。                   |

overflow

 

| 值      | 描述                                                     |

| ------- | -------------------------------------------------------- |

| visible | 默认值。内容不会被修剪,会呈现在元素框之外。             |

| hidden  | 内容会被修剪,并且其余内容是不可见的。                   |

| scroll  | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |

| auto    | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |

| inherit | 规定应该从父元素继承 overflow 属性的值。                 |

overflow-x

overflow-y

尺寸

width / max-width / min-width

height / max-height / min-height

内补白

padding / padding-left / padding-right / padding-top / padding-bottom

外边距

margin

margin-left

margin-right

margin-top

margin-bottom

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!