HTML学习-CSS_div详解

CSS作用:是为了使网页美观,升级方便,维护轻松,能够让网页内容和样式信息进行分离。
   (让内容和样式分开)。

使用link来导入CSS文件。
语法:<link href="url" type="text/css" rel="stylesheet" />

每个HTML都带了一个属性Style,可以直接设置CSS样式。
语法:<body style="background-color:red"></body>

选择器:
Html选择器:以原始本身命名的选择器。
语法:<style type="text/css">
   Table{
  Border:2px;
  }
   </style>
  <table></table>//table会自动调用style里面的属性。
优点:直观,能一眼看出是选择的谁。
缺点:对于重复的html元素,不能单独设置属性。

Class选择器:
语法:<style type="text/css">
   .tb1{
  Border:2px;
  }
   </style>
  <table class="tb1"></table>//用class的名字来设置属性
  <元素 class="属性1 属性2 属性···">
  
Id选择器:
语法:<style type="text/css">
   #b1{
  Border:2px;
  }
   </style>
<table id="b1"></table>//用id名来标识来设置属性
id只能指定一个选择器且唯一

父子关系:
1.<style type="text/css">
  Body div{
  }
</style>
  <body>
  <div></div>
  </body>
2.<style type="text/css">
  #div1 div {
  }
</style>
  <body>
  <div id="div1">
   <div></div>
  </div>
  </body>
3.<style type="text/css">
  #div1 #div2{
  }
</style>
  <body>
  <div id="div1">
  <div id="div2"></div>
  </div>
  </body>
Class同id一样。

伪类:又浏览器自动识别
如 a:link 未访问的连接
a:hover 鼠标指上去的时候
a:visited 已访问的连接
  a:active 激活连接

优先级:内联->内嵌->外联
内联:直接当作属性写在元素后面。
内嵌:以集合方式写是head标签里面
外联:用<link>导入后缀名为.CSS的文件
导入:在<style>标签中使用@import url(文件路径);

常用的文本属性:
Font-size:文本的字体大小
Font-family:文本的字体类型
Font-syle:文本的字体样式
color:文本的字体颜色
Text-align:文本的字体对齐方式
常用的背景属性
Background-color:背景颜色
Background-image:背景图片
Background-repeat:
可取值:repeat 铺满 no-repeat 不铺满 repeat-x x轴平铺 repeat-y y轴平铺
常用的边界属性
Margin-top:对象的上边界
Margin-left:对象的左边界
Margin-bottom:对象的下边界
Margin-right:对象的又边界
Margin:0px auto;//代表居中
边框属性
Border-style:边框的样式
Border-width:边框的宽度
Border-color:边框的颜色
填充属性
Padding-top:内容与上边框之间距离
Padding-right:内容与右边框之间距离
Padding-left:内容与左边框之间距离
Padding-bottom:内容与下边框之间距离

盒子模型:
盒子中的内容:content;
内容与边框之间的填充:padding
边框:border
边界:margin
元素的排列方式是以标准流的方式

盒子宽度:padding-left + border-left + margin-left + width + padding-right + border-right + margin-right
盒子高度:padding-top + border-top + margin-top + height + padding-bottom + border-bottom + margin-bottom

浮动:可以改变流的位置,float属性的left和right分别能够让元素对象向左或者向右浮动。
左浮动:把位置让开,让后面的上来。
右浮动:把位置让开,后面的位置顶替前面的位置。
清空浮动:让元素停止浮动。

文挡流:在body中按照元素的先后顺序,从上而下,自左而右进行排列(标准流)
非标准流,给某个元素定位后的流叫做非标准留。

定位:
绝对定位:当容器的position属性值为absolute时,这个容器被相对定位了。使用绝对定位的容器前面或后面的容器会认为这个层不存在,绝对定位是对于利自己最近的非标准流盒子。
相对定位:当容器的position属性值为relative时,这个容器即被相对定位了。

无序或者有序做CSS做导航
<style type="text/css">
ul{
  List-style-type:none;
}
Li{
  Float:left;
  Margin-left:10px;
}

</style>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值