css.day02

1.复合选择器

复合选择器一般会有几个标签混合使用。把多个组合成一个称之为复合

　　1.1标签指定式复合选择器（交集选择器）

　　格式：标记选择器+ 类名/ID名称 { 属性：值;}

　　实际情况用的相对少。但是高手会用的特别好。

　　加选 shift 减选 alt 交叉 shift+alt

　　1.2后代选择器（父子级关系）

　　格式：选择器1 选择器2 ... { 属性：值;}

　　选择器1 一定是选择器2 的父级选择器2 一定是选择器1 的子级

　　<div>

　　</div>

　　div p{color:red;}

　　注意：选择器之间一定用空格隔开。

　　1.3并集选择器 (集体声明)

　　代码冗余

　　注释：（隐形战斗机）

　　注释：代码看不见（不执行）程序员（人）能看见

　　语法： /* 内容 */

　　并集选择器适合于：多个标签具有同一种样式。

<style type="text/css">
/*p{color:#F00; }   
span{color:#F00;}
ul{color:#F00;}*/
p,span,ul{color:#F00;}
</style>

　　核心：标签之间用逗号隔开。

2.通配符选择器 (*)

　　我们window 系统有两个通配符 : * 和 ?

　　* 所有的意思。

　　*{color:#F00;} 所有的标签都是红色

　　大家觉得： *{color:red;} 简单

　　还是 p,div,span,ul{color:red;} 简单

写起来简单但是代码执行起来还是第二个简单。

注意：我们现在几乎不用 * ，现在它只剩下一个作用，就是用来测试用。

3.伪类选择器（链接伪类 a ）

伪类：伪娘女汉子

** 嗲伪类：明明不存在，但是确实有实际效果。

.class

伪类：（冒号）

关于链接：

a:link 链接平时（正常）的状态

a:visited 链接访问过之后的状态（点击后）

a:hover 鼠标经过时候的状态

a:active 鼠标点击时的状态

单词：

text-decoration：文本修饰

<style type="text/css">
a:link{color:#000; text-decoration:none; }/*文本修饰为没有下划线*/
a:visited{color:#F90; text-decoration:none;}   /*点击后，为黄色 没有下划线*/
a:hover{color:#F00; text-decoration:underline;} /*鼠标经过的时候，为红色下划线*/
a:active{color:#00ff00; text-decoration:underline;} /*鼠标点击的时候，为绿色 下划线*/

/*现在都可以这么写：*/

a{color:#000; text-decoration:none;}
a:hover{color:#F00; text-decoration:underline;}

注意：如果四个状态写全了，必须按照:

顺序不能颠倒

l v h a

第一种记忆： l ov e h a t e 由爱生恨

第二种记忆： l v h a o lv包包好

导航栏小案例：

案例分析：

1. 因为鼠标放上去会变换图片和文字就应该用到链接伪类。

2. 链接 a 属于那种显示模式：行内显示模式。在这里需要把它转换成：行内块元素。

3.指定相应背景图片

代码准备：

1. 一般是先准备结构（标签）后准备样式。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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{text-align:center;}
div a{width:88px; height:44px; background-image:url(gray.JPG);display:inline-block; color:#FFF; text-decoration:none; line-height:44px;}
div a:hover{background-image:url(red.JPG); color:#F90;}
</style>
</head>
<body>
<div>
<a href="#">首页</a>
<a href="#">相册</a>
<a href="#">作品</a>
<a href="#">生活</a>
<a href="#">展示</a>
<a href="#">留言</a>
</div>
</body>
</html>

4.行高不简单

基线位置 : asdfasdffgjjhkjlkjl

行高是两行文字基线之间的距离：

我们会发现：如果给一个块级盒子的高度和它的行高相等，这个盒子的文字就会在盒子里面垂直居中。（注意，只限一行文字）

5.css 背景的设置

background-color: 背景颜色

background-image:url() 背景图片

background-repeat: 背景是否平铺

默认是平铺的 no-repeat 不平铺

background-position 背景图片位置

top bottom left right center (中间) 方位名词

background-position: x坐标 y坐标；精确像素

注意： x坐标和y坐标的顺序不能颠倒。

背景简写：

background: 背景图片背景位置背景颜色背景重复等等；

属性的各个值用空格隔开。

以后我们碰到像背景这样的属性我们称之为复合属性。

背景的最后一个属性值：背景固定（兼容性不好）

background-attachment: 背景固定还是滚动

默认是scroll 滚动的 fixed 固定的

6.边框 (border)

　　border-color 边框颜色

　　border-width 边框粗细

　　border-style 边框样式实线虚线双线、、

　　border-color 边框颜色

　　border-width 边框粗细

　　一般情况我们都是用像素作为单位

　　比如： border-width：1px；

　　border-style 边框样式

　　none :　无边框。与任何指定的border-width值无关
　　hidden :　none :　无边框。与任何指定的border-width值无关
　　hidden :　隐藏边框。IE不支持
　　dotted :　点线。
　　dashed :　虚线。
　　solid :　实线边框（重点）

　　double :　双线边框。两条单线与其间隔的和等于指定的border-width值
　　groove :　根据border-color的值画3D凹槽
　　ridge :　根据border-color的值画菱形边框
　　inset :　根据border-color的值画3D凹边
　　outset :　根据border-color的值画3D凸边隐藏边框。IE不支持

　　边框简写

　　border: 1px solid #f00;

　　用空格隔开

　　border:solid 1px #f00;

　　border-top:1px solid #f00;

7.行业动态案例

　　注意：测量时，边框线是不计算在宽和高内的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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">
.hd{height:35px; width:238px; border:1px solid #D9E0EE; border-top:3px solid #FF8400; border-bottom:0;}
.bd{height:130px; width:238px; border:1px solid #D9E0EE; }
.bd ul li{line-height:24px;}
.bd  a{font-size:12px; text-decoration:none; color:#3c3c3c;}
.bd a:hover{color:#FF8400; text-decoration:underline;} 
</style>
</head>

<body>
<div class="hd"></div>
<div class="bd">
    <ul>
        <li><a href="#">不老女神-伊能静的减肥秘诀！！</a></li>
        <li><a href="#">不老女神-伊能静的减肥秘诀！！</a></li>
        <li><a href="#">不老女神-伊能静的减肥秘诀！！</a></li>
        <li><a href="#">不老女神-伊能静的减肥秘诀！！</a></li>
    </ul>

</div>

</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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">
.hd{height:35px; width:238px; border:1px solid #D9E0EE; border-top:3px solid #FF8400; border-bottom:0; text-indent:2em; font-weight:bold; line-height:35px;}
.bd{height:130px; width:238px; border:1px solid #D9E0EE; }
.bd ul li{line-height:24px; background:url(hhh.jpg) no-repeat left center; text-indent:1em;}
.bd ul{list-style:none; /*清除列表样式*/}
.bd  a{font-size:12px; text-decoration:none; color:#3c3c3c;}
.bd a:hover{color:#FF8400; text-decoration:underline;} 
</style>
</head>
<body>
<div class="hd">行业动态</div>
<div class="bd">
    <ul>
        <li><a href="#">不老女神-伊能静的减肥秘诀！！</a></li>
        <li><a href="#">不老女神-伊能静的减肥秘诀！！</a></li>
        <li><a href="#">不老女神-伊能静的减肥秘诀！！</a></li>
        <li><a href="#">不老女神-伊能静的减肥秘诀！！</a></li>
</ul>
</div>
</body>
</html>

列表样式： list-style:none; 清除列表样式

转载请备注。

posted @ 2015-09-23 21:59 sunnyJun 阅读(164) 评论(0) 编辑收藏举报

刷新页面返回顶部

sunnyJun

css.day02

公告