黑马程序员_CSS语言

来源：互联网发布：线下营销数据编辑：程序博客网时间：2024/04/30 01:51

------- android培训、java培训、java学习型技术博客、期待与您交流！ --------

1.css和html相结合：每个html标签都有一个style样式属性，该属性的值就是css代码；

使用style标签方式，一般定义在head标签。

优先级：标签选择器<类选择器<id选择器<style属性

2.选择器

组合选择器：.haha,div b{对多种选择器进行相同样式定义

background-color:#000;

color:#00ff;

}

关联选择器

span b{关联选择器选择器中选择器

background - color:#09f;

color:

}

元素选择器

html元素最典型的选择器类型，任何一个html元素都可以作为元素选择器，元素选择器的有效范围是页面中所有的、名称相同的html元素，格式：元素｛属性：值｝

h2{color:#ff000;}

类选择器

如果想把某一个样式应用到不同的html元素上，就可以采用类选择器来定义。

格式：.类名｛属性：值｝或者元素.类名｛属性：值｝

ID选择器

ID选择器与类选择器相似，只是ID选择器只能被应用一次，而类选择器可以被多次引用，格式：#id名｛属性：值｝

3.盒子模型演示

<head><style type="text/css">body{margin:0px;}div{border:#09F solid 1px;     height:100px;     width:200px;                     }#div_1{....}#div_2{....}</style></head>..<body><div id="div_1">第一个盒子</div><div id="div_2">第二个盒子</div></body>

4.盒子模型定位演示

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">div{    border:#09F solid 1px;    height:100px;    width:200px;   }#div_0{        background-color:#CCC;        height:400px;        width:400px;        position:relative;        top:100px;        left:100px;   }#div_1{        background-color:#F90;        position:relative;        top:20px;   }#div_2{        background-color:#0CF;        width:220px;}#div_3{         background-color:#3F0;8}</style></head><body>    <div id="div_0">    <div id="div_1">       第一个盒子11第一个盒子11</div><div id="div_2">       第二个盒子22</div><div id="div_3">       第三个盒子33        </div>    </div> </body></html>

5.盒子模型之float_图文混排

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">#imgtext{          border:#06F dashed 1px;          width:180px;}#img{      float:right;}#text{       color:#F60;       font-family:"华文隶书";}</style></head><body><div id="imgtext">      <div id="img"><img src="9.bmp" /></div>      <div id="text">说明文字。</div>    </div></body></html>

6.盒子模型之position_图像签名演示

型之position_图像签名演示<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">#text{       font-family:"华文隶书";       font-size:24px;       position:absolute;       top:80px;       left:10px;}#imgtext{          border:#F60 dotted 1px;          width:500px;          position:absolute;          top:100px;}</style></head><body><div id="imgtext">    <div id="img"><img src="1.jpg" height="300" width="500" /></div>    <div id="text">花丛中的美女，我的！</div></div></body></html>

------- android培训、java培训、java学习型技术博客、期待与您交流！ --------

详情请查看：http://www.itheima.com

0 0