---------------------不定时的更新又又开始了，且更且珍惜------------------------
我要每次都写一遍：前面的还没补完，以此催促不定时更新的我
------------------------------------------------------------------------------------------------
|
认识CSS |
1、什么是CSS
CSS（Cascading Style Sheet）：层叠样式表
2、作用：
定义如何显示HTML元素。
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）
3、注释：
在学习一门语言之前我们要先了解其注释的格式
/*单行注释*/
/*
多行注释
*/
4、语法结构：
选择器 {属性：属性值；属性：属性值；属性：属性值}
属其对应属性值，可以是有一个也可以有多个
5、三种引入方式
1.head内style内部之间书写CSS代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p {color:burlywood} </style> </head> <body> <p>这是一个(*╹▽╹*)p标签</p> </body> </html>
2.link标签引入外部CSS文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> /*方式二：*/ <link rel="stylesheet" href="mycss.css"> </head> <body> <!--<p>这是一个(*╹▽╹*)p标签</p>--> </body> </html>
3.直接在标签内通过style属性属性CSS样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--方式三：--> <p style="color:skyblue">这是一个(*╹▽╹*)p标签</p> </body> </html>
ps:注意页面css样式通常都应该写在单独的css文件中
| 学习CSS的流程 |
1、首先学习如何查找标签（方式）
基本选择器
标签选择器
id选择器
类选择器
通用选择器
组合选择器
后代选择器
儿子选择器
毗邻选择器
弟弟选择器
属性选择器
伪类选择器
伪元素选择器
2、如何给查找到的标签设置样式
- 基本选择器：
标签选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*标签选择器：可以把我们某个标签变成同样的格式*/ /*比如：所有span标签的颜色都是红色*/ span {color:red} </style> </head> <body> <span id="s1">span</span> <div class="c1">div <p>p <span>span</span> </p> </div> <div class="c1">div</div> </body> </html>
id选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*id选择器，通过id来选择 /*比如我们将所有id为s1的字体大小改成24px*/ #s1 { font-size: 24px; } } </style> </head> <body> <span id="s1">span</span> <div class="c1">div <p>p <span>span</span> </p> </div> <div class="c1">div</div> </body> </html>
类选择器
注意：样式类名不要用数字开头（有的浏览器不认）。
标签中的class属性如果有多个，要用空格分隔。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*类选择器，通过类来选择*/ .c1 { color:brown; } </style> </head> <body> <span id="s1">span</span> <div class="c1">div <p>p <span>span</span> </p> </div> <div class="c1">div</div> </body> </html>
通用选择器（有点类似于sql语句中select*，就不指定条件）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* *：通用选择器，将所有的都变成统一的样式，用的较少*/ * { color:dodgerblue; } </style> </head> <body> <span id="s1">span</span> <div class="c1">div <p>p <span>span</span> </p> </div> <div class="c1">div</div> </body> </html>
- 组合选择器：
后代选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*后代选择器 div里面所有的span标签变成蓝色，子子孙孙都变*/ div span{ color: cornflowerblue; } </style> </head> <body> <span>这是div上面的span♡</span> <div> <span>这是div里面的第一个span♡</span> <p>这是div里面的第一个p❤ <span>这是div里面的第一个p里面的span♡</span> </p> <span>这是div里面的第二个span♡</span> </div> <span>这是div下面的第一个span♡</span> <span>这是div下面的第二个span♡</span> </body> </html>
儿子选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*儿子选择器*/ div>span{ color:firebrick; } </style> </head> <body> <span>这是div上面的span♡</span> <div> <span>这是div里面的第一个span♡</span> <p>这是div里面的第一个p❤ <span>这是div里面的第一个p里面的span♡</span> </p> <span>这是div里面的第二个span♡</span> </div> <span>这是div下面的第一个span♡</span> <span>这是div下面的第二个span♡</span> </body> </html>
毗邻选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*毗邻选择器 对下不对上*/ div+span { color: chocolate; } </style> </head> <body> <span>这是div上面的span♡</span> <div> <span>这是div里面的第一个span♡</span> <p>这是div里面的第一个p❤ <span>这是div里面的第一个p里面的span♡</span> </p> <span>这是div里面的第二个span♡</span> </div> <span>这是div下面的第一个span♡</span> <span>这是div下面的第二个span♡</span> </body> </html>
弟弟选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*弟弟选择器 对下不对上*/ div~span { color: lightsalmon; } </style> </head> <body> <span>这是div上面的span♡</span> <div> <span>这是div里面的第一个span♡</span> <p>这是div里面的第一个p❤ <span>这是div里面的第一个p里面的span♡</span> </p> <span>这是div里面的第二个span♡</span> </div> <span>这是div下面的第一个span♡</span> <span>这是div下面的第二个span♡</span> </body> </html>
- 属性选择器：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> [xxx] { color: lightpink; } </style> </head> <body> <span xxx="2">span</span> <p xxx>这个只有属性名</p> <p xxx="1">这个有属性名和属性值并且值为1</p> <p xxx="2">这个有属性名和属性值并且值为2</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*只要标签有属性名为xxx并且值为1*/ [xxx='1'] { color: mediumpurple; } </style> </head> <body> <span xxx="2">span</span> <p xxx>这个只有属性名</p> <p xxx="1">这个有属性名和属性值并且值为1</p> <p xxx="2">这个有属性名和属性值并且值为2</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*规定p标签内部必须有属性名为xxx并且值为2的标签*/ p[xxx='2'] { color:lightgreen; } </style> </head> <body> <span xxx="2">span</span> <p xxx>这个只有属性名</p> <p xxx="1">这个有属性名和属性值并且值为1</p> <p xxx="2">这个有属性名和属性值并且值为2</p> </body> </html>
注：属性名不用加引号属性值要加
- 分组与嵌套：
分组：当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，
我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*分组*/ div,p,span { color:aquamarine; } </style> </head> <body> <div>div</div> <p>p</p> <span>span</span> </body> </html>
上面的代码为div标签，p标签，span标签统一设置字体为湖水绿。
嵌套：不同的选择器可以共用一个样式
后代选择器与标签组合 
多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色。
- 伪类选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 未访问的链接 */ a:link { color:red; } /* 鼠标移动到链接上 */ a:hover { color: palevioletred; } /* 选定的链接 */ a:active { color:pink; } /* 已访问的链接 */ a:visited{ color: lightpink; } input:focus { outline: none; background-color: lightgreen; } </style> </head> <body> <a href="http://www.baidu.com">百度</a> <a href="http://www.xiaohuar.com">笑话网</a> <a href="http://www.sogo.com">搜狗</a> <input type="text"> </body> </html>
- 伪元素选择器
first-letter: 常用来给首字母特殊样式
before: 在每个<p>元素之前插入内容
after: 在每个<p>元素之后插入内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> first-letter { color:red; font-size: 24px; } p:before { content: '*'; color:gold; } p:after { content: '?'; color:deeppink; font-size: 48px; } </style> </head> <body> <p>告诉我 答案是什么</p> <p>你喜欢去哪</p> <p>青海或三亚</p> <p>冰岛或希腊</p> <p>南美不去吗</p> <p>沙漠你爱吗</p> <p>我问太多了</p> </body> </html>
3、选择器优先级
相同选择器 不同的引入方式：
就进原则 谁越靠近标签谁说了算
不同选择器 相同的引入方式：
行内样式 > id选择器> 类选择器 > 标签选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #p1 { color:gold; } .c1 { color: antiquewhite; } p { color: darkslateblue; } </style> <link rel="stylesheet" href="mycss.css"> </head> <body> <p id="p1" class="c1" style="color: skyblue">p</p> </body> </html>
4、样式修改
- 字体大小、字重(粗细)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 400px; height: 100px; } p { font-family:"Sitka Banner","Arial",sans-serif; } p { font-size:16px; font-weight: lighter; } </style> </head> <body> <div>div</div> <div>div</div> <p>就算失望，不能绝望</p> </body> </html>
如果设置成inherit表示继承父元素的字体大小值
- 文本颜色
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：
十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red
还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p { /*!*方式一：*!*/ /*color:red;*/ /*!*方式二：*!*/ /*color:rgb(0,0,255);*/ /*!*方式三：*!*/ /*color:#ff6700;*/ /*方式四：*/ color:rgba(0,0,255,0.4); } </style> </head> <body> <p>不要害怕自己长成生活的模样</p> </body> </html>
- 文本属性
文字对齐
text-align 属性规定元素中的文本的水平对齐方式。
| 值 | 描述 |
|---|---|
| left | 左边对齐 默认值 |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |
文字装饰
text-decoration 属性用来给文字添加特殊效果。
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 |
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
| inherit | 继承父元素的text-decoration属性的值。 |
常用的为去掉a标签默认的自划线：
a {
text-decoration: none;
}
首行缩进
将段落的第一行缩进 32像素：
p {
text-indent: 32px;
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p { /*text-align: right;*/ /*text-decoration: underline;*/ /*text-decoration: overline;*/ text-decoration: line-through; text-indent: 48px; } a { text-decoration: none; } </style> </head> <body> <p>走过了人来人往</p> <a href="https://www.baidu.com">百度</a> </body> </html>
- 背景属性
/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*
背景重复
repeat(默认):背景图片平铺排满整个网页
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺
*/
background-repeat: no-repeat;
/*背景位置*/
background-position: left top;
/*background-position: 200px 200px;*/
支持简写：
background:#336699 url('1.png') no-repeat left top;
使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 800px; height: 800px; /*background-color: tomato;*/ /*background-image:url("timg.jpg") ;*/ /*background-repeat: no-repeat;*/ /*background-repeat: repeat;*/ /*background-repeat: repeat-x;*/ /*background-repeat: repeat-y;*/ /*background-position: center;*/ /*简写(顺序没有限制，空格隔开)*/ background: no-repeat center url("timg.jpg") tomato; } </style> </head> <body> <div></div> </body> </html>
- 背景图片
/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*
背景重复
repeat(默认):背景图片平铺排满整个网页
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺
*/
background-repeat: no-repeat;
/*背景位置*/
background-position: left top;
/*background-position: 200px 200px;*/
支持简写：
background:#336699 url('1.png') no-repeat left top;
使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。
interesting：（感动吗？）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { height: 400px; background-color: lightskyblue; } .box { height: 400px; background: url("timg.jpg"); background-attachment: fixed; } .c2 { height: 400px; background-color: lightgreen; } .c3 { height: 400px; background-color: lightcyan; } .c3 { height: 400px; background-color: peachpuff; } </style> </head> <body> <div class="c1"></div> <div class="box"></div> <div class="c2"></div> <div class="c3"></div> </body> </html>
- 边框
边框属性 ：
border-width
border-style
border-color
边框样式
| 值 | 描述 |
|---|---|
| none | 无边框。 |
| dotted | 点状虚线边框。 |
| dashed | 矩形虚线边框。 |
| solid | 实线边框。 |
除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示：
border-top-style:dotted; border-top-color: red; border-right-style:solid; border-bottom-style:dotted; border-left-style:none; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { /*border- 3px;*/ /*border-style: dashed;*/ /*border-color: antiquewhite;*/ /*简写*/ border: 3px solid red; } </style> </head> <body> <div>div</div> </body> </html>
- 画圆
用这个属性能实现圆角边框的效果。
将border-radius设置为长或高的一半即可得到一个圆形。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 400px; height: 400px; background-color: peachpuff; border: 3px solid paleturquoise; border-radius: 50%; } </style> </head> <body> <div></div> </body> </html>
- display
用于控制HTML元素的显示效果。
| 值 | 意义 |
| display:"none" | HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。 |
| display:"block" | 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。 |
| display:"inline" | 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 |
| display:"inline-block" | 使元素同时具有行内元素和块级元素的特点。 |
display:"none"与visibility:hidden的区别：
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。
也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。
也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*div {*/ /*display: none;*/ /*}*/ /*!*inline将块级标签变成行内标签*!*/ /*div {*/ /*display: inline;*/ /*}*/ /*span {*/ /*display: block;*/ /*}*/ /*!*将选择的标签既具有行内标签的特点又有块级标签的特点*!*/ span { display: inline-block; height: 400px; width: 400px; background-color: powderblue; border: 3px solid palegreen; } </style> </head> <body> <div>div</div> <div>div</div> <span>span</span> <span>span</span> </body> </html>