css规则定义属性

html-css017

css规则定义属性,第1张

css自定义属性

css自定义属性分为全局定义属性和局部定义属性。

一:全局

1.定义:

:root{//此处的root是固定的。

--them-color:blue //自定义属性时以--开头,告诉浏览器这是自定义的。

}

2.使用:

<style type="text/css">

.div{

background-color:var(--them-color)

//如果自定义的属性出不来或其他问题,可在之后写属性值。例如:background-color:var(--them-color,blue)

也可写另一个属性名:background-color:var(--them-color,var(--them-color1))

}

</style>

<div class="div">111</div>

二:局部

1:定义

.foo{

--them-color:yellow

}

 .div{

color:var(--them-color)

}

2:使用:

<div class="foo div">121321</div> //此处的foo相当于一个基类,目的是存取所有的属性值,他的子元素从这个库里取属性。

例子:

<style type="text/css">

.foo{

--them:yellow

--width-outer:800px

--height-outer:400px

--width-inner:100px

--height-inner:100px

--bg-inner1:red

--bg-inner2:orange

--bg-inner3:purple

}

.div{

width: var(--width-outer)

height: var(--height-outer)

border:1px solid var(--them)

margin: 20px auto

}

.foo div:nth-child(1){

width: var(--width-inner)

height: var(--height-inner)

background-color: var(--bg-inner1)

}

.foo div:nth-child(2){

width: var(--width-inner)

height: var(--height-inner)

background-color: var(--bg-inner2)

}

.foo div:nth-child(3){

width: var(--width-inner)

height: var(--height-inner)

background-color: var(--bg-inner3)

}

</style>

<body>

<div class="div">

<div></div>

<div></div>

<div></div>

</div>

</body>

四:总结

在一个组件里或者全局将经常使用的属性提取出来,比如主题色,用的时候直接使用变量。便于维护代码,改的时候直接改一处即可。

A

absolute 绝对的active 活动的,激活的, 标记的一个伪类

align 对齐

alpha 透明度,半透明anchor 锚记 标记是这个单词的缩写

arrow 箭头

auto 自动

B

background 背景border 边框

banner 页面上的一个横条both 二者都是clear 属性的一个属性值

black 黑色bottom 底部,是一个CSS 属性

blink 闪烁box 盒子

block 块br 换行标记

blue 蓝色

bug 软件程序中的错误

body 主体,一个HTML 标记

building 建立

bold 粗体

button 按钮

C

cell 表格的单元格

color 颜色

center 中间,居中

contact 联系

child 孩子

content 内容

circle 圆圈

class 类别

css 层叠样式表

clear 清除

cursor 鼠标指针

cm 厘米

D

dashed 虚线

display 显示,CSS 的一个属

div 就是这个单词的缩写

decoration 装饰

document 文档

default 默认的

dotted 点线

double 双线

E

element 元素

F

father 父亲float 浮动

filter 滤镜,过滤器font 字体

first 第一个for 在循环语句中的一个保留字

fixed 固定的four 4 个

G

gif 一种图像格式green 绿色

gray 灰色

H

hack 常用于CSS 中的一些招数,或者类似于偏方的技巧

here 这里

hand 手

hidden 被隐藏

head 头部

home 首页

height 高度

horizontal 水平的

help 帮助

hover 鼠标指针经过时的效果,或称为“悬停状态”

I

Image 图像

inline 行内

important 重要的

inner 内部的

indent 缩进

italic 意大利体,斜体

index 索引

J

jpg 一种图像格式justify 两端对齐

L

language 语言

line 线

last 最后一个

link 链接

left 左边

list 列表

length 长度

M

margin 外边距

millimeter 毫米

max 最大的

min 最小的

medium 中间

model 模型

menu 菜单

move 移动

middle 中间

N

navigation 导航

none 无,不,没有

new 新的

O

object 对象

orange 橙色

one 一个

outer 外面的

only 仅仅

overflow 溢出

open 打开

P

padding 内边距

point 点

pointer 指针,指示器

purple 紫色

position 定位,位置

R

red 红色

resize 重新设置大小

relative 相对的

right 右边

repeat 重复,平铺

row 行

S

scroll 滚动

silver 银色

size 尺寸

square 方块

solid 固体,实线

static 静态的

solution 方案

strong 强壮,加粗的

son 儿子

style 样式

span 一个HTML 标记

T

table 表格title 标题

td 单元格的HTML 标记

top 顶部

text 文本

tr 表格中“行”的HTML 标记

transitional 过渡的

two 两个

three 三个type 类型

through 穿过

U

underline 下划线

uppercase 大写

upper 上面的

url 网址

V

vertical 竖直的

visited 访问过的

W

white 白色

width 宽度

Y

yellow 黄色