路飞学城Python-Day46

16-如何正确的使用类选择器及总结

一般情况下尽量不要去使用id选择器，因为id选择器有很大的限制性，id一般都是JS配合使用的，类选择器都是和CSS配合使用的，特殊性情况可以用id选择器。

类的使用想要用好首先要找共有的属性

一定要有“公共类”的概念，不要试图用一个类去写所有的属性，标签要携带多个类，共同设置标签的样式，每个类要尽可能的小，最好只有一个样式

17-高级选择器

名称	说明
并集选择器	多个选择器通过逗号连接而成，同时声明多个风格相同样式
交集选择器	由两个选择器连接而成，选中二者范围的交集，两个选择器之间不能有空格，第一个必须是标签选择器，第二个必须是类先择期或者ID选择器
后代选择器	外层的选择器写在前面，内层的选择器写在后面，之间空格分隔标签嵌套时，内层的标签称为外层标签的后代
子元素选择器	通过>连接在一起而构成，仅作用于子元素
属性选择器	选取带有指定属性的元素，或选取带有指定属性和值的元素

18-属性选择器

属性选择器是CSS3中的新的选择器，之前的选择器都是CSS2中的

属性选择器通常使用在表单控件中比较频繁

找到所有title属性等于hello的元素：

[title="hello"] {

color: red;

}

找到所有title属性以hello开头的元素：

[title^="hello"] {

color: red;

}

找到所有title属性以hello结尾的元素：

[title$="hello"] {

color: red;

}

找到所有title属性中包含（字符串包含）hello的元素：

[title*="hello"] {

color: red;

}

找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：

[title~="hello"] {

color: red;

}

19-伪类选择器(a标签的爱恨原则)

伪类选择器就是CSS3中的选择器，一般是用在a标签上

<!DOCTYPE html>

<head>

<title>伪类选择器</title>

<style>

/*没有被访问的a标签的样式*/

/*div ul li[class='item1'] a:link{*/

/*color: green;*/

/*}*/

/*访问过后的链接样式*/

/*div ul li[class='item2'] a:visited{*/

/*color: green;*/

/*}*/

/*鼠标悬浮的时候改变*/

/*div ul li[class='item3'] a:hover{*/

/*color: green;*/

/*}*/

/*鼠标选中后的样式*/

/*div ul li[class='item4'] a:active{*/

/*color: green;*/

/*}*/

</style>

</head>

<body>

<ul>

</li>

<a href="https://www.processon.com">processon</a>

</li>

</li>

</li>

</ul>

</div>

</body>

</html>

20-伪类选择器(nth-child用法)

没有访问的超链接a标签样式：

a:link {

color: blue;

}

访问过的超链接a标签样式：

a:visited {

color: gray;

}

鼠标悬浮在元素上应用样式：

a:hover {

background-color: #eee;

}

鼠标点击瞬间的样式：

a:active {

color: green;

}

input输入框获取焦点时样式：

input:focus {

outline: none;

background-color: #eee;

}

<!DOCTYPE html>

<head>

<title>伪类选择器</title>

<style>

/*没有被访问的a标签的样式*/

/*div ul li[class='item1'] a:link{*/

/*color: green;*/

/*}*/

/*访问过后的链接样式*/

/*div ul li[class='item2'] a:visited{*/

/*color: green;*/

/*}*/

/*鼠标悬浮的时候改变*/

/*div ul li[class='item3'] a:hover{*/

/*color: green;*/

/*}*/

/*鼠标选中后的样式*/

/*div ul li[class='item4'] a:active{*/

/*color: green;*/

/*}*/

/*选择标签内的子类*/

/*div ul li:nth-child(1){*/

/*color: green;*/

/*}*/

div ul li:nth-child(2n-1){

color: green;

font-size: 30px;

}

</style>

</head>

<body>

<ul>

</li>

<a href="https://www.processon.com">processon</a>

</li>

</li>

</li>

</ul>

</div>

</body>

</html>

21-伪元素选择器

伪元素选择器中的before和after是经常用到的选择器

<!DOCTYPE html>

<head>

<title>伪元素选择器</title>

/*选中当前的第一个首字母,设置样式*/

/*p:first-letter{*/

/*color: red;*/

/*}*/

/*通常和content联合使用，使用不是很频繁*/

/*p:before{*/

/*content: 'panda';*/

/*color: red;*/

/*}*/

/*和content联合使用，使用很频繁*/

/*p:after{*/

/*content: '伪类选择器，在标签后加内容'和布局有很大关联（清除浮动）;*/

/*font-size: 28px;*/

