Css3 强大选择器
1.关系选择器(层次选择器):
后代元素 E F 匹配 作为所有作为 E元素 后代的 F元素
儿子元素 par>son 匹配 par 元素的子级 son 元素
相邻元素 E+F 匹配紧贴着 E 元素的 F 元素
兄弟元素 E~F 匹配 E 后面所有同级别 F 元素
儿子元素 par>son 匹配 par 元素的子级 son 元素
相邻元素 E+F 匹配紧贴着 E 元素的 F 元素
兄弟元素 E~F 匹配 E 后面所有同级别 F 元素
2.属性选择器(用在表单里比较多)
E[属性名] 含有某属性的元素
E[属性名=值] 某属性=某值的元素
3.伪类选择器
E:first-child 匹配作为第 1 个子元素的元素
E E:last-child 匹配作为最后一个子元素的元素
E E:nth-child(N) 匹配作为第 N 个子元素的元素 E
E:first-child 匹配作为第 1 个子元素的元素
E E:last-child 匹配作为最后一个子元素的元素
E E:nth-child(N) 匹配作为第 N 个子元素的元素 E
4.伪对象选择器 人为的伪造出来的对象,本身没有这个对象
E::before 设置 E 元素前面的内容
E::after 设置 E 元素后面的内
应用:
伪造对象清除浮动:
#main::after { content: ''; display: block; width: 0px; height: 0px; clear: both; }
min-height:400px;[min-width]
刚开始可以给父元素一个最小高,内容再少,也是400px ;
内容多会自动撑开父元素 max-height [max-width] ;
那如何选中最后一个article article元素 且是 最后一个article类型的元素 -> last-of-typ
border-radius:10px;
手写网页实战
第一步:div+css
div切出分区 填充标签head body hearder nav main footer lside rside ; css 控制大小 style设置 ;
第二步:导航制作
<nav>
<ul>
<li><a href="">导航1</a></li>
<li><a href="">导航2</a></li>
<li><a href="">导航3</a></li>
<li><a href="">导航4</a></li>
</ul>
</nav>
<ul>
<li><a href="">导航1</a></li>
<li><a href="">导航2</a></li>
<li><a href="">导航3</a></li>
<li><a href="">导航4</a></li>
</ul>
</nav>
nav { height: 60px; background: #222; }
nav ul { width: 1100px; height: 60px; margin: 0px auto; }
nav li { float: left; }
#nav1 { background: #3f3f3f; }
nav ul { width: 1100px; height: 60px; margin: 0px auto; }
nav li { float: left; }
#nav1 { background: #3f3f3f; }
nav a { color: white; display: block; width: 74px; height: 60px; font-size: 15px; line-height: 60px; padding-left: 20px; }
nav a:hover { background: #3f3f3f; }
nav a:hover { background: #3f3f3f; }
第三步: main 区域
<input type="search" name=""> 搜索框 </form>
第四步: lside rside main 等区域
第五步:基线
div { width: 200px; height: 80px; background: pink; text-align: center; line-height: 80px; }
第六步:图标字体
1.打开官网,复制直接引用字体,看是否可行 http://fortawesome.github.io/Font-Awesome/ 打开 -> icons
<i class="fa fa-hourglass-start"></i
<i class="fa fa-hourglass-start"></i
页面 -> 引入外部 awesome字体 页面内设置: font-family:awesome; 页面内部调用 -> 气泡 -> 浏览器显示这个气泡字体
@font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),
url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'),
url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0')
url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0')
format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; }
<style> div { font-family: 'FontAwesome'; } </style>
</head> <body> <div></div> </body>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> </head>
<body> <i class="fa fa-hand-paper-o">我是图标</i> </body> </html>
<body> <i class="fa fa-hand-paper-o">我是图标</i> </body> </html>
<body> <i class="fa fa-hand-paper-o">我是小手</i> <a href="#" class="fa fa-comment">9条评论</a> </body>
awesome字体实际运用到中
.catlink::before { font-family: 'FontAwesome'; padding: 0px 4px; content: "\f07c"; }
.comment::before { font-family: 'FontAwesome'; padding: 0px 4px; content: "\f075"; }
<span><a href="#" class="catlink">闲谈随笔</a></span> <span><a href="#" class="comment">9条评论</a></span>
.catlink::before { font-family: 'FontAwesome'; padding: 0px 4px; content: "\f07c"; }
.comment::before { font-family: 'FontAwesome'; padding: 0px 4px; content: "\f075"; }
<span><a href="#" class="catlink">闲谈随笔</a></span> <span><a href="#" class="comment">9条评论</a></span>
教程::
观察小图标,既不是背景图,也不是图片.其实是个字 twitter团队开发的 常用图标效果,用图片或者背景图来做(不方便) 所以他们就做了一种独特的字,是个特殊的字体
1.打开官网,复制直接引用字体,看是否可行 http://fortawesome.github.io/Font-Awesome/ 打开 -> icons
<i class="fa fa-hourglass-start"></i>
1.打开官网,复制直接引用字体,看是否可行 http://fortawesome.github.io/Font-Awesome/ 打开 -> icons
<i class="fa fa-hourglass-start"></i>
首先这是一种字体,我们机器上没有这种字体 但是你要求来你网站看的人,都有这种字体吗?不是的 css允许我们引入外部字体 页面 -> 引入外部 awesome字体 页面内设置: font-family:awesome; 页面内部调用 -> 气泡 -> 浏览器显示这个气泡字体
显示awesome字体: 1)css,引入外部awesome字体 2)写图标文字 3)声明文字使用awesome字体 font-family
下载awesome字体 -> 解压 -> 只需要fonts目录 css如何引入外部文字: 字体有多种格式,它用src引入了不同格式的文字,为了保证各种浏览器都能适应,可以使用这套文字
@font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.3.0'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'),
url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; }
字符的unicode码 http://fortawesome.github.io/Font-Awesome/cheatsheet/
每一个字符,都有独特的unicode码 使用字符的unicode码来引用这个字符
<style> div { font-family: 'FontAwesome'; } </style> </head> <body> <div></div> </body>
利用伪对象选择器,在a标签[9条评论]前加上小图标 注意:在css中写,跟标签中写法不同,同样是16进制 标签中是  css中是 \f
<style> div { font-family: 'FontAwesome'; }
a::before { font-family: 'FontAwesome'; content: "\f042"; } </style> </head> <body> <div></div> <a href="#">9条评论</a> </body> </html>
推特工程师对这400多个图片,早已经写好了400多个类 在元素的::before 加上这个图标文字 http://fortawesome.github.io/Font-Awesome/get-started/
在head标签中直接引入这个css即可 看一个这个类干了些什么 -> 类名::before{content:''}; 所有的图标: http://fortawesome.github.io/Font-Awesome/icons/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> </head>
<body> <i class="fa fa-hand-paper-o">我是图标</i> </body> </html>
并不一定要用i标签,只要在标签中加入这个类就可以使用
<body> <i class="fa fa-hand-paper-o">我是小手</i> <a href="#" class="fa fa-comment">9条评论</a> </body>
awesome字体实际运用到blog中
.catlink::before { font-family: 'FontAwesome'; padding: 0px 4px; content: "\f07c"; }
.comment::before { font-family: 'FontAwesome'; padding: 0px 4px; content: "\f075"; }
<span><a href="#" class="catlink">闲谈随笔</a></span> <span><a href="#" class="comment">9条评论</a></span>