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 ...
随机推荐
- api1
http://www.android-doc.com/reference/android/app/Fragment.html
- Oracle数据库基础知识_字符串操作相关2
6.LPAD,RPAD 作用:左/右边的字符串填充一些特定的字符语法: LPAD(string , n, [pad_String]) string:可是字符或者参数 ...
- Java中的多线程总结（转）
1.多线程概述 当一个程序运行时,内部可能包含了多个顺序执行流,每个顺序执行流就是一个线程.主要以下几个优点: 线程之间很容易实现共享内存 创建线程代价较小 Java语言内置多线程功能支持 2.线 ...
- EasyPR--开发详解
我正在做一个开源的中文车牌识别系统,Git地址为:https://github.com/liuruoze/EasyPR. 我给它取的名字为EasyPR,也就是Easy to do Plate Reco ...
- Node.js npm
Node程序包管理器(NPM)提供了以下两个主要功能: 在线存储库的Node.js包/模块,可搜索 search.nodejs.org 命令行实用程序来安装Node.js的包,做版本管理和Node.j ...
- High performance web site
http://www.cnblogs.com/Blog-Yang/archive/2013/08/16/3261284.html http://www.kuqin.com/webpagedesign/ ...
- 如何用正则匹配后缀名不为.jpg, .css, .js, .html, .htm, .png的文件
有网友碰到过这样的问题:如何用正则匹配后缀名不为.jpg, .css, .js, .html, .htm, .png的文件,问题详细内容为: 如何用正则匹配后缀名不为.jpg, .css, .js, ...
- cscope使用
[[]][]再加上][一共是 4 个在段落(对于 C 来讲就是函数)间跳转的命令. 总结是:1,相同就跳到函数的开头:(如果都是左括号或者都是右括号),不同就跳到函数的结尾: { 和 } 用来 ...
- -_-#【工具】图片导出PDF
- 图论（费用流）：BZOJ 4514 [Sdoi2016]数字配对
4514: [Sdoi2016]数字配对 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 820 Solved: 345[Submit][Status ...