css详解编程语言

  color: pink;  声明 ：需要设置的样式

  最后一条声明的;可以省略 建议写上

  }*/
/*类选择器  在一个页面中可以有N个 .class对应的属性值可以重复

  .word{

  color: pink;

  }*/
 
/*ID选择器  在一个页面中只能有1个  #id对应的属性值不能重复 */

  #s{

  color: pink;

  }

二、复合选择器
/* 并集选择器 
多个选择器之间使用,（英文半角状态）隔开
  .word,#s,span{
  color: green;
  }*/
  /*交集选择器  格式：01.标签选择器+类选择器  02.标签选择器+ID选择器
  必须是标签选择器在前
  div.word｛｝  去div标签中查找class属性值为 word的标签
  div#s{}  去div标签中查找id属性值为 s的标签
  div.word{
  color: green;
  } */
  /* 后代选择器  必须有层级关系 选择器之前使空格隔开*/
  #dv span {
  color: green;
  }

三、代码示例

  height: 30px;  /*div的高度*/

  line-height: 30px;/*内容的行高*/

  color: white; /*字体颜色*/

  background:red url( ../image/arrow-down.gif ) 210px no-repeat; /*背景*/

  cursor: move; /*控制鼠标的形状为 可移动状态*/

}

li{

  background-image: url( ../image/arrow-right.gif ) ; /*背景图片*/

  background-repeat: no-repeat;  /*背景图片的填充方式*/

  background-position: 173px;  /*背景图片的位置*/

  line-height: 30px;  /*内容的行高*/

  /*list-style-image: url( ../image/arrow-down.gif );  设置列表的标志图片*/

  /* list-style-type: decimal-leading-zero;  设置列表的标志类型*/

  /* list-style: decimal url( ../image/arrow-down.gif ) ; 类型和图片同时存在  取图片*/

  list-style: none;  /*去除标记*/

}

  color:red;

  text-decoration: underline;/*给超链接增加下划线*/

}

/*

a:active｛ 点或者是被选中的链接

  color:yellow;

}*/
a,#b,#c{
  height: 80px;
  width:120px;
  border: solid 1px pink;
  float: left;  /*左浮动*/
  /* float: right;  /!*右浮动*!/*/
  }
  #main{
  width: 350px;
  height: 150px;
  border: solid 1px red;
  overflow: scroll;
  /*内容溢出的默认属性值
  visible:默认值  溢出部分显示
  scroll：溢出部分滚动条显示
  hidden:溢出部分隐藏
  auto:自动调整
  */

  border: dashed 2px red;  /*边框的样式*/

  width: 500px;  /*宽度*/

  /* margin-left: 100px; /!*左外边距*!/

  margin-top: 100px; /!*上外边距*!/*/

  margin:30px;  /*上 右  下  左  顺时针顺序*/

  margin:30px  50px;  /*上下 30PX  左右 50PX*/
  padding: 30px; /*上 右  下  左  顺时针顺序 内边距*/

  }
 *{  /*整个网页中的所有元素 去掉内边距和外边距*/

  padding: 0px;

  margin: 0px;

  }

  div{

  width: 300px;

  border: solid 1px  #3a6587;  /*盒子的边框样式*/

  margin: auto;  /*水平居中*/

  }

  h2{

  padding-left: 20px;  /*左外边距*/

  line-height: 50px;  /*行高*/

  height: 50px;  /*高度*/

  color: white;  /*字体颜色*/

  background-color:cornflowerblue ; /*背景颜色*/

  }

  form{

  padding: 30px 20px; /*上下边距30px  左右边距20px*/

  }

  td{

  text-align: right; /*文本对齐方式*/

  }

3、盒子模型  代码示例

  border: dashed 2px red;  /*边框的样式*/

  width: 500px;  /*宽度*/

  /* margin-left: 100px; /!*左外边距*!/

  margin-top: 100px; /!*上外边距*!/*/

  margin:30px;  /*上 右  下  左  顺时针顺序*/

  margin:30px  50px;  /*上下 30PX  左右 50PX*/
  padding: 30px; /*上 右  下  左  顺时针顺序 内边距*/

  }

 *{  /*整个网页中的所有元素 去掉内边距和外边距*/

  padding: 0px;

  margin: 0px;

  }

  div{

  width: 300px;

  border: solid 1px  #3a6587;  /*盒子的边框样式*/

  margin: auto;  /*水平居中*/

  }

  h2{

  padding-left: 20px;  /*左外边距*/

  line-height: 50px;  /*行高*/

  height: 50px;  /*高度*/

  color: white;  /*字体颜色*/

  background-color:cornflowerblue ; /*背景颜色*/

  }

  form{

  padding: 30px 20px; /*上下边距30px  左右边距20px*/

  }

  td{

  text-align: right; /*文本对齐方式*/

  }

4、定位属性
head lang= en
  meta charset= UTF-8
  title 定位属性 /title
  style type= text/css
  /*
  position
  01.relative:相对定位，相对于自身原来的位置
  02.absolute：绝对定位，相当于父级
  03.fixed : 固定定位  相对于浏览器
  04.static ：默认值
  */
  img{
  position: fixed;  /*固定定位*/
  left: 50px;
  top: 20px;
  }
  #a{
  position: absolute; /*绝对定位*/
  top: 20px;
  height: 50px;
  width: 50px;
  background-color: blue;
  }
  #b{
  height: 50px;
  width: 50px;
  background-color: deeppink;
  }
  #c{
  position: relative; /*相对定位*/
  height: 50px;
  width: 50px;
  background-color: green;
  }
  /style
/head
body
  div id= a /div
  div id= b /div
  div id= c /div
  img src= image/cat.jpg   width= 50px height= 50px
/body

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/12184.html

c