CSS学习总结

引言：

CSS 指层叠样式表 (Cascading Style Sheets)，样式定义如何显示 HTML元素，样式通常存储在样式表中，把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题，外部样式表可以极大提高工作效率，外部样式表通常存储在 CSS 文件中，多个样式定义可层叠为一。

CSS中Id和Class选择器

（1）Id选择器

Id选择器以#来定义

#para1 { text-align:center; color:red; }

（2）class选择器

   类选择器以一个“.”号来定义

.center {text-align:center;}

CSS优先级

样式表允许以多种方式规定样式信息，样式可以规定在单个HTML元素中，在HTML页的头元素中，或在一个外部CSS文件中，甚至可以在同一个HTML文档引用多个外部样式表。优先级如下：

内联样式>内部样式>外部样式>浏览器样式

CSS背景设置

h1 {background-color:#6495ed;}

p {background-color:#e0ffff;}

div {background-color:#b0c4de;}

body {background-image:url('bgdesert.jpg');}

CSS文本格式

（1）文本颜色

body {color:red;}

h1 {color:#00ff00;}

h2 {color:rgb(255,0,0);}

（2）文本对齐方式

h1 {text-align:center;}

p.date {text-align:right;}

p.main {text-align:justify;}

（3）文本修饰

h1 {text-decoration:overline;}

h2 {text-decoration:line-through;}

h3 {text-decoration:underline;}

（4）文本缩进

h1 {text-decoration:overline;}

h2 {text-decoration:line-through;}

h3 {text-decoration:underline;}

p {text-indent:50px;}

CSS字型

p{font-family:"Times New Roman";

  font-style:normal; font-size:40px;}

CSS链接

a:link {color:#000000;} /* 未访问链接*/

a:visited {color:#00FF00;} /* 已访问链接 */

a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */

a:active {color:#0000FF;} /* 鼠标点击时 */

CSS列表

列表项标记可以是使用基础的方块圆点等，或是自定义的图像

ul.a {list-style-type: circle;}

ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}

ol.d {list-style-type: lower-alpha;}

ul { list-style-image: url('sqpurple.gif'); }

CSS表格

（1）表格边框

table

{

  border-collapse:collapse;  加上该属性把双边框折叠成单一的边框

}

table,th, td

{

  border: 1px solid black;

}

    （2）表格高度和宽度

table

{

  width:100%;

}

th

{

   height:50px;

}

（3）表格文字对齐

td

{

  height:50px;

text-align:right;

vertical-align:bottom;

}

（4）表格填充

td

{

  padding:15px;

}

（5）表格颜色

table,  td, th

{

  border:1px solid green;

}

th

{

  background-color:green;

  color:white;

}

CSS盒子模型

Margin(外边距) - 清除边框外的区域，外边距是透明的。

margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px;

Border(边框) - 围绕在内边距和内容外的边框。

border-style:solid; border-width:5px;

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

padding-top:25px;

padding-bottom:25px;

padding-right:50px;

padding-left:50px;

CSS显示与隐藏

visibility:hidden;  隐藏元素，但是会影响布局

display:none;       隐藏元素且不会占用任何空间

display:inline;

display:block;

CSS定位

position:fixed;元素位置是固定的，即使窗口滚动，它也不会变动

position:relative;元素位置相对于其正常位置进行变动

position:absolute;元素位置相对于其最近的已定位的父元素，父元素没有定位则位置相对于整个html

CSS导航条

ul

{

     list-style-type: none;

      margin: 0;

      padding: 0;

      overflow: hidden;

      background-color: #333;

}

li

{

     float: left;

}

li a

{

        display: block;

        color: white;

        text-align: center;

        padding: 14px 16px;

        text-decoration: none;

}

li a:hover

{

        background-color: #111;

}

CSS下拉菜单

.dropdown

{

      position: relative;

      display: inline-block;

}

.dropdown-content

{

     display: none;

     position: absolute;

     background-color: #f9f9f9;

     min-width: 160px;

     box-shadow: 0px 8px 16px 0px  rgba(0,0,0,0.2);

     padding: 12px 16px;

}

.dropdown:hover .dropdown-content

{

    display: block;

}

CSS提示框

/* Tooltip 容器*/

.tooltip

{ position: relative;

display: inline-block;

border-bottom: 1px dotted black; /* 悬停元素上显示点线*/

}

/* Tooltip 文本*/

.tooltip .tooltiptext

{ visibility: hidden;

width: 120px;

background-color: black;

color: #fff;

text-align: center;

padding: 5px 0;

border-radius: 6px;

/* 定位*/

position: absolute;

z-index: 1; }

/* 鼠标移动上去后显示提示框*/

.tooltip:hover .tooltiptext

{ visibility: visible; }

CSS图片透明度

opacity:0-1;

原创文章转载请标明出处

更多文章请查看

[http://www.canfeng.xyz](http://www.canfeng.xyz)