css基础样式

一、背景(background

background 简写属性在一个声明中设置所有的背景属性。

可以设置如下属性：

background-color   //背景颜色

background-image  //背景图片

background-repeat   //背景图片是否重复

background-attachment   //背景图片是否随内容滚动

background-position  //背景图片位置（相对于外层容器）

background-size       //背景图片大小  

 如果不设置其中的某个值，也不会出问题，取默认值  

 eg:    

background:url('1.jpg') no-repeat; 也是允许的。 

二、字体属性 

1.color  规定文本的颜色      

  eg:         div{ color:red;}||div{ color:#ff0000;}            

   div{ color:rgb(255,0,0);}||div{ color:rgba(255,0,0,.5);}

2.font-style 指定文本的字体样式（正常、斜体）

     normal  正常字体(默认值)

      italic  斜体字

eg: p{ font-style:italic; } 

3.font-size 指定文本字体大小(通过像素来指定字体大小  1px = 1像素)

eg:p{ font-size:12px; } 

4.font-family 定义文本使用某个字体(默认值 由浏览器确定)    

Eg:    font-family:microsoft YaHei; font-family:"Microsoft YaHei","Simsun","SimHei"; 

5.font-weight 指定文字的粗细    

normal || bold  || bolder  || lighter 

font简写：

font : font-style || font-variant || font-weight || font-size || line-height || font-family

1.必须按照规定顺序

2.font-size和font-family不可缺少 

6.letter-spacing:;设置字的间距      

 eg:     p:{letter-spacing:2px;} 

7.opacity  设置颜色的透明度，整个元素都会透明 

（默认值1，取值为0-1，1为不透明，0为完全透明）    

 Eg: p{ opacity: 0;}  隐藏一个元素 ，完全不显示，但是会占空间，只是看不到。 p{ opacity: 1;}  显示一个元素 

8.overflow: hidden|auto|scroll;当内容溢出元素框时隐藏|自动|显示滚动条

9.text-overflow：让溢出的文字以省略号显示

p{

height: 20px;

width:100px;

background:#ddd; 

white-space: nowrap;    //让文字在同一行显示，不换行

overflow: hidden;       //溢出部分隐藏

text-overflow: ellipsis; //文字溢出部分省略号显示，另外一个值为clip

}

<p>这段文字多余的部分会显示为省略号</p> 

三、文本属性 

1.text-align 内容对齐方式，它是针对于元素的内容

属性值  left |center |right  

p{text-align: center;}  

p是块元素，left、right和center会作用于整个行 

2.text-decoration 指定文字有无装饰，默认值为none    

属性值：

underline  指定文字的装饰是下划线

overline  指定文字的装饰是上划线

line-through 指定文字的装饰是贯穿线，类似于删除标签的效果 

3.word-wrap  设置当前行超过指定容器的边界时是否换行

首先我们要知道一种情况：如果你容器中的单词过长，超出了容器本身的宽度，会造成“长单词溢出”

Eg: word-wrap: break-word;可设置过长的文本自动换行

4.vertical-align  设置对象内容的垂直对其方式。(是容器中元素相对于内容的显示)

Eg:  p{ background:yellow; } img{ width:100px; vertical-align: middle; } <p>this is paragraph!!!<img src="images/1.jpg" alt=""/></p>

5.line-height 设置对象的行高（不允许使用负值） 我们一般用行高来使一行文字垂直居中，当行高等于高时，一行文字垂直居中 

关于css基础样式就说到这里了，如有不足之处，欢迎指正！

感恩能与大家在华为云遇见！希望能与大家一起在华为云社区共同成长。