CSS全称层叠样式表(Cascading Style Sheets),CSS使得网站可以,创建文档内容清晰地独立于文档表现层,样式表定义如何显示HTML元素,样式通常保存在外部的.css文件中.通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观,由于允许同时控制多重页面的样式和布局,CSS 可以称得上WEB设计领域的一个突破.作为网站开发者,你能够为每个HTML元素定义样式,并将之应用于你希望的任意多的页面中.如需进行全局的更新,只需简单地改变样式,然后网站中的所有元素均会自动地更新.

CSS 的引用方法

直接引用: 直接在HTML标签的后面加上style类型声明即可,多个类型请用分号隔开.

  1. <body>
  2. 	<p style="color: red"> hello lyshark </p>
  3. 	<div style="color: yellow ; background: red"> hello div </div>
  4. </body>

头部引用: 直接在HTML头部使用style类型声明,以下是对div标签进行修改的代码.

  1. <head>
  2.     <style type="text/css">
  3.       .div{
  4.             color:yellow ;
  5.             background:red ;
  6.         }
  7.     </style>
  8. </head>

外部引用: 外部引用是最常用的一种引用方式,就是将CSS与HTML代码分离,方便管理.

  1. <head>
  2. 	<link type="text/css" rel="stylesheet" href="mystyle.css" />
  3. 	<link type="text/css" rel="stylesheet" href="css/style.css" />
  4. 	<link type="text/css" rel="stylesheet" href="//google.com/style.css" />
  5. </head>

导入引用: 此引用方式,有一定的局限性,而且受引用数量的限制,一般不使用,了解即可.

  1. <head>
  2.     <style>
  3.         div {
  4.               background-color: red !important ;
  5.               @import "style.css" ;
  6.               @import "mystyle.css" ;
  7.             }
  8.     </style>
  9. </head>

## CSS 常用选择器

通用选择器: 通用选择器就是使用星号来标注,则会对所有的页面元素生效,也就是全局生效.

  1. <head>
  2. 	<style type="text/css">
  3.         *{
  4.             background: red ;
  5.             color: bisque ;
  6.         }
  7.     </style>
  8. </head>
  10. <body>
  11. 	<div>这是DIV标签</div>
  12. 	<p>这是P标签2</p>
  13. 	<p>这是P标签1</p>
  14. </body>

标签选择器: 比如使用以下方法,就可以使指定的DIV标签进行修改,凡是全局范围的DIV标签都会应用.

  1. <head>
  2.     <style type="text/css">
  3.         div{
  4.             background: red;
  5.             color: bisque;
  6.         }
  7.     </style>
  8. </head>
  10. <body>
  11. 	<div>这是DIV标签1</div>
  12. 	<div>这是DIV标签2</div>
  13. 	<p>这是P标签2</p>
  14. 	<p>这是P标签1</p>
  15. </body>

ID选择器: 以下案例中只对ID=div_id1的标签修改,警号代表ID调用,注意的ID号是唯一的不能够重复.

  1. <head>
  2.     <style type="text/css">
  3.         #div_id1{
  4.             background: red;
  5.             color: bisque;
  6.         }
  7.     </style>
  8. </head>
  10. <body>
  11. <div id="div_id1"> 这是DIV标签1</div>
  12. <div id="div_id2"> 这是DIV标签2</div>
  13. </body>

Class选择器: 以下案例就是类选择器的使用技巧,类选择器一般用句号代表,该类的名称允许重复.

  1. <head>
  2.     <style type="text/css">
  3.         .lyshark{
  4.             background: red;
  5.             color: bisque;
  6.         }
  7.     </style>
  8. </head>
  10. <body>
  11. <div class="lyshark">这是DIV标签
  12.     <div class="lyshark">子标签也会变</div>
  13.     <div class="lyshark">子标签也会变</div>
  14. </div>
  15. </body>

