css---初级学习笔记

导入css

（一）

<div style="background-color:#f00;">.....</div>         不推荐使用

（二）

<style>
      #divId2{
                  background-color: #0f0;
                  }
   </style>


     <div  id ="divId2">........</div>

（三）

<link  rel="stylesheet"  href="css/1.css"type="text"/css>


<div  id ="divId3">.....</div>



推荐使用      需要另外创建一个css文件

修饰字体大小

<span  style="font-size:  4cm;">   ...</span>

** 选择器**
id优先级最高
属性
字体：
font-family：设置字体颜色（隶书） 设置字体家族
font-size：设置字体大小
font-style：设置字体风格
文本：
改变文本的颜色，字符间距，对齐文本，装饰文本，对文本进行缩进
color：文本颜色
line-height：设置行高
text-decoration：向文本添加修饰
text-align：对齐文本

#div1{
   text-align：center；
}
#div2{
  line-height：100px；
}


<div id ="div1">......</div>
<div id="div2">......</div>

消除装饰 横线

a{
  text-decoration：none；
}

<a href="#">.......</a>

背景
background-color：设置背景颜色
background-image：设置图片作为背景 url
尺寸
width：
height：

• 浮动*：
  float：可选值 left right
  clear：设置元素的两边是否有其他的浮动元素
  值为 both，则两边都不允许有浮动

.div {
    clear: both;
}
 <div class="cle"></div>

分类
display：设置是否及如何显示元素
none：此元素不会被显示
block 此元素将显示为块级元素，此元素前后会带有换行符
inline 默认。此元素被显示为内联元素，元素前后没有换行符
框模型：
一个元素外面有padding（内边框） border（边框） margin（外边框）
padding：元素和边框的距离
margin： 元素最外层的空白
上面这三个属性都有简写的属性
若设置大小的时候 四个值：顺序 上右下左
padding :10px 10px 10px 10px
若只写一个的话，代表四个边使用同一个值
border（边框）
还可以设置颜色 风格
简写属性：
border：宽度 风格 颜色
border：5px solid red
solid：实线
dashed：虚线
double：双实线