CSS2
回顾
- 计算机单位
- 最小单位是位(B)
- 字节(b) 一个字符的大小
- 1K=1024b
- 1M=1024K
- 1G=1024M
- 1T=1024G
- 进制转换
- 十进制转二进制:整数除2反向取余,小数乘2正向取整
- 二进制转成十进制:以2为底,从右往左依次是2的0次方,1次方…
- 八进制转二进制,一个八进制转成3位的二进制,然后再合并起来
- 十六进制转二进制:一个十六进制转成4位的二进制,然后在合并起来。
- 网页中的颜色表示:光的三原色,红色(red),绿色(green),蓝色(blue)。所有光的颜色都是由这三种颜色组成。他们的范围都是0-255,颜色的表示通过RGB的十六机制数表示,
- CSS介绍:层叠样式表,用来控制网页的外在表现(网页的装修),
- 语法
选择器{
属性:属性的值;
属性:属性的值;
}
- 注释 /* */
- CSS选择器
- ID选择器
- 以#开头
- 只能供一个元素使用。
- 类选择器
- 以点(.)开头
- 可以供多个元素使用
- 标签选择器:选择标签
- 通配选择器:*
- 组合选择器:h1,#aa,.bb
- 后代选择器:p b #aa .bb
- 子元素选择器p>b
- 相邻元素选择器div+p div~p
- 伪类:4种状态。 lvha
- :link 正常连接的状态
- :visited 点击完后代状态
- :hover 当鼠标移上去的时候状态
- :active 当鼠标点击下去的状态
- ID选择器
网页中图像的基础知识
- 位图:由像素点组成的图
- 体积大
- 放大失真
- 颜色丰富,达到256*256*256种颜色
- 矢量:是由线条和面组成的图形
- 体积小
- 可以无限制的放大
- 支持的颜色数比较少
脚下留心:网页上的图片都是位图
- 分辨率
思考:是不是像素点越多,图片的质量越高?
答:不是,衡量一个照片的质量通过的是分辨率。
分辨率:单位长度里的像素点的多少,一般都以一英寸为单位。
在尺寸一定情况下,分辨率越大质量也好,图片的体积也越大,网页打开的速度也越慢。网页上的分辨率一般是72。(印刷的分辨率一般在300)
- 网站默认尺寸单位为象素(px)。
- 网页常见的图象格式:网页中常用的图片格式有png,jpg,gif
格式 | 特点 |
jpg(jpeg) |
|
png |
|
gif |
|
伪类选择器与类选择器一起使用
思考一个场景:如何实现一个页面中有两种超链接的样式。
<style type=”text/css”>
a.first:link{
color:#F00;
text-decoration:none;
font-size:12px;
}
a.first:hover{
color:#060;
text-decoration:underline;
font-size:12px;
}
a.second:link{
color:#00F;
text-decoration:overline;
font-size:36px;
}
a.second:hover{
color:#90F;
text-decoration:underline;
font-size:36px;
}
</style>
<a href=”#” class=”first”>链接1</a> <br>
<a href=”#” class=”first”>链接1</a> <hr>
<a href=”#” class=”second”>链接2</a> <br>
<a href=”#” class=”second”>链接2</a> <hr>
运行结果
思考题:a.first和a .first的区别
伪对象选择器
伪类描述的是状态,伪对象描述的是对象。
元素:first-letter,选择元素中内容的第一个字
元素:first-line,选择元素中是内容的第一行
<style type=”text/css”>
p:first-letter{ /*选择元素的第一个字*/
font-size:24px;
color:#F00;
}
div:first-line{ /*选择元素的第一行*/
font-size:12px;
color:#060;
text-decoration:underline;
}
</style>
<p>
锄禾日当午,<br>
汗滴禾下土。<br>
谁知盘中餐,<br>
粒粒皆辛苦。<br>
</p>
<div>
离离原上草,一岁一枯荣。<br>
野火烧不尽,春风吹又生。<br>
远芳侵古道,晴翠接荒城。<br>
又送王孙去,萋萋满别情。
</div>
属性选择器
- 元素[属性]:具备指定属性的元素
- 元素[属性=值]:选择指定属性指定值的元素
- 元素[属性~=值]: 选择具有attr属性且属性值为用空格分隔的字词列表,其中一个等于指定值的元素
- 元素[属性|=值]:选择具有attr属性且属性值为用连字符分隔的字词列表,并且由指定的值开始的元素
E1[attr] element(元素) attribute(属性)
常用CSS属性的讲解
字体属性
<style type=”text/css”>
body{
color:#F00; /*字体颜色*/
font-family:”黑体”, “隶书”, “微软雅黑”, “宋体”; /*字体*/
font-size:16px; /*字号*/
font-weight:bold; /*字体粗细*/
text-decoration:underline; /*文本修饰*/
text-transform:uppercase; /*文本转换(大小写)*/
line-height:30px; /*行高*/
}
</style>
锄禾日当午,<br>
汗滴禾下土。<br>
谁知盘中餐,<br>
粒粒皆辛苦。<br>
I a am boy!
运行结果
详细说明text-transform属性值
思考:为什么font-family跟多个字体?
font-family:”黑体”, “隶书”, “微软雅黑”, “宋体”;
答:客户端首先用第一个字体来解析,如果没有就选择第二个字体,依次类推,一直到最后。如果一个字体都没有,就选择客户端的默认字体。中文的浏览器默认字体是宋体。
文本属性
text-align的值
尺寸属性
width:宽度
height:高度
边框属性
多学一招:
背景属性
边距属性 (margin)
margin-top:上边距
margin-right:右边距
margin-bottom:下边距
margin-left:左边距
margin:符合边距
列表属性
内容溢出属性
overflow:hidden; /*溢出部分隐藏*/
overflow:auto; /*如果有溢出,就会出现垂直滚动条*/
CSS样式的的分类
样式按照写的地方不同分成3类:
- 内部样式:写在页面的内部,只能给当前页面使用
<style type=”text/css”></style>
- 外部样式:写在页面的外部,可以给所有页面使用
新建一个css文件,将样式写到文件中
- 行内样式:写在元素的后面,只能给当前元素使用
<div style=””></div>
内部样式
写在页面的内部,通过<style>开头</style>结束,可以给整个页面使用
行内样式
每个元素都有style属性,通过style属性也元素添加样式
外部样式
将样式写到外部文件中,给所有页面使用
第一步:创建CSS文件
脚下留心:在CSS文件中,不需要<style>开头,</style>结束。
第二步:新建html,并引入css文件
引入CSS文件的方式:链接和导入
- 链接
语法:<link rel=’stylesheet’ href=’地址’>
- 导入
语法:@import url(地址);
思考:为什么<link>不需要写在<style></style>之间,而@import需要呢?
答:因为<link>是HTML标签,而@import是CSS指令
思考:<link>和@import引入样式的区别?
分析:
答:1、<link>在HTML页面中引入CSS文件
2、@import在HTML页面和CSS页面都能引入。
样式的继承
内层标签继承和覆盖外层标签的样式。
- 子级标签继承父级标签没有的样式
- 子级标签覆盖父级标签相同的样式
样式的优先级
- ID选择器>CLASS选择器>HTML标签选择器
- 直接(行内)样式表>内部样式表>外部样式表
例题2
- class=“类1,类2”,以类的加载的顺序为优先级,后加载的将先加载的覆盖。
- 强制优先级(important)
- 权重叠加
- 标签 < 类 < id选择器<直接<important
- 1 < 10 < 100 <1000<10000
例题:
标签的显示模式
标签的显示模式有两种:块显示,行显示
- 块显示特点
- 上下排列
- 默认宽度是100%,高度0px
- 可以设置宽度和高度
- 行显示特点
- 左右排列
- 默认框架是宽度0px,高度是0px
- 不能设置宽度和高度
思考:如何设置行显示标记的宽度和高度?
答:将行显示转成块显示即可
思考:既要设置宽高,又要显示在一行,如何实现?
display:block; 将标签显示方式改为块显示
display:inline:将标签显示方式改为行显示
div+css拼版好处
- 提高页面执行效率
- 代码维护变得简单
- 提高代码的可重用性。