zoukankan      html  css  js  c++  java
  • 常用的CSS声明中属性分模块总结(我们老师总结的,咱们新手一起学习)

    一、字体属性(font)

    1.font-faminly

    规定元素的字体系列,设置文本使用什么字体,取值:“宋体”、“微软雅黑”等。多个值之间使用“,”分隔。

    2.font-style

    字体的样式,设置文本是否斜体,取值包括normal/italic/oblique。

    3.font-variant

    设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。,取值包括normal/small-caps。

    4.font-weight

    设置文本字体的粗细,取值包括normal/bold/bolder/lighter。

    5.font-size

    字体的大小(单位可以是px,pt等)。

    二、颜色和背景属性(background)

    1.color

    定义前景色,比如网页页面中的文本的颜色等。

    2.background-color

    定义背景颜色,设置区域或整个网页页面的背景颜色。

    3.background-image

    定义背景图片,设置区域或整个网页页面的背景图像。background-image:url('图片存放路径URL');

    4.background-repeat

    背景图像重复(平铺)方式,取值包括repeat-x/repeat-y/no-repeat。

    5.background-attachment

    设置背景图像滚动方式,取值包括scroll/fixed/local。

    6.background-position

    设置背景图像的初始位置,取值包括bottom/center/left/right/top。

    7.background-size  

    设置背景图像的大小,取值包括数值、百分比或者auto(保持图片原样不变)/cover(放大图片填满整个区域)/contain(保持本身的宽高比例缩放)。

    8.background-origin

    规定背景图片的定位区域。取值包括padding-box(相对于内边框来定位,定位时不包括边框的宽度)/border-box(相对于边框盒来定位,定位时包括边框的宽度)/content-box(相对于内容框来定位)。

    9.background-clip

    规定背景图片的绘制区域。取值包括padding-box(背景被裁切到内边框)/border-box(背景被裁切到边框盒)/cotent-box(背景被裁切到内容框)。

    三、文本属性(text)

    1.text-align

    文字的水平对齐方式,取值包括left/right/center/justify。

    2.text-indent

    文本的首行缩进,一般采用相对单位进行设置,比如2em。

    3.line-height

    文本的行高,当设置行高为区域高度时,区域中的文本垂直方向上处于居中位置,当设置为1/2区域高度时,区域中的内容分两行显示。

    4.text-shadow

    为文字添加阴影效果。取值包括:h-shadow(水平阴影位置,允许负值 正值表示右阴影,反之左阴影) v-shadow(垂直阴影位置,允许负值,正值表示下阴影,反之上阴影) blur(模糊位置,值越大,阴影越模糊) color(阴影颜色)。

    说明:这是一个复合属性,由多个属性值组成,多个属性值之间使用空格分隔。

    5.word-wrap

    设置长的内容可以自动换行,以防止当一个单词太长找不到它的自然断句点时产生溢出现象。取值包括normal(只在允许的断句点换行)/break-word(在长单词或URL地址内部进行换行)。

    6.white-space

    设置如何处理元素内的空白。可以取值包括:normal(默认。空白会被浏览器忽略)pre(空白会被浏览器保留)nowrap(文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止)等。

    7.text-overflow 

    规定当文本溢出包含元素时的处理方式。可以取值包括:clip(修剪文本)ellipsis(显示省略符号来代表被修剪的文本)string(使用给定的字符串来代表被修剪的文本)。

    9.overflow 

    规定当内容溢出元素框时的处理方式。可以取值包括:visible(内容不会被修剪,会呈现在元素框之外)hidden(内容会被修剪,并且其余内容是不可见的)scroll(内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容)auto(如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容)等。

    10.text-decoration

    规定文本修饰方式。可以取值包括:none(没有任何修饰,默认样式)underline(定义文本下划线)overline(定义文本上划线)line-through(定义文本删除线)等。

    四、块属性(盒模型属性)

    1.margin

    边距属性,设置两个盒模型间的距离。可以单独定义margin-top(上边距)margin-right(右边距)margin-bottom(下边距)margin-left(左边距)。也可以整体定义。

    2.padding

    间距属性,设置盒模型边框与内容之间的距离。可以单独定义padding-top(上边距)padding-right(右边距)padding-bottom(下边距)padding-left(左边距)。也可以整体定义。

    3.border

    边框属性,设置盒模型边框的宽度、颜色、边框样式。可以单独定义border-top(上边框)border-right(右边框)border-bottom(下边框)border-left(左边框)。也可以整体定义。

    1)边框圆角border-radius(四个角),也可以单独定义某个角,比如border-top-left-radius(左上角),border-top-right-radius(右上角),border-bottom-left-radius(左下角),border-bottom-left-radius(右下角)。

    2)边框图片border-image属性,可以设置3个取值,分别为:图片路径 边框宽度(可以是像素值,也可以是百分比) 背景图像铺放方式(可以取值:stretch 拉伸、repeat 重复、round 平铺,其中stretch是默认值)。

    4.width

    区域宽度。

    5.height

    区域高度。

    6.display

    规定元素应该生成的框的类型。可以取值包括:none(元素不显示,隐藏)block(显示为块级元素)inline(显示为内联元素或者叫行内元素)inline-block(显示为行内块级元素)list-item(元素作为列表显示)等。

    7.float

    定义元素在哪个方向浮动。其一个重要作用是使块级元素可以在一条直线上水平排列。可以取值包括:left(向左浮动)right(向右浮动)none(不浮动)。

    8.clear

    规定哪一边上不允许出现浮动元素。该属性可用于使用了浮动属性的元素之后的元素不再使用浮动,恢复正常显示。比如块级元素重新单行显示。可以取值包括:left(左侧不允许出现浮动元素)right(右侧不允许出现浮动元素)both(两侧都不允许出现浮动元素)。

    9.position

    规定元素的定位类型。可以取值包括:

    1)absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

    2)fixed 生成固定定位的元素,相对于浏览器窗口进行定位(左上角)。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

    3)relative 生成相对定位的元素,相对于其正常位置进行定位(默认出现的位置)。比如:"left:20px" 会向元素的右侧位移 20 像素。

    4)static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

    10.z-index

    设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

    五、超级链接(伪类)

    1.a:visited

    访问过之后的效果(单击超级链接之后)。

    2.a:link

    未访问过的效果(默认情况)。

    3.a:hover

    鼠标放到超级链接上的效果。

    六、列表属性

    1.list-style-type

    列表项前面的符号,取值包括none/circle/disc等多个。

    2.list-style-image

    使用自定义图标设置列表项前面的显示符号,对应着一个路径(URL)。

    3.list-style-position

    列表项前面符号的位置,取值包括inside/outside。

  • 相关阅读:
    cantor 数表
    利用form的“acceptcharset”在不同编码的页面间提交表单
    <li>标签,在文字超出宽度时引起混乱的解决办法
    java中 Integer.getInteger(String str)的疑惑
    SQL语句集锦
    禁用鼠标右键
    ROW_NUMBER() OVER函数的基本用法
    listview
    decodeResource
    LinkedList
  • 原文地址:https://www.cnblogs.com/jyt2000/p/12617396.html
Copyright © 2011-2022 走看看