CSS
- CSS的简介
- table 元素
- 复合选择器
- 代码风格 alt shift f
- 字体属性
- 文本
- **三种样式表： 内部 外部 行内**
- background
- outline 消除边框线
- CSS三大特性 层叠性 继承性 优先级
- 盒子模型 border
- 圆角边框
- 盒子阴影
- 网页排版 浮动
- PS图片格式
- 网站搭建思路
- 定位 position
- 定位叠放次序z-index
- 网页布局总结
- 元素的显示和隐藏
- 精灵图
- 字体图标
- CSS三角
- 用户鼠标交互样式
- vertical-align 行内块元素的对齐
- 图片底部的空白缝隙问题
- 文字溢出省略号显示
- 经过现变宽 margin 负值运用
- 行内块的巧妙运用
- 三角强化
- CSS 初始化
- HTML5 and CSS3 的提高
- 伪元素选择器
- cSS3盒子模型
- CSS3 滤镜filter
- CSS3 calc函数
- CSS3过渡效果 transition
- LOGO SEO 优化
- 命名方法
- 盒子的透明度
CSS的简介
<!DOCTYPE html>
<html lang = "zh-CN">
<head>
<meta charset = "UTF-8">
<title>CSS</title>
<style>
/*
选择器即HTML标签！！！
选择器{样式；}
给谁改样式{改什么样式；}
如遇到同样的标签但想要不同的效果可以在想要不一样的标签选择器后
面加 .ID 然后修改样式 再去body里面把要改的选择器 起始标签里面
加上class = “ID” 这个ID要和上面给的ID一样
*/
p{
color : red;
<!-- 修改了文字大小为12像素！ -->
font-size : 12px;
}
p.duanluo{
color : green;
<!-- 修改了文字大小为12像素！ -->
font-size : 12px;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p class = "duanluo">Hello World</p>
</body>
</html>
table 元素
<!--
<thead>表格的头区域部分 可以把表头的内容进行伸缩 </thead>
<tbody>表格的身体区域部分 可以把身体的内容进行伸缩 </tbody>
-->
<style>
thead,th{ table表格里的 thead和th
}
</style>
<style>
table {
border : 2px solid black;
border-collapse : collapse;
}
thead th{ thead 里面的th
border : 1px solid black;
padding : 10px;
background : yellow;
}
tbody th{ tbody 里面的 th
border : 1px solid black;
padding : 10px;
background : blue;
}
tbody td{
border : 1px solid ;
color : red;
}
</style>
第二个
<style>
table{
/*表格添加标题 ：caption table,th,td 1px 像素粗
solid 将边框绘制为一条直线 black 字的颜色为黑色*/
/*solid直线 dashed 虚线*/
border : 1px solid black;
border-collapse : collapse;/*合并重叠边框线*/
}
th{
/*1px 像素粗 solid 将边框绘制为一条直线 black 字的颜色为黑色*/
border : 1px solid black;
padding : 10px;/* 字与边框的距离 */
}
td{
/*1px 像素粗 solid 将边框绘制为一条直线 black 字的颜色为黑色*/
border : 1px solid black;
}
</style>
<table>
<caption> 表格 </caption> <!--表格添加标题 ：caption 必须靠紧table-->
<thead> <!-- 表格的头部分-->
<tr><th>1</th><th>2</th></tr><!--表头 剧中加粗-->
</thead>
<tbody> <!-- 表格的身体部分-->
<colgroup><!-- 设置多列的颜色属性 -->
<col style = "background : red;"><!--第一列-->
<!--第二列--> <!--span表示要跨几列-->
<col span = "2" style = "background : green;">
</colgroup>
<tr>
<td colspan = "2">1</td>
<td rowspan = "3">3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
<tr><td>1</td><td>2</td></tr>
</tbody>
</table>
#基础选择器
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s1fraGzi-1614241511679)(…/…/CSS/CSS/css%E9%80%89%E6%8B%A9%E5%99%A8.png)]
通常，我们将CSS选择器分为以下五类.-小甲鱼
基本选择器 || 复合选择器 || 伪类选择器 || 伪元素选择器 || 属性选择器
多类选择器 和 类选择器
类选择器
<style>
.red {
color: red;
}
</style>
<ul>
<li class="red">冰雨</li>
<li class ="red">来生缘</li>
</ul>
<!--1．多类名使用方式 --> 需要多个重复使用的属性可以提出属性给一个类来引用
<div class="red font20">亚瑟</ div>
(1)在标签class属性中写多个类名
(2)多个类名中间必须用空格分开
(3)这个标签就可以分别具有这些类名的样式
<!--⒉多类名开发中使用场景 -->
(1)可以把一些标签元素相同的样式(共同的部分)放到一个类里面.
(2)这些标签都可以调用这个公共的类,然后再调用自己独有的类.
(3)从而节省CSS代码,统一修改也非常方便.
例子：
<div class="pink fontweight font20">亚瑟</ div>
<div class="font20">刘备</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蝉</div>
！ 各个类名中间用空格隔开
！ 简单理解∶就是给某个标签添加了多个类，或者这个标签有多个名字
！ 这个标签就可以分别具有这些类名的样式
! 从而节省CSS代码,统一修改也非常方便.
! 多类名选择器在后期布局比较复杂的情况下，还是较多使用的
公共的元素组合！
id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式。
HTML元素以id属性来设置id选择器，CSS中id选择器以“#"来定义。
语法
#id名{
属性1:属性值1;
}
例如，将id为nav元素中的内容设置为红色。
#nav {
color :red;
}
注意: id属性只能在每个HTML文档中出现一次。口诀:样式#定义结构id调用,只能调用一次,别人切勿使用
<style>
#lhj {
color: pink;
}
</style>
调用： <p id = "lhj">你好啊，世界！</p> p 的 id 叫 lhj 然后再style里面定义样式
id与类选择器的区别
id选择器和类选择器的区别
1.类选择器( class )好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。
2.id选择器好比人的身份证号码，全中国是唯一的，不得重复。
3. id选择器和类选择器最大的不同在于使用次数上。
4.类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用。
通配符选择器
在CSS中，通配符选择器使用“*”定义，它表示选取页面中所有元素(标签)。
语法
* {
属性1:属性值1;
}
通配符选择器不需要调用，自动就给所有的元素使用样式
特殊情况才使用，后面讲解使用场景(以下是清除所有的元素标签的内外边距后期讲)
* {
margin: 0;
padding: 0;
}
基础选择器的总结
~
<style>
*{
/*通用符选择器 匹配所有的元素*/ padding : 10px; background-color : #DEFEFF;
}
h2,p,span，a{
/*单个是元素选择器 多个选择器组合就是并集选择器 对选中的元素*/ text-align : center;
}
.slogan{
/*类选择器 用class 匹配*/ test-align : red;
/*pink老师：类选择器口诀：样式点定义 结构类（class）调用 一个或多个 开发最常用 */
}
#ol{
/*id 选择器 在要设置的标签开头设置 id= “xx”名 且是唯一的 css表现形式在ID名前加个 # 号*/ color : green;
}
/*复合选择器 有两个或多个基础选择器通过不同的方式组合 目的是进一步匹配特定的元素达到更为精确的定位 交集选择器 有两个选择器组成：第一个选择器必须为元素选择器。第二个选择器必须为类选择器 或者id选择器
并集选择器 也叫分组选择器或群组选择器 它是有两个或两个以上的任意选择器构成的
后代选择器 / 包含选择器 用于选择包含在指定的选择器匹配的元素的后代元素 注意！！用空格分离 原理 先应用选择器1 再 从匹配的元素后代中找出匹配选择器2的元素 如果存在选择器3 就用同样的方式继续往下去匹配 在选择器1的元素找到选择器2 对应的内容进行应用
子元素选择器 匹配元素中的直接子元素 使用大于号进行分割 意义为 选择器1指定元素的所有选择器2指定的直接子元素
相邻兄弟选择器 如果需要选择紧接在某个元素后面的元素而且两者具有共同的父元素 用 + 号进行分隔 含义 选择紧跟 在选择器1指定元素后出现的选择器2指定元素 且 拥有共同的父元素 只匹配选择器2
通用兄弟选择器 范围更广 它匹配的元素在指定的元素后位置无需紧挨着选择器1同层级即可*/
。solgan ~ p 选择器1 ~ 选择器2 { 通用兄弟选择器 和选择器1 同级的选择器2 即可以}
.slogan + p 选择器1 + 选择器2 { 相邻兄弟选择器 匹配在最接近的选择器1的选择器2 }
body > .slogan 选择器1 > 选择器2 { 子元素选择器 将选择器2 里面的元素给选择器 1最大的子元素}
p span 选择器1 选择器2 选择器3 。。。{后代选择器 1里面有2的东西就应用}
p.slogan = 元素选择器.类选择器 | p#ol = 元素选择器#id选择器{
/*在元素添加类选择器的名*/ text-aling : green;
}
</style>
<p id = "ol">liang</p>
<p class = "slogan">liang</p>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mG0pS388-1614241511684)()]
复合选择器
在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。
复合选择器可以更准确、更高效的选择目标元素(标签)
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
常用的复合选择器包括︰后代选择器、子选择器、并集选择器、伪类选择器等等
后代选择器(重要)
后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
语法∶
元素1 元素2 { 样式声明 }
上述语法表示选择元素1里面的所有元素2(后代元素)。例如∶
ul li { 样式声明 } /选择ul里面所有的 li标签元素/
元素1 和 元素2 中间用 空格 隔开
元素1是父级，元素2是子级，最终选择的是元素2显示
元素2可以是儿子，也可以是孙了等，只要是元素1的后代即可
元素1和元素2可以是任意基础选择器
遇到相同的标签 给予类名就可以区分了
<style>
ol li { color: red; }
.yellow li { color: yellow }
</style>
第一个标签
<ol>
<li> <p>我是第一个</p> </li>
</ol>
第二个表签
<ol class="yellow">
<li> <p>我是第二个</p> </li>
</ol>
子元素选择器（重要）
子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲闺女元素.
语法:
元素1>元素2 { 样式声明 }
上述语法表示选择元素1里面的所有直接后代(子元素)元素2。
例如︰
div > p { 样式声明} /选择div里面所有最近一级p 标签元素/
元素1和元素2中间用大于号隔开
元素1是父级，元素2是子级，最终选择的是元素2
元素2必须是亲闺女，其孙女、重孙之类都不归他管.你也可以叫他亲闺女选择器
<style>
div>a { color: pink; }
</style>
<div>
<a href="#">woshi</a>
<p><a href="#">dw</a></p>
</div>
并集选择器(重要)
并集选择器可以选择多组标签,同时为他们定义相同的样式。通常用于集体声明.
并集选择器是各选择器通过英文逗号(，)连接而成，任何形式的选择器都可以作为并集选择器的一部分。语法︰
元素1,元素2{ 样式声明}
上述语法表示选择元素1和元素2。例如︰
ul,div { 样式声明 } /选择ul和div标签元素/
元素1 和 元素2 中间用 逗号 隔开
逗号可以理解为 和 的意思
并集选择器通常用于 集体声明
伪类选择器
a : link /选择所有未被访问的链接/
a : visited /选择所有已被访问的链接/
a : hove 选择鼠标指针位于其上的链接
a :active /选择活动链接（鼠标按下未弹起的链接）/
<style>
a:link { 选择所有未被访问的链接
color: black;
text-decoration: none;
}
a:visited { 选择已被访问过的链接
color: red;
}
a:hover { 选择鼠标指针经过（位于）其上的链接
color: skyblue;
}
a:active { 选择活动链接（鼠标按下未弹起的链接）
color: green;
}
</style>
链接伪类选择器
一链接伪类选择器注意事项.
二链接伪类选择器实际开发中的写法.链接伪类选择器注意事项
1.为了确保生效，请按照LVHA的循顺序声明 :link - :visited - :hover - :active。2.记忆法:love hate或者lv包包hao 。
3.因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
链接伪类选择器实际工作开发中的写法∶
a是标签选择器所有的链接
a {
color: gray;
}
:hover 是链接伪类选择器鼠标经过
a: hover {
color: red;
}
鼠标经过的时候，由原来的灰色变成了红色大
:focus 伪类选择器用于获得焦点的表单元素
焦点就是光标 一般情况下input类 表单才能获取 因此这个元素也主要针对表单元素来说
<style>
input:focus {
border-color: pink; color: pink; /* background-color: pink; */
}
</style>
<input type="text">
复合选择器总结
代码风格 alt shift f
CSS代码风格
1.样式格式书写
1紧凑格式
h3 { color: deeppink; font-size: 20px; }
2展开格式
h3 {
color: pink;
font-size: 20px;
}
强烈推荐第二种格式，因为更直观。
3.空格规范
h3 {
color: pink;
}
1.属性值前面，冒号后面，保留一个空格
2.选择器（标签)和大括号中间保留空格
字体属性
CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。
1.字体系列 font-family
CSS 使用 font-family 属性定义文本的字体系列。
p {
font-family:"微软雅黑";
}
div {
font-family: Arial, "Microsoft rahei"，"微软雅黑";
/*从浏览器执行开始 检测用户字体和样式第一个字体有就调用没有就往下一个找，依次类推！都没有就执行浏览器默认字体*/
}
各种字体之间必须使用英文状态下的逗号隔开
一般情况下,如果有空格隔开的多个单词组成的字体,加引号.
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
最常见的几个字体:
body {
font-family.'MicrosoftYaHei' ,tahoma,arial,'Hiragino Sans GB';
}
2.字体大小 font-size
CSS 使用 font-size 属性定义字体大小。
p {
font-size: 20px;
}
注意！！！ 文字标题标签需要单独改！ h1-h6
2.1 px（像素)大小是我们网页的最常用的单位
2.2 谷歌浏览器默认的文字大小为16px
2.3 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
2.4 可以给body指定整个页面文字的大小
3.字体粗细 weight 推荐数字加粗 400普通 700加粗 strong也可以
p {
/*font-weight: bold; 相当于 font-weight: 700; number 700 | 这个700后面不要跟单位 等价于bold的加粗效果
实际开发中，更提倡用数字来表示 加粗 或者 变细 */
font-weight: 400;
/* font-weight: normal; */
}
标题多数都是不要加粗的 可以使用number的值来改变它！
normal : 正常的字体。相当于number为400。声明此值将取消之前任何设置
bold : 粗体。相当于number为700。也相当于b对象的作用
bolder : IE5+ 特粗体
lighter : IE5+ 细体
number : IE5+ 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 不用加单位！！
4.文字样式 font-style 文本风格
CSS使用font-style属性设置文本的风格。
em {
font-style: normal; /*可以让倾斜的字体变得不倾斜*/
}
<em>下课时候的你哦！</em>/*因为上面样式在浏览器显示出来就不是斜体了*/
属性值 作用
normal 默认值，浏览器会显示标准的字体样式font-style: normal;
italic 浏览器会显示斜体的字体样式。让字体变倾斜
注意:平时我们很少给文字加斜体，反而要给斜体标签( em , i)改为不倾斜字体。
5.复合属性 一个容器需要多个元素值时！可以采用复合语句写
div {
/* font-style: italic;
font-family: "Microsoft Yahei";
font-size: 24px;
font-weight: 700;
复合属性 ： 简写的方式
font: font-style font-weight font-size/line-height font-family; */
font: italic 700 16px 16px "Mcirosoft Yahei" 样式一：全写
font: 16px "Mcirosoft Yahei" 样式二：必须保留的两个
/*其它不需要的可以不写，但!必须保留的这两个不能忽略且空格隔开 size 和 family*/
}
字体属性可以把以上文字样式综合来写,这样可以更节约代码:
body {
font: font-style font-weight font-size/line-height font-family;
}
使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
不需要设置的属性可以省略（取默认值)，但必须保留font-size和font-family属性，否则font属性将不起作用
font-size :
absolute-size : 根据对象字体进行调节。xx-small | x-small | small | medium | large | x-large | xx-large
relative-size : 相对于父对像中字体尺寸进行相对调节。使用成比例的em单位计算。larger | smaller
length : 百分数 | 由浮点数字和单位标识符组成的长度值，不可为负值。其百分比取值是基于父对象中字体的尺寸。请参阅长度单位
##计算的长度单位
字体属性总结
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0WFLizvX-1614241511691)(…/…/CSS/CSS/css%E5%AD%97%E4%BD%93%E5%B1%9E%E6%80%A7%E7%9A%84%E6%80%BB%E7%BB%93%E3%80%81.png)]
文本
CSS Text (文本)属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。
1.文本颜色
color属性用于定义文本的颜色。
div {
color: red; 预定义的颜色值
}
表示表示 属性值
预定义的颜色值 red,green，blue，还有我们的御用色pink
十六进制 #FFO000，#FF6600，#29D794
RGB代码 rgb(255,0,0)或rgb(100%,0%,0%)
开发最常用的是16进制
2.对齐文本
text-align属性用于设置元素内文本内容的水平对齐方式。
div {
text-align: center;
}
属性值 解释
left 左对齐(默认值)
right 右对齐
center 居中对齐
3.装饰文本 text-decoration
text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。
div {
text-decoration: underline;
}
属性值 描述
none 默认。没有装饰线(最常用)
underline 下划线。链接a自带下划线（常用)
overline 上划线。(几乎不用)
line-through 删除线。(不常用)
pink老师总结:重点记住如何添加下划线?如何删除下划线?其余了解即可. text-decoration:underline text-decoration: none
4.文本缩进 text-indent
text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。
div {
text-indent : 10px;
}
通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
p {
/* 文本的第一行的首行缩进 多少距离 */
/* text-indent: 20px; */
/* 如果此时写了2em 则是缩进当前元素2个文字的大小的距离 */
text-indent: 2em;
}
em是一个相对单位，就是当前元素( font-size)1个文字的大小,如果当前元素没有设置大小，则会按照父元素的1个文字大小。
5.行间距等
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZMebJmgm-1614241511692)(…/…/CSS/CSS/line-height-%E8%A1%8C%E9%97%B4%E8%B7%9D.png)]
##单行文字的居中技巧
让文字的行高等于盒子的高度
a {
height: 40px; //盒子高度
width: 230px;
line-height: 40px;//行高的高度
text-indent: 2em;
display: block;
}
文本属性总结
三种样式表： 内部 外部 行内
行内样式（lnline style） < p style = “color : green;”>d < /p>
内部样式表 （lnternal style sheet）在head里面定义
外部样式表（External style sheet） 在外部链接
引用时有分级限制的，行内 》内部样式 》 外部样式
<-- 行内样式-->
<div style="width:500px;"> </div>
<-- 内部样式-head标签内写更好-->
<style>
div {
width: 200px;
}
</style>
<-- 外部样式-->
<link rel="stylesheet" href="index.css">
div
div*3 数自定义数
ul>li
img+div
.demo
#demo
div.sd$*3
div#dw$*3
div{内容$}*3
background
-
background-color: transparent 背景色透明 silver 灰色
-
background-image : none | url (“url”) none : 无背景图 url : 使用绝对或相对地址指定背景图像
示例： code { background-image: url(“comet.jpg”); } -
background-repeat : repeat | no-repeat | repeat-x | repeat-y
repeat : 背景图像在纵向和横向上平铺
no-repeat : 背景图像不平铺
repeat-x : 背景图像在 X轴 横向上平铺
repeat-y : 背景图像在 Y 轴纵向平铺
示例：<style> div { width: 400px; height: 400px; background-color: pink; background-image: url(images/logo.png); /* 1.背景图片不平铺 */ /* background-repeat: no-repeat; */ /* 2.背景图片平铺 */ /* background-repeat: repeat; */ /* 3.沿着X轴平铺 */ /* background-repeat: repeat-x; */ /* 4.沿着Y轴平铺 */ background-repeat: repeat-y; /* 页面元素既可以添加背景颜色也可以添加背景图片 只不过背景图片会压住背景颜色 */ } </style> -
background-attachment : scroll | fixed **scroll 😗*背景图像是随对象内容滚动 fixed : 背景图像固定
示例：
<style>
body {
background-attachment: fixed; /* 图片背景固定 */
}
</style>
- 语法：
background-position : length || length
background-position : position || position
参数：
**length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位 **
**position : top | center | bottom | left | center | right ** 不用在意顺序
说明：
设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。
该属性定位不受对象的补丁属性(padding)设置影响。
对应的脚本特性为backgroundPosition。请参阅我编写的其他书目。
##方位名词
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
background-image: url(images/logo.png);
background-repeat: no-repeat;
/* background-position: 方位名词; */
/* background-position: center top; */
/* background-position: right center; */
/* 如果是方位名词 right center 和 center right 效果是等价的 跟顺序没有关系 */
/* background-position: center right; */
/* 此时 水平一定是靠右侧对齐 第二个参数省略 y 轴是 垂直居中显示的 */
/* background-position: right; */
/* 此时 第一个参数一定是 top y轴 顶部对齐 第二个参数省略x 轴是 水平居中显示的 */
background-position: top;
}
</style>
参数名词
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
background-image: url(images/logo.png);
background-repeat: no-repeat;
/* 20px 50px; x轴一定是 20 y轴一定是 50 */
/* background-position: 20px 50px; */
/* background-position: 50px 20px; */
background-position: 20px;
/* 20px center 一定是x 为 20 y 是 center 等价于 background-position: 20px */
/* background-position: 20px center; */
/* 水平是居中对齐 垂直是 20 x y */
background-position: center 20px;
}
</style>
1.参数是方位名词
如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一致
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
2.参数是精确单位
如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中
3.参数是混合单位
如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标
背景复合写法
当使用简写属性时，没有特定的书写顺序,一般习惯约定顺序为∶
background:;背景颜色背景图片地址背景平铺背景图像滚动背景图片位置;
<style>
background: transparent url(image.jpg) repeat-y fixed top ;
</style>
背景半透明色
CSS3为我们提供了背景颜色半透明的效果。
<style>
background: rgba(0,0,0,0.3) ;
</style>
最后一个参数是alpha透明度，取值范围在O~1之间
我们习惯把0.3的О省略掉，写为background:rgba(0,0,0,.3);注意:背景半透明是指盒子背景半透明，盒子里面的内容不受影响
cSS3新增属性，是IE9+版本浏览器才支持的
但是现在实际开发,我们不太关注兼容性写法了,可以放心使用
总结
背景图片:实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置.(精灵图也是一种运用场景)
outline 消除边框线
语法：
outline-style : none |dotted |dashed |solid |double |groove |ridge |inset |outset
参数：
none : 无边框。与任何指定的outline-width值无关
dotted : 点线边框
dashed : 虚线边框
solid : 实线边框
double : 双线边框。两条单线与其间隔的和等于指定的oueline-width值
groove : 根据outline-color的值画3D凹槽
ridge : 根据outline-color的值画菱形边框
inset : 根据outline-color的值画3D凹边
outset : 根据outline-color的值画3D凸边
img { outline-color: orange; outline-style: solid ; outline-width: medium ; }
CSS三大特性 层叠性 继承性 优先级
复合选择器的权重叠加
<style>
/* 复合选择器会有权重叠加的问题 */
/* 权重虽然会叠加,但是永远不会有进位 */
/* ul li 权重 0,0,0,1 + 0,0,0,1 = 0,0,0,2 2 */
ul li {
color: green;
}
/* li 的权重是 0,0,0,1 1 */
li {
color: red;
}
/* .nav li 权重 0,0,1,0 + 0,0,0,1 = 0,0,1,1 11 */
.nav li {
color: pink;
}
</style>
程序参考
一 ：
<style>
.nav {
color: red;
}
/* 子元素 继承的权重是0 */
li {
color: pink;
}
/* 显示粉色 因为权重的继承是0 */
</style>
二 ：
<style>
/* .nav li 权重是 11 */
.nav li {
color: red;
}
/* 需求把第一个小li 颜色改为 粉色加粗 ? */
/* .pink 权重是 10 .nav .pink 20 */
.nav .pink {
color: pink;
font-weight: 700;
}
</style>
<body>
<ul class="nav">
<li class="pink">1 </li>
<li> 2 </li>
<li> 3 </li>
</ul>
</body>
盒子模型 border
##border-width
border-width : medium | thin | thick | length
参数：
medium : 默认宽度
thin : 小于默认宽度
thick : 大于默认宽度
**length: ** 由浮点数字和单位标识符组成的长度值。不可为负值。请参阅长度单位 参考长度单位
border-style
border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
参数：
none : 无边框。与任何指定的border-width值无关
hidden : 隐藏边框。IE不支持
dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线
solid : 实线边框
double : 双线边框。两条单线与其间隔的和等于指定的border-width值
groove : 根据border-color的值画3D凹槽
ridge : 根据border-color的值画菱形边框
inset : 根据border-color的值画3D凹边
outset : 根据border-color的值画3D凸边
说明：
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四个边框。
如果只提供一个，将用于全部的四条边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
如果border-width不大于0，本属性将失去作用。
对应的脚本特性为borderStyle。请参阅我编写的其他书目。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8GRhQkLy-1614241511706)(…/…/CSS/CSS/border-style.png)]
##复合写法与案例
<style>
div {
width: 200px;
height: 250px;
/*border-width: 一般情况下都用 px*/
border-width: 5px;
/*border-style: 边框的样式 一般为 solid 实线边框 dashed 虚线边框 dotted 点线边框*/
/*border-style: solid;*/
/*border-style: dashed;*/
border-style: dotted;
border-color: pink;
/* 复合写法 */
border: 1px solid red;
/* 边框分开写法 */
/*上边框*/
border-top: 5px solid pink;
/*下边框*/
border-bottom: 5px dashed blue;
}
</style>
边框会影响盒子实际大小
边框会额外增加盒子的实际大小。因此我们有两种方案解决:
1．测量盒子大小的时候,不量边框.
2．如果测量的时候包含了边框,则需要width/height 减去边框宽度
##内边距padding
当我们给盒子指定padding值之后，发生了2件事情:
1.内容和边框有了距离，添加了内边距。
2.padding影响了盒子实际大小。
也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
padding会额外增加盒子的实际大小。因此我们有两种方案解决:
1．测量盒子大小的时候,不量边框.
2．如果测量的时候包含了边框,则需要width/height 减去边框宽度
margin外边距
外边距可以让块级盒子水平居中，但是必须满足两个条件:
盒子必须指定了宽度( width )。
盒子左右的外边距都设置为auto。
.header{ width : 960px; margin: 0 aut o; }
常见的写法，以下三种都可以︰
margin: auto;
margin-left: auto; margin-right ：auto;
margin: 0 auto;
注意︰以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align:center即可。
##清除内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。
* {
padding: 0px; /*清除内边距*/
margin: 0px; /*清除外边距*/
}
注意∶行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了
程序参考
font line family color width 可以继承 height不会继承
继承过来后只要不要重新设置 它的属性 那么使用padding 也不会撑开盒子大小 它会继承使用父亲的大小 从而不影响盒子的大小
圆角边框
盒子阴影
网页排版 浮动
##标准流
div等块级元素 和 a 等行内元素 按照网页默认的排序 进行 排序就是 标准流
浮动流
浮动元素设置后它会脱标！脱离原来的坐标位置 留下来的空位也会让后面的标准流顶上
加了浮动特性后 所有的块级元素和行内元素 都会拥有行内块元素的特性
任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。
- 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
- 浮动 的盒子中间是没有缝隙的，是紧挨着一起的
- 行内元素同理
清除浮动
###3.3清除浮动—额外标签法
额外标签法也称为隔墙法，是W3C推荐的做法。
额外标签法会在浮动元素末尾添加一个空的标签。例如<divstyle=" clearboth”>，或者其他标签(如
等）。
优点∶通俗易懂，书写方便
缺点∶添加许多无意义的标签，结构化较差
注意:要求这个新的空标签必须是块级元素。
3.3清除浮动——额外标签法
总结:
1.清除浮动本质是?
清除浮动的本质是清除浮动元素脱离标准流造成的影响
2.清除浮动策略是?
闭合浮动.只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子.
3.额外标签法?
隔墙法,就是在最后一个浮动的子元素后面添加一个额外标签,添加清除浮动样式.实际工作可能会遇到,但是不常用
###3.3清除浮动—父级添加overflow
3.3清除浮动–父级添加溢出
可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll 。子不教父之过,注意是给父元素添加代码
可以给父级添加溢出属性，将其属性值设置为隐藏、自动或滚动。子不教父之过，注意是给父元素添加代码
·优点∶代码简洁
缺点︰无法显示溢出的部分
3.3清除浮动—— :after伪元素法
:after方式是额外标签法的升级版。也是给父元素添加
<style>
.clearfix:after {
content : "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7专有*/*zoom: 1;
}
</style>
优点︰没有增加标签，结构更简单 缺点︰照顾低版本浏览器 代表网站:百度、淘宝网、网易等
3.3清除浮动——双伪元素清除浮动
给父元素添加
<style>
.clearfix:before,.clearfix: after {
content :"";
display:table;/*转换成表格*/
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom: 1;
}
</style>
优点∶代码更简洁
缺点∶照顾低版本浏览器●代表网站︰小米、腾讯等
PS图片格式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PUYnNROv-1614241511720)(…/…/CSS/CSS/%E5%9B%BE%E7%89%87.png)]
最简单的切图方式∶右击图层→快速导出为PNG。
多个图层需要合并时 按住CTRL把要合并的图选上 选好后按CTRL+E 就可以把多个图层合并为一个
PS有很多的切图方式∶图层切图、切片切图、PS插件切图等。
切片切图
1.利用切片选中图片
利用切片工具手动划出
2.导出选中的图片
文件菜单→导出→存储为web设备所用格式→选择我们要的图片格式→存储。
网站搭建思路
为了提高网页制作的效率，布局时通常有以下的整体思路︰
1．必须确定页面的版心(可视区），我们测量可得知。
2．分析页面中的行模块，以及每个行模块中的列模块。其实页面布局第一准则.
3.一行中的列模块经常浮动布局,先确定每个列的大小之后确定列的位置.页面布局第二准则4．制作HTML结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要.
5．所以,先理清楚布局结构,再写代码尤为重要.这需要我们多写多积累.
链接的使用
导航栏注意点:
实际开发中，我们不会直接用链接a而是用li包含链接(li+a)的做法。1. li+a语义更清晰，一看这就是有条理的列表型内容。
2．如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑(故意堆砌关键字容易被搜索引擎有降权的风险)
从而影响网站排名
注意:
1．让导航栏一行显示,给li加浮动,因为li是块级元素,需要一行显示.
2．这个nav导航栏可以不给宽度,将来可以继续添加其余文字
3.因为导航栏里面文字不一样多所以最好给链接a左右padding撑开盒子,而不是指定宽度
两个表单之间偶缝隙 可以添加浮动解决 float button 默让有个边框 可以用border ： 0；解决
浮动的盒子不会有外边距合并的问题
宽度不够了 一行的盒子或里 li 装不下了 不一定要让最后一个取消边距 可以让 li 的 父亲 ul 撑开宽度 足以容下全部li的宽度 因为宽度平时看不到的
定位 position
定位∶将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位=定位模式＋边偏移。
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。
边偏移就是定位的盒子移动到最终位置。有top、bottom、left和right 4个属性。
边偏移属性 示例 描述
top top: 80px 顶端偏移量，定义元素相对于其父元素上边线的距离。
bottom bottom: 8opx 底部偏移量，定义元素相对于其父元素下边线的距离。
left left: 80px 左侧偏移量，定义元素相对于其父元素左边线的距离。
right right: 80px 右侧偏移量，定义元素相对于其父元素右边线的距离
语法：
position : static 静态定位| absolute 绝对定位| fixed 固定定位| relative 相对定位
参数：
static : 无特殊定位，对象遵循HTML定位规则 静态定位
absolute : 将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框 绝对定位
relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置 相对定位
fixed : IE5.5及NS6尚不支持此属性 固定定位
静态定位static (了解)
静态定位是元素的默认定位方式，无定位的意思。
语法︰
选择器{ position : static; }
静态定位按照标准流特性摆放位置，它没有边偏移静态定位在布局时很少用到
相对定位relative(重要)
相对定位是元素在移动位置的时候，是相对于它原来的位置来说的(自恋型)。
语法︰
选择器{ position: relative; }
相对定位的特点∶(务必记住)
1．它是相对于自己原来的位置来移动的==(移动位置的时候参照点是自己原来的位置)。==以自己为中心
2．原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。(不脱标，继续保留原来位置)且别人不能使用
因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。。
绝对定位absolute(重要)
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型)。
语法∶
选择器{ position: absolute; }
绝对定位的特点∶(务必记住)
1．如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位(Document文档)。
2．如果祖先元素有定位(相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
3.绝对定位不在占有原先的位置哦（脱标）！ 会给后面的标准流盒子顶上
固定定位fixed（重要)
固定定位是元素固定于浏览器可视区的位置。主要使用场景︰可以在浏览器页面滚动时元素的位置不会改变。
语法︰
选择器{ position: fixed; }
固定定位的特点∶(务必记住)
1．以浏览器的可视窗口为参照点移动元素。
跟父元素没有任何关系
不随滚动条滚动。
2．固定定位不在占有原先的位置。
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。
粘性定位sticky (了解)
粘性定位可以被认为是相对定位和固定定位的混合。Sticky 粘性的
语法︰
选择器{ position: sticky; top: 10px; }
粘性定位的特点︰
1．以浏览器的可视窗口为参照点移动元素（固定定位特点)
2.粘性定位占有原先的位置(相对定位特点)
3．必须添加top . left、right、bottom其中一个才有效
跟页面滚动搭配使用。兼容性较差，IE不支持。
子绝父相的由来
弄清楚这个口诀，就明白了绝对定位和相对定位的使用场景。
这个“子绝父相”太重要了，是我们学习定位的口诀，是定位中最常用的一种方式这句话的意思是∶子级是绝对定位的话，父级要用相对定位。
子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。②父盒子需要加定位限制子盒子在父盒子内显示。
③父盒子布局时，需要占有位置，因此父亲只能是相对定位。
这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。
总结∶因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。
总结
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gDSitt0L-1614241511721)(…/…/CSS/CSS/%E5%AE%9A%E4%BD%8D%E6%80%BB%E7%BB%93.png)]
1.一定记住相对定位、固定定位、绝对定位两个大的特点∶1.是否占有位置（脱标否）⒉以谁为基准点移动位置。
2.学习定位重点学会子绝父相。
定位的拓展
1.绝对定位的盒子居中
加了绝对定位的盒子不能通过margin:Oauto水平居中，但是可以通过以下计算方法实现水平和垂直居中。
left: 50%;:让盒子的左侧移动到父级元素的水平中心位置。margin-left:-100px;:让盒子向左移动自身宽度的一半。
⒉定位特殊特性
绝对定位和固定定位也和浮动类似。
1．行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
2．块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
3.脱标的盒子不会触发外边距塌陷
浮动元素、绝对定位(固定定位)元素的都不会触发外边距合并的问题。
1．行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
2．块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
4.绝对定位（固定定位）会完全压住盒子
浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字(图片)
但是绝对定位（固定定位）会压住下面标准流所有的内容。
浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素
<style>
.nav { /*再板块的傍边*/
position: fixed;
top: 600px;
left: 50%;/*让盒子距离向左50% 也就是浏览器的一半位置*/
margin-left: 405px;/*再用margin-left：移动版心一半的距离*/
height: 50px;
width: 50px;
background-color: plum;
}
.box { /*再板块的中间 居中对齐*/
position: absolute;/*绝对定位 */
left: 50%;/*向左50% 到板块的一半*/
margin-left: -100px; /*再让它 反向走自己宽度一半*/
top: 50%;
margin-top: -100px;
height: 220px;
width: 220px;
background-color: pink;
/* margin: 0 auto; */
}
</style>
定位叠放次序z-index
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序(z轴)
语法∶
选择器{ z-index: 1; }
数值可以是正整数、负整数或0,默认是auto，数值越大，盒子越靠上
如果属性值相同，则按照书写顺序，后来居上数字后面不能加单位
只有定位的盒子才有z-index属性
网页布局总结
通过盒子模型，清楚知道大部分html标签是一个盒子。
通过CSS浮动、定位可以让每个盒子排列成为网页。
一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。
1.标准流
可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。
⒉浮动
可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。
3.定位
定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。
元素的显示和隐藏
类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现!本质:让一个元素在页面中隐藏或者显示出来。
- display显示隐藏
- visibility显示隐
- overflow溢出显示隐藏
display 属性
类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现!本质:让一个元素在页面中隐藏或者显示出来。
display属性用于设置一个元素应如何显示。
display: none ;隐藏对象
display : block ;除了转换为块级元素之外，同时还有显示元素的意思display隐藏元素后，不再占有原来的位置。
后面应用及其广泛，搭配JS可以做很多的网页特效。
visibility可见性
visibility属性用于指定一个元素应可见还是隐藏。
visibility : visible;元素可视
visibility : hidden;元素隐藏
visibility隐藏元素后，继续占有原来的位置。
如果隐藏元素想要原来位置，就用visibility : hidden
如果隐藏元素不想要原来位置，就用display : none(用处更多重点)
overflow溢出
overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。
属性值 描述
visible 不剪切内容也不添加滚动条
hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll 不管超出内容否，总是显示滚动条
auto 超出自动显示滚动条，不超出不显示滚动条
一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
但是如果有定位的盒子，请慎用overflow:hidden因为它会隐藏多余的部分。
精灵图
把多个小图片和成在一起传送 方便 有效的减少服务器接收和发送的请求次数，提高页面的加载速度
精灵图( sprites )的使用
使用精灵图核心∶
1．精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
2．这个大图片也称为sprites精灵图或者雪碧图
3.移动背景图片位置，此时可以使用background-position。
4.移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同
5.因为一般情况下都是往上往左移动，所以数值是负值。
6.使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。
使用精灵图核心总结︰
1.精灵图主要针对于小的背景图片使用。
2.主要借助于背景位置来实现—background-position。
3.一般情况下精灵图都是负值。(千万注意网页中的坐标∶x轴右边走是正值，左边走是负值，y轴同理。)
字体图标
字体图标的产生
字体图标使用场景∶主要用于显示网页中通用、常用的一些小图标
精灵图是有诸多优点的，但是缺点很明显。
1．图片文件还是比较大的。
2．图片本身放大和缩小会失真。
3.一旦图片制作完毕想要更换非常复杂。
此时，有一种技术的出现很好的解决了以上问题，就是字体图标iconfont。
字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。
字体图标的优点
轻量级∶一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
·灵活性:本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
兼容性:几乎支持所有的浏览器，请放心使用
注意:字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。
总结∶
1．如果遇到一些结构和样式比较简单的小图标，就用字体图标。
2．如果遇到一些结构和样式复杂一点的小图片，就用精灵图。
#icon图标网站
字体图标是一些网页常见的小图标，我们直接网上下载即可。因此使用可以分为∶
1．字体图标的下载
2．字体图标的引入(引入到我们html页面中)
3．字体图标的追加（以后添加新的小图标)
https://www.easyicon.net/ 国外
https://icomoon.io/ 国外
https://www.iconfont.cn/ 阿里云
把文件夹 引入到同级的目录中 主要是方便调用 把字体声明引入style里面 再设置标签样式的声明 再用标签去调用
<style>
/* 字体声明 */
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?p4ssmb');/*同级目录方便调用*/
src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?p4ssmb') format('truetype'),
url('fonts/icomoon.woff?p4ssmb') format('woff'),
url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
p {
font-family: 'icomoon';
font-size: 50px;
color: pink;
}
span {
font-family: 'icomoon';
font-size: 100px;
color:pink;
}
</style>
<span> windows</span>
如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。
把压缩包里面的selection.json从新上传，然后选中自己想要新的图标，从新下载压缩包，并替换原来的文件即可。
想在原来的基础上添加图标可以回到网站 打开import icons 选择json文件 然后yes
CSS三角
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BpAdsJp5-1614241511722)(…/…/CSS/CSS/CSS%E4%B8%89%E8%A7%92.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
height: 200px;
width: 200px;
background-color: pink;
}
.box1 {
height: 0;
width: 0;
margin-left: 90px;
border: 10px solid transparent;
border-bottom-color: pink;
}
/*两个外边距的盒子 组成三角*/
.jd {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
background-color: pink;
}
.jd span {
position: absolute;
right: 10px;
top: -20px;
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 10px solid transparent;
border-bottom-color: pink;
}/*子绝父相 套孩子 组成的三角*/
.xmi {
position: relative;
height: 50px;
width: 100px;
background-color: pink;
margin: 200px auto;
}
.xmi span {
position: absolute;
right: -20px;
top: 15px;
border: 10px solid transparent;
border-left-color: pink;
width: 0;
height: 0;
line-height: 0;
font-size: 0;
}/*一样 子绝父相*/
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box">
</div>
<div class="jd">
<span></span>
</div>
<div class="xmi">
<span></span>
</div>
</body>
</html>
用户鼠标交互样式
<ul>
<li style="cursor: default;">我是小白鼠标样式</li>
<li style="cursor: pointer;">我是鼠标小手样式</li>
<li style="cursor: move;">我是鼠标移动样式</li>
<li style="cursor: text;">我是文本鼠标样式</li>
<li style="cursor: not-allowed;">我是鼠标禁止样式</li>
</ul>
vertical-align 行内块元素的对齐
##图片和文字的居中效果
vertical-align : baseline |sub | super |top |text-top |middle |bottom |text-bottom |length
参数：
baseline : 将支持valign特性的对象的内容与基线对齐
sub : 垂直对齐文本的下标
super : 垂直对齐文本的上标
top : 将支持valign特性的对象的内容与对象顶端对齐
text-top : 将支持valign特性的对象的文本与对象顶端对齐
middle : 将支持valign特性的对象的内容与对象中部对齐
bottom : 将支持valign特性的对象的文本与对象底端对齐
text-bottom : 将支持valign特性的对象的文本与对象顶端对齐
length : CSS2 由浮点数字和单位标识符组成的长度值 | 或者百分数。可为负数。定义由基线算起的偏移量。基线对于数值来说为0，对于百分数来说就是0%。目前IE5尚不支持。请参阅长度单位
<style>
input,textarea {
/* 取消表单的轮廓 */
outline: none;
}
textarea {
/* <!-- 禁止文本域的拖拽 --> */
/* 行内块元素都可以添加此属性 实现 基线 居中 顶线 对齐 */
vertical-align: middle;
resize: none;
}
img {
/* 图片和文字的居中效果 */
/* vertical-align: middle; */
vertical-align: bottom;
/* vertical-align: top; */
}
</style>
</head>
<body>
<!-- 消除表单的轮廓线 -->
<input type="text">
<!-- 禁止文本域的拖拽 -->
<textarea name="" id="" cols="30" rows="10"></textarea>留言哦
<br />
<img src="images/ldh.jpg" alt=""> pink老师是刘德华
</body>
</html>
图片底部的空白缝隙问题
bug:图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。主要解决方法有两种:
1．给图片添加vertical-align:middle | top/ bottom等。（提倡使用的)
2．把图片转换为块级元素display: block;
<style>
* {
padding: 0;
margin: 0;
}
div {
border: 5px solid red;
}
img {
/* vertical-align: bottom; */
/* vertical-align: middle; */
display: block;
}
</style>
</head>
<body>
<div>
<img src="images/ldh.jpg" alt="">
</div>
文字溢出省略号显示
1.单行文本溢出显示省略号–必须满足三个条件
1．先强制一行内显示文本 white-space: nowrap;(默认normal自动换行)
2．超出的部分隐藏 overflow: hidden;
3．文字用省略号替代超出的部分 text-overflow : ellipsis;
<style>
* {
padding: 0;
margin: 0;
}
div {
height: 80px;
width: 150px;
background-color: pink;
margin: 100px auto;
/*这个单词的意思是如果文字显示不开自动换行*/
/*white-space: normal;*/
/*1.这个单词的意思是如果文字显示不开也必须强制一行内显示*/
white-space: nowrap;
/*2.溢出的部分隐藏起来*/
overflow: hidden;
/* 3。文字溢出的部分用省略号来显示 */
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>
{啥也不说，此处省略一万字QAQ}
</div>
2多行文本溢出显示省略号
多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核)111111111111
overflow : hidden;
text-overflow: ellipsis;/* 弹性伸缩盒子模型显示*/
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数*/
-webkit-line-clamp : 2;
/*大设置或检索伸缩盒对象的子元素的排列方式*/
-webkit-box-orient: vertical;
更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。
经过现变宽 margin 负值运用
1.让每个盒子margin往左侧移动-1px 正好压住相邻盒子边框
⒉鼠标经过某个盒子的时候，提高当前盒子的层级即可(如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index )
<style>
ul li {
position: relative;
float: left;
list-style: none;
width: 100px;
height: 150px;
border: 1px solid pink;
margin-left: -1px;
}
/* ul li:hover {
1.盒子如果没有定位，则鼠标经过添加相对定位即可
position: relative;
border: 1px solid red;
} */
ul li:hover {
/* 2.盒子li 如果有定位，则利用z-index 提高层级 */
z-index: 1;
border: 1px solid red;
}
</style>
行内块的巧妙运用
<style>/*父元素用textalign：center 后 所有的行内块子元素文字居中显示*/
.box {
text-align: center;
}
.box a {
display: inline-block;
height: 36px;
width: 36px;
text-decoration: none;
color: #333333;
background-color: #f7f7f7;
text-align: center;
line-height: 36px;
}
</style>
三角强化
<style>
.box {
height: 0px;
width: 0px;
margin: 100px auto;
/* 把上边框宽度调大些 */
/* border-top: 100px solid pink;
border-right: 50px solid blue; */
/* 左边和下边的边框宽度设置为0 */
/* border-bottom: 0 solid deeppink;
border-left: 0 solid green; */
/* 简写方式： */
/* 1.只保留右边的边框有颜色 */
border-color: transparent red transparent transparent;
/* 2.样式都是 style solid */
border-style: solid;
/* 3. 上边框的宽度要大 右边框 宽度稍小 其余的边框为0 */
border-width: 100px 100px 0 0;
.miaosha {
position: relative;
/* vertical-align: bottom; */
float: left;
width: 90px;
height: 100%;
background-color: pink;
font-weight: 700;
color: #ffffff;
}
.miaosha i {
position: absolute;
right: 0;
top: 0;
height: 0;
width: 0;
border-color: transparent #ffffff transparent transparent;
border-style: solid;
border-width: 24px 10px 0 0;
}
.origin {
font-size: 12px;
color: gray;
text-decoration: line-through;
}
}
</style>
<body>
<div class="box">
</div>
<div class="price">
<span class="miaosha">
$1650
<i></i>
</span>
<span class="origin">$5650</span>
</div>
</body>
CSS 初始化
不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异
照顾刘览器的兼
容，我们需要对CSS初始化
简单理解:CSS初始化是指重设浏览器的样式。(也称为CSS reset )每个网页都必须首先进行CSS初始化。
这里我们以京东css初始化代码为例。Unicode编码字体∶
把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。
比如︰
黑体\9ED1\4F53宋体\5B8B\4F53
微软雅黑\5FAE\8F6F\96C5]9ED1
/* 把我们所有标签的内外边距清零 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
font-style: normal
}
/* 去掉li 的小圆点 */
li {
list-style: none
}
img {
/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
border: 0;
/* 取消图片底侧有空白缝隙的问题 */
vertical-align: middle
}
button {
/* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
cursor: pointer
}
a {
color: #666;
text-decoration: none
}
a:hover {
color: #c81623
}
button,
input {
/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}
body {
/* CSS3 抗锯齿形 让文字显示的更加清晰 */
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666
}
.hide,
.none {
display: none
}
/* 清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}
HTML5 and CSS3 的提高
HTML5 video audio
HTML5的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。
这些新特性都有兼容性问题，基本是IE9+以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。
声明∶
1.新特性增加了很多，但是我们专注于开发常用的新特性。
2.基础班我们讲解部分新特性，到了就业班还会继续讲解其他新特性。`
1.1 HTML5新增的语义化标签
<header> :头部标签
<nav> :导航标签
<article>内容标签
<section>:定义文档某个区域
<aside> :侧边栏标签
<footer> :尾部标签
video
<body>
<video src="media/mi.mp4" muted="meted" width="100%" autoplay="autoplay"
loop="loop" poster="media/mi9.jpg">不支持video</video>
<video autoplay>
<source src="#" type="video/mp4">
<source src="#" type="video/ogg">
</video>
</body>
CSS3 新增选择器
- 属性选择器
- 结构伪类选择器
- 伪元素选择器
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 必须是input 但是同时具有value 这个属性 选择这个属性 */
input[value] {
color: pink;
}
input[type=text] {
color: red;
}
/* 选择器首先是以div 开头的然后具有 class 属性 并且属性值是以 icon 开头的这些元素 */
div[class^=icon] {
color: pink;
}
/*选择器的权重 1 10 */
section[class$=data] {
color: rebeccapurple;
}
/* 以section和div开头的选择器 并具有 class 属性 然后属性值必须要有icon 结尾或开头的元素 */
section,div[class*=icon] {
color: royalblue;
}
/* 伪类选择器 类选择器 属性选择器 权重都是 10 */
</style>
</head>
<body>
<!-- 属性选择器：利用属性选择器就可以不用借助于类或id选择器 -->
<input type="text" value="请输入">
<input type="text">
<!-- 属性选择器 还可以选择属性=值的某些元素 重点掌握 -->
<input type="text" name="" id="">
<input type="password" name="" id="">
<!-- 属性选择器还可以选择属性值开头的某些元素 -->
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<div class="ico">小图标5</div>
<!-- 属性选择器还可以选择以属性值结尾的某些元素 -->
<section class="iocn1-data">1</section>
<section class="iocn1-data">2</section>
<section class="icon5">3</section>
</body>
</html>
结构伪类选择器
<style>
/* 选择ul 里面的第一个孩子 小li */
ul li:first-child {
background-color: salmon;
}
/* 选择ul 里面的最后一个孩子 li */
ul li:last-child {
background-color: sandybrown;
}
/* 选择ul 里面的第6个孩子 括号里面的数字可以改变 （n） n 可以是数字和关键字和公式 */
ul li:nth-child(6) {
background-color: chartreuse;
}
/* 关键字：even 选择为 偶数个的类 */
ul li:nth-child(odd) {
background-color: crimson;
}
/* 关键字：odd 选择为 奇数个的类 */
ul li:nth-child(even) {
background-color: skyblue;
}
/* :nth-child(n) 从0开始 每次加一 往后计算 这里面必须是n 不能是其它的字母 0自动忽略 超出后自动忽略 */
ol li:nth-child(n) {
background-color: deeppink;
}
/* :nth-child(2n) 选择了所有的偶数孩纸 等价于 even */
ol li:nth-child(2n) {
background-color: skyblue;
}
/* :nth-child(2n+1) 选择了所有的奇数孩纸 等价于 odd */
ol li:nth-child(2n+1) {
background-color: deeppink;
}
/* 从第五个开始 逐次加5 直到完成 */
ol li:nth-child(5n) {
background-color: green;
}
/* 从第3个开始 直到完成 数值可以改变 n+？（？任意数） */
ol li:nth-child(n+3) {
background-color: deeppink;
}
/* 前六个 开始包含第六个 */
ol li:nth-child(-n+6) {
background-color: pink;
}
</style>
</head>
<body>
<ul>
<li>dsadsads</li>
<li>dsadsads</li>
<li>dsadsads</li>
<li>dsadsads</li>
<li>dsadsads</li>
<li>dsadsads</li>
<li>dsadsads</li>
<li>dsadsads</li>
</ul>
<ol>
<li>dsadsads</li>
<li>dsadsads</li>
<li>dsadsads</li>
<li>dsadsads</li>
<li>dsadsads</li>
<li>dsadsads</li>
<li>dsadsads</li>
<li>dsadsads</li>
</ol>
</body>
</html>
<style>
ul li:first-of-type {
background-color: pink;
}
ul li:last-of-type {
background-color: pink;
}
ul li:nth-of-type(even) {
background-color: skyblue;
}
/* :nth-child() 执行时 会把所有的盒子进行排序列号 */
/* 执行的时候首先看 :nth-child(1) 之后再回去看 前面的div 执行一次匹配不到 div*/
section div:nth-child(1) {
background-color: pink;
}
/* :nth-of-type() 执行时 会把指定的元素盒子进行排序列号 */
/* 执行的时候首先看 div指定的元素 之后再回去看 :nth-of-type(1) 第几个孩子*/
section div:nth-of-type(1) {
background-color: pink;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<!-- 区别 -->
<section>
<p>liang</p>
<div>hua</div>
<div>jian</div>
</section>
</body>
</html>
伪元素选择器
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n4HZyj6b-1614241511729)(…/…/CSS/CSS/%E4%BC%AA%E5%85%83%E7%B4%A0%E9%80%89%E6%8B%A9%E5%99%A8.png)]
cSS3盒子模型
CSS3中可以通过box-sizing来指定盒模型，有2个值:即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变
可以分成两种情况︰
- box-sizing:content-box盒子大小为width + padding + border (以前默认的)
- box-sizing: border-box盒子大小为width
- 如果盒子模型我们改为了box-sizing: border-box ，那padding和border就不会撑大盒子了(前提padding和border不会超过width宽度)
CSS3 滤镜filter
2.6 CSS3其他特性（了解)
cSS3滤镜filter:
filter CSS属性将模糊或颜色偏移等图形效果应用于元素。
filter:函数();例如: filter: blur(5px);blur模糊处理数值越大越模糊
<style>
img {
/* blur 是一个函数 小括号里面的数值越大，图片就越模糊 注意数值要加单位 px */
filter: blur(3px);
}
img:hover {
filter: blur(0);
}
</style>
</head>
<body>
<img src="images/pink.jpg" alt="">
</body>
CSS3 calc函数
css3 calc函数:
calc()此CSS函数让你在声明CSS属性值时执行一些计算。
width: calc(100% - 80px);
括号里面可以使用±* /来进行计算。
cSS3还增加了一些动画2D 3D等新特性，我们就业班会继续学习。
<style>
.father {
height: 222px;
width: 222px;
background-color: pink;
}
.son {
width: 150px;
height: 120px;
width: calc(100% - 30px);
height: calc(100% - 30px);
background-color: red;
}
</style>
</head>
<body>
<div class="father">sca
<div class="son">w </div>
</div>
</body>
CSS3过渡效果 transition
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OpUKULOi-1614241511730)(…/…/CSS/CSS/CSS3%20%E8%BF%87%E6%B8%A1.png)]
<style>
div {
height: 100px;
width: 200px;
background-color: pink;
/* transition: 变化的属性 花费的时间 运动曲线 何时开始 */
/* transition: width 0.5s ease 0.5s,height 0.5s ease 0.5s; */
/* 如果想要写入多个属性，利用逗号进行分割 */
/* transition: width 0.5s,height 0.5s; */
/* 如果想要多个属性都变化，属性值写all就可以了 */
/* 过渡谁使用，给谁 */
transition: all 0.5s;
/* transition: height 0.5s ease 0.5s; */
}
div:hover {
width: 500px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div></div>
</body>
LOGO SEO 优化
- logo里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要
- h1里面再放一个链接，可以返回首页的，把logo的背景图片给链接即可。
- 为了搜索引擎收录我们，我们链接里面要放文字(网站名称），但是文字不要显示出来。
方法1 : text-indent移到盒子外面( text-indent:-9999px)，然后overflow:hidden，淘宝的做法。
方法2∶直接给font-size:0;就看不到文字了，京东的做法。 - 最后给链接一个title属性，这样鼠标放到logo上就可以看到提示文字了。
命名方法
arrow-icon 箭头图标 shortcut 快捷导航栏 header 头部模块
hotwords 热词
盒子的透明度
opacity 数值越小越模糊
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
