css的简单介绍以及学习(第二天)

(HTML的学习第二天)

css的介绍:首先在head标签里面引入

  
  
<style type="text/css">
/*注释的格式*/
</style>

   
   
border-radius 实现圆角

    
    
border: 5px dashed green;边框:大小 样式 颜色

背景图片的介绍：

   
   
background-image: url(book.jpg);
/*背景图片不平铺*/
background-repeat: no-repeat;
/*背景图片大小的调整*/
background-size: 100% 50%;
/*调整图片的位置*/
background-position: 100px 200px;

关于文字的样式：

   
   
color: yellow;/*文字颜色只写color就行了*/
/*文本的缩进*/
/*text-indent: 50px;*/
/*单行文字的水平居中*/
text-align: center;
/*行高,单行文字垂直居中*/
line-height: 100px;
/*字体大小*/
font-size: 20px;
font-family: "宋体";

类选择器:

   
   
<div class="father">
    定义属于两个类(可以为多个)
	<div class="son1 sons">我是son1</div>
	<div class="son2 sons">我是son2</div>
</div>

样式里面用 点类名获取。

   
   
.father{}
.son1{}

margin的坑：

1.如果父级标签没有设置border，子集使用了margin-top，其作用在父级上，子级和父级的间隙没有变化。解决变化是给父级添加 border: 1px solid transparent(透明)

2.兄弟标签的margin-top和margin-bottom如果有重合的部分，取大的那个，两者重叠在一起

行标签与块标签的特性：

行标签的属性：不支持宽高，不支持margin-top，margin-buttom，不支持padding-top，要想要求显示可以使用

  
  
display: block;转化成块元素

img：是一个内联块标签