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

转载请备注。

css.day02的更多相关文章

2020年12月-第02阶段-前端基础-CSS Day02
CSS Day02 复合选择器后代选择器并集选择器 1. CSS复合选择器理解理解css复合选择器分别的应用场景为什么要学习css复合选择器 CSS选择器分为基础选择器和复合选择器 , ...
css.day02.eg
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
day-02（css,js）
本文档并非个人所写,只是便于参考:回顾: html: 作用:展示文件标签: <html> <head> <title></title> </he ...
超全面的JavaWeb笔记day02<CSS&JavaScript>
1.CSS的简介 2.CSS概述和与HTML的结合方式(四种)(*******) 3.CSS的基本选择器(******) 4.CSS的扩展选择器(了解) 5.CSS的盒子模型(了解) 6.CSS的布局 ...
Day02 html回顾和CSS介绍
昨天内容回顾 1.html的操作思想 ** 使用标签把要操作的数据包起来,通过修改标签的属性值来实现标签内数据样式的变化 *** <font size=& ...
2021年3月-第02阶段-前端基础-HTML+CSS阶段-Day02
HTML5 第二天一.rotate 2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转使用步骤: 给元素添加转换属性 transform 属性值为 rotate(角度) 如 transfor ...
《Professional JavaScript for Web Developers》day02
<Professional JavaScript for Web Developers>day02 1.在HTML中使用JavaScript 1.1 <script>元素 HT ...
css给html添加效果
<!doctype html> <html> <head> <title>EasyMall注册界面</title> <meta htt ...

随机推荐

bzoj2180: 最小直径生成树
Description 输入一个无向图G=(V,E),W(a,b)表示边(a,b)之间的长度,求一棵生成树T,使得T的直径最小.树的直径即树的最长链,即树上距离最远的两点之间路径长度. Input 输 ...
Explain语法
EXPLAIN SELECT -- 变体: 1. EXPLAIN EXTENDED SELECT -- 将执行计划"反编译"成SELECT语句,运行SHOW WARNINGS 可得 ...
Fastreport怎么样在同一页上下部分打印相同内容
使用FastReport遇到个难题,不知道怎么解决分组打印之后,需要同一页上下部分打印相同内容,就是一式两份的联单打印. 例如: 送货单 ********** A 这里上半页,地区分组之后的内容 * ...
Standard Numeric Format Strings
The following table describes the standard numeric format specifiers and displays sample output prod ...
jquery升级换代
其实从去年开始1.9以上新版的jquery已不再支持toggle方法和live方法. live用on方法替代. 话说这个方法确实挺方便的,那么怎么交替点击呢,html的checked属性我觉得不是很好 ...
Frame Stacking
poj1128:http://poj.org/problem?id=1128 题意:一个二维图里面有几个相框(四条边的空心矩形框).有重叠,求重叠顺序.还有题目保证至少存在一种符合要求的序列,当有多种 ...
在SystemOut.log中发现HMGR0152W: 检测到CPU 饥饿的消息 <转载>
今天系统报警了!!!!!顿时人又不好了!!!查看系统日志, 报错如下: Did not receive adequate CPU time slice. Last known CPU usage ti ...
把CSV文件导入到SQL Server表中
保存数据库数据直接查询select * from tableName 在数据表格的左上角右击——将结果另存为选择路劲保存好的就是.csv格式的数据有时候我们可能会把CSV中的数据导入到某个数据库的表 ...
搜索(三分)：HDU 3400 Line belt
Line belt Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S ...
Binary Tree Zigzag Level Order Traversal——LeetCode
Given a binary tree, return the zigzag level order traversal of its nodes' values. (ie, from left to ...

css.day02

css.day02的更多相关文章

随机推荐

热门专题