前端小生CSS分享学习02
欢迎各位小哥哥小姐姐阅读本<小生>的文章,对大家学习有帮助,请点赞加关注哦!!!!!!!!!!!
您的点赞和关注将是我持续更新的动力呢.^v^
18 ==ID选择器.avi==
- id选择器中的id名是唯一的
先在标签里面书写一个id名 然后通过#id名去调用
<style>
.xiongda{
font-size:100px;
}
#xiongda { /* id选择器 和 类选择器 结合记忆更好 */
color: pink;
}
</style>
<div id="xiongda" class="xiongda">熊大</div>
19 id选择器和类选择器的区别.avi
id是唯一的 类名可以反复给别人使用
20 通配符选择器.avi
*代表所有,
给所有的标签内外间距都清零.
* {
margin:0;
padding:0
}21 链接伪类选择器的使用.avi
注意:link visited hover active顺序不能颠倒,否则链接伪类作用可能无效
快速记忆 lv hao
<style>
a:link {
/* 红色 未访问过的状态*/
color: #f00;
}
a:visited {
/* 已访问过的状态 绿色 */
color: #0f0;
}
a:hover {
/*蓝色 鼠标悬停的时候显示的颜色 */
color: #00f;
}
a:active {
/* 鼠标点击未松开的时候显示的颜色 橘黄色 */
color: #f40;
}
</style>22 链接伪类的简写方式.avi
平常最常用的就是hover了,也就是鼠标悬停时的状态 link我们可以用正常情况下的状态取缔
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: #f00;
}
/* .anchor {
color: red;
} */
.anchor:hover {
background-color: blue;
}
</style>
</head>
<body>
<div class="anchor">连接伪类的使用</div>
</body>23 结构伪类选择器(一).avi
结构伪类选择器,能够快速的选择html结构中的某一块
<style>
li:first-child { /* 选择第一个孩子 */
color: pink;
}
li:last-child { /* 最后一个孩子 */
color: purple;
}
li:nth-child(2n) { /* 选择第4个孩子 n 代表 第几个的意思 */
color: skyblue;
}
</style>24 结构伪类选择器(二).avi
- nth-child(n)这个选择器较为灵活,我们可以选择一些有规律的元素
<style>
li:nth-child(odd) { /* 可以选择所有的 odd奇数 的孩子标签 */
color: pink; /* 2n+1/2n-1 */
}
li:nth-child(even) { /* 可以选择所有的 even 偶数 的孩子标签 */
color: deeppink; /* 2n */
}
li:nth-child(3n) { /* n 0 2n 2n是 选择 0 2.4.6.8..的孩子 3n 0.3.6.9的孩子元素 */
color: pink;
}
</style>25 结构伪类选择器(三).avi (了解)
- nth-last-child(n)跟前面的nth-child(n)较为类似 nth-last-child(n)是从后面忘前面去计数
<head>
<meta charset="utf-8">
<style>
/* li:nth-child(even) { 从第一个孩子开始数的
color: pink;
} */
li:nth-last-child(even) { /* nth-last-child 从最后一个孩子开始数 倒数 */
color: skyblue;
}
</style>
</head>
<body>
<ul>
<li>第一个孩子</li>
<li>第二个孩子</li>
<li>第三个孩子</li>
<li>第四个孩子</li>
<li>第五个孩子</li>
<li>第六个孩子</li>
<li>第七个孩子</li>
<li>第八个孩子</li>
</ul>
</body>26 目标伪类选择器.avi
目标伪类:通过跳转的目标href指向文档内某个具体的元素,这个被链接的这个元素,我们称之为目标伪类
用法:
<style>
p:target{
font-size: 30px;
}
#luoge:target {
color: green;
}
#wenge:target {
color: deeppink;
}
</style>
<a href="#luoge">罗哥</a>
<a href="#wenge">文哥</a>
<p id="luoge">罗哥很"骚" </p>
<p id="wenge">文哥猥琐 </p>27 CSS颜色.avi
颜色分为三种: 1.color:red; (最常用的颜色有red,green,blue,yellow,orange,skyblue,deeppink) 2.color:#f00; (最常用的 红色:#f00 绿色:#0f0 蓝色:#00f 橘色:#f40 黑色:#000 白色:#FFF) 需要注意的是 颜色一般都是六位的 如#FF0000 那么我们 可以简写为#F00 3.color:rgb(255,0,0) 4.color:rgba(255,0,0,0.5) 其中 0.5代表的是透明度 它的取值可以为0-1里面的任何数
28 行高对齐和首行缩进.avi
line-height:行高 主要用于设置字体 代表字体中每一行的高度 text-align:设置字体的水平位置,例如<h1>我想让字体居中</h1> 那么我们需要给h1添加一个text-align:center 代表的是字体在这个h1中水平居中(因为h1默认是独占一行的)
29 字间距和单词间距.avi
letter-spacing:字间距 代表的是所有的字符或者文字之间的一种间距(包括中文和英文之间字符的间距) word-spacing:词间距,代表的是单词与单词之间的一种间距 如: Are you OK?
30 颜色半透明.avi
rgba(255,0,0,0.5); 最后一个参数代表的是这个颜色的透明度
31 文字阴影初识.avi
要求:通过调试工具可以调出你想要的阴影效果
<style>
h1 {
font-size: 100px;
text-shadow: 5px 11px 3px rgba(0,0,0,0.5);
/* text-shadow:水平位置 垂直位置 模糊距离 阴影颜色; */
/* 水平和垂直位置 前2个参数必须写， 后面的2个参数可以省略 默认值 */
}
</style>
<h1>你是阴影，我是火影</h1>32 sublime快捷方式.avi
Ctrl + / ---------------------注释 Ctrl + 滚动 --------------字体变大/缩小 Ctrl + N-------------------新建 Ctrl+Shift +k || Ctrl+X-----------删除一行 Ctrl + 回车 -----------添加一行空行 Alt + F3 ---------------选中选择的词 Ctrl + W ---------------关闭当前文档 Ctrl + Shift + D ---------复制这行文本 SHift +Tab --------------去除缩进
33 综合案例(一).avi
- 要求:能够独立完成综合案例
34 综合案例(二).avi
first-letter:伪元素向文本的第一个字母添加特殊样式
<style>
p:first-letter {
font-size: 30px;
color: red;
}
</style>
first-line:向文本中的首行添加特殊的样式
<style>
p:first-line {
color: deeppink;
font-size: 14px;
}
</style>35 综合案例(三).avi
<head>
<meta charset="utf-8">
<style>
body {
color: #3c3c3c; /* 一般网页不用纯黑，用淡灰色 3c3c3c */
font-size: 16px;
}
h1 {
text-align: center; /* 文字水平居中 */
font-size: 25px;
font-weight: normal; /* 让粗体不加粗 */
}
div {
text-align: center;
font-size: 14px;
}
.sports {
color: #f40;
}
.packtake {
color: #f00;
}
.co {
font-weight: 700;
color: #ccc;
}
.co:hover { /* 链接伪类选择器 鼠标经过 .co这个类名的时候 */
color: #f00;
}
p {
font-size: 14px;
line-height: 22px;
text-indent: 2em; /* 首行缩进2个字的距离 */
letter-spacing: 1px;
}
em {
font-style: normal; /* 让斜体 不倾斜 */
color: skyblue;
}
</style>
</head>
<body>
<h1>中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</h1>
<div>2017年07月16日20:11 <span class="sports">新浪体育 评论中大奖</span>
（<a href="#" class="packtake">11</a>人参与） <a href="#" class="co">收藏本文</a></div>
<hr />
<p>新浪体育讯 7月16日是燕京啤酒<em>[微博]</em>2017中国足协杯第三轮比赛，丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午，丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈，并且收拾行囊准备离开。在这样的情况下，丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。</p>
<p>在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎由于身体欠佳，去医院接受治疗。然而今日李虎出现在俱乐部时，向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈。</p>
<p>据记者多方了解的情况，李虎<em>[微博]</em>极其教练组近来在执教成绩上承受了不小的压力，在联赛间歇期期间，教练组曾向俱乐部提出能够多引进有实力的球员补强球队，然而由于和俱乐部在投入以及成绩指标上的分歧，李虎最终和教练组一起在比赛日辞职。
</p>
<p>这样的情况并没有影响到丽江嘉云昊队<em>[微博]</em>的队员，在比赛中丽江队在主场拼的非常凶，在暴雨之中仍然发挥出了体能充沛的优势，最终凭借点球击败了中超球队哈尔滨毅腾，顺利晋级下一轮比赛。根据中国足协杯的赛程，丽江嘉云昊队将在本月23日迎战江苏舜天队。</p>
</body>