HTML-2.DIV+CSS

发表于 | 分类于 | | 本文总阅读量 次
字数统计: 5k | 阅读时长 ≈ 21

CSS

（Cascading Style Sheets）层叠样式表。用于控制网页数据的表现，实现网页的表现与数据内容分离

通过（标签选择器）找到标签。

通过（element）操作标签对象。

CSS引入方式

行内式

行内式是标记的style属性中设定的css样式，这种方式没有体现出CSS优势，不推荐使用

CSS很多的时候，如果全写在行内的话，耦合性过强

实例：

<p style="background-color:red">this is p title</p>

导入式

在其他文件写好CSS文件，然后使用@import导入样式。

导入式属于CSS代码范畴，数量有限制，有顺序，从上往下，如果文件大，则导入慢。通常用的也不多

实例：

  1. 新建test.css文件
1
2
3
4
5
h1 {
    background-color: red;
    color:white;
    font-size:2px
}
  1. 在<head>标签中导入
1
2
3
4
5
6
<head>
    <style>@import "/path/test.css";</style>
</head>
<body>
	<h1>this is h1 title</h1>
</body>
链接式

类似导入式，在<head>中使用<link>引入样式

链接式属于HTML代码范畴，不限引入次数，通常用于第三方css样式

实例：

新建test.css文件

在<head>中引入

1
2
3
4
5
6
7
<head>
    <link href="/path/test.css" rel="stylesheet">
</head>
<body>
    <h1>this is h1 title</h1>
</body>
#href指定css路径，rel告知游览器是个css文件stylesheet层叠样式
嵌入式

嵌入式就是将css样式集中写在网页中的<head>标签下

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<head>
    p{
    	background-color: red;
    	color: green;
    	font-size: 40px;
    }
    a{
    	text-decoration: none;
    }
</head>
<body>
    <p>this is p tilte</p>
    <a href="www.zhuxyid.com">zhuxyid</a>
</body>

CSS选择器

css选择器（selector）

选择器指明{ } 中的“样式”作用对象，也就是”样式”作用于网页中的那些元素

基本选择器
1
2
3
4
*	普通元素选择器，匹配任何元素
E	标签选择器，匹配任何使用E标签的元素element
#id	id选择器，style里面需要加#id，这里是唯一id
class	class选择器，style需要加classname来调用，class用的最多

基本选择器示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <style>
        *{                    #通用，所有
            color:red;
        }
        p{                    #标签选择，凡是p标签
            color:red;
        }
        #url {                #id选择
            color:red;
        }
        #sina {
            color:red;
        }
        .ppp{                 #class标签
            color:red;
        }
    </style>
</head>
<body>
<p>lalal</p>
<div>lalal</div>
<br>
<a id='url' href="www.baidu.com">baidu</a>     #id名称唯一，这里url其他地方则不能使用
<br>
<a id='sina' href="www.sina.com">sina</a>
<p class="ppp">噗噗噗</p>
</body>
组合选择器
1
2
3
4
5
6
E,F            多元素选择器，同时匹配E元素或者F元素，E和F之间用逗号分隔
E F            后代元素选择器，匹配素有属于E元素后代的F元素，E和F之间空格分隔，这里查找后代，包含子代，孙子代
E>F            子元素选择器，匹配所有E元素的子元素F，这里只匹配儿子带
E+F            毗邻元素选择器，匹配所有紧随E元素之后的同级元素F

通常E,F 和 E F用的较多

嵌套规则

1
2
3
4
块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，他只能包含其他内联元素
注意:有几个特殊的块级元素只能包含内联元素，不能包含块级元素    如h1~h6,p,dt
li内可以包含div
块级元素与块级元素并列，内联元素与内联元素并列

组合选择器示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
通常E,F  和E F 用的多

<head>
    <style>
        div {
            color:green;	<!--将div标签颜色换成green-->
        }
        div.id{				<!--将div的class为id的颜色换成red-->
            color:red;
        }
        #id,div.id{			<!--将id为id和div的class为id的颜色换成salmon-->
            color:salmon;
        }
        div,p{				<!--将div和p标签都颜色换成aquamorine-->
            color:aquamarine;
        }
        .div1 .div2{		<!--匹配class为div1的下的div2颜色换成red，这里在嵌套中体现-->
            color:red;
        }
        .div1 .div2>p{		<!--匹配class为div1下的class为div2的p标签-->
            color: red;
        }
        .div3 + div{		<!--匹配class=div3后div设置颜色为red，如果class为div3的后面有其他标签，那么则不生效-->
            color: red;
        }
    </style>