/*}*/

</style>

</head>

<body>

<p>

这是一个段落

</p>

</body>

</html>

22-css的继承性

<!DOCTYPE html>

<head>

<title>CSS继承性</title>

/*继承的属性有一些是可以继承的*/

div[class='father']{

color: red;

background-color: green;

}

</style>

</head>

<body>

<!--继承：给父级设置一些属性，子级继承了父级的该属性，这是CSS中的继承

有一些属性可以继承下来 color font text line 文本的元素

像一些盒子元素，定位的元素(浮动，绝对定位，固定定位)不能继承-->

</div>

</body>

</html>

23-css的层叠性

层叠性：权重大的标签覆盖权重小的标签

<!DOCTYPE html>

<head>

<title>CSS层叠性</title>

#box{

color: green;

}

.container{

color: red;

}

color: yellow;

}

</style>

</head>

<body>

<!--CSS是具有权重性的，谁的权重大就选择谁

如何判断谁的权重大？

id的数量，class的数量，标签的数量

-->

<p id="box" class="container">颜色的显示(层叠性)</p>

</body>

</html>

24-css权重比较

25-层叠性权重相同处理和继承的权重为0

总结：先看有没有被选中，如果选中了，就数数(id,class,标签数量)谁的权重大，就显示谁的属性

如果没有被选中，继承的属性权重为0

如果属性都是继承下来的，权重都是0，以就近原则，描述距离标签近的就显示，就近原则一样时选择权重

<!DOCTYPE html>

<head>

<title>层叠性权重处理</title>

/*权重111*/

#box1 .wrap2 p{

color: red;

}

/*权重111*/

#box2 .wrap3 p{

color: yellow;

}

</style>

</head>

<body>

<p>颜色展示层叠性</p>

</div>

</body>

</html>

26-!important属性介绍

<!DOCTYPE html>

<head>

color: red;

font-size: 30px;

}

.spe1{

color: yellow!important;

font-size: 40px;

}

.spe2{

color: green;

font-size: 50px;

}

</style>

</head>

<body>

<div>

<p class="spe1 spe2">1.多个类的选择顺序</p>

<p class="spe2 spe1">2.多个类的选择顺序</p>

</div>

</body>

</html>

27-盒模型介绍

浏览器里显示的所有的标签都被看做是一个盒子

Margin(外边距) - 清除边框外的区域，外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

Content(内容) - 盒子的内容，显示文本和图像。

28-盒模型五个属性介绍

在网页中都是用方框实现的

width：内容的宽度，而不是整个盒的宽度

height：内容的高度，而不是整个盒的高度

Margin(外边距) - 清除边框外的区域，外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

Content(内容) - 盒子的内容，显示文本和图像。

29-盒模型的计算

<!DOCTYPE html>

<head>

#space{

width: 200px;

height: 200px;

padding: 20px;

margin: 1px;

border: 5px solid red;

}

#box{

width: 400px;

height: 400px;

padding: 0;

border: 1px solid red;

}

</style>

</head>

<body>

</div>

</div>

</body>

</html>

30-认识padding

padding就是内边距，padding的区域是有背景颜色的，并且背景颜色和内容区域颜色一样

也就是说background-color这个属性将填充所有的border以内的区域

padding是有四个方向的，能够分别描述四个方向的padding

描述padding方向的方法有两种

1.写小属性

2.写综合属性，用空格隔开

<!DOCTYPE html>

<head>

<title>padding</title>

.box{

width: 300px;

height: 300px;

/*小属性限制*/

/*padding-left: 20px;*/

/*padding-right:10px ;*/

/*padding-top: 15px;*/

/*padding-bottom: 12px;*/

/*综合属性，用空格隔开，顺序是上右下左的顺时针方向*/

/*padding: 10px 20px 30px 40px;*/

/*综合属性，用空格隔开，顺序是上->左右->下*/

/*padding: 10px 20px 30px;*/

/*综合属性，用空格隔开，顺序是上下->左右*/

/*padding: 10px 40px;*/

border: 5px red solid;

}

</style>

</head>

<body>

内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

</div>

</body>

</html>

31-清除某些标签默认的padding

<!DOCTYPE html>

<head>

<title>清除默认padding标签</title>

/*使用*清除所有的默认边距是有问题的，*的效率很低，底层是在遍历标签*/

/**{*/

/*padding: 0;*/

/*margin: 0;*/

/*}*/

/*最好的使用方法就是使用并集选择器的清除默认的样式表*/

/*百度搜索reset.css*/

/*引入reset.css文件去清除所有的默认标签*/

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

