黑马程序员技术交流社区
标题: 【黑马程序员杭州】PHP课程笔记day07-CSS样式 [打印本页]
作者: 小江哥 时间: 2017-12-6 15:28
标题: 【黑马程序员杭州】PHP课程笔记day07-CSS样式
本帖最后由 小江哥 于 2017-12-13 17:27 编辑
一、borderborder：它是“边框”的意思
边框有三个要素：粗细、线型、颜色
语法格式：
border：粗细 线型 颜色;
说明：
边框的颜色可以省略不写 但是如果不写的话就表示边框的颜色为黑色 其它的两个属性值不能不写 如果不写的话就会不显示边框。
边框的线型：
其实边框也是有四个方法的：
border-top:上边框
border-right:右边框
border-bottom:下边框
border-left:左边框
二、displaydisplay 它是“显示”的意思，它就是用来进行行内元素与块级元素之间的相互转换！将隐藏的元素显示或者是将显示的元素进行隐藏。
display 这个属性取值：inline(行内)、block(块级)、none(无)
当我们将一个行内元素的display属性的值设置为block以后 那么这个元素就会被转换为块级元素
将我们将一个块级元素的display属性的值设置为inline以后 这个元素就会从块级元素转换为行内元素。
注意：
n 如果说将行内元素转换为了块级元素，那么这个元素它就会拥有块级元素的特点
n 如果说将块级元素转换为了行内元素，那么这个元素它就会拥有行内元素的特点。
将一个显示的元素隐藏、将一个隐藏的元素显示。
display:none(将一个显示的元素进行隐藏)
display:block(将一个隐藏的元素显示出来）
注意：以上两个功能主要是JavaScript来使用
三、display属性的综合案例
四、positionposition 在英文中表示“位置”的意思 它主要是用于实现对元素的定位
在CSS中定位分为三种：
position:fixed 固定定位
position:relatvie 相对定位
position:absolute 绝对定位
注意：
在使用定位属性时，一定要配合定位的坐标来使用！
left：表示定位的元素离左边多远
right：表示定位的元素离右边多远
top：表示定位的元素离上边多远
bottom：表示定位的元素离下边多远
4.1固定定位语法：
position:fixed
固定定位，它是相对于浏览器窗口来进行定位。不管页面如何滚动，固定定位元素显示的位置不会改变！
特点：
l 固定定位元素它脱离了标准文档流
l 固定定位元素的的层级比标准文档流里面的元素要高 所以固定定位元素它会压盖住标准文档流里面的元素
l 固定定位元素它不再占用空间
l 固定定位元素它显示的位置不会随着浏览器滚动而滚动
案例1：使用固定定位来实现返回顶部的按钮
案例2：使用固定定位来实现顶部的导航栏
4.2相对定位语法：
position:relative;
相对定位它是相对于“原来的自己”来进行定位！
特点：
l 相对定位元素它没有脱离标准文档流
l 相对定位元素如果没有设置定位的坐标，那么相对定位元素它还在原来的位置
l 相对定位元素设置了定位的坐标以后，那么它会在老家留下一个坑
l 相对定位元素它会将标准文档流中的元素压盖住。
l 相对定位元素的定位坐标值可以是负数
注意：
相对定位元素它会在老家留下一个坑，所以一般情况下它很少单独使用，相对定位元素它主要是用来配合“绝对定位”元素来使用的。
4.3绝对定位语法：
position:absolute;
什么是绝对定位？
绝对定位元素是相对于“祖先定位元素”来进行定位！
什么是祖先定位元素？
绝对定位元素它会先去查找其父元素是否设置了定位的属性 如果有设置定位的属性 那么它就会相对于其父元素来进行定位；但是如果它的父元素没有设置定位属性 那么它就会去查找其父元素的上一级元素是否设置了定位的属性，如果有设置就相对于其父元素的上一级元素进行定位 但是如果没有设置 那么会继续往向一级进行查找，如果其祖先元素都没有设置定位属性，那么它会相对于“浏览器窗口”来进行定位！
问题：
如果当前元素的父元素与其爷爷元素都设置了相对定位，那么请回答当前的绝对定位元素它会相对于“谁”来进行定位？
答：当前的绝对定位元素它会相对于其父元素来进行定位，也就是说当绝对定位元素查找到了其祖先元素已经设置了定位的属性就不会再去查找上一级元素。
特点：
l 绝对定位元素它脱离了标准文档流
l 绝对定位元素它不再占用空间
l 绝对定位元素它会压盖住标准文档流中的元素
l 绝对定位元素它会相对于其“祖先定位元素”来进行定位，这里的祖先定位元素可以是相对定位也可以是固定定位还可以是绝对定位 但是我们一般只会给其实祖先定位元素设置相对定位属性。“子绝父相”子元素设置绝对定位父元素设置相对定位
4.4使用绝对定位来实现拉手网上的效果
五、z-indexØ z-index表示谁压盖着谁，数值大的会压盖住数值小的
Ø 只有定位的元素才有z-index值 只有设置了固定定位、相对定位、绝对定位了的元素它们才会拥有z-index
Ø z-index的值是没有单位的 值是一个正整数 默认的z-index的值是0
Ø 如果多个定位元素没有设置z-index属性 或者z-index值设置一样 那么写在HTML后面的定位元素就会压盖住前面的定位元素
都没有设置z-index属性
都有设置z-index属性
六、CSS36.1CSS3与CSS2之间的区别css3=css2+新语法+新的属性
就是对css2进行扩充 删减 优化
6.2结构伪类 | |
| |
E:last-child | 匹配最后一个孩子 |
| |
E:nth-child(2n)或 E:nth-child(even) | 匹配偶数的孩子 如：2、4、6[size=10.5000pt]….. |
E:nth-child(2n+1) E:nth-child(odd) | 匹配奇数的孩子 如：1、3、5[size=10.5000pt]….. |
E:only-child | 匹配有且只有一个孩子 |
l E:first-child 匹配第一个孩子
l E:last-child 匹配最后一个孩子
l E:nth-chid(n) 匹配第n个孩子
l E:nth-child(2n)或E:nth-child(even) 匹配偶数的孩子
l E:nth-child(2n+1)或者E:nth-child(odd) 匹配奇数的孩子
l E:only-child 匹配有且仅有一个孩子
案例：使用CSS3中的结构伪类选择器来实现隔行变色的表格
6.3border-collapse这个属性主要是用于来合并表格的边框线 其值为：collapse
border-collapse:collapse;
6.4伪元素 | |
| |
:first-line | 操作当前元素中第一行文字 |
| |
::after | 在之后插入，在一个盒子内部的最后面 |
.5文本阴影text-shadow:水平阴影 垂直阴影 模糊距离 阴影颜色
描述：
l 文字阴影可以有多组值，多组之间用逗号隔开就可以
l 水平阴影正值阴影在右边 负值在左边
l 垂直阴影正值在下边，负值在上边
l 模糊强度，值越大越模糊
6.6盒子阴影box-shadow:水平方向阴影 垂直方向阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影
水平阴影和垂直阴影必须的写，其余的是可以省略不写;
l 盒子阴影可以有多组值，多组之间用逗号隔开就可以
l 水平阴影正值阴影在右边 负值在左边
l 垂直阴影正值在下边，负值在上边
l 模糊尺寸，值越大越模糊
给图片设置阴影
6.7圆角矩形border-radius:左上 右上 右下 左下;
如果说border-radius的四个值都是一样的话就可以只需要写一个参数就可以了
上半部分圆形：
6.8圆角矩形案例
6.9CSS透明度只要是颜色，都可以用透明度
rgba(红色,绿色,蓝色,透明度)
a：表示透明度的意思 透明度取值：0~1之间 0表示完全透明 1表示不透明
l 背景颜色透明
Background-color:rgba(255,255,255,0.3)
l 文本颜色透明
Color:rgba(255,255,255,0.3)
l 边框颜色透明
Border:1px solid rgba(255,255,255,0.5)
作者: 刘华莎 时间: 2017-12-6 15:32
棒棒哒
作者: yuxiaoyi 时间: 2017-12-6 15:32
好详细啊
作者: 猫先森 时间: 2017-12-6 15:33
6666666666666666666666666
作者: 孙晓威 时间: 2017-12-6 15:34
期待后续更新
作者: huangjinchao.ar 时间: 2017-12-6 15:36
继续加油
作者: 从此学好 时间: 2017-12-6 15:37
每天学习一点点，生活更美好
作者: PHP老曹 时间: 2017-12-6 15:41
不错，我喜欢
作者: 奔跑地小少女 时间: 2017-12-6 15:51
一起学习呀
作者: 小年青 时间: 2017-12-6 15:57
好详细好详细呀辛苦啦辛苦啦
作者: 黑马6666 时间: 2017-12-6 15:58
hdhdhdhdhddjjdd
作者: 阿布乙 时间: 2017-12-6 15:58
很基础，很详细
作者: 咸鱼666 时间: 2017-12-6 15:58
很详细，灰常不错
作者: gy_yt 时间: 2017-12-6 15:59
66666，干货
作者: 小核桃仁 时间: 2017-12-6 16:02
棒棒哒
作者: 秋子菇凉 时间: 2017-12-6 16:03
棒棒哒
作者: nhm 时间: 2017-12-6 16:04
666666666666
作者: 许言 时间: 2017-12-6 16:06
顶顶顶顶顶
作者: 张艺凡老师 时间: 2017-12-6 16:24
厉害啦666
作者: 许言 时间: 2017-12-6 18:03
顶顶顶顶顶
作者: fanbuer 时间: 2017-12-6 20:41
学到了^_^
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |