HTML+CSS3－》第3阶段：HTML5之CSS3基础与加强 中
60前端开发基础视频-复合选择器之子元素选择器
子元素选择器，是让css选择器智能选择子辈的元素。
例如：h1>strong{color:red;}
解读为：选择器h1>strong可以解释为“选择作为h1元素子元素的所有strong元素”。
61前端开发基础视频-属性选择器
属性选择器
<!DOCTYPE html>
<html lang="zh">
<head>
<title>复合选择器、子元素择器</title>
<meta charset="utf-8">
<style>
h1, h2, p ,li
{
color: red;
}
h1>strong
{
background-color: green;
}
h3[id]/*拥有id属性的h3标签*/
{
background-color: aqua;
}
h3[id][class]/*既有id属性，又有class属性*/
{
background-color: blue;
color: powderblue;
}
input[type="text"]/*type="text"的input标签*/
{
border-color: greenyellow;
border-width: 10px;
}
</style>
</head>
<body>
<h1>
h1标签
<strong>
h1中的子辈的strong标签
</strong>
<p>
<strong>
这个是孙子辈的strong标签
</strong>
</p>
</h1>
<h2>h2标签</h2>
<p>p标签</p>
<ul>
<li>人民币贬值</li>
</ul>
<h3 id="aside-title">
不积跬步无以至千里
</h3>
<h3 id ="haveid" class="aside-msg">
h3标签
</h3>
<input type="text">
<input type="radio">
<input type="checkbox">
<input type="password">
</body>
</html>
62前端开发基础视频-CSS伪类的使用案例
css伪类
:link
未被访问过的链接
:hover
鼠标指针悬停于其上的元素。
:active
被激活的元素
:visted
被访问过得链接
:focus
拥有键盘输入焦点的元素
<!DOCTYPE html>
<html lang="zh">
<head>
<title>复合选择器、子元素择器</title>
<meta charset="utf-8">
<style>
h1, h2, p ,li
{
color: red;
}
h1>strong
{
background-color: green;
}
h3[id]/*拥有id属性的h3标签*/
{
background-color: aqua;
}
h3[id][class]/*既有id属性，又有class属性*/
{
background-color: blue;
color: powderblue;
}
input[type="text"]/*type="text"的input标签*/
{
border-color: greenyellow;
border-width: 10px;
}
a:link/*a标签中未被访问过的链接*/
{
color:orangered;
}
a:visited /*已经访问过的超链接*/
{
color: blue;
}
a:hover /*鼠标焦点*/
{
color:aqua;
background-color: purple;
}
input:hover
{
color: rebeccapurple;
background-color: orange;
border-width: 20px;
}
input:active/*被激活的元素、被按下的按钮等*/
{
color: green;
background-color: orange;
border-width: 15px;
border-color: aquamarine;
}
/*伪类 标签书写时的顺序要按照：LoVe HAte原则 link visited hover active*/
.txtName:focus
{
background-color: brown;
}
a:focus
{
font-size: 30px;
}
</style>
</head>
<body>
<div>
<input type="text" class="txtName">
</div>
<p>
<a target="_blank" href="https://www.baidu.com"> https://www.baidu.com </a>
</p>
<p>
<a target="_blank" href="http://www.sina.com.cn"> http://www.sina.com.cn </a>
</p>
<p>
<a target="_blank" href="https://www.taobao.com"> https://www.taobao.com </a>
<br>
<a target = "_blank" href="http://www.jd.com/?cu=true&utm_source=p.yiqifa.com&utm_medium=tuiguang&utm_campaign=t_1_845474&utm_term=3453729c795e465ab4d9da0077e6ebbb">京东官网</a>
</p>
<h1>
h1标签
<strong>
h1中的子辈的strong标签
</strong>
<p>
<strong>
这个是孙子辈的strong标签
</strong>
</p>
</h1>
<h2>h2标签</h2>
<p>p标签</p>
<ul>
<li>人民币贬值</li>
</ul>
<h3 id="aside-title">
不积跬步无以至千里
</h3>
<h3 id ="haveid" class="aside-msg">
h3标签
</h3>
<input type="text">
<input type="radio">
<input type="checkbox">
<input type="password">
</body>
</html>
63前端开发基础视频-CSS伪元素
伪元素
<!DOCTYPE html>
<html lang="zh">
<head>
<title>复合选择器、子元素择器</title>
<meta charset="utf-8">
<style>
.p-txt:first-line
{
text-indent:4em;
te
}
.p-txt:first-letter
{
font-size: 50px;
}
a:first-child/*a标签，且位于第一级子元素*/
{
background-color: red;
}
a:before /*a标签前面*/
{
content:"=_=_=_=-";/*默认为行级别*/
}
a:after
{
content:"+-+---";
display: block; /*显示独占一行*/
}
</style>
</head>
<body>
<p class="p-txt">
天下事有难易乎？为之，则难者亦易矣（yi）；不为，则易者亦难矣。人之为学有难易乎？学之，则难者亦易矣；不学，则易者亦难矣。<br>
蜀之鄙（bÏ，边界）有二僧，其一贫，其一富。贫者语（yù）与富者曰：“吾欲之南海，何如？”富者曰：“子何恃（shì，凭借、依仗）而往？”曰：“吾一瓶一钵（bō）足矣。”富者曰：“吾数年来欲买舟而下，犹未能也。子何恃而往？”
越明年，贫者自南海还，以告富者，富者有惭（惭愧）色。
西蜀之去南海，不知几千里也。僧富者不能至而贫者至焉。人之立志，顾不如蜀鄙之僧哉？是故聪与敏，可恃而不可恃也，自恃其聪与敏而不学者，自败者也。昏与庸，可限而不可限也；不自限其昏与庸而力学不倦者，自力者也。
</p>
<div>
<input type="text" class="txtName">
</div>
<p>
<a target="_blank" href="https://www.baidu.com"> https://www.baidu.com </a>
</p>
<p>
<a target="_blank" href="http://www.sina.com.cn"> http://www.sina.com.cn </a>
</p>
<p>
<a target="_blank" href="https://www.taobao.com"> https://www.taobao.com </a>
<br>
<a target = "_blank" href="http://www.jd.com/?cu=true&utm_source=p.yiqifa.com&utm_medium=tuiguang&utm_campaign=t_1_845474&utm_term=3453729c795e465ab4d9da0077e6ebbb">京东官网</a>
</p>
<input type="text">
<input type="radio">
<input type="checkbox">
<input type="password">
</body>
</html>
64前端开发基础视频-CSS层叠性
CSS层叠性
所谓层叠性是指多种css样式的叠加。例如，当使用内嵌式CSS样式表定义<p>标记字号大小为12像素，链入式定义<p>标记颜色为红色，那么段落文本将显示为12像素红色，即这两种样式产生了叠加。
<!DOCTYPE html>
<html lang="zh">
<head>
<title>复合选择器、子元素择器</title>
<meta charset="utf-8">
<style>
p
{
text-decoration:underline;
}
.p-txt
{
text-indent: 2em;
color: dodgerblue;
}
.p-text
{
font-style: italic;
}
</style>
</head>
<body>
<p class="p-txt p-text">
天下事有难易乎？为之，则难者亦易矣（yi）；不为，则易者亦难矣。人之为学有难易乎？学之，则难者亦易矣；不学，则易者亦难矣。<br>
蜀之鄙（bÏ，边界）有二僧，其一贫，其一富。贫者语（yù）与富者曰：“吾欲之南海，何如？”富者曰：“子何恃（shì，凭借、依仗）而往？”曰：“吾一瓶一钵（bō）足矣。”富者曰：“吾数年来欲买舟而下，犹未能也。子何恃而往？”
越明年，贫者自南海还，以告富者，富者有惭（惭愧）色。
西蜀之去南海，不知几千里也。僧富者不能至而贫者至焉。人之立志，顾不如蜀鄙之僧哉？是故聪与敏，可恃而不可恃也，自恃其聪与敏而不学者，自败者也。昏与庸，可限而不可限也；不自限其昏与庸而力学不倦者，自力者也。
</p>
</body>
</html>
65前端开发基础视频-CSS继承性
继承性
所谓继承性是指书写CSS样式表时，字标记会继承父标记的某些样式。
66前端开发基础视频-CSS特殊性即CSS优先级（上）
内联样式>ID选择器>类选择器>标签选择器
<!DOCTYPE html>
<html lang="zh">
<head>
<title>复合选择器、子元素择器</title>
<meta charset="utf-8">
<style>
.p-txt
{
color: red;
}
body
{
font-size: 20px;
text-indent: 2em;
background-color: antiquewhite;
}
#p-text
{
color:green;
}
</style>
</head>
<body>
<!--行内样式级别高于class-->
<div class="p-txt" style="color:blue">
行内样式级别高于class
<p class="p-txt">
天下事有难易乎？为之，则难者亦易矣（yi）；不为，则易者亦难矣。人之为学有难易乎？学之，则难者亦易矣；不学，则易者亦难矣。<br>
蜀之鄙（bÏ，边界）有二僧，其一贫，其一富。贫者语（yù）与富者曰：“吾欲之南海，何如？”富者曰：“子何恃（shì，凭借、依仗）而往？”曰：“吾一瓶一钵（bō）足矣。”富者曰：“吾数年来欲买舟而下，犹未能也。子何恃而往？”
越明年，贫者自南海还，以告富者，富者有惭（惭愧）色。
西蜀之去南海，不知几千里也。僧富者不能至而贫者至焉。人之立志，顾不如蜀鄙之僧哉？是故聪与敏，可恃而不可恃也，自恃其聪与敏而不学者，自败者也。昏与庸，可限而不可限也；不自限其昏与庸而力学不倦者，自力者也。
</p>
<p id="p-text" class="p-txt"><!--id高于class-->
恰当的使用继承可以简化代码，降低CSS样式的复杂性。但是，如果在网页中所有的元素都大量继承样式，那么判断样式的来源就会很困难，所以对字体、文本属性等网页中通用的样式可以继承。例如，字体、字号、颜色、行距等可以再body元素中统一设置，然后通过继承影响文档中所有的文本。
<br>
所有自相关的都可以继承，比如：color、text-系列、font-系列、line-系列、cursor。
并不是所有的CSS属性都可以继承，例如，下面的属性就不具有继承性：边框、外边距、内边距、背景、定位、元素宽高属性。
所有盒子相关的属性都不能继承。
</p>
</div>
</body>
</html>
67前端开发基础视频-CSS特殊性即CSS优先级（中）
<!DOCTYPE html>
<html lang="zh">
<head>
<title>CSS选择器案例</title>
<meta charset="utf-8">
<style>
body
{
color:red;
}/*继承样式级别高于默认样式*/
*
{
color:blue;
text-decoration: underline;
}/*通配符设置的样式级别高于继承样式，也高于默认样式*/
h2
{
color: green;
text-indent: 2em;
}/*标签的样式设计级别高于通配符*/
.h2class
{
color: orange;
font-style: italic;
}/*类选择器样式级别，高于标签选择器*/
#h2id
{
color: purple;
}/*id选择器的级别，高于类选择器*/
</style>
</head>
<body>
<div class="wrap">
<div class="aside">
<div class="aside-dt" id="title-txt">
<h2> 我是一个标题1</h2>
<h2 class="h2class">我是一个标题2</h2>
<h2 class="h2class" id="h2id">我是一个标题3</h2>
<h2 class="h2class" id="h2id" style="color:black">我是一个标题3</h2><!--行内样式优先级最高-->
</div>
<div class="aside-dd">
<p>我是一个段落</p>
</div>
</div>
</div>
</body>
</html>
68前端开发基础视频-CSS特殊性即CSS优先级（下）
<!DOCTYPE html>
<html lang="zh">
<head>
<title>CSS选择器案例</title>
<meta charset="utf-8">
<style>
body
{
color:red;
}/*继承样式级别高于默认样式*/
*
{
color:blue;
text-decoration: underline;
}/*通配符设置的样式级别高于继承样式，也高于默认样式*/
h2
{
color: green;
text-indent: 2em;
}/*标签的样式设计级别高于通配符*/
.h2class
{
color: orange;
font-style: italic;
}/*类选择器样式级别，高于标签选择器*/
#h2id
{
color: purple;
}/*id选择器的级别，高于类选择器*/
.aside .aside-dt h2
{
background-color:
antiquewhite
}
.aside #title-txt
{
background-color:
brown;
}
/*
* 行内选择器 id选择器 类选择器 标签选择器
* 0 1 1 0
* 优先级就是0110
*/
</style>
</head>
<body>
<div class="wrap">
<div class="aside">
<div class="aside-dt" id="title-txt">
<h2> 我是一个标题1</h2>
<h2 class="h2class">我是一个标题2</h2>
<h2 class="h2class" id="h2id">我是一个标题3</h2>
<h2 class="h2class" id="h2id" style="color:black">我是一个标题3</h2><!--行内样式优先级最高-->
</div>
<div class="aside-dd">
<p>我是一个段落</p>
</div>
</div>
</div>
</body>
</html>
69前端开发基础视频-CSS设置标签模式display属性介绍
CSS单位与文字排版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>display css属性</title>
<style>
div
{
background-color: silver;
display: inline;/*通过display让一个块级元素变成一个行内元素*/
}
strong
{
display: block;/*让一个行内元素按块级显示*/
}
</style>
</head>
<body>
<!--行内元素-->
<span>我是span</span>
<strong>我是strong标签，Display可以控制标签的显示模式（块级显示还是行级显示），且无继承性</strong>
<s>我是一个s标签</s>
<!--块级标签-->
<div>
我是一个div
</div>
<h1>
我是h1
</h1>
</body>
</html>
70前端开发基础视频-CSS设置标签模式display设置none隐藏标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>display css属性</title>
<style>
div
{
background-color: silver;
display: inline;/*通过display让一个块级元素变成一个行内元素*/
}
strong
{
display: block;/*让一个行内元素按块级显示*/
visibility: hidden;/*隐藏，但依然占有位置*/
}
p
{
display: none;/*标签不仅仅不显示，而且也不再占有位置*/
}
</style>
</head>
<body>
<!--行内元素-->
<span>我是span</span>
<strong>我是strong标签，Display可以控制标签的显示模式（块级显示还是行级显示），且无继承性</strong>
<s>我是一个s标签</s>
<!--块级标签-->
<div>
我是一个div
</div>
<h1>
我是h1
</h1>
<p>
p标签，display none
</p>
</body>
</html>
71前端开发基础视频-CSS设置标签模式display行内块元素及块级行内的区别总结
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>display css属性</title>
<style>
div
{
background-color: silver;
display: inline;/*通过display让一个块级元素变成一个行内元素*/
}
strong
{
display: block;/*让一个行内元素按块级显示*/
visibility: hidden;/*隐藏，但依然占有位置*/
}
p
{
display: none;/*标签不仅仅不显示，而且也不再占有位置*/
}
.divInline
{
display: inline-block;
width:100px;
}
</style>
</head>
<body>
<!--行内元素-->
<span>我是span</span>
<strong>我是strong标签，Display可以控制标签的显示模式（块级显示还是行级显示），且无继承性</strong>
<s>我是一个s标签</s>
<!--块级标签-->
<div>
我是一个div
</div>
<h1>
我是h1
</h1>
<p>
p标签，display none
</p>
<div class="divInline">
dsdsd<img src="dragon.png">sdsdsdsdsd
行内元素（不能设置宽高）、块级元素（可以设置宽高）、行内块元素（可以设置宽高）。
</div>
</body>
</html>
72前端开发基础视频-CSS颜色表示方法
命名颜色
red、black、white、purple、green、yellow、silver、等
RGB颜色
rgb(red,green,blue),0-255之间的整数，或者是百分比值
color:rgb(255,255,0)
color:rgb(100%,100%,0%)
十六进制颜色
#000000~#FFFFFF(黑色到白色)
126
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
