py第五十一天11.16
有id不比class，有class不比较p标签...
优先级从高到低顺序：
!import //去掉所有规则，最优先使用本条渲染。
id //100高
class //10
element //1低
继承的权限最低
如果有多个属性组合的情况，以属性优先级分值相加比较；相同的分值，以后加载的显示。
内联标签没法设置长、宽。
margin：0 auto
0顶头，auto：左右居中
前端基础知识之CSS：
语法：
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector {
property: value;
property: value;
property: value
}
例如：
h1 {color:red; font-size:14px;}
一、CSS的四种引入方式
1 行内式
行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。
<p style=" font-family: 'Courier New'; background-color: rgb(244, 244, 244);">>hello yuan</p>
2 嵌入式
嵌入式是将CSS样式集中写在网页的<head></head>标签对里的<style></style>标签对中。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
#2b99ff;
}
</style>
</head>
3 链接式
将一个.css文件引入到HTML文件中(link标签也是在<head>标签中)。
<link href="mystyle.css" rel="stylesheet" type="/text/a.css">
4 导入式
将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中。
<style type="text/css">
@import"mystyle.css"; 此处要注意.css文件的路径
</style>
缺点：导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。
二、CSS选择器
1 基本选择器
2 组合选择器
E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 :div,p { color:#f00; }
E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 :li a { font-weight:bold;｝
E > F 子元素选择器，匹配所有E元素的子元素F :div > p { color:#f00; }
E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F :div + p { color:#f00; }
E ~ F 普通兄弟选择器（以破折号分隔） :.div1 ~ p{font-size: 30px; }
注意⚠️关于标签嵌套：
一般，块级元素可以包含内联元素或某些块级元素；但内联元素不能包含块级元素，它只能包含其它内联元素。需要注意的是，p标签不能包含块级标签。
3 属性选择器
4 选择器的优先级
所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。
【样式表中的特殊性描述了不同规则的相对权重】
优先级由高到低：!important > <img style='color:red'> > #id > .class > p > 继承
它的基本规则是：
(1) 内联样式表的权值最高 style=""－－－－－－－－－－－－1000；
(2) 统计选择符中的ID属性个数。 #id －－－－－－－－－－－－－－100
(3) 统计选择符中的CLASS属性个数。 .class －－－－－－－－－－－－－10
(4) 统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－-－1
按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。
⚠️：
文内的样式优先级为1,0,0,0，所以始终高于外部定义。 有!important声明的规则高于一切。 如果!important声明冲突，则比较优先权。 如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。 由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。
三、CSS属性
1 css text 属性
(1) 文本颜色属性值
颜色属性是用来设置文字的颜色。
p { color: rebeccapurple; }
三种方式：
- 颜色的名称：red
- RGB值：RGB(255,255,0)
- 十六进制值：#FF0000
(2)水平对齐方式属性
text-align 属性规定元素中的文本的水平对齐方式。
- left -把文本排列到左边。默认：(浏览器决定)
- right -把文本排列到右边。
- center -把文本排列到中间。
- justify -使文本两端对齐
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css</title> <style> h2 {text-align:center;} //水平居中 p.publish_time {text-align:right;} p.content {text-align:justify;} </style> </head> <body> <h1>CSS text-align 水平居中</h1> <p class="publish_time">2017 年 5 月 17 号</p> <p class="content"> 有个落拓不得志的中年人每隔三两天就到教堂祈祷，而且他的祷告词几乎每次都相同。第一次他到教堂时， 跪在圣坛前，虔诚地低语：“上帝啊，请念在我多年来敬畏您的份上。让我中一次彩票吧！阿门。” 到了最后一次，他跪着：“我的上帝，为何您不垂听我的祈求？让我中一次彩票吧！
就在这时，圣坛上发出一阵宏伟庄严的声音：“我一直垂听你的祷告。可是最起码？你也该先去买一张彩票吧!”</p> <p><b>注意：</b> 重置浏览器 窗©口大小查看 "justify" 是如何工作的。</p> </body> </html>
(3)文本的其他属性
/* font-size: 10px; 设置字体大小 line-height: 200px; 文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比 vertical-align:－4px 设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效 text-decoration:none text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线 font-family: 'Lucida Bright' font-weight: lighter/bold/border/ font-style: oblique text-indent: 150px; 首行缩进150px letter-spacing: 10px; 字母间距 word-spacing: 20px; 单词间距 text-transform: capitalize/uppercase/lowercase ; 文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大写 */
2 背景属性
- background-color
- background-image
- background-repeat
- background-position
background-color: cornflowerblue
background-image: url('1.jpg');
background-repeat: no-repeat;(repeat:平铺满)
background-position: right top（20px 20px）;
总体简写：
background:#ffffff url('1.png') no-repeat right top;
3 边框属性
- border-width
- border-style (required)
- border-color
border-style: solid; 实心
border-color: chartreuse;
border-width: 20px;
总体简写：
border: 30px rebeccapurple solid;
单独设置各边框：
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
4 列表属性
list-style-type 指定列表项标志的类型。
list-style-image 使用图象替换列表项的标志。
list-style-position 设置列表中列表项标志的位置。
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
例：
ul { list-style-type: square; }
ul { list-style-image: url('') }
5 display属性
- none
- block
- inline
- inline-block
描述：
js语法：object.style.display="inline"
例如：
none（隐藏某标签）
p { display: none; }
block（内联标签设置为块级标签）
span { display: block; }
inline（块级标签设置为内联标签）
li { display: inline; }
inline-block
display:inline-block可做列表布局，其中的类似于图片间的间隙小bug可以通过如下设置解决。
#outer { border: 3px dashed;
word-spacing: -5px; }
注意与visibility:hidden的区别：
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
6 外边距（margin）和内边距（padding）
- margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
- padding: 用于控制内容与边框之间的距离；
- Border(边框): 围绕在内边距和内容外的边框。
- Content(内容): 盒子的内容，显示文本和图像。
(1) margin(外边距)
单边外边距属性：
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
(盒子)居中：
margin: 0 auto;
外边距总体简写：
margin:10px 20px 20px 10px； 上边距为10px 右边距为20px 下边距为20px 左边距为10px margin:10px 20px 10px; 上边距为10px 左右边距为20px 下边距为10px margin:10px 20px; 上下边距为10px 左右边距为20px margin:25px; 所有的4个边距都是25px
(2) padding(内边距)
设置同margin。
实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer{ margin: 0 auto; width: 80%; } .content{ background-color: darkgrey; height: 500px; } a{ text-decoration: none; } .page-area{ text-align: center; padding-top: 30px; padding-bottom: 30px; background-color: #f0ad4e; } .page-area ul li{ display: inline-block; } .page-area ul li a ,.page-area ul li span{ display: inline-block; color: #369; height: 25px; width: 25px; text-align: center; line-height: 25px; padding: 8px; margin-left: 8px; border: 1px solid #e1e1e1; border-radius: 15%; } .page-area ul li .page-next{ width: 70px; border-radius:0 } .page-area ul li span.current_page{ border: none; color: black; font-weight:900; } .page-area ul li a:hover{ color: #fff; background-color: #2459a2; } </style> </head> <body> <div class="outer"> <div class="content"></div> <div class="page-area"> <ul> <li><span class="current_page">1</span></li> <li><a href="#" class="page-a">2</a></li> //href="#",#表示超链接停留在当前页面，点击不做跳转动作。 <li><a href="#" class="page-a">3</a></li> <li><a href="#" class="page-a">4</a></li> <li><a href="#" class="page-a">5</a></li> <li><a href="#" class="page-a">6</a></li> <li><a href="#" class="page-a">7</a></li> <li><a href="#" class="page-a">8</a></li> <li><a href="#" class="page-a">9</a></li> <li><a href="#" class="page-a">10</a></li> <li><a href="#" class="page-a page-next">下一页</a></li> </ul> </div> </div> </body> </html>
7 float属性
(1) 基本浮动规则:
先来了解一下block元素和inline元素在文档流中的排列方式。
block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性；
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width、height属性无效
- 常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
- 常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等
所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。此外，浮动的框之后的block元素元素会认为这个框不存在，但其中的文本依然会为这个元素让出位置。 浮动的框之后的inline元素，会为这个框空出位置，然后按顺序排列。
overflow :hidden
overflow属性值有:(visible\hidden\scroll\auto)
|
visible
|
内容不会被修剪，会呈现在元素框之外。
|
|
hidden
|
内容会被修剪，但是浏览器不会显示供查看内容的滚动条。
|
|
scroll
|
内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
|
|
auto
|
由浏览器决定如何显示。如果需要，则显示滚动条。
|
⚠️：注意和display:none隐藏属性的区别。
课堂图片下载：
1
2
3
4
5
6
7
8
9
10
11