嵌套选择器: 如下嵌套,查找id=outher标签,里面的class=A1,里面的class=B1,将其变成红色.

  1. <head>
  2.     <style type="text/css">
  3.         #outher .A1 .B1{
  4.             color: red;
  5.         }
  6.     </style>
  7. </head>
  9. <body>
  10. <div id="outher">
  11.     <div class="A1"> hello A1
  12.         <div class="B1"> hello B1 </div>
  13.     </div>
  14.     	<div class="A2"> hello A2</div>
  15. </div>
  16. </body>

组合选择器: 组合的意思就是将一些标签组合在一起,让它们使用相同的CSS代码.

  1. <head>
  2.     <style type="text/css">
  3.         div,h1,p{
  4.             color: red;
  5.         }
  6.     </style>
  7. </head>
  9. <body>
  10. 	<div>hello div</div>
  11. 	<h1>hello h1</h1>
  12. 	<p>hello P</p>
  13. </body>

后代选择器: 后代也就是继承的意思,以下所有在h1标签内的em标签中的内容全部变成红色.

  1. <head>
  2.     <style type="text/css">
  3.         h1 em{ color: red; }
  4.     </style>
  5. </head>
  7. <body>
  8. 	<h1> hello <em>lyshark</em> </h1>
  9. 	<p> hello <em>lyshark</em> </p>
  10. </body>

子代选择器: 如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器.

  1. <head>
  2. 	<style type="text/css">
  3. 		h1 > strong {color:red;}
  4. 	</style>
  5. </head>
  7. <body>
  8. 	<h1> hello <strong>lyshrk</strong> <strong>lyshrk</strong> </h1>
  9. 	<h1> hello <em><strong>lyshrk</strong></em> </h1>
  10. </body>

相邻选择器: 通过使用相邻选择器,如下解释,将把h1标签的后面的第一个p标签变成红色.

  1. <head>
  2.     <style type="text/css">
  3.         h1 + p {color: red;}
  4.     </style>
  5. </head>
  7. <body>
  8. 	<h1>This is a heading.</h1>
  9. 	<p>This is paragraph.</p>
  10. 	<p>This is paragraph.</p>
  11. 	<p>This is paragraph.</p>
  12. </body>

属性选择器: 通过属性选择器实现选择指定的标签,过程中可以指定My=lyshark这样的自定义类型.

  1. <head>
  2.     <style type="text/css">
  3.     	[class="mydiv"]{ color: red;}
  4.     	div[My="lyshark"]{color: green;}
  5.     	div[id ^="myid"]{color: yellow;}
  6.     </style>
  7. </head>
  9. <body>
  10.     <div class="mydiv"> hello lyshark </div>
  11.     <div My="lyshark"> hello lyshark </div>
  12.     <div id="myid"> hello lyshark </div>
  13. </body>

