学习内容：
一、CSS基本知识
- HTML和CSS的分工
HTML主要做结构显示元素内容
CSS美化HTML，布局网页
CSS最大的价值：由HTML专注去做结构呈现,样式交给CSS,即结构(HTML)与样式(CSS)相分离
- CSS语法规范
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=100, initial-scale=1.0">
<title>Document</title>
<style>
/* 给谁改样式{改什么样式} */
p {
color: red;
/* 修改文字颜色为红色*/
front-size: 12px;
/*修改文字大小为12像素*/
}
</style>
</head>
<body>
<p>有点意思</p>
</body>
</html>二、CSS选择器
| 选择器 | 基础选择器 | 标签选择器 |
| 类选择器 | ||
| id选择器 | ||
| 通配符选择器 | ||
| 复合选择器 | 后代选择器 | |
| 子选择器 | ||
| 并集选择器 | ||
| 伪类选择器 |
- 标签选择器指用HTML标签名称作为选择器
可以把某一类标签全部选择出来，比如所有的<p>标签
优点 能快速为页面中同一类型的标签同意设置样式
缺点 不能设计差异化样式，只能选择全部的当前标签
- 类选择器 样式点定义 结构类调用 一个或多个 开发最常用
注意：
1.类选择器使用“.”(英文点号)进行标识，后面紧跟类名（自定义，我们自己命名的）。
2.长名称或词组可以使用中横线来为选择器命名
3.不要使用纯数字，中文等命名，尽量使用英文字母来表示。
- id选择器 样式#定义，结构id调用，别人切勿使用(id不能相同)
id选择器和类选择器的区别
1.类选择器(class)好比人的名字，一个人可以有多个名字，同时一个名字可以被多个人使用。
2.id选择器好比人的身份证号码，全中国是唯一的，不得重复。
3.id选择器和类选择器最大的不同在于使用次数上。
4.类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JS搭配使用。
- 通配符选择器 “*” 就选择了全部的元素
通配符不需要调用，自动给所有元素
- 后代选择器(重点)
元素一和元素二用空格分开 元素二可以是元素一的儿子，孙子
- 子选择器(重点) 元素二只能是亲儿子
- 并集选择器（重点）用逗号分隔
- 链接伪类选择器 （重点）
1. ：link 选择未被访问过的链接
2. :visited选择点击过的(访问过的)链接
3. ：hover 选择鼠标经过的那个链接
4. ：active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接
以上四个顺序不能变。LV HA
- 光标选择器 ：focus选择器 光标选择器把获得光标的选取出来
四、字体设置
- 字体属性font-familiy
div {font-family: Arial, ”Microsoft Yahei”, ”微软雅黑”;}英文逗号隔开
- 字体大小 font-size 尽量不要默认 标题标签需要单独指定文字大小
p {font-size: 20px;}
- 字体粗细 font-weight normal(普通默认)/bold(加粗)/
p {font-weight: normal(普通默认 400)/bold(加粗 700)/数字(100- 900)；}
- 文字样式 font-style
p{ font-style: italic(倾斜)/normal(不倾斜，正常)}
- 复合 顺序不能变
div{ font: font-style font-weight font-size/line-height font-family;}
div{ font: italic 700 16px ‘Microsoft yahei’;}
size和family不能省 别的可以省略
- 单行文字垂直居中：让文字的行高等于盒子的高度
五、文本设置
- 文本颜色div{ color: red;}
- 对齐文本 div{text-align: center(水平居中对齐)/right(右对齐)/left(左对齐 默认)；}
- 装饰文本 div{text-decoration: none(默认啥也没有)/underline(下划线)/ overline(上划线)/
line-through(删除线)；}
- 文本缩进 div{text-indent:20px;}首行缩进em 当前一个文字大小
- 行间距 div{line-height: 26px;}
六、CSS样式表
- 1.内部样式表 结构与样式分离 CSS放在<style></style中>
- 2.行内样式表 <p style=”color: pink;”>给我一个粉红色的回忆</p>
- 3.外部样式表
新建一个.css文件 里面只有样式，没有标签
在HTML中引入css文件 在<head>中写 <link rel=”stylesheet” href=”文件名.css”>
七、元素显示模式
HTML元素一般分为块元素(一行一个) 和行内元素(一行多个)
- 块元素(<h1>-<h6>、<p>、<div> 、<ul>、<ol>、<li>等<div>是最典型的块元素)
特点：
1.自己独占一行
2.宽度和高度，外边距以及内边距都可以控制
3.宽度默认是父亲的宽度
4.是一个容器及盒子，里面可以方行内u哦这块级元素。
注意：文字类的元素内不能使用块级元素<p>中不能放<div>
- 行内元素(<a><strong><b><em><i><del><s><ins><u><span>等<span>是典型的行内元素内联元素)
特点：
1.相邻的行内元素在一行上，一行可以显示多ge
2.宽度和高度设置无效
3.默认宽度就是它本身内容的宽度
4.行内元素只能容纳文本或其他行内元素
注意: 链接里不能再放链接 <a>可以放块元素
- 行内块元素<img /><input /><td />
特点：
1.可以一行放多个，但是有空白间隙
2.默认宽度是他本身的宽度
3.高度 行高 外边距 内边距都可以控制
显示模式的转换
转换为块元素 display:block
转换为行内元素 display:inline
转换为行内块元素display ：inline-block
八、背景设置
- 背景颜色 background-color:颜色 不写默认为transparent透明
- 背景图片 background-image：none/url(地址)指定图片
- 背景平铺 background-repeat：repeat(平铺)/no-repeat(不平铺)/repeat-x(沿x轴平铺)/repeat-y(沿y轴平铺)
- 背景图片的位置 background-position：x y;
x y可以是方位名词也可以是精确单位
length ：百分数/由浮点数字和单位标识符组成的长度值
position：top/center/bottom/left/center/right 方位名词
参数是方位名词
如果两个都是方位名词那么 两个值的前后顺序无关 left top和top left效果一致
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
参数是精确单位
第一个参数一定是X坐标第二个坐标一定是y坐标
如果只指定了一个一个坐标，另一个为默认
如果参数为混合单位，第一个一定是x坐标，另一个一定是y坐标
- 背景图片固定 background-attachment ：scroll(随对象滚动)/fixed(固定)
- 复合写法
background: 背景颜色 背景图片地址 背景平铺 背景图片滚动 背景图片位置；
background: transparent url(image.jpg) repeat-y fixed top;
- 背景颜色半透明 background: rgba(0,0,0,0.3);
最后一个是透明度0-1
最后一个为alpha透明度
0.3的0可以省略 也可以写成.3
后面必须是4个值
学习产出：
网页两个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=100, initial-scale=1.0">
<title>Document</title>
<style>
a {
display: block;
background-color: #55585a;
width: 230px;
height: 40px;
font-size: 14px;
color: #fff;
text-indent: 2em;
text-decoration: none;
line-height: 40px;
}
a:hover {
background-color: #ff6700;
}
</style>
</head>
<body>
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本 平板</a>
<a href="#">出行 穿戴</a>
<a href="#">智能 路由器</a>
<a href="#">健康 儿童</a>
<a href="#">耳机 音响</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=100, initial-scale=1.0">
<title>Document</title>
<style>
.nav a {
display: inline-block;
background-color: #7ad351;
width: 120px;
height: 58px;
line-height: 58px;
color: #fff;
text-decoration: none;
text-indent: 1.5em;
background-position: center center;
}
.nav .bj1 {
background: url(bj1.jpg) no-repeat;
}
.nav .bj1:hover {
background: url(bj2.jpg);
}
.nav .bj2 {
background: url(bj2.jpg) no-repeat;
}
.nav .bj2:hover {
background: url(bj3.jpg);
}
.nav .bj3 {
background: url(bj3.jpg) no-repeat;
}
.nav .bj3:hover {
background: url(bj4.jpg);
}
.nav .bj4 {
background: url(bj4.jpg) no-repeat;
}
.nav .bj4:hover {
background: url(bj5.jpg);
}
.nav .bj5 {
background: url(bj5.jpg) no-repeat;
}
.nav .bj5:hover {
background: url(bj1.jpg);
}
</style>
</head>
<body>
<div class="nav">
<a href="#" class="bj1">五彩导航</a>
<a href="#" class="bj2">五彩导航</a>
<a href="#" class="bj3">五彩导航</a>
<a href="#" class="bj4">五彩导航</a>
<a href="#" class="bj5">五彩导航</a>
</div>
</body>
</html> 
671
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
