首页 > 程序开发 > web前端 > HTML/CSS >

关于CSS知识的总结2(必掌握)

2017-09-02

关于CSS知识的总结2(必掌握)。常见属性:1 颜色属性,4种形式:

常见属性

1. 颜色属性

4种形式:

color green

color: #ff6600(16位进制)
简写式: color #f60

color: rgb(255,255,255) 红、绿、蓝每个取值范围0——255

color: rgba(255,255,255,1)红、绿、蓝、透明度

2. font-size字体属性

px
设定一个固定的值

%
父元素的百分比

smaller
比父元素小

larger
比父元素大

inherit
继承父元素的


1)font-family 定义字体

body{ font-family: "Microsoft Yahei" ,serif ;}

可以使用 “, ” 隔开,以确保的那个字体不存在的时候直接使用下一个


2)font-weight 定义字体粗细

       400 = normal(默认值)
       700 = bold(粗)
     bolder(更粗)
    lighter(更细)

取值范围100-900的整百数


3)font-style 定义字体样式

    normal  正常(标准)
    italic  斜体
    oblique 倾斜
   inherit  继承

4)font-variant 小型大写字母

这里写图片描述

    normal  标准

small-caps  小型大写字母显示文本

   inherit  继承

3. text-decoration

         none   默认
    underline   下划线
    overline    上划线
line-through    中间线(删除线)
       blink    闪烁
     inherit    继承

4. 背景属性

重复 background-repeat

repeat 重复平铺满 repeat-x 向y轴重复 repeat-y 向x轴重复 no-repeat 不重复

位置 background-position

横向(left,center,right) 纵向(top,center,bottom)

或者用数值来表示。


简写方式

background:背景颜色 url(图像) 重复 位置

background:#f60 url(images/bg.gif) no-repeat center

5. 文本属性

1)text-align 横向对齐

left、 center right

2)line-height 行高

%
基于字体大小的百分比行高

固定数值


3)text-indent 缩进

父元素的百分比 px固定值 inherit继承

4)word-spacing 单词间距(针对英文)

normal 标准间距 px 固定值 inherit 继承

5)direction 文本方向

意思是文本开始显示的位置变了,不是字的位置。
如,abc 不会反写cba 只是会在右边写abc。

ltr从左到右 默认值 rtl 从右到左 inherit 继承

6)text-transform 文本大小写(针对英文)

capitalize
字母开头大写

upppercase
大写

lowercase
小写

inherit
从父元素继承


6. 边框属性

1)border-style 边框风格

可单独设置四个方向的边框
border-(top/bottom/left/right)-style

样式属性值:

none 无边框 solid 直线边框 dashed 虚线边框 dotted 点状边框 double 双线边框 groove 凸槽边框 ridge 垄状边框 inset inset边框 outset ourset边框 inherit 继承

其中groove、ridge、inset、outset的效果,取决于border-color的值


2)border-width 边框宽度

属性:

thin 细边框 medium 中等边框 thick 粗边框 px固定值的边框 inherit 继承

3)border-color 边框颜色

四种情况:

一个值 (上,下,左,右) 两个值 (上下)(左右) 三个值 (上)(左,右)(下) 四个值 (上)(右)(下)(左)

7. 列表属性

1)list-style-type 标记类型

none 无标记

disc 实心圆(默认)

circle 空心圆

square 实心方块

decimal 数字

decimal-leading-zero 0开头的数字标记 (01,02等)

lower-roman 小写罗马数字

upper-roman 大写罗马数字

lowed-alpha 小写英文字母

upped-alpha 大写英文字母


2)list-style-position 标记位置

inside:列表标记放置在文本内

outside:默认值,标记位于文本的左侧

inherit 继承

3)list-style-image 图像列表标记

URL:图像路径

none 无图像显示 (默认)

inherit 从父元素中继承


简写:

 list-style:square inside url(image/01.gif)
相关文章
最新文章
热点推荐