伪元素选择器(1): 鼠标经过超链接呈现出不同的状态,或者点击超链接会出现不同的效果.

  1. <head>
  2. 	<style type="text/css">
  3. 		a:link {color: #FF0000}           #鼠标没有碰过的样式
  4. 		a:visited {color: #00FF00}        #已经访问过的链接样式
  5. 		a:hover {color: #FF00FF}          #鼠标放上去的样子
  6. 		a:active {color: #0000FF}         #选择链接时的样式
  7. 	</style>
  8. </head>
  10. <body>
  11. 	<a href="www.baidu.com" target="_blank">这是链接</a>
  12. 	<p>在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后,这样才能生效</p>
  13. 	<p>在 CSS 定义中,a:active 必须位于 a:hover 之后,这样才能生效</p>
  14. </body>

伪元素选择器(2): 伪元素after的功能是在P标签后面添加一行内容,而before功能则是在P标签前添加.

  1. <head>
  2.     <style type="text/css">
  3.         p:after{content:"lyshark";}
  4.         p:before{content:"my";}
  5.     </style>
  6. </head>
  8. <body>
  9. 	<p> ---name--- </p>
  10. </body>

## CSS 常用的属性

颜色属性: 颜色属性,多用于对标签的配置,以下列举的方式为最常用的四种颜色选择方式.

  1. <h1 style="color: red"> 红色的h1标签 </h1>
  2. <h1 style="color: #ff6600"> 橙色的h1标签 </h1>
  3. <h1 style="color: rgb(255,255,0)"> 黄色的h1标签 </h1>
  4. <h1 style="color: rgba(255,20,255,1)"> 紫色的h1标签 </h1>

字体属性: 字体属性用来调节网页中的各种字体的显示效果,包括调节字体大小,类型,状态等.

  1. < ----------------------[设置字体大小]---------------------- >
  2. <h1 style="font-size: 15px"> 设置字体大小15像素 </h1>
  3. <h1 style="font-size: 30%"> 设置全局字体30% </h1>
  4. <h1 style="font-size: larger"> 设置字体格式 </h1>
  6. < ----------------------[设置字体类型]---------------------- >
  7. <h1 style="font-family: 微软雅黑,Serif"> 设置微软雅黑 </h1>
  8. <h1 style="font-family: 华文新魏,Serif"> 设置华文新魏 </h1>
  9. <h1 style="font-family: 新宋体,Serif"> 设置新宋体 </h1>
  11. < ----------------------[设置字体状态]---------------------- >
  12. <h1 style="font-weight: normal">默认值</h1>
  13. <h1 style="font-weight: 100">直接赋值</h1>
  14. <h1 style="font-weight: bold">显示加粗</h1>
  15. <h1 style="font-weight: bolder">显示更粗</h1>
  16. <h1 style="font-weight: lighter">显示更细</h1>
  18. < ----------------------[添加字体阴影]---------------------- >
  19. <h1 style="text-shadow: red 5px 5px 2px;">添加字体阴影</h1>
  20. <h1 style="text-shadow: -5px -5px 2px gray;">向左上角投影</h1>
  21. <h1 style="text-shadow: -5px 5px 2px gray;">向左下角投影</h1>
  23. < ----------------------[其他常用状态]---------------------- >
  24. <h1 style="text-decoration: underline">添加下划线</h1>
  25. <h1 style="text-decoration: line-through">添加批注横批</h1>
  26. <h1 style="text-transform: uppercase">全部字母大写</h1>
  27. <h1 style="text-transform: lowercase">全部字母小写</h1>

背景属性: 背景属性用于控制背景色,背景图片等一些显示格式,还可以控制背景图片的排列方式.

  1. <body style="background-color: red"> 设置背景颜色为红色</body>
  2. <body style="background-size: 30px 50px"> 设置图像大小</body>
  4. <body style="background-position: center;"> 居中显示图片</body>
  5. <body style="background-repeat: no-repeat"> 不重复图片</body>
  6. <body style="background-attachment: fixed"> 固定图片位置</body>
  7. <body style="background-repeat: repeat"> 重复铺满图片</body>
  8. <body style="background-image:url(image.bmp)"> 设置背景图片</body>
  10. <body style="background-repeat: repeat-x"> 向X轴重复</body>
  11. <body style="background-repeat: repeat-y"> 向Y轴重复</body>
  13. <body style="background: 背景颜色 url(图像) 重复 位置"> 简写模式</body>
  14. <body style="background: red url(images/bg.jpg) no-repeat top center"> 简写实例</body>

文本属性: 文本属性用于控制整个段落,或者是整个div元素的显示效果,包括缩进文字对齐等.

  1. < ----------------------[常用文本控制]---------------------- >
  2. <div style="text-indent: 150px"> 行首缩进150像素</div>
  3. <div style="letter-spacing: 10px"> 字符间距10像素</div>
  4. <div style="word-spacing: 20px"> 单行间距20像素</div>
  5. <div style="line-height: 200px"> 控制文本行高</div>
  6. <div style="white-space: nowrap"> 强制不换行,直到遇到br</div>
  8. < ----------------------[文本排列控制]---------------------- >
  9. <div style="text-align: center"> 居中对齐</div>
  10. <div style="text-align: right"> 居右对齐</div>
  11. <div style="text-align: left"> 居左对齐</div>
  12. <div style="direction: rtl"> 文本从左边流入</div>
  13. <div style="direction: ltr"> 文本从右边流入</div>

边框属性: 边框属性用于设置目标对象的边框特征,包括边框颜色,粗细,以及使用线条等.

  1. < ----------------------[常见边框类型]---------------------- >
  2. <div style="border-style: solid">普通边框</div>
  3. none   #无边框            inherit #继承
  4. solid  #直线边框          groove #凸槽边框
  5. dashed #虚线边框          ridge  #垄状边框
  6. dotted #点状边框          inset  #边框
  7. double #双线边框          outset #边框
  9. < ----------------------[常用边框格式]---------------------- >
  10. <div style="border-style: solid;border-width: thin"> 细线边框</div>
  12. px      #固定值的边框     thick   #粗边框     inherit #继承
  13. medium  #中等边框         thin    #细边框
  15. < ----------------------[常用边框颜色]---------------------- >
  16. <div style="border: 10px #ff6600 solid"> 边框简写格式</div>
  17. <div style="border-style: solid;border-radius: 20px"> 椭圆边框</div>
  18. <div style="border-style: solid;border-color: red"> 红色边框</div>
  19. <div style="border-style: solid;border-color: #ff0ff0"> 紫色边框</div>
  20. <div style="border-style: solid;border-color: rgb(255,254,3)"> 黄色边框</div>
  21. <div style="border-style: solid;border-color: rgba(255,254,3)"> 黄色边框</div>

位置属性: 位置属性就是指定元素的位置,它可以用来控制任何网页元素在浏览器文档窗口中的位置.

  1. < ----------------------[位置调节属性]---------------------- >
  2. left:                设置元素左边的水平位置
  3. top:                 设置元素顶部的垂直位置
  4. width:               设置元素显示的宽度像素
  5. height:              设置元素显示的高度像素
  6. z-index:             设置叠层的优先级,常用于模态对话框
  8. < ----------------------[常用定位属性]---------------------- >
  9. position: 用于设定队形的定位方式,分别有以下三种取值.
  10. -> absolute(绝对定位)  精确的定位元素在页面的独立位置,不考虑页面上的其他元素位置.
  11. -> relative(相对定位)  相对定位所设定的位置是相对于元素通常应在的位置的偏移量.
  12. -> static(无特殊定位)  默认方法,使用HTML中通常的定位方法,不用再专门设置元素的位置值.

布局属性: 布局属性用于指定元素在网页中如何放置,主要包括以下几种属性.

  1. < ----------------------[控件显示属性]---------------------- >
  2. visibility: 用于设置元素的可见状态,默认有以下三种属性：
  3. -> inherit  继承父层的显示属性
  4. -> visible  显示在网页中
  5. -> hidden   隐藏指定元素
  7. display: 用于设置元素的可见状态,默认有以下4种属性：
  8. -> block     在元素的前和后都会有换行
  9. -> inline    在元素的前和后都不会有换行
  10. -> list-item 与block相同,但增加了目录列表项标记
  11. -> none      不显示元素,也就是隐藏元素.
  13. < ----------------------[控件其他属性]---------------------- >
  14. clip: 用于绝对定位元素的可视区域,其他的区域隐藏:
  15. -> clip:rect(top,right,bottom,left)
  17. overflow: 设置如果元素中内容超出了元素的大小时如何处理:
  18. -> visible  增加元素的显示空间大小
  19. -> hdden    保持元素的显示大小不变
  20. -> scroll   表示总是显示滚动条
  21. -> auto     超出显示大小才显示滚动条
  23. float: 设置元素是否为浮动模式,可设置左浮动和右浮动:
  24. -> left     表示文本在这个元素的左边
  25. -> right    表示文本在这个元素的右边
  26. -> none     表示这个元素两边不能有空文本
  28. clear: 清除该元素旁边的其他浮动对象,常与float通用:
  29. -> both     表示不允许有浮动的对象
  30. -> none     允许两边都可有浮动对象
  31. -> left     不允许左边有浮动的对象
  32. -> right    不允许右边有浮动的对象
  34. page-break-before:always: 设置打印该元素前是否强制分页
  35. page-break-after:always:  设置打印该元素后是否强制分页

边缘属性: 边缘属性包括元素边界的矩形区域的特征,边缘属性包括margin,padding,width,style.

  1. < ----------------------[3个边界属性]---------------------- >
  2. margin:  设置元素边界与头元素之间的空隙大小.
  3. padding: 设置元素边界与内容之间的空隙大小.
  4. border:  设置元素内间隙与外间隙之间的距离.
  6. < ----------------------[属性与颜色]---------------------- >
  7. border-top-width     指定上边框宽度
  8. border-right-width   指定右边框宽度
  9. border-bottom-width  指定下边框宽度
  10. border-left-width    指定左边框宽度
  12. border-top-color     指定上边框颜色
  13. border-top-style     指定上边框样式

列表属性: 列表属性用于设置列表项标记的类型,列表项图片和位置,以提供灵活列表显示.

  1. list-style-type:none          无标记
  2. -> disc             默认,标记是实心圆
  3. -> circle           标记是空心圆
  4. -> square           标记是实心方块
  5. -> decimal          标记是数字
  6. -> lower-alpha      小写英文字母
  7. -> upper-alpha      大写英文字母
  8. -> decimal-leading-zero  0开头的数字标记
  10. < ------------------------------------------------------- >
  11. list-style-position:inside    列表项目标记放置在文本以内,且环绕文本根据标记对齐
  12. -> outside          默认值,保持标记位于文本的左侧
  13. -> inherit          规定应该从父元素继承list-style-position属性的值
  15. < ------------------------------------------------------- >
  16. list-style-image:URL          图像的路径
  17. -> none             默认无图形被显示
  18. -> inherit          规定应该从父元素继承list-style-image属性的值
  20. 简写方式: list-style:square inside url('./arrow.jpg');

## CSS 之盒子模式

所有的页面的元素都可以看成是一个盒子,占据一定的页面空间,占据的空间要比实际使用的空间要大得多,我们可以调整盒子的边框和距离,来调整盒子(页面和页面中的元素)的位置,盒子模型是由:内容(Content)、边框(Border)、间隙(padding)、外间隔(margin)组成,为了便于理解可以把盒子模型想象成一幅画,content是画本身,padding是画与画框的留白,border是画框,margin是画与画之间距离,他们的关系如下图所示:

盒子演示实例: 盒子的自由定位例子,以下代码配合边框调节,用来练习盒子的自由定位.

  1. <style>
  2.     body{
  3.         margin: 0px;
  4.     }
  5.     #div1{
  6.         background-color: green;
  7.         width: 300px;
  8.         height: 300px;
  9.         border: 1px solid red;
  10.     }
  11.     #div2{
  12.         background-color: yellow;
  13.         width: 100px;
  14.         height: 100px;
  15.         /*margin-top: 100px;*/
  16.         /*margin-left: 100px;*/
  17.         margin: 100px;
  18.     }
  19. </style>
  20. </head>
  21.   <div id="div1">
  22.     <div id="div2"></div>
  23.   </div>
  24. </body>

元素居中设置: 将DIV容器设置到页面的正中心,并可以自动的调整页面的大小,容器中可放内容.

  1. .form-center{
  2.             width: 100px;
  3.             height: 100px;
  4.             position: absolute;
  5.             top: 0;
  6.             right: 0;
  7.             bottom: 0;
  8.             left: 0;
  9.             margin: auto;
  10.         }

脱离文档流居中:

  1. <body>
  2. <style type="text/css">
  3. .center{
  4.     display: block;
  5.     position: fixed;
  6.     _position: absolute;
  7.     top: 50%;
  8.     left: 50%;
  9.     width: 666px;
  10.     height:400px;
  11.     margin-left: -333px;
  12.     margin-top: -200px;
  13.     z-index: 10001;
  14.     box-shadow: 2px 2px 4px #A0A0A0, -2px -2px 4px #A0A0A0;
  15.     background-color: #fff;
  16. }
  17. </style>
  18. <div class="center">
  19. </div>
  20. </body>

元素放置右下角: 将元素放置在屏幕右下角,通过定位position:fixed选项实现这一效果.

  1. .form-right{
  2.     background-color: #5f2dab;
  3.     width: 300px;
  4.     height: 100px;
  5.     position: fixed;
  6.     right: 20px;
  7.     bottom: 10px;
  8.   }

实现页面小尖角: 在页面的指定位置绘制小倒转的尖角符号.

  1. .icon {
  2.     display: inline-block;
  3.     border-top:15px solid red;
  4.     border-right:15px solid transparent;
  5.     border-bottom:15px solid transparent;
  6.     border-left:15px solid transparent;
  7. }

float浮动模式: 通过使用float:left选项,使元素自动浮动在其他标签之上,可设置浮动的位置,使用clear清理格式.

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <style>
  4.         .outer{
  5.             background-color: green;
  6.         }
  7.         .menu1{
  8.             background-color: blue;
  9.             width: 100px;
  10.             height: 20px;
  11.             float: left;
  12.         }
  13.         .menu2{
  14.             background-color: yellow;
  15.             width: 100px;
  16.             height: 20px;
  17.             float: left;
  18.         }
  19.         .clear{
  20.             clear: both;
  21.         }
  22.     </style>
  23. </head>
  25. <body>
  26. <div class="outer">
  27.     <div class="menu1">菜单1</div>
  28.     <div class="menu2">菜单2</div>
  29.     <div class="clear"></div>           <!--撑起来,让上面的标签浮动且不覆盖里面的内容-->
  30. </div>
  31.     <div class="bottom" style="background-color: aquamarine">底部菜单</div>
  32. </body>

后台布局: 最后一个简单的后台布局.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         * {
  8.             margin:0;
  9.         }
  10.         .pg-header {
  11.             height:48px;
  12.             background-color: #2459a2;
  13.         }
  14.         .pg-body .body-menu{
  15.             position: absolute;
  16.             top:48px;
  17.             left:0;
  18.             bottom:0;
  19.             width:200px;
  20.             background:red;
  21.         }
  22.         .pg-body .body-content{
  23.             position: absolute;
  24.             top:48px;
  25.             left:210px;
  26.             right:0;
  27.             background:green;
  28.             /*开启下面,滚动条不变*/
  29.             /*bottom:0;*/
  30.             /*overflow: auto;*/
  31.         }
  32.     </style>
  33. </head>
  35. <body>
  36.     <div class="pg-header"></div>
  37.     <div class="pg-body">
  38.         <div class="body-menu"></div>
  39.         <div class="body-content">
  40.           <h1>hello world </h1>
  41.         </div>
  42.     </div>
  43.     <div class="pg-heaher"></div>
  44. </body>
  45. </html>

Web前端开发CSS基础的更多相关文章

  1. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  2. Web前端开发css基础样式总结

    颜色和单位的使用    颜色        用颜色的名字表示颜色,比如:red        用16进制表示演示 比如:#FF0000        用rgb数值表示颜色,rgb(红,绿,蓝),每个值 ...

  3. 1+x 证书 Web 前端开发 css 专项练习

    官方QQ群 1+x 证书 Web 前端开发 css 专项练习 http://blog.zh66.club/index.php/archives/192/

  4. web前端开发CSS命名规范参考

    做为一个web前端工程师,每天接触HTML.css就像吃饭一样,但是作为一名合作.优秀的web前端工程师,对DIV+CSS命名还是有一定的规范的,本文整理了一份web前端开发中DIV+CSS各种命名规 ...

  5. Web前端开发CSS规范总结

    作为Web前端开发必备语言,CSS为大家广为熟知,今天就跟大家分享下CSS规范总结,Web前端的小伙伴们看过来吧! CSS样式的权值(权重) 权值等级的定义 第一等:代表内联样式,如: style=” ...

  6. Web前端温故知新-CSS基础

    一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...

  7. web前端开发——css

    一.css介绍 1.css是什么? Cascading Style Sheets缩写,层叠样式表.样式定义如何显示HTML元素,样式通常又会存在于样式表中. 2.为什么需要css? 使HTML页面变得 ...

  8. Web前端开发HTML基础

    HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记),相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器根据标 ...

  9. 好程序员web前端分享CSS基础篇

    学习目标 1.CSS简介 2.CSS语法 3.样式的创建 4.两种引入外部样式表的区别 5.样式表的优先级和作用域 6.CSS选择器 7.选择器的权重 8.浮动属性的简单应用 9.HTML.CSS注释 ...

随机推荐

  1. 2016 Multi-University Training Contest 1 部分题解

    第一场多校,出了一题,,没有挂零还算欣慰. 1001,求最小生成树和,确定了最小生成树后任意两点间的距离的最小数学期望.当时就有点矛盾,为什么是求最小的数学期望以及为什么题目给了每条边都不相等的条件. ...

  2. JS高级_数据类型

    1.分类: a.基本(值)类型: * String :任意字符串 * Number :任意数字 * boolean : true/false * undefined :undefined * null ...

  3. 空指针/0/NULL

    空指针/0/NULL 空指针是一个被赋值为0的指针,在没有被具体初始化之前,其值为0. NULL 是一个标准规定的宏定义,用来表示空指针常量. #define NULL 0   或者 #define ...

  4. nginx 错误集锦

    1)下载地址 http://nginx.org/en/download.html 找windows的下载. 2)然后解压到自己的一个目录. 3)配置环境变量,将解压到的路径加进去. 4)修改配置文件 ...

  5. Django之通用视图

    01-介绍 通用视图把视图开发中常用的写法和模式抽象出来,让你编写少量代码就能快速实现常见的数据视图.显示对象列表就是这样一种任务. Django 自带的通用视图能实现下述功能: 1.列出对象并显示单 ...

  6. Jmeter使用实践-接口diff测试

    Jmeter使用实践-接口diff测试 大多数人都使用 Jmeter 做过性能测试,但是在使用的过程中你会发现,它不仅可以做性能测试和功能测试,还能够满足基本的接口测试需求. 相比其他工具,Jmete ...

  7. Jmeter使用实践- 基础介绍

    Jmeter使用实践- 基础介绍 随着市场上推出越来越多的测试工具,大家使用起来也比较盲目,就我个人而言,使用过LoadRunner和Jmeter 很多人倾向于LoadRunner,因为LR的功能更强 ...

  8. JAVA 基础编程练习题9 【程序 9 求完数】

    9 [程序 9 求完数] 题目:一个数如果恰好等于它的因子之和,这个数就称为"完数".例如 6=1+2+3.编程找出 1000 以内的 所有完数. package cskaoyan ...

  9. 安装flanal报错解决

    1.:Error registering network: failed to acquire lease: node "test4" pod cidr not assigned ...

  10. 【Zookeeper】本地模式安装

    安装步骤 上传gz包 通过rz命令,将zookeeper-3.4.10.tar.gz安装包上传到/opt/soft/文件夹下. [root@bigdata111 soft]# rz [root@big ...