css.day02

2023-02-13 19:25:19

1.复合选择器

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

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

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

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

　　加选  shift  减选 alt  交叉  shift+alt

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

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

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

　　<div>

　　   <p> 测试</p>

　　</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;  清除列表样式

转载请备注。

上一篇：nyoj 737 石子合并（一）。区间dp


下一篇：iOS 面试题（五）：weak 的内部实现原理 --转自唐巧