CSS样式
课程目标
1.css引入方式(重点)
2.css选择器(重点)
3.css盒子模型(重点)
4.css3常见效果(重点)
级联样式表
css介绍
引用百度百科
css概述
层叠样式表其实就是对静态页面进行装饰,但是,特别要注意的点是:通常建议表现形式与页面内容分离(例如:人就是内容,穿着打扮就是表现形式)
css引入方式
行内样式
行内样式(将样式直接写在标签上),需要使用style属性
<!-- 行内样式 --> <div style="color: green; border: 1px solid red;">每天叫醒我的不是闹钟,是梦想!!!</div> <div style="color: green; border: 1px solid red;">每天叫醒我的不是闹钟,是梦想!!!</div> <div style="color: green; border: 1px solid red;">每天叫醒我的不是闹钟,是梦想!!!</div>
该方式可用于提高样式的优先级,多次使用会导致代码臃肿,不利于后期维护
内联样式
讲页面内容与表现形式进行分离,方便对样式进行统一管理
<!-- 我现在写css样式,是html标签吗? 不是标签,样式在html基础书写 --> <style> /* 选择器 */ div{ color: brown; border: 1px solid red; } p{ color: pink; } </style> </head> <body> <div>每天叫醒我的不是闹钟,是梦想!!!</div> <div>每天叫醒我的不是闹钟,是梦想!!!</div> <div>每天叫醒我的不是闹钟,是梦想!!!</div> <p>小面包</p> <p>小cookie</p> <p>小饼干</p> </body>
外联样式
对内联样式进行进一步的抽离,方便多个页面共用同一个样式,创建一个css文件,需要该样式的HTML直接引用样式即可
<head> <meta charset="utf-8" /> <title></title> <!-- 引入css样式: link --> <link rel="stylesheet" type="text/css" href="css/01.css" /> <!-- 引入css样式:@import --> <!-- <style> @import url("css/01.css"); </style> --> </head> <body> <div>每天叫醒我的不是闹钟,是梦想!!!</div> <div>每天叫醒我的不是闹钟,是梦想!!!</div> <div>每天叫醒我的不是闹钟,是梦想!!!</div> <p>小面包</p> <p>小cookie</p> <p>小饼干</p> </body>
样式的优先级
<head> <meta charset="utf-8"> <title></title> <!-- 外联样式 --> <link rel="stylesheet" type="text/css" href="css/01.css" /> <!-- 内联样式 --> <style> div{ color: red; } </style> </head> <body> <!-- 就近原则: 行内样式 > 内联样式 > 外联样式 注意事项: 今后尽量不要对同个html进行多个样式书写 如何选择三种样式写法? 1、如果样式是固定并且不修改并且很少情况,行内样式 2、如果样式针对当前html页面做的样式,并且量比较大的情况下, 内联样式 3、如果你的样式是通用,如果你的css代码很多,外联样式,需要创建一个css文件,引入 --> <!-- 行内样式 --> <div style="color: green;">每天叫醒我的不是闹钟,是梦想!!!</div> </body>
样式选择
三种样式引入方式,在实际开发过程中该如何选择
1.如果是通用样式,就选择外联样式
2.当样式内容过多时,也会将样式单独抽离成一个.css文件,方便管理
3.当某个标签有特殊样式实现,且在页面中是不重复的,出现次数唯一的,就使用行内样式
4.除了上面的几种情况,通常使用的都是内联样式
选择器
选择器可以快速、方便的选择所需要使用的页面元素
基本选择器
基础选择分三种,分别是:标签选择器、类选择器、id选择器
标签选择器
标签选择器主要是根据标签的名字进行元素的选择
语法:标签名{}
例如:div{color:red;font-size:20px;}
<div class="div-cls">昨日头条:国家公祭日</div> <div class="p-cls" id="p-id">昨日头条:国家公祭日</div> <div class="div-cls">昨日头条:国家公祭日</div> <p class="p-cls">抗疫头条:郑州二七万达参与检测的都是阴性,无大碍</p> <h4 class="h4-cls">学习头条:谢小飞分享进步了,再接再厉</h4>
/*标签选择器是根据标签名来的,会选中当前页面中所有该标签*/ div{ color: #00BFFF; } p{ color: #483D8B; } h4{ color: #1E90FF; }
类选择器
类选择器是通过class属性进行元素的获取,可用于对多个元素进行相同的样式设置
语法:.类名{}
例如:.div-cls{color:red;}
.div-cls{ color: red; } .p-cls{ color: green; } .h4-cls{ color: blue; }
id选择器
id选择器是通过id属性给元素一个唯一标识(设置多个id相同不会报错,会影响后期js的学习,建议id值要唯一)
语法:#id名{}
例如:#div-id{color:red;}
/*id选择器:在标签上添加了一个id属性,作为唯一标识,通常不允许重复*/ #p-id{ color: #483D8B; }
属性选择器
属性选择器是根据元素上已有的属性标识进行选择
语法:[属性名='']{}
<button title="普通按钮">普通按钮</button> <a href="http://www.baidu.com">百度链接</a> <a href="www.sina.cn">新浪博客</a> <a href="http://www.yunhe.cn">云和数据</a>
/*具有title属性的元素*/ [title]{ font-size: 18px; } /* 以...开始 */ [href^="http"]{ color: #008B8B; } /* 以...结束 */ [href$="cn"]{ color: #483D8B; } /*href中包含有i*/ [href*='i']{ color: #808080; }
后代选择器
后代选择器是根据元素在页面中的相对(嵌套)位置进行按区域选择元素
<style> /* 层级选择器 */ /* 祖宗后代 */ div span{ color: #008000; } /* 父子选择器 */ div > span{ color: red; } /* 兄弟选择器 */ div ~ p{ background-color: #FFC0CB; } /* 跟班选择器 */ p + span { background-color: #008000; } </style> </head> <body> <!-- 在包裹关系中,样式有继承关系 --> <div> div中的不带标签的内容 <p> <a href="">百度一下 <span>你就知道 </span> </a> </p> <a href="">一燕一下</a> <span>后代选择器,注意很常用</span> </div> <!-- 所有的选择器默认是从body标签中进行查找元素的 --> <p> <span>p标签中的span标签</span> </p> </body>
组合选择器
组合选择器是根据元素在页面中的同级关系进行选择
<div> div中的不带标签的内容 <span>组合选择器,注意很常用</span> </div> <p> <span>p标签中的span标签</span> </p> <h4> <span>h4标签中的span标签</span> </h4>
/* 逗号就代表前后的元素是同等级的 */ div span,p span{ color: #00BFFF; }
伪类选择器
伪类选择器是css3中提供的用于快速查找元素的便捷选择器,本章节只演示开发中常用的:nth-of-type选择器
<p> <span>百度新闻</span> <span>新浪官网</span> <span>云和官网</span> <span>腾讯官网</span> <span>人人编程官网</span> </p>
/* 伪类选择器:nth-of-type(n) */ /* p :nth-of-type(2n+1){ color: #1E90FF; } p :nth-of-type(2n){ color: darkcyan; } */ span:nth-of-type(2n+1){ color: #483D8B; font-size: 18px; } span:nth-of-type(2){ color: #FF0000; }
伪类选择器在超链接上的应用,超链接的字体颜色只有将样式直接作用在超链接上时才会生效
/* 默认为被点击的状态 */ a:link{ color: red; } /* 访问之后的状态 */ a:visited{ color: darkgoldenrod; } /* 处在活动状态 */ a:active{ color: brown; } /* 鼠标悬浮时的状态 */ a:hover{ color: aqua; }
通配符
*通配符,作用在页面中的所有标签上,开发不建议使用,影响网页的渲染性能
*{ color:red; font-size:20px; }
使用通配符和使用选择器有什么区别
开发不建议使用通配符,通配符相当于是作用在了所有的标签上,某些属性并不是所有的标签都能识别,只要加了属性不论是否生效,浏览器都会对属性进行解析然后渲染,这样比较消耗性能
选择器优先级
网页中的选择器多种多样,可以组合使用,当同一个元素有多个样式时,最终生效的样式与优先级有关
<div class="div-cls" > <span class="span-cls" id="span-id" style="color: red;">选择器优先级</span> </div>
/* !important>行内样式>id选择器>类选择器>标签选择器 1000 100 10 1 */ /*1+100=101*/ div #span-id{ color: darkcyan; } /*100*/ #span-id{ color: blue; } /*10+10=20*/ .div-cls .span-cls{ color: black; } /*10+1=11*/ .div-cls span{ color: red; } /*1+10=11 如果权重值相同,后台会覆盖上面样式*/ div .span-cls{ color: #B8860B; } /*10*/ .span-cls{ color: blueviolet; } /*1+1=2*/ div span{ color: #A52A2A; } /*1*/ span{ color: #7B68EE!important; }
本章小结
1.css三种引入方式,内联样式使用最频繁,当样式过多时推荐使用外联样式
2.选择器中的基本选择器、上下级选择器及属性选择器在开发中很常见,要注意优先级计算的问题
本章作业
实现新闻文章展示,对标题和其中所用到的数字、引用等进行特殊标识,分别用三种样式引入方式实现