CSS常用属性样式表（1）

ゝ一纸荒年。 2022-06-16 01:49 331阅读 0赞

# 一.颜色属性 #

## 1.1直接定义 ##

color:red;

## 1.2十六进制三基色    ##

以\#加6位16进制数代表三基色  红绿蓝

例如：\#a3c2e4

## 1.3简写式 ##

color：\#ff6600;

可以简写为： color：\#f60;

## 1.4 rgb模式 ##

color：rgb红（r）绿（g）蓝（b）取值范围0~255

color：rgb(0,233,0);

## 1.5 rgba模式 ##

color：rgba红（r）绿（g）蓝（b）透明度（a）取值范围0~255  透明度取值0~1

color:rgba(0,255,0,1)

例如：

<h1 class="ha">位欢欢个人职业</h1>
    <h1 class="hb">位欢欢个人职业</h1>
    <h1 class="hc">位欢欢个人职业</h1>

.ha{
        font-size: 19px;
        color: rgba(0,255,0,1);
    }
    .hb{
        font-size: 19px;
        color: rgba(0,255,0,0.6);
    }
    .hc{
         font-size: 19px;
         color: rgba(0,255,0,0.2);
     }

# 二.字体属性 #

## 2.1字体大小 ##

font-size:

单位：

px :设置固定的值

%：父元素的百分比

smaller：比父元素更小

larger:比父元素更大

inherit：继承父元素

## 2.2定义字体 ##

font-family:

微软雅黑，宋体，serif

注意：前面字体的优先级比较高

## 2.3字体加粗 ##

font-weight：（必须是整数）

normal:默认值=400

bold:粗=700

bolder:更粗=900

lighter:更细=100

## 2.4字体样式 ##

font-style：

normal:正常

italic：斜体

oblique：倾斜

inherit：继承

## 2.5小型大写字母显示文本    ##

font-variant:

normal:标准

small-caps:小型大写字母显示文本     注：英文小写字母转化为大写字母

inherit：继承

# 三.背景属性 #

## 3.1背景颜色 ##

background-color:

取值同颜色属性相同

## 3.2背景图片 ##

background-image:

background-image:url(image/bg.jpg) ;

## 3.3背景重复 ##

background-repeat:

repeat：重复平铺满

repeat-X:向X轴重复

repeat-Y：向Y轴重复

no-repeat:不重复

## 3.4背景位置 ##

background-position:

横向：left，center，right

纵向：top,center,bottom

默认值为：left，top

## 3.5简写方式 ##

background:背景颜色 URL（路径） 重复 位置

例如：background:\#f60 url(image/bg.jpg) no-repeat top center

注意：不是只有background才有简写，div等也可以简写

#  四.文本属性 #

## 4.1 text-align 横向排列    ##

left：左边

center：中心

right：右边

inherit：继承

start:开始

end:结束

## 4.2 line-height 文本行高 ##

当行高小于字符大小：出现重复

当行高等于字符大小：正常显示

当行高大于字符大小：出现空行

line-height:200%;

line-height:40px;

## 4.3 text-indent 首行缩进 ##

父元素的百分比：

letter-indent:50%;

letter-indent:2px;

## 4.4 letter-spacing 字符间距 ##

normal:默认

length:数值 （可以是负值）

inherit:继承

## 4.5 word-spacing 单词间距 ##

单词与单词间的距离

word-spacing:40px;

## 4.6 direction 文本方向 ##

ltr:left to right(默认)

rtl:right to left

inherit:继承

## 4.7 text-transform 文本大小写 ##

capitalize:每一个单词以大写字母开头

uppercase:定义仅有大写字母

lowercase:定义无大写字母，仅有小写字母

inherit:规定继承父元素text-transform属性值

# 五.边框属性 #

## 5.1 边框风格border-style ##

### 5.1.1单一定义某一方向的边框样式 ###

可以定义不同方向的样式

### 5.1.2边框风格样式的属性    ###

none:无边框

solid:直线边框

dashed:虚线边框

dotted:点状边框

double:双线边框

groove：凸槽边框

ridge:垄状边框

inset:inset边框

outet:outset边框

inherit：继承

如图：

![Center][]

## 5.2边框宽度border-width ##

### 5.2.1边框宽度单独风格    ###

### 5.2.2边框宽度样式的属性 ###

thin：细边框

medium：中等边框

thick：粗边框

px：固定边框

inherit：继承

## 5.3边框颜色border-color ##

### 5.3.1边框颜色单独风格    ###

### 5.3.2边框颜色样式的属性 ###

同颜色属性值

### 5.3.3 边框属性值的四种情况 ###

一个值border-color：（上下左右）；

两个值border-color：（上下）（左右）；

三个值border-color：（上）（左右）（下）；

四个值border-color：（上）（右）（下）（左）；

# 六.列表属性 #

## 6.1标记的类型list-style-type    ##

none：无标记

disc:默认  实心圆标记

circle:空心圆标记

square:实心方块

decimal:数字标记

decimal-leading-zero:0开头的数字标记

upper-roman:大写罗马数字

lower-roman:小写罗马数字

lower-alpha:小写英文字母

upper-alpha:大写英文字母

lower-greek:小写希腊字母

upper-greek:大写希腊字母

lower-latin:小写拉丁字母

upper-latin:大写拉丁字母

hebrew:传统的希伯来编号方式

armenian:传统的亚美尼亚编号方式

georgian:传统的乔治亚编号方式

cjk-ideographic:简单的表意数字

hiragana:日本文假名

katakana:日本文假名

hiragana-iroha:日本文假名

katakana-iroha:日本文假名

![Center 1][]

## 6.2标记的位置list-style-position ##

inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐

outside:默认值  保持标记位于文本的左侧，列表项目标记放置在文本以外，且环绕文本不根据标记对齐

inherit：规定应该从父元素继承list-style-position属性的值

## 6.3设置图像列表标记list-style-image ##

URL：图像的路径

none：默认  无图形被显示

inherit：规定应该从元素继承list-style-image属性的值

6.4简写方式list-style

list-style:square inside url('image/bg.jpg');//图片加载不出来用空心圆代替

[Center]: /images/20220616/05fb8cb7503b4d1d948c90c7424e63f3.png
[Center 1]: /images/20220616/9dc180199cc044e88d104c140c571dbc.png

CSS常用属性样式表（1）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 CSS样式属性及CSS样式表浅谈

相关 CSS常用样式

相关 CSS常用简写样式

相关 CSS常用属性样式表（1）

相关 CSS常用样式小结

相关 CSS常用样式

相关常用css属性

相关 [log] css常用样式

相关常用CSS样式属性

相关 CSS常用样式