</head>
<body>
<div class="id">div id</div>
<div class="name">div name</div>
<p id="id">p id</p>
<h6>标题</h6>
<div class="div1">div1
    <div class="div2">div2
        <a href="www.baidu.com">baidu</a><br>
        <div>div</div>
        <p>p</p>
        <div class="div4><p>pp</ppp></div>
    </div>
    <p>ppp</p>
    <div class="div3">div3
    </div>
</div>
<div class='div4'>div4444 </div>
<div>div</div>
<div>divvvv</div>
属性选择器
1
2
3
4
5
6
7
[attr]             #属性为attr
[attr=value]       #属性为attr值为value
div[attr=value]    #div标签的attr值为value
[attr~=value]      #取多个attr中的一个value
[attr^=value]      #attr属性必须开头为value
[attr$=value]      #attr属性必须为结尾的value
[attr*=value]      #attr属性为*value都可以

属性选择器示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<head>
	<style>
        [zhuxy] {		<!--属性为zhuxy的设置颜色为red-->
            color:red;
        }
        [zhuxy="hello"] {	<!--属性为zhuxy并且值为hello设置颜色为red-->
            color:red;
        }
        p[zhuxy] {		<!--p标签的zhuxy属性设置颜色为red-->
            color:red;
        }
        [zhuxy~="sb"] {	<!--zhuxy属性取一个sb值，这里zhuxy中有多个值-->
            color:red;
         }
        [zhuxy^="sdg"] {
            color:red;
         }
    </style>
</head>
<body>
<div>div1</div>
<div zhuxy="shuaige">div2</div>
<div zhuxy="cool">div3</div>
<div zhuxy="hello">div4</div>
<p zhuxy>pppp</p>
<div zhuxy="sb sdg">div5</div>
    <!--这里的sb能找到他，sdg也能找到他-->
<div zhuxy="sdg sb">div5</div>
</body>

CSS伪类

1
2
3
4
link	点击前显示的颜色
visited	点击后显示的颜色
hover	鼠标触摸时的颜色
active	鼠标点击时的颜色

CSS伪类示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<head>
    <style>
        a:link {
            color:red;
        }
        a:visited {
            color:blue;
        }
        a:hover {
            color:green;
        }
        a:active {
            color:yellow;
        }
    </style>
</head>
<body>
    <a href="www.zhuxyid.com">zhuxyid</a>
</body>

CSS优先级

通常优先级顺序如下：

行内式(style) > id > class > div > *

style优先级：1000

id 优先级：100

class优先级：10

div优先级：1

示例1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<head>
    <style>
        .div1 {
            color:red;
        }
        #id1 {
            color:yellow;
        }

        div {
            color:green;
        }

        * {
            color:blue;
        }
    </style>
</head>
<body>
    <div id="id1" class="div1" style="color:salmon">优先级</div>
</body>

示例2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<head>
    <style>
        .div1{
            color: red;
        }

        .div2{
            color: blue;
        }

        .div3{                <!--这里class为10-->
            color: red;
        }

        .div1.div3{           <!--这里两个class，那就是这里优先级高-->
            color: green;
        }
    </style>
</head>
<body>
    <div class="div1">div1
    	<div class="div2">div2
        	<div class="div3">div3
        	</div>
    	</div>
	</div>
</body>

如果加 important 就不属于优先级，直接用important属性

1
2
3
4
5
<style>
    .div {
        color:red!important	<!--优先级最高-->
    }
</style>
优先级总结
  1. 文内样式优先级为1000 ,所以优先级高于外部定义。

这里文内样式执行 如<div style="color:red">blah</div>的样式，而外部定义指定由<link>或者<style>卷标定义的规则

  1. 有!important声明规则高于一切

  2. 如果!important声明冲突，则比较优先级 如果优先级一样，则按照在源码中出现的顺序决定，后来者居上

  3. 由继承而得到的样式没有specificity的计算，他低于一切其他规则，比如全局选择符*定义的规则

CSS继承

继承是css一个主要特性，它是依赖于祖先-后代的关系。继承是一种机制，它允许样式不仅可以应用于某个特定的元素

它可以应用于它的后代，例如一个BODY定义了的颜色值也会应用到段落的文本中

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<head>
    <style>
        body {
            color:red;
        }
    </style>
</head>
<body>
    <p>hello</p>
