Emmet语法
1.如果自动生成标签，按tab键
- 生成多个标签，用*,例如
`div*3 `
3.父子关系，用>
4.兄弟关系，用+
5.生成带有类名或者id名字的，直接写.demo（类）或者#two tab（id）
6.如果生成div有顺序，可以用自增符号$
7.生成的标签里面默认显示文字
自动格式化
保存时自动格式化,Ctrl+S
CSS的复合选择器
两个或多个基本选择器组合
1. 后代选择器
又称包含选择器
可以选择父元素里面的子元素。
写法就是把外层标签写在前面，内层标签写在后面，中间用空格分割。当标签发生嵌套时，内层标签就成为外层标签的后代
元素1 元素2{样式说明}
元素2必须是元素1的后代（可以是儿子，孙子等（一层一层往下）），元素1和元素2之间有空格，元素1和元素2可以是任意选择器
当有相同标签，想要针对某一个，用class
2.子选择器
只能选择作为某元素的最近元素，只是儿子
写法：
元素1>元素2
并集选择器
可以选择多组选择器，同时为他们定义相同的样式，通常用于集体声明
语法：
元素1，元素2 {样式申明}
并集选择器喜欢竖着写，最后一个选择器不需要逗号
5.伪类选择器
向某些选择器添加特殊效果，比如给链接添加特殊效果，或选择第一个，第n个元素
特点是用冒号：表示，比如：hover
i.链接伪类器
语法：
a:link //选择所有未被访问的链接
a:visited //选择所有一杯访问的链接
a:hover //选择鼠标指标位于其上的链接
a:active //选择活动链接（鼠标按下没有弹起的链接）
如果一起，必须按照顺序来，先link>visited>hover>active
链接要单独指定颜色
一般开发中
ii.focus 伪类选择器
用于选取获得焦点的表单元素
焦点就是光标，一般情况下类表单才能获取，因此主要针对表单元素来说
语法：
input:focus {
background-color:yellow;
input:focus {
background-color: pink;
color: red;
}
</style>
</head>
<body>
<input type="text">
<input type="text">
<input type="text">
元素的显示模式
概念：元素（标签）以什么样的方式显示
元素分为块元素和行内元素两种类型
块元素：div
特点：
1、独占一行
2、高度、高度、外边距、内边距自定义
3、宽度默认容器宽度
4、是一个容器及盒子，里面可以放行内或者块级元素
注意：
文字内元素不能使用块级元素
p 主要存放文字，不能放块级元素，h也是
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div>读张</div>
行内元素
也称内联元素
默认宽度是它本身的宽度
行内元素只能容纳文本或其它行内元素
注意：
链接内不能在放链接
链接a里面可以放块状元素，但是给a转换一下块级模式最安全
行内块元素
img/,input/,td/同时具有块元素和行内元素的特点
特点：
- 和相邻元素（行内块）在一行上，但是他们之间会有空隙，一行可以显示多个（行内元素特点）
- 默认宽度就是它本身宽度（行内元素）
- 高度，行高，外边距，内边距可以控制（块级元素特点）
总结
元素显示模式转换
一个模式需要另外一种模式的特性
转换成元素
display: block;
display:inline;
display:inline-block;
<style>
a {
width: 150px;
height: 50px;
background-color: pink;
display: block;
}
div {
width: 300px;
height: 100px;
background-color: purple;
display: inline;
}
</head>
</style>
<body>
<a href="#">金星阿姨</a>
<a href="#">金星阿姨</a>
<div>我是块状</div>
<div>我是块状</div>
练习
<style>
a {
display:block;
width: 230px;
height: 40px;
background-color: #55585a;
font-size:14px;
color: #fff;
text-decoration: none;
text-indent: 2em;
}
a:hover {
background-color: #ff6700;
}
</style>
<body>
<a href="#">手机电环卡</a>
<a href="#">电视 盒子</a>
<a href="#">电视 盒子</a>
<a href="#">电视 盒子</a>
</body>
</html>
单行数组垂直居中
行高=盒子高
CSS背景
背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定
背景颜色
background-color:颜色值；
transparent透明色
背景图片
logo或者装饰性的小图片，便于控制位置
格式：
background-image:none\url（指定一个背景图片）
背景平铺
background-repeat:repeat|no-repeat|repeat-x|repeat-y（不管宽度，只管高度，吧高度填满即可）
页面元素既可以添加背景图片
</head>
背景图片位置*
利用background-position属性改变图片在背景中的位置
background-positon: x,y;
x,y坐标，可以使用方位名词或者精确名词
position分别是上中下，左中右
1.参数是方位名词：
<style>
div {
height: 400px;
width: 700px;
background-color: pink;
background-image: url(../第九组小组作业/t019635d530d843807a.jpg);
/* 默认情况下是平铺的 */
/* 不平铺，使其上方居中显示 */
background-repeat: no-repeat;
/* 前面是相对于x轴,后面是相对于y轴 */
background-position: center right;
/* center right和right center效果等效 */
background-position: right center;
}
</style>
</head>
<body>
<div></div>
/* 只有一个right默认y轴垂直居中 */
background-position: right;
- 如果两个值都是方位名词，则两个值的前后顺序无关，比如left top和top left效果一样
- 如果只指定一个方位名词，另一个值省略，则第二个值默认居中对齐
/* 第一个参数是top y轴顶部对齐;第二个参数省略x轴，是水平居中显示 */
background-position: top;
小的图片调整一般使用背景图片，不用插入图片
背景图片过大，调整水平居中呈现主要内容
<style>
body {
/* 字的大小 */
font-size: 14px;
/* 不加粗 */
font-weight: normal;
/* 单行文字在盒子里面垂直居中，让行高等于高 */
line-height: 40px;
background-image: url(../images/16795694046507.jpg);
background-repeat: no-repeat;
background-position:center top;
text-indent: 1.5em;
}
</style>
</head>
<body>
</body>
2.参数是精确单位
背景图片在盒子中移动距离是比较容易的
<style>
div {
width: 300px;
height: 300px;
line-height: 40px;
background-image: url(../images/16795694046507.jpg);
background-repeat: no-repeat;
background-position: 20px 50px;
background-color: pink;
text-indent: 1.5em;
}
</style>
</head>
<body>
<div></div>
</body>
3.参数是混合单位
精确单位和方位名词混合使用，一个值是x坐标，第二个值是y坐标（一定是由顺序的）
背景图片固定（背景附着）
background-attachment设置图像是否固定或者随着页面的其余部分滚动：
默认scroll,不动是fixed
背景复合写法
没有特定顺序
一般：背景颜色，背景图片地址、背景平铺、背景图像滚动、背景图片位置
<style>
body {
/* background-image: url(../images/16795694046507.jpg);
background-repeat: no-repeat;
background-position: 20px center;
background-color: pink;
background-attachment: fixed;
font-size: large; */
background: pink url(../images/16795694046507.jpg) no-repeat fixed top;
}
背景色半透明
练习
`<style>
.nav a {
display:inline-block;
width: 120px;
height: 58px;
background-color: pink;
/* 字水平居中 */
text-align: center;
/* 垂直居中：行高=盒子高度 */
line-height: 58px;
color: #fff;
/* 去掉下划线 */
text-decoration: none;
}
.nav .bg1 {
background: url(../QQ图片20230308170559.jpg) no-repeat;
}
.nav .bg1:hover{
background-image:url(../images/16795694046507.jpg);
}
.nav .bg2 {
background-image: url(../images/b7fbfd4da75ac18f5a98688589099cd0.jpeg);
}
/* 下面这个鼠标放上去改变的是字的颜色 */
.nav .bg2:hover{
color: bisque;
}
</style>
</head>
<body>
<div class="nav">
<a href="#" class="bg1">五彩导航</a>
<a href="#" class="bg2">五彩导航</a>
<a href="#" ">五彩导航</a>
<a href="#">五彩导航</a>
<a href="#">五彩导航</a>
</div>
</body>
</html>`
CSS的三大特性
层叠性、继承性、优先性
1.层叠性
相同选择器，样式冲突的，使用就近原则，把前面样式给盖掉
样式不冲突的，不会层叠
2.继承性
子标签会继承父标签的某些样式，如文本样式和字号。如（text-,font,line-这些元素开头可以继承，以及color属性）
行高的继承性
行高可以不跟单位
<style>
body {
color: pink;
font-size: 12px/1.5;
}
div {
font: size 14px;
}
</style>
</head>
<body>
<div>
粉色的回忆
</div>
<p>jiayou</p>
</body>
使子元素行高是当前文字大小的1.5倍
优先级
选择器不同时，权重不同
行内样式表比前面选择器优先级都高
<style>
.text {
color: red;
}
div {
color:pink!important;
}
#demo {
color:green;
}
</style>
</head>
<body>
<div class="test" id="demo" style="color: purple">
粉色的回忆
</div>
注意点:
看标签在，就直接执行那个样式（子元素继承父亲的权重始终为0，所以子元素的权重更高）
链接a有默认样式，不能用父元素来改变，只能单独指定a的样式
权重叠加
复合选择器有叠加的问题
叠加时不会进位，从左到右比较
CSS盒子模型
盒子模型
- 先准备相关的网页元素，网页元素基本都是Box
- 利用CSS设置好盒子样式，然后摆放到相应位置
- 往盒子里面装内容
利用CSS摆盒子，CSS盒子模型本质是一个盒子，封装周围的HTML元素，他包括：边框、外边距、内边距和实际内容
边框
border :border-width 边框粗细|| border-style 边框的样式||border-color边框颜色
border-style:
solid（实线边框）dashed（虚线边框）
dotted（点线，小条要短一点）
边框复合性写法
border:1px solid red; 没有顺序
border-top:1px solid red;只设定上边框，其余同理，border-bottom:
<style>
div {
width: 200px;
border: 200px;
/* 只有上边框是红色，其它都是蓝色,合理用层叠性 */
border: 1px solid blue;
border-top:1px solid red;
}
</style>
</head>
<body>
<div>
粉色的回忆
</div>
表格的细线边框
合并相邻的边框
边框会影响盒子实际大小
边框会让盒子实际大小变大
解决方法：测量盒子大小的时候，不量边框
如果测量的时候包含了边框，则需要width/height减去边框宽度
内边距
padding属性设置内边距，即边框与内容之间的距离
简写：用padding
一个值：上下左右都是该边距
两个值：上下、左右
三个值：上、左右、下
四个值：上、右、下、左（顺时针）
注意
如果盒子已有高度和宽度，再加padding值会撑大盒子，用width/height减去边框宽度
不同盒子，字数不同可是设置相同内边距来调节，用padding挤开
练习：
<style>
.nav {
height: 41px;
/* 只有上边框是红色，其它都是蓝色,合理用层叠性 */
border-top: 3px solid #ff8500;
border-bottom:1px solid #edeef0;
background-color: #fcfcfc;
/* 设置行高，文字可以垂直居中 */
line-height: 41px;
}
/* a属于行内元素，此时必须转换成行内块元素，既有高度，又可以放在一行 */
.nav a:hover{
display: inline-block;
height: 41px;
/* 盒子之间内边距，必须要设置上下内边距 */
padding:0px 20px;
font-size: 4c4c4c;
color: pink;
text-decoration: none;
}
.nav a:hover{
background-color: #eee;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">新浪</a>
<a href="#">手新浪</a>
<a href="#">手机新浪</a>
<a href="#">手机新浪网</a>
</div>
如果盒子没有指定width/height属性，则此时padding不会撑开盒子相应宽度和高度，默认和页面或者父亲一样不会再增加，在里面减
div {
width:300px;
height:100px;
background-color: purple;
}
div p {
padding: 30px;
background-color: blue;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
孩子和父亲一样宽，没必要写孩子宽度
外边距（margin）
控制盒子与盒子之间的距离
一个值：上下左右都是该边距
两个值：上下、左右
三个值：上、左右、下
四个值：上、右、下、左（顺时针）
外边距典型应用
外边距可以让盒子水平居中，但必须满足下两个条件：
1.盒子必须指定宽度
2.盒子左右的外边距都设置为auto
.header {width:960px;margin:0 auto;}
以下三种都可以：
- margin-left-auto;margin-right-auto;
- margin:auto;
- margin:0 auto;
以上是块状元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align:center即可
嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边框同时子元素也有上外边距，此时父元素会塌陷较大的外边距
解决方案：
- 可以为父元素定义上边框
- 拿一条线隔开
<style>
.father {
width: 400px;
height: 400px;
background-color: purple;
margin-top:50px;
border-top:1px solid red;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
margin-top: 100px;
}
</style>
- 可以为父元素定义上内边距
- 可以为父元素添加overflow:hidden;
清除内外边距
网页元素都带有默认的内外边距，而且不同浏览器默认的也不一致，布局前，首先要清除下网页元素的内外边距
<style>
* {
margin: 0;
padding: 0;
}
</style>
行内元素尽量只设置左右，不要设置上下，但是转换成块级就可以了
349
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