</style>

</head>

<body>

<ul>

</ul>

</body>

</html>

32-认识border

<!DOCTYPE html>

<head>

<title>border认识</title>

/*如果边框的颜色不写，默认颜色就是黑色的*/

/*如果不写粗细，只有solid，就默认边框是3px，黑色*/

.box{

width: 200px;

height: 200px;

border: green 5px solid;

/*按照三要素拆分*/

/*border-width: 5px;*/

/*border-color: yellow;*/

/*border-style: dashed;*/

/*按照方向分*/

/*border-top-width: 10px;*/

/*border-left-width: 20px;*/

/*border-right-width: 30px;*/

/*border-left-style: dashed;*/

}

</style>

</head>

<body>

</div>

</body>

</html>

33-使用border制作三角形

<!DOCTYPE html>

<head>

.box{

width: 0;

height: 0;

border-top: 20px solid red ;

border-left: 20px solid transparent;

border-right: 20px solid transparent;

}

</style>

</head>

<body>

</div>

</body>

</html>

34-简单认识一下margin

<!DOCTYPE html>

<head>

<title>margin</title>

padding: 0;

margin: 0;

}

.box{

width: 300px;

height: 300px;

border:1px solid red;

background-color: green;

margin: 20px;

}

</style>

</head>

<body>

</div>

</body>

</html>

35-标准文档流的介绍

<!DOCTYPE html>

<head>

<title>标准文档流</title>

</head>

<body>

</body>

</html>

36-标准文档流下的微观现象

37-行内元素和块级元素转换

HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。

常用的块状元素：

常用的行内元素

常用的行内块状元素：

块级元素特点：display:block;

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。独占一行

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

行内元素特点：display:inline;

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

行内块状元素的特点：display:inline-block;

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置

我们可以通过display属性对块级元素、行内元素、行内块元素进行转换，为后面页面布局做好了准备。

<!DOCTYPE html>

<head>

<title>块级元素和行内元素</title>

/*display:inline 就是块级元素转换为行内元素*/

/*display:block 就是行内元素转换为块级元素*/

/*display:inline-block:就是将块级元素转换为行内块元素*/

/*display:none 隐藏当前的标签，不再占页面空间*/

/*visibility: hidden 隐藏当前的标签，仍然占页面空间*/

.box1{

display: inline;

width: 200px;

height: 50px;

border: 1px red solid;

}

.box2{

margin-top: 20px;

width: 200px;

height: 50px;

border: 1px green solid;

}

</style>

</head>

<body>

<div class="box1">div标签1</div>

<div class="box2">div标签2</div>

</body>

</html>

38-布局属性-浮动介绍

如果想制作网页就是要通过浮动实现并排的标签

<!DOCTYPE html>

<head>

margin: 0;

padding: 0;

}

.box1{

width: 300px;

height: 300px;

background-color: #666666;

float: left;

}

.box2{

width: 400px;

height: 400px;

background-color: #123456;

}

</style>

</head>

<body>

</body>

</html>

39-浮动元素脱标

<!DOCTYPE html>

<head>

<title>浮动元素脱标</title>

margin: 0;

padding: 0;

}

.box1{

width: 200px;

height: 200px;

background-color: #666666;

float: left;

}

.box2{

width: 400px;

height: 400px;

background-color: #123456;

}

span{

background-color: forestgreen;

float: left;

width: 200px;

height: 100px;

}

</style>

</head>

<body>

<!--浮动的盒子就是脱离了标准文档流

不浮动的盒子就会渲染到原来不设置浮动盒子的位置

-->

<span>span标签</span>

</body>

</html>

40-浮动元素互相贴靠

<!DOCTYPE html>

<head>

<title>浮动元素互相贴靠</title>

/*span{*/

/*background-color: red;*/

/*float: left;*/

/*}*/

.box1{

width: 150px;

height: 400px;

background-color: red;

float: left;

}

.box2{

width: 100px;

height: 200px;

background-color: green;

float: left;

}

.box3{

width: 300px;

height: 300px;

background-color: yellow;

}

</style>

</head>

<body>

<!--如果父元素有足够的空间，那么元素之间是互相贴靠的，

如果父元素没有足够的空间，就会一直贴着最靠近的边去变化-->

</body>

</html>

41-浮动元素字围效果

<!DOCTYPE html>

<head>

padding: 0;

margin: 0;

}

div{

float: left;

}

</style>

</head>

<body>

<div>

</div>

<p>

123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字

文字文字文字文字文字文字文字文字文字文字文字文字文字文字

文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字