尚硅谷前端HTML-CSS /CSS-01
sgg-27 CSS
层叠样式。 网页是多层样式 最终能看到的只是最上一层
style 内联样式 行内
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p style="color: red;font-size: 60px">少小离家老大回</p>
</body>
</html>
1 内联样式 只能对一个标签生效 每个元素复制一份 。 样式发生变化时 维护成本高
开发时不使用 内联样式 。
2 写在head 中的style 中.设置选择器。通过CSS选择器 来设置各种样式 可以同时为多个标签设置并修改
更方便对于样式进行重复使用。 不能跨页面进行生效
3 外部样式：写在文件中。 通过link 标签进行引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet"href="style.css">
</head>
<body>
<p>少小离家老大回</p>
</body>
</html>
p{
color: tomato;
font-size: 50px;
}
将样式写到外部CSS 中可以最大限度 利用浏览器缓存机制 加快加载。
CSS 基本语法
style中遵循CSS的规范
Selectors
选择器+声明块。
常用选择器
元素选择器
id 选择器。 根据id选择
类选择器 class 属性 和id 类似 可以重复使用。 .class属性
class: 可以为同一个元素指定多个class 属性
通配选择器 * 表示所有元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
color: red;
font-size: 60px;
}
#red{
/**
id 选择器
*/
color: blue;
font-size: 60px;
}
/**
类选择器
*/
.light{
color: green;
/*font-size: 13px;*/
}
.li{
font-size: 16px;
}
*{
color: yellow;
}
</style>
<!-- <link rel="stylesheet"href="style.css">-->
</head>
<body>
<p>semir</p>
<p id="red" class="light">少小离家老大回</p>
<p class="light li">少小离家老大回</p>
<p class="light">少小离家老大回</p>
<h5>少小离家老大回</h5>
</body>
</html>
复合选择器
交集选择器 选择器1.选择器2.选择器3 必须使用元素选择器开头。
选择器分组 并集选择器 选定多个。
关系选择器
父元素 子元素
祖先后代元素
兄弟元素
子元素选择器; 父>子
后代元素选择器：
祖先 后代
兄弟元素选择器 前一个+下一个 选的是下一个兄弟。只有一个
前一个～下一个 : 下边所有兄弟 上面的不受影响。
属性选择器
/^. $ * 等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/**
属性选择器 选择含有指定属性的元素
*/
/*[title] 省略p 相当于 *[title] 任意标签有title 属性*/
/*p[title] {*/
/* color: red;*/
/*}*/
/**
title 等于指定值的 指定属性值
*/
/*p[title="abc"] {*/
/* color: red;*/
/*}*/
/**
指定元素开头的 属性值
*/
/*p[title^="abc"] {*/
/*指定元素结尾*/
/*p[title$="hello"]{*/
/* * 指出现在任意位置 */
p[title*="abc"]{
color: red;
}
</style>
</head>
<body>
<p title="abc">不可沽名学</p>
<p title="abchello">不可沽名学</p>
<p title="lemabcmon">不可沽名学</p>
<p>zhiruyuanlaiyingyouyi</p>
</body>
</html>
伪类选择器
伪类:特殊的类 用来描述一个元素的特殊状态 。比如第一个元素，被点击的元素。 第一个状态的元素
:first-child :last-child 选所有的 标签
:nth-child()
first-of-type: 选同类型的 标签
last-of-type
nth-of-type(n) 2n 2n+1
:not()
<style>
/*伪类*/
/*ul > li:first-child, ul > li:last-child {*/
/* color: red;*/
/* !*写class 后 和位置耦合 自动选中第一个元素*!*/
/*}*/
/*ul > li:nth-child(even) { !*n 取值范围0--正无穷 *!*/
/* !*2n*! !*2n+1*!!*odd*! !*even*!*/
/* !*color: blueviolet;*!*/
/* !*根据所有的子元素进行排序 不是仅仅 li元素 *!*/
/* color: blue;*/
/*}*/
/*ul > li:first-of-type {*/
/*ul > li:last-of-type {*/
ul > li:not(li:nth-of-type(2)) { /*not 是指除了 第2个*/
/* first-of-type */
color: red;
}
/**
否定伪类 not:
*/
</style>
超链接的伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link{ /*link 表示没访问过的连接*/
color: red;
font-size: 15px;
}
a:visited{ /*visited 标识访问过的链接*/ /*只在a标签中使用*/
color: blueviolet;
/*font-size: 10px;!*不生效*!*/ /*隐私 避免*/
}
a:hover{ /*鼠标移入*/
color: aqua;
font-size: 20px;
}
a:active{/*标识鼠标点击状态*/
color: yellowgreen;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">连接</a>
<br>
<a href="http://www.hao123.com">连接</a>
<br>
<a href="http://www.cctv.com">连接</a>
<br/>
</body>
</html>
****link 和visited 是 超链接独有的**
**hover 和active 是所有标签都可以。****
伪元素选择器
不存在的元素 特殊的位置 并不是真实存在的元素
首字母下沉
继承
只需要设置一次 就可以让 所有元素都有 相同样式 。
并不是所有的样式都会被继承 布局背景相关的不会被继承
选择器的权重
样式冲突
通过不同的选择器选中相同的元素 最终结果由选择器的优先级决定
----内联样式 1000 优先 style=""
----id选择器。 100
----类和伪类选择器。10
----元素选择器 1。
这就是为什么不用内联样式 。用完之后没办法修改了 。
所有的 选择器 的优先级之和 累加 计算 比较 最高者显示 。
分组选择器单独计算 。
类选择器 累加 再高 也不会超过id选择器 。
优先级计算相同 则优先使用靠下的样式。
统配的选择器 优先级是 0
继承的样式没有优先级
! important 获取最高优先级样式 甚至超过内联样式。开发中慎用 。
像素和百分比
长度单位 像素 px
em 和 rem
1em=1font-size 默认1 font-size=16px 相对于自身的字体大小
rem 相对于根元素 html的 16px
RGB值 。 直接使用颜色名 不好去描述。0-255 之间 0-100% 之间。
光的三色 rgb 000 黑色 rgb 255 255 255 白色。 取色器 取出rgb 值。
rgba a表示透明 1 表示完全不透明 0.5 表示半透明 0 完全透明
16进制 RGB值 00-ff #0000000 #ffffff #bbffaa #bfa 豆沙绿 。
HSL 值 工业设计用得比较多 H色相 S饱和度 L亮度
HSLA值
H ：0-360 S 0-100% L 0-100%
文档流
layout 布局
网页的最底层 基础 文档流 所创建的元素默认在文档流。
元素状态：在文档流 / 不在文档流
行内元素
块元素 div
块元素： 会默认在页面中占一行 默认宽度就是 父元素的全部 会把父元素撑满。
默认高度：被子元素撑开
不论宽度是多少总会独占一行
自上而下 垂直排列
行内元素 span
不会占一行 只会占自身大小 一行容不下所有行内元素 元素会换行 继续自左向右
盒子模型
页面中所有元素都设置为一个矩形的 盒子
元素设置为矩形后 对页面的布局就变成了 不同盒子摆放在不同的位置 。
每个盒子都有以下几个 部分
盒子的内容区content
盒子的边框 border
内边距: padding 内容区和边框之间的距离
外边距 margin 两个盒子之间的距离
width head 设置内容区大小
边框 border border-width
border-color
border-style
边框的大小会影响到盒子的大小 。
sgg-46 盒子 边框
border-width 一般三个像素 。
写四个值 上右 下左
三个值 上 左右 下 。
两个值 上下 左右
一个值 均。
border-top-width right bottom left /color
不写border-color color 就会生效。
border-style solid 实线 dotted 点状虚线。
dashed虚线 double 双线 。
内边距 padding padding-top bottom right left
背景颜色会延伸到内边距。
盒子 ：由 内容区 内边距 和边框大小共同决定。
外边距 margin left right top bottom right 和bottom 会移动其他元素
设置负值 向 相反方向 移动
简写属性 margin
margin-right 默认没有效果
元素 水平布局:
由 margin-left border-left padding-left width 。。决定
水平布局等于父元素内容区宽度 等式不成立 会自动跳转 【过渡约束】
margin-right自动调节。
width margin-right 设置为auto 自动调整 。
width 默认是 auto width> 外边距 【都是auto】width 能多大就多大。
width 指定一个值 左右 auto 居中。
过大margin 为负。
垂直方向的布局
如果过大，子元素会从父元素中溢出
overflow: hidden /visiable scroll 生成滚动条 通过滚动条查看。生成垂直水平两个滚动条。
auto:根据需要 生成滚动条
外边距的折叠
相邻的垂直方向外边距 会发生折叠 /重叠。
相邻外边距 一正一负 取两者的和。 都是正值 取较大的 都是负值 取绝对值较大的
父子元素的相邻外边距 子元素会传递给父元素。
行内元素的盒子模型
行内元素 不支持设置width 和head 内容区的宽高 由内容决定
可以设置padding 但是垂直方向 不会影响布局
可以设置border 垂直方向 不会影响布局 margin 。
< a href>
display :用来设置 元素显示的类型
inline 设置为行内
block 设置为块元素 。
inline-block 将元素设置为 行内块元素 既可以设置高度又不会独占一行
行内块 开发中尽量少用。
table 将元素设置为表格
none 元素不在页面中显示
**visibility** hidden 设置元素的显示状态
visible
hidden 位置占据 不显示
浏览器 的默认样式
去除默认样式 。
* {
margin: 0;
padding: 0;
}
清除样式 rest.css normalize.css
样式引入在 最上面 重制样式 。
练习
修改布局尽量通过块元素
父元素中 垂直居中 将父元素的line-height 设置为父元素的height 。
text-decoration : none 去除下划线
盒子的大小
box-sizing 设置盒子的尺寸的计算方式
content-box 默认值 宽度和高度 用来设置内容区的我大小
可选值 border-box 可见框的大小
width height 是内容区 和内边距 和边框的总大小。
sgg-59 边框: 轮廓和圆角
out-line 大小 轮廓 solid
阴影
box-shadow ：阴影水平偏移量 垂直偏移量 阴影模糊半径 颜色
border-radius
sgg -60浮动
float : none left right
元素设置浮动后会从文档流中脱离 不再占用 文档流位置 。
浮动元素 不会盖过其他浮动元素
浮动元素特点
1.浮动元素会完全脱离文档流 不再占据文档流的位置
2.设置浮动以后 浮动元素会向父元素的左侧或右侧移动
3.浮动元素 默认不会从父元素中移出
4.浮动元素向左或向右移动时 不会超过它前边的其他浮动元素
5.如果浮动元素 的上边是一个没有浮动的块元素 则浮动元素无法上移
6.浮动元素不会超过它上班的浮动兄弟元素 最多最多就是和他一样高
主要的作用是可以让页面的元素 可以水平方向的布局
浮动元素不会盖住文字 文字会自动环绕 在 浮动元素的周围 利用浮动设置文字环绕效果。
脱离文档流特点：
1 块元素 不再独占一行
2 脱离文档流之后 块元素的高度和宽度都被内容撑开。
行内元素脱离文档流之后 会变成块元素 特点和 块元素一样
脱离文档流之后 不需要区分块和行内了
导航条
简单布局
高度塌陷和BFC
子元素 浮动后 脱离文档流 无法撑起父元素的高度 使 父元素高度丢失。
会导致页面布局混乱。
BFC block Format Context 块级格式化环境 开启独立独立布局区域。
开启BFC 元素 不会被浮动元素所覆盖 子元素父元素 外边距不会重叠。
开启BFC 包含浮动子元素
常用方式：
设置元素浮动 不推荐
将元素设置为行内块元素 不推荐
将元素overflow 设置为一个非visible的值
overflow hidden 开启BFC 使其可以包含浮动元素 。
clear
clear 属性清除浮动元素对 当前元素产生的影响 。
浏览器会为元素添加上边距 不受影响。 left right both 清除两侧最大的
after 伪类 解决高度塌陷
after+ display -block 完美方式 CSS 添加元素。
clearfix
display table ::before
clearfix 是类名【样式】 这个样式专门解决高度塌陷。
可以同时解决外边距重叠和高度塌陷的问题
.clearfix::brefore,
.clearfix::brefore {
content: "";
display: table;
clear: both;
}
相对定位
定位 把元素摆放到任意位置 position
static 默认不开启。relative 相对定位 absolute 绝对定位。fixed 固定 sticky 粘滞定位
relative 加偏移量。
top。bottom。 left。 right。
相对定位特点：
- 元素开启相对对定位后 不设置偏移量 不会发生任何变化
- 相对定位 是参照于 元素在 文档流中的位置 进行定位的
- 相对定位会提升元素的层级
- 相对定位不会使元素脱离文档流
- 相对定位不会改变元素的性质块还是块 行内还是行内
绝对定位
position absolute
- 开启了绝对定位之后 如果不设置偏移量 元素的位置不会发生变化
- 开启了 绝对定位之后 元素会从文档流中 脱离
- 开启绝对定位 会改变 元素的性质 行内变成块元素 块的内容被行内撑开。
- 绝对定位会使 元素提升一个层级
- 绝对定位元素是相对器包含块进行定位的
包含块 containing block
正常情况下 包含块就是离当前元素最近的祖先块元素
绝对定位包含块 就是离他最近的开启了定位的祖先元素
如果所有的祖先元素都没有开启定位 则根元素 就是它的包含块
html 根元素 初始包含块。
固定定位
fixed 特殊的 绝对定位
唯一的区别：
参照浏览器的 视口 进行 定位 固定定位的元素不会随着网页滚动条的滚动 view port
粘滞定位
sticky
新推出 支持度不是特别好 IE 不支持. 类似相对定位
可以在元素到达某个位置时 将其固定
包含块 是body
绝对定位用的最多
绝对定位结合固定定位一起用 。？？？
绝对定位：垂直方向等式也需要满足。 ¥¥¥¥
水平布局 : left + margin-left + border-left +padding-left+ width + ～ =包含块内容区的高度 。
开启了绝对定位之后：
水平方向 布局 等式需要添加left 和right 两个值 此时规则 和之前一样 只是多添加了两个 值
当发生过渡约束
可设置为auto 的 值：margin width left right
因为 left right 默认auto 所以
垂直方向 布局 的等式也需要满足
top + margin-top / bottom +padding-top/bottom +border-top/bottom +height =包含块的高度
元素的层级：
zindex 指定层级 。
元素层级一样 优先显示靠下的。
定位层级 是一样的 ，
祖先元素层级再高 也不会覆盖 后代元素 。
1399
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