</body>
<!--这段文字都继承了由`body color:red；样式定义的颜色，然而css继承性的权重是非常低的，是比普通元素的权重要到低的0-->

<style>
    body {
        color: red;
    }
    p {
        color:green;
    }
</style>
<body>
    <p>hello</p>
</body>
<!--发现只需加个颜色值就能覆盖掉它继承的样式颜色，由此可见;任何显示什么的规则都可以覆盖其他继承样式
此外继承是css重要一部分，我们不需要考虑为什么能这样，但css继承也是有限制的，有些属性不能被继承如
border,margin,padding,backgroud等不能被继承-->

CSS属性

颜色属性
1
2
3
4
style=color:red;
style=color:#ffee33
style=color:rgb(255,0,0)       #红绿蓝
style=color:rgba(255,0,0,0.5)  #红绿蓝 透明
字体属性
1
2
3
4
5
font-size:20px|50%|larger         #大小
font-family:'lucida Bright'       #字体
font-weight:lighter|bold|border   #细|粗|正常
font-style:oblique                #字体风格,斜体..
<h1 style="font-style: oblique"></h1>
背景颜色属性
1
2
3
4
5
background-color:red                  #背景颜色
background-img:url('PATH/namg.jpg')   #设置背景图片
background-repeat:no-repeat           #不平铺满，默认是repeat 铺满,repeat-x 横向铺满,repeat-y 纵向铺满
background-position:top left          #顶部左边|center center|中部中部 botton right|底部右边 或者(x% y%) 或者(xpx,ypx)
background:red no-repeat top left url('PATH/name.jpg')    #可以直接定义上面三个
文本属性
1
2
3
4
5
6
7
8
font-size: 10px;               #字体大小
text-align: center:            #横向排列
line-height: 200px;            #文本行高,文字高度加上 上下文的空白区域高度，基于字体大小百分比
vertical-align: -4px;          #设置元素内容的垂直对其方式，只对行内元素有效，对块级无效
text-indent: 150px;            #首行缩进
letter-spacing: 10px           #字符之间空隙10px
word-apacing: 20px             #单词于单词之间距离
text-transform: capitalize;    #单词首字母大写 capitalize|lower
边框属性
1
2
3
4
5
6
7
border-style:solid;		#边框风格solid直线，dashed虚线，none无(默认)dotted点边框,groove凹槽边框，ridge垄装，inherit继承
border-color:charreuse;	#边框颜色
border-width:20px		#边框大小
border-bootom-width		#下边框 border-top-width上边框 border-left-width左边框 border-right-width有边框

#可以简写成
border:solid chartreuse 20px;
列表属性
1
2
list-style-type:none	#无标记 disc 实心圆 circle空心圆 square实心方块 decimal实心数字....
list-style-image:url	#图像列表标记	none无图像 inherit继承
display属性
1
2
3
4
display:none          层不显示,用的很多
display:block         块状显示，在元素后面换行,显示下一个块元素	用于内元素转换块元素
display:inline        内联显示，多个块可以显示在一行内	用于块元素转换内元素
display:inline-block  既有内联属性，又有块级属性

DIV

<div>在整个HTML标记中，没有任何意义，它的存在只是为了引用CSS样式，有一个叫<span>也是类似

不过<span>是内联元素，<div>是块级元素

示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
    <title>div+css布局(div+span) &copy;</title>
    <meta charset="utf-8">
    <style type="">
        div{ background-color:RGB(0,0,0); color:RGB(0,255,0)}
        span{ background-color:RGB(0,0,0); color:RGB(0,255,0) }
    </style>
</head>
<body>
    <div>python 学习   div</div>
    <div>python 学习   div</div>
	<hr>
    <span>python 学习  span</span>
    <span>python 学习  span</span>
</body>
</html>
盒子模型
盒子模型 
1
2
3
4
margin     外边距，控制元素与元素之间距离,margin的最基本用途就是控制元素周边空间的间隔，从视觉上达到相互隔开的目的
padding    用于控制内容与边框之间的距离
border     边框围绕在内边距和内容外的宽度
content    内容，盒子的内容，显示文本图像
盒子属性
1
2
height  盒子高度
width   盒子宽度
margin 外边距属性
1
2
3
4
5
6
7
8
9
10
margin-left
margin-botton
margin-right
margin-top

#可以简写
margin: 10px 20px 30px 40px;  上，右，下，左
margin: 10px 20px 30px;       上，右左，下
margin: 10px 20px;            上下，左右
margin: 10px                  上下左右都是10px
border 内边距属性
1
2
3
4
5
6
7
padding-left
padding-botton
padding-right
padding-top

简写可以设置同上
padding: 10px 20px 30px 40px
示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
	.div1 {
		width:100px;
      	height:100px;
        background-color:antiquewhite;
        border:20px solid red;
        padding-left: 20px;
        margin-bottom:20px;
        opacity:100;<!--透明度-->
    }
    .div2 {
        width:100px;
        height:100px;
        background-color: lightblue;
        border:1px solid orangered;
        margin-top:40px;
        <--如果div1设置20px，div2设置40px,name他们直接距离多少？40px，谁的值大,以谁为准-->
    }
</style>

margin collapse

margin collapse边界塌陷或者说边界重叠

外边距的重叠只产生在普通流文档的上下外边距之间，这个看起来有点奇怪的规则，其实有其现实意义。

设想，当我们上下排列一系列规则的块级元素（如段落P）时，那么块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离。又比如停车场

兄弟div：上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值

父子div：如果父级div中没有 border，padding，inline content(文本)，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline content中的其中一个，然后按此div 进行margin，当然如果border为0px，或者inline content是空字符也不行

float属性
block和inline对比

block：块级元素

  1. block元素通常被显示为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填充满父元素宽度,block元素可以设置width，height，margin，padding属性
  2. 常见块级元素有<div> <form> <p> <pre> <h1~h5> <dl> <ol> <ul>等

inline：内联元素

  1. inline元素不独占一行，多个相邻的行内元素会排列在同一行，知道一行排列不下，才会新换一行，其宽度随元素的内容而变化，

  2. inline元素设置width,height无效,inline元素的margin和padding属性，水平方向的padding-left,padding-right,margin-left,margin-right都会产生边距效果

  3. 但是竖向的padding-top，padding-bottom，margin-top，margin-botton不会产生效果

  4. 常见内联元素有<a> <span> <strong> <em> <lable> <input> <select> <textarea> <img> <br>等
文档流和脱离文档流

所谓文档流，值得是元素排版布局过程中，元素会自动从左往右，从上往下流式排列

脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而定位

只有绝对定位absolute和浮动float才会脱离文档流。

​ 部分无视和完全无视的区别?需要注意的是,使用float脱离文档流时,其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围(可以说是部分无视)

​ 对于使用absolute postition脱离文档流的元素，其他盒子与其他盒子内的文本都会无视他(完全无视)

浮动的表现

浮动的框可以向左向右移动，知道他的外边缘碰到包含框 或 另一个浮动框 的边框位置，由于浮动框不在文档的普通流中，所以文档的普通流中的浮动框之后的块框

表现的就像浮动框不存在一样(注意这里是块框，不是内联元素；浮动框只对她后面的元素造成影响)

当初float被设计的时候就是用来完成文本环绕效果，所以文本不会被挡住，这里float的特性，即float是一种不彻底的脱离文档流方式，无论多么复杂的布局，其基本出发点均是:”如何在一行显示多个div元素”

浮动清除

清楚浮动

1
2
3
4
5
6
7
8
9
clear语法
clear:none  默认值，允许两边都可以有浮动
clear:left  不允许左边有浮动对象
clear:right 不允许右边有浮动对象
clear:both  不允许有浮动对象

注意:
1.clear属性只对自身起作用，而不会影响其他元素，
2.如果一个元素的右侧有一浮动对象，而这个元素设置了不允许右边有浮动对象，即clear:right，则这个元素会自动下移一格，达到本元素右边没有浮动对象的目的。

浮动示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        /*a{*/
            /*padding-left: 40px;*/
            /*margin-left: 20px;*/
        /*}*/
        .div1 {
            width:100px;
            height: 100px;
            background-color: red;
            float:left;
        }
        .div2 {
            width:200px;
            height: 100px;
            background-color: blue;
            float:left;
            clear:left;
        }
        .div3 {
            width:100px;
            height: 200px;
            background-color: green;
            float:left;
        }
        .div4 {
            width:200px;
            height: 200px;
            background-color: yellow;
            float:left;
            clear:left;
        }

    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
</body>
</html>
postition属性
position定位属性

static 默认值，无定位

relative 相对定位

absolute 绝对定位

fixed 固定定位

属性说明
1
2
3
4
5
6
7
8
9
10
11
12
13
14
static
#默认值，无定位，不能当做绝对定位参照物体，并且设置标签对象的left，top不起作用

relative
#relative相对定位，相对定位是相对于该元素在文档流中的原始位置，索引自己原始位置作为参照物,有趣的是 即使设定了元素的相对定位以及偏移值，元素还占有原来的位置，即占据文档流的空间
#对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置，而其层叠通过z-index属性定义

absolute
#绝对定位，设置为绝对定位的元素框从文档流完全删除，并相对最近的已定位祖先元素定位，如果元素没有已定义的祖先元素，那么他的位置相对最初的包含快即(body元素)
#元素原先在正常文档流中所占用的空间会关闭，就像该元素原来不存在一样，元素定位后生成一个块级框，而不论原来他正常流生成任何类型的框

fixed
#固定定位，对象脱离正常文档流，使用top,right,bottom,left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。
#而其层叠通过z-index属性定义，注意:一个元素若设置position:absolute|fixed;则该元素就不能设置float，这是一个常识性的只是，因为这两个不同流，一个浮动流，一个是"定位流",但是relative却可以，因为他原本所占用空间仍然占据文档流

注意

仅使用margin属性布局绝对定位元素

此情况，margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。

另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物

看完了?赏个鸡腿钱,谢谢老板!