【CSS】三、常见属性

CSS 一、使用CSS样式的方式
CSS 二、定义样式表
CSS 三、常见属性
CSS 四、DIV+CSS布局## 三、常见属性

1.颜色属性

color属性定义文本的颜色

  • color:green
  • color:#ff6600
  • color:#f60 简写式
  • color:rgb(255,255,255) 红(R)、绿(G)、蓝(B) 每个的取值范围0~255
  • color:rgba(255,255,255,1)
    RGBA是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha的(色彩空间)透明度

2.字体属性

1) font-size 字体大小

a. px:设置一个固定的值
b. %:父元素的百分比
c. smaller:比父元素更小
d. larger:比父元素更大
e. inherit:继承父元素

2) font-family 定义字体

font-family:微软雅黑,serif;
可以使用“,”隔开,以确保当字体不存在的时候直接使用下一个

3) font-weight 字体加粗

normal(默认值)、bold(粗)、bolder(更粗)、lighter(更细)
100、200、300~900
400 = normal,而 700 = bold

4) font-style 字体样式

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

5) font-variant 小型大写字母显示文本

  • normal 标准
  • small-caps 小型大写字母显示文本
  • inherit 继承

3.背景属性

1) 背景颜色 background-color

2) 背景图片 background-image

background-image:url(图片路径)
background-image:none

3) 背景重复 background-repeat

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

4) 背景位置 background-position

  • 横向(left,center,right)
  • 纵向(top,center,bottom)
    用数值来表示位置:background-position:20px 20px;
    background-position:X轴 Y轴;
    *left center 左居中
简写方式

background:背景颜色 url(图像) 重复 位置
background:#f60 url(images/bg,jpg) no-repeat top center

4.文本属性

1. text-align 横向排列

left,center,right

2) line-height 文本行高

  • %基于字体大小的百分比行高
  • 数值 来设置固定值

3) text-indent 首行缩进

  • %父元素的百分比
  • px固定值,默认0
  • inherit继承

4) letter-spacing 字符间距

  • normal 默认
  • length设置具体的数值(可以设置负值)
  • inherit 继承

5) word spacing 单词间距

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

6) direction 文本方向

靠左对齐?靠右对齐?

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

7) text-transform 文本大小写

  • capitalize
    每个单词以大写字母开头
  • uppercase
    定义仅有大写字母
  • lowercase
    定义无大写字母,仅有小写字母
  • inherit
    规定应该从父元素继承text-transform 属性的值

5.边框属性

1) 边框风格 border-style

a. 统一风格(简写风格)

border-style

b. 单独定义某一方向的边框样式
  1. border-bottom-style 下边边框样式
  2. border-top-style 上边边框样式
  3. border-left-style 左边边框样式
  4. border-right-style 右边边框样式
c. 边框风格样式的属性值
  1. none 无边框
  2. solid 直线边框
  3. dashed 虚线边框
  4. dotted 点状边框
  5. double 双线边框
  6. groove 凸槽边框
  7. ridge 垄状边框
  8. inset inset边框
  9. outset outset边框
  10. inherit继承

依托border-color的属性值

2) 边框宽度 border-width

a. 统一风格

border-width:

b. 单独风格
  1. border-top-width 上边边框宽度
  2. border-bottom-width 下边边框宽度
  3. border-left-width 左边边框宽度
  4. border-right-width 右边边框宽度
c. 边框宽度的属性值:
  1. thin 细边框
  2. medium 中等边框
  3. thick 粗边框
  4. px 固定值的边框
  5. inherit继承

3) 边框颜色 border-color

a. 统一风格

border-color

b. 单独风格
  1. border-top-color 上边边框颜色
  2. border-bottom-color 下边边框颜色
  3. border-left-color 左边边框颜色
  4. border-right-color 右边边框颜色
c. 属性值
  • 颜色值的名称 red、green、blue
  • RGB rgb(255,255,0)
  • RGBA rgba(255,255,0,0.1)
  • 十六位进制 #ff0、#ff0000
  • 继承inherit
d. 属性值的四种情况
  1. 一个值:border-color:(上、下、左、右);
  2. 两个值:border-color:(上下) (左右);
  3. 三个值:border-color:(上) (左、右) (下);
  4. 四个值:border-color:(上)(右)(下)(左);
    简写方式
    border:solid 2px #f60

6.列表属性

1.标记的类型

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, 等。(日文片假名)

2.标记的位置

list-style-position

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

3.设置图像列表标记

list-style-image

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

4.简写方式

list-style:类型 位置 图像
list-style:square inside url('/i/arrow.jpg');

你可能感兴趣的:(【CSS】三、常见属性)