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 ...
随机推荐
- 在 iOS 应用中直接跳转到 AppStore 的方法--备用
找到应用程序的描述链接,比如:http://itunes.apple.com/gb/app/yi-dong-cai-bian/id391945719?mt=8 然后将 http:// 替换为 itms ...
- BZOJ 1052 覆盖问题
Description 某人在山上种了N棵小树苗.冬天来了,温度急速下降,小树苗脆弱得不堪一击,于是树主人想用一些塑料薄膜把这些小树遮盖起来,经过一番长久的思考,他决定用3个L*L的正方形塑料薄膜将小 ...
- codeforces C. Inna and Huge Candy Matrix
http://codeforces.com/problemset/problem/400/C 题意:给你一个n*m的矩阵,然后在矩阵中有p个糖果,给你每个糖果的初始位置,然后经过x次顺时针反转,y次旋 ...
- ORACLE WIN7安装过程截图
尽管 有点不正规,但还可以.
- AV 地址错误 map 文件 根据地址报错，查 Delphi 代码
1. 首先需要设置程序生成 map 文件.Project -> Options -> Linker -> Map file , Detailed 2. 计算公式Edit2.Text ...
- Delphi判断文件是否正在被使用（CreateFile也可以只是为了读取数据，而不是创建）
首先,我们先来认识下CreateFile函数,它的原型如下 HANDLE CreateFile( LPCTSTR lpFileName, //指向文件名的指针 DWORD dwDesired ...
- 微信下载APK
腾讯应用宝 微信屏蔽了来源不是腾讯的APK function isWeixin() { var ua = navigator.userAgent.toLowerCase() if(ua.match(/ ...
- 【转】Android开发中adb启动失败adb连接异常的解决办法 offline
原文网址:http://www.cnblogs.com/yejiurui/p/4173521.html 一.情况描述: 我们在使用eclipse开发有时候会出现adb连接异常中,有时候控制台会打印出来 ...
- wpa_cli 连接 wifi
转自:http://hi.baidu.com/yyangjjun/item/9dfe8e175439fc7a1009b5ba 1: run wpa_supplicant first use the ...
- spring mvc mybatis
Spring与Mybatis整合需要引入一个mybatis-spring.jar包,该整合包有Mybatis提供,可以从Mybatis官网下载. 该jar包提供了几个API: 1.SqlSession ...