css.day02
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; 清除列表样式
转载请备注。
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 ...
随机推荐
- linux中ls、ls -l、ls -al、ll命令
ls只是简单的列出目录下文件名,ll更加详细的列出了文件的类型.文件所有者权限.文件所有者组权限.文件大小.文件最后修改时间,etc... 我们可以用一个简单的图来说明,如下图1: 图1 1.第一位就 ...
- Solr4.8.0源码分析(23)之SolrCloud的Recovery策略(四)
Solr4.8.0源码分析(23)之SolrCloud的Recovery策略(四) 题记:本来计划的SolrCloud的Recovery策略的文章是3篇的,但是没想到Recovery的内容蛮多的,前面 ...
- SharePoint DataFormWebPart 通过Caml和xslt聚合内容
以下是一个例子,SPDataSource用于查询内容,DatasourceMode属性指定查询范围(网站集,网站,列表),SelectCommand是Caml查询:Xsl展示内容,下面列子是用tabl ...
- 在 C++Builder 工程里使用 Visual C++ DLL（3个工具） good
译者序: 第一次读这篇文章是在 2001 年 10 月,帮我解决了一点小问题.本来不好意思翻译,因为英语水平实在太差.最近发现不少网友在问在 C++Builder 的工程里调用 Visual C++ ...
- setjmp/longjmp 使用
C语言中有一个goto语句,其可以结合标号实现函数内部的任意跳转(通常情况下,很多人都建议不要使用goto语句,因为采用goto语句后,代码维护工作量加大).另外,C语言标准中还提供一种非局部跳转“n ...
- 「Poetize5」GF弹钢琴
描述 Description 现在PianoEater有一架有52个白键和 36个黑键的钢琴,并且他要弹奏的曲子只需要按白键.在同一时刻,他只用弹奏一个音符.如果这个音符不移动大拇指就可以按到,那么他 ...
- C语言基础课程 第二课 HelloWorld不为菜鸟所知的秘密
1 愉快的开端hello world 4 1.1 include头文件包含 4 1.2 main函数 4 1.3 注释 4 1.4 {}括号,程序 ...
- 数据结构(RMQ)：UVAoj 11235 Frequent values
Frequent values You are given a sequence of n integers a1 , a2 , ... , an in non-decreasing order. I ...
- 重新注册IE组件
重新注册IE组件:1.打开一个记事本文件. 2.将下面的命令复制到记事本文件中.regsvr32 comcat.dll /sregsvr32 CSSEQCHK.DLL /sregsvr32 shdoc ...
- HDOJ 2021 发工资咯：）（利用了一种取余的思想）
Problem Description 作为杭电的老师,最盼望的日子就是每月的8号了,因为这一天是发工资的日子,养家糊口就靠它了,呵呵 但是对于学校财务处的工作人员来说,这一天则是很忙碌的一天,财务处 ...