python day41
CSS选择器
序列选择器
css3中新推出的选择器中，最具代表性的的9个，又称为序列选择器，过去的选择器中要选中某个必须加id或class，学习了这9个后，不用加id或class，想选中同级别的第几个就选第几个。
同级别的第一个
p:first-child{
color: red;
}
同级别的最后一个
p:last-child{
color: red;
}
同级别的第一个
同级别的倒数第2个(括号中的数字可以替换)
p:nth-child(2) {
color: red;
}
同级别同类型的第一个
p:first-of-type{
color: red;
}
同级别同类型的最后一个
p:last-of-type{
color: red;
}
同级别同类型的第2个(括号中的数字可以替换)
p:nth-of-type(2) {
color: red;
}
同级别同类型的倒数第2个(括号中的数字可以替换)
p:nth-last-of-type(2){
color: red;
}
同类型的唯一一个
p:only-of-type{
color: red;
}
同级别的唯一一个
p:only-child{
color: red;
}
属性选择器
作用：根据指定的属性名称找到对应的标签，然后设置属性。
该选择器，最常用于input标签
格式与具体用法：
[属性名]
其他选择器[属性名]
[属性名=值]
[属性名^=值]
[属性名$=值]
[属性名*=值]
/*找到所有包含id属性的标签*/
[id]{
color: red;
}
/*找到所有包含id属性的p标签*/
p[id]{
color: green;
}
/*找到所有class属性值为part1的p标签*/
p[class="part1"]{
color: yellow;
}
/*找到所有href属性值以https开头的a标签*/
a[href^="https"]{
color: yellow;
}
/*找到所有src属性值以png结果的img标签*/
img[src$="png"]{
color: yellow;
}
/*找到所有class属性值中包含part2的标签*/
[class*="part"] {
color: yellow;
}
伪类选择器
作用：主要使用在a标签上
/*没有访问的超链接a标签样式*/
a:link {
color: #cccccc;
}
/*访问过的超链接a标签样式*/
a:visited {
color: #55BBBB;
}
/*鼠标悬浮在元素上应用样式*/
a:hover {
color: green;
}
/*鼠标点击瞬间的样式*/
a:active {
color: red;
}
/*input输入框获取焦点时样式*/
input:hover {
outline: none;
background-color: #cccccc;
}
伪元素选择器
作用:修改元素的开头，在元素开头或末尾添加一些元素。
/*调整p标签的首字母样式*/
/将所有p标签的首字母大小改为48px*/
p:first-letter {
font-size: 48px;
}
#1.2 before
/*用于在元素的内容前面插入新内容。*/
/*在所有p标签的内容前面加上一个红色的*。*/
p:before {
content: "*";
color: red;
}
/*用于在元素的内容后面插入新内容。*/
/*在所有p标签的内容后面加上一个红色的?。*/
p:after {
content: "?";
color: red;
CSS三大特性
继承性
定义：给某一个元素设置一些属性，该元素的后代也可以使用，这个我们就称之为继承性。
注意：
1、只有以color、font-、text-、line-开头的属性才可以继承
2、a标签的文字颜色和下划线是不能继承别人的
3、h标签的文字大小是不能继承别人的，会变大，但是会在原来字体大小的基础上变大
实际应用场景：通常基于继承性统一设置网页的文字颜色，字体，文字大小等样式。
层叠性
定义：CSS全称：Cascading StyleSheet层叠样式表，层叠性指的就是CSS处理冲突的一种能力，即如果有多个选择器选中了同一个标签那么会有覆盖效果。
注意：层叠性只有在多个选择器选中了同一个标签，然后设置了相同的属性，才会发生层叠性。
优先级
定义：当多个选择器选中同一个标签，并且给同一个标签设置相同的属性时，如何层叠就由优先级来确定。
优先级整体优先级从高到底：行内样式>嵌入样式和外部样式，行内样式并不推荐使用。
大前提：直接选中 > 间接选中(即继承而来的)以下为直接选中
<style type="text/css">
#id1 {
color: red;
}
.ppp {
color: green;
}
p {
color: blue;
}
</style>
以下为间接选中
<style type="text/css">
ul {
color: yellow;
}
</style>
<ul>
<li>
<p id="id1" class="ppp">我是span</p>
</li>
</ul>
如果都是间接选中，那么谁离目标标签比较近，就听谁的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
/*离目标近*/
li {
color: red;
}
/*离目标远*/
ul {
color: yellow;
}
</style>
</head>
<body>
<ul>
<li>
<p id="id1" class="ppp">我是span</p>
</li>
</ul>
</body>
</html>
如果都是直接选中，并且都是同类型的选择器，那么就是谁写的在后面就听谁的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
p {
color: red;
}
/*同样都是标签选择器，谁写在后面谁生效*/
p {
color: yellow;
}
</style>
</head>
<body>
<ul>
<li>
<p id="id1" class="ppp">我是span</p>
</li>
</ul>
</body>
</html>
如果都是直接选中，并且是不同类型的选择器，那么就会按照选择器的优先级来层叠。
id > 类 > 标签 > 通配符(也算直接选中) > 继承 > 浏览器默认（即没有设置任何属性）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
/*打开浏览器依次去掉优先级高的来进行验证*/
#id1 {
color: red;
}
.ppp {
color: green;
}
p {
color: blue;
}
* {
color: yellow;
}
li {
color: #7e1487;
}
</style>
</head>
<body>
<ul>
<li>
<p id="id1" class="ppp">我是span</p>
</li>
</ul>
</body>
</html>
优先级之!important
作用：还有一种不讲道理的!import方式来强制指定的属性的优先级提升为最高，但是不推荐使用。因为大量使用!import的代码是无法维护的。
注意：
1、!important只能用于直接选中，不能用于间接选中。
2、!important只能用于提升被指定的属性的优先级，其他属性的优先级不会被提升。
3、!important必须写在属性值分号的前面。
CSS属性设置
字体属性
font-weight：文字粗细
| 取值 | 描述 |
|---|---|
| normal | 默认值，标准粗细 |
| bord | 粗体 |
| border | 更粗 |
| lighter | 更细 |
| 100~900 | 设置具体粗细，400等同于normal，而700等同于bold |
| inherit | 继承父元素字体的粗细值 |
font-style：文字风格
normal 正常，默认就是正常的
italic 倾斜
font-size：文字大小
注意：通过font-size设置文字大小一定要带单位，即一定要写px。而如果设置成inherit表示继承父元素的字体大小值。
font-family：文字字体
常见字体：
serif 衬线字体
sans-serif 非衬线字体
中文：宋体，微软雅黑，黑体
注意：
1、设置的字体必须是用户电脑里已经安装的字体，浏览器会使用它可识别的第一个值。
2、如果取值为中文，需要用单或双引号扩起来
文字属性简写
/*font-weight: bolder;*/
/*font-style: italic;*/
/*font-size: 50px;*/
/*font-family: 'serif','微软雅黑';*/
简写为:
font: bolder italic 50px 'serif','微软雅黑';
color：文字颜色
| 取值 | 格式 | 描述 |
|---|---|---|
| 英文单词 | color：red; | 大多数颜色都有对应的英文单词描述，但英文单词终究有其局限性:无法表示所有颜色 |
| rgb | color：rgb(255,0,0) | red，green，blue |
| rgba | color：rgba(255,0,0,0.1); | rgba到css3中才推出，比起rgb多了一个a，a代表透明度a取值0-1，取值越小，越透明 |
| 十六进制 | color: #FF0000; | #FFEE00 其中FF代表R，EE代表G，00代表B只要十六进制的颜色每两位都是一样的，那么就可以简写为一个，例如#F00 等同于#FF0000 。 |
文本属性
text-align：规定元素中的文本的水平对齐方式。
| 值 | 描述 |
|---|---|
| left | 左边对齐 默认值 |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |
text-decoration：文本装饰
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本，通常用来去掉a标签的下划线 |
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
| inherit | 继承父元素的text-decoration属性的值。 |
text-indent：首行缩进
p {
text-indent: 64px;
}
line-height：行高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 300px;
height: 300px;
background-color: green;
/*line-height：行高*/
line-height: 300px;
/*text-align：规定元素中的文本的水平对齐方式。*/
text-align: center;
/*text-decoration：文本装饰*/
text-decoration:line-through;
/*text-indent：首行缩进 */
text-indent:10px;
}
</style>
</head>
<body>
<div>
哈哈哈
</div>
</body>
</html>
背景属性
前端的坐标系，原点则是在左上角：
-------------------->x轴
|
|
|
|
|
|
y轴
background-color :设置标签的背景颜色的
background-color: red;
background-color: rgb(0,255,0);
background-color: rgba(0,255,0,0.1);
background-color: #00ffff;
background-image: 设置标签的背景图片
background-image: url("images/2.jpg");
background-image: url("图片网址");
注意：如果图片的大小没有标签的大小大，那么会自动在水平和锤子方向平铺和填充!
background-size :设置标签的背景图片的宽、高
background-size: 300px 300px;
background-size: 100% 100%;
background-repeat:设置标签的背景图片的平铺方式
background-repeat: repeat; #默认值，在垂直和水平方向都重复
background-repeat: no-repeat; #不重复，背景图片将仅显示一次
background-repeat: repeat-x; #背景图片将在水平方向平铺
background-repeat: repeat-y; #背景图片将在垂直方向平铺
background-attachment : 设置标签的背景图片在标签中固定或随着页面滚动而滚动
background-attachment: scroll; #默认值，背景图片会随着滚动条的滚动而滚动
background-attachment: fixed; #不会随着滚动条的滚动而滚动
background-position:控制背景图片的位置
1、具体的方位名词
水平方向：left，center，right
垂直方向：top，center，bottom
如果只设置了一个关键词，那么第二个值就是"center"。
2、百分比
第一个值是水平位置，第二个值是垂直位置。
左上角是 0% 0%。右下角是 100% 100%。
如果只设置了一个值，另一个值就是50%。
3、具体的像素（一定要加px单位）
例如：30px，50px等等
第一个值是水平位置，第二个值是垂直位置。
左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。
如果只设置了一个值，另一个值就是50%。
可以混合使用%和position值。
inherit :设置从父元素继承background属性值
背景属性的值均可以设置为inherit，代表从父元素继承background属性 。
背景属性缩写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 500px;
height: 500px;
/*background-color: red;*/
/*background-image: url("img/1.jpg");*/
/*background-repeat: no-repeat;*/
/*background-position: right bottom;*/
/*background-size: 100px 100px;*/
background: red url("img/1.jpg") no-repeat right bottom/100px 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
背景图片和插入图片的区别
1、背景图片仅仅只是一个装饰，不会占用位置，插入图片会占用位置。
2、背景图片有定位属性，可以很方便地控制图片的位置，而插入图片则不可以。
3、插入图片语义比背景图片的语义要强，所以在企业开发中如果你的图片
想被搜索引擎收录，那么推荐使用插入图片。
CSS精灵图（可以通过浏览器抓包分析：微博，京东都有精灵图）
CSS精灵图是什么？
一个电商网站可能有很多图片，比如有10张图片，这就要求客户端发10次请求给服务端
但其实一次请求的带宽就足够容纳10张图片的大小。精灵图的作用就是用来较少请求次数，以及降低服务器处理压力
如何使用CSS精灵图？
CSS的精灵图需要配合上面说到的背景图片和背景定位来使用。
51万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
