CSS基础属性

属性名:属性值;

background-color:red；

p{

background-color:red;

  font-size:24px;

}

2.1字体相关属性

Font-family：字体名称

Font-size：字体大小

Font-style：字体格式

Font-variant：字体变化（如大写）

Font-weight：字体粗细

p{
   font-family:楷体;
   font-size:36px;
   font-style:italic;
   font-variant:small-caps;
   font-weight:100;
   font:60px楷体;
}

可以简写，书写顺序

font-style font-variant font-weightfont-size font-family

前面三个可缺省，使用默认值，font-size和font-family必须指定值。

这种书写方式更加简洁

font: 60px楷体;

 

2.2文本相关的属性

文本相关的属性主要包括颜色，对齐方式修饰效果等。

Color：设置文本的颜色

Text-decoration：文本的修饰

none默认值，没有修饰效果

 Underline：加下划线

Overline：给文字上方加一条横线

Line-through：加删除线

Text-shadow：增加阴影如：

text-shadow:5px 10px gray;

的含义是定义一个灰色的背景，其水平方向上左移5px，垂直方向上上移10px

Direction：文本的方向

默认Ltr：自左至右；rtl：自右至左

 

Text-aiign：文本对齐方式

Left左对齐

Right右对齐

Center居中对齐

Justify两端对齐

Vertical-align：文本垂直对齐方式

Top靠上对齐

Bottom靠下对齐

Middle垂直居中对齐

Text-indent文本缩进

Letter-spacing：字符之间的间距

Word-spacing：字（单词）间距

Line-height：设置行高，实际上是调整行间距

 

2.3背景相关属性

body{
   background-color:#67eeff;
   background-image:url("xiaogou.jpg");
   background-repeat:no-repeat;
   background-position:bottom;
}

 

Background-color：背景颜色

Background-image：url：设置背景图片

background-repeat:图片的复制选项

repeat：在水平和垂直两个方向上进行复制

no-repeat：不复制

repeat-x：在水平方向上复制

repeat-y：在垂直方向上复制

也可以将这一组属性值分装到一个属性background中，表达更加简洁

背景颜色Background-color

背景图片Background-image

重复方式background-repeat

位置background-right

background:greenurl("xiaogou.jpg")no-repeat right;

 

2.4尺寸相关属性

Height：高度

Width：宽度

div{
   width:200px;
   height:200px;
   background-color:red;
}

max-width：最大宽度

max-height：最大高度

min-width：最小宽度

min-height：最小高度

2.5显示相关属性

隐藏元素方法：

（1）          visibility：hidden，仅仅隐藏内容，该元素所占位置依然存在；

（2）          display：none，不仅隐藏内容，且不占位置

div{
   height:100px;
   /*visibility:hidden;*/
   display:none;
}

display：可以设置元素的显示模式

inline：将块级元素以内联元素形式显示，此时width和height属性无效，其空间取决于元素的内容。

Inline-block：将块级元素以内联元素形式显示，同时兼备块级元素的某些特征，比如可以使用width和height设置所占位置大小。

li{
   display:inline-block;
   width:200px;
   background-color:aqua;
}
span{
   display:block;
   background-color:red;
}

也可以将内联元素以块级元素形式来显示，即display：block。