还剩24页未读，继续阅读
本资源只提供10页预览，全部文档请下载后查看！喜欢就下载吧，查找使用更方便
文本内容:
less是什么
1.1css■指层叠样式表CSS CascadingStyle Sheets■样式定义如何显示元素HTML样式普通存储在样式表文献、区域】中Less CSS把样式添加到中，是为理解决内容与体现分离问题HTML
4.0外部样式表可以极大提高工作效率外部样式表普通存储在文献中CSS各种样式定义可层叠为一作用
1.2css■样式表解决了内容与体现分离html■使用样式表极大提高了工作效率书写规则
1.3css本语法■规则重要由两某些构成选取器.一条或多条属性声明Css L2■选取器重要作用是为了拟定需要变化样式元素HTMLheadmeta charset=UTF-8style type=text/css divdiv#pl{width:100px;height:100px;border:lpx soLidgray;}/style^/headbodydivdivp id=3我爱CSS+DIV/p/divdivp我爱CSS+DIV/p/div/div/body属性
1.6CSS字体■字体属性定义文本字体系歹大小，加粗，风格（如斜体）和变形（如小型大写字母）Css U,■惯用属性❖font:简写属性,作用是把所有针对字体属性设立在一种声明中[style sizefamily]❖font-fa mi ly:定义字体系列定义字体尺寸font-size:❖font-style:定义字体风格headmeta charset=UTF-8”style type=ntext/css#P2/*font-family:黑体；font-size:32px;font-style:italic;*/font:itaLic32px黑体；}@/style/headbodyp id=3只要我坚持，一定会有收获hello/pp id=p2只要我坚持,一定会有收获heUo/p/body文本■文本属性可定义文本外观通过文本属性,您可以变化文本颜色、字符间距,对齐文CSS本，装饰文本，对文本进行缩进,等等■惯用属性定义文本颜色♦color:定义文本对齐方式text-align:❖letter-spacing:定义字符间隔head只要我坚持，一定会有收获meta charset=,,t/TF-3,,hellostyle type=text/css只要我!即2{color:btue;text-align:right;letter-spacing:5px;|}/style/headbody〃只要我坚持，一定会有收获〈/p id=p Thello p〃〃只要我坚持，一定会有收获〈/p id=p2hello p/body背景■容许应用纯色作为背景,也容许使用背景图像创立相称复杂效果在这方面能力远CSS CSS远在之上HTML■惯用属性简写属性，作用是将背景属性设立在一种声明中background:定义背景颜色♦background-color:定义背景图片♦background-image:定义背景图片起始位置【】♦background-position:left,center,right定义背景图片与否及如何重复background-repeat:headmeta charset=UTF-8”style type=text/cssn#P2{background-color:blue;background-image:urLrimages/ml.png;background-position:center;background-repeat:no-repeat;/*repeat」repeat-x,re|width:400px;height:400Px;}/style/headbodyp id=RT只要我坚持，一定会有收获hello〈/pp id=p2只要我坚持,一定会有收获hello/p/body尺寸■尺寸属性容许你控制元素高度和宽度CSS Dimension■惯用属性❖width:设立元素宽度设立元素高度height:列表■列表属性容许你放置、变化列表项标志，或者将图像作为列表项标志CSS■惯用属性简写属性用于把所有用于列表属性设立于一种声明中list-style:定义列表项标志为图象list-style-image:❖list-style-position:定义列表项标志位置定义列表项标志类型I ist-sty le-ty pe:Xhead基础“Javametacharset=UTF-8”〉3〈style type=ntext/css u\$JavaWeb，框架li{JavaEEborder:lpx soLidgray;，企业项目/*list-style-type:square;list-style-image:urlimages/forward.gif;list-style-position:inside;*/list-style:inside urLtmages/forward・gif11；}/style/headXbodyXulliJavaS5tb/liliJavaWeb/li框架OJavaEE/li企业项目li/li/ul/body表格表格属性可以协助您极大地改进表格外观■css■，惯用属性定义与否把表格边框合并为单一边框♦border.collapse:定义分隔单元格边框距离border-spacing:定义表格标题位置♦caption-side[top,bottom]headmeta charset=UTF-8名字年龄style type=text/csstable{/*border-collapse:collapse;*//*定义是否把表格边框合并为单一c叩tion-side:bottom;/*定义表格标题的位置*/张三|40border-spacing:13px;/*定义分隔单元格边框的距离*/}李西］m/style/headbody:〈table border=z,l caption列表/caption»tr height=050px th名字/th th年龄/th/trtr td张三/tdtd40/td/trtr td李四/tdtd29/td/tr/table/body轮廓■轮廓是绘制于元素周边一条线，位于边框边沿外围，可起到突出元素作用outline■属性规定元素轮廓样式、颜色和宽度CSS outline■惯用属性在一种声明中设立所有轮廓属性♦outline:定义轮廓颜色♦outline-color:♦outline・style:定义轮廓样式定义轮廓宽度outline-width:headmeta charset=UTF-8Ustyle type=text/css table{/*outline-color:blue;outline-style:dotted;outline-width:5px;*/outline:5px dottedbLue;}/style/head^bodytable border=°lcaption列表/captiontr height=,f50pxMth名字/thth年龄/th/trtrtd张三/td td40/td/trtrtd李四/td td29/td/tr/table/body定位■定位属性容许你对元素进行定位CSS Positioning■定位基本思想很简朴，它容许你定义元素框相对于其正常位置应当浮现位置，或者相对于父元素、另一种元素甚至浏览器窗口自身位置■有三种基本定位机制:普通流、浮动和绝对定位CSS■惯用属性把元素放置到一种静态，相对，绝对，或固定位置中♦position:定义了定位元素上外边距边界与其包括块上边界之间偏移量top:定义了定位元素右外边距边界与其包括块右边界之间偏移定义了定位元素左外边距边界与其right:left:包括块左边界之间偏移♦♦bottom:定义了定位元素下外边距边界与其包括块下边界之间偏移相对定位是一种非常容易掌握概念如对一种元素进行相对定位，它将出当前它所在位置上然后通过设立垂直或水平位置，让这个元素“相对于”它起点进行移动headmeta charset=UTF-8”〉style type=ntext/cssu#dl{width:200px;height:200px;background-color:red;#d2width:200px;height:200Px;background-color:green;position:relative;left:20px;/*在原来的位置左移20个像素*/margin:100px;}/style/headbodydiv id=ndl/fg/divdiv id=frd2rfx/div/body绝对布局headmeta charset=UTF-8”style type=text/cssn#dl{width:200px;height:200px;background-color:red;}#d2{width:200px;height:200px;background-color:green;position:absolute;/*使用div脱离文档流*/top:8px;left:208px;}/style/headbodydiv id=ndl rrx/div〃div id=d2/div/body分类■分类属性容许你控制如何显示元素，设立图像显示于另一元素中何处，相对于其正常位置来定位元素，使css用绝对值来定位元素，以及元素可见度■惯用属性设立一种元素侧面与否容许其他浮动元素clear:定义元素在哪个方向浮动float:当指向某元素之上时显示指针类型♦cursor:♦♦display:定义与否及如何显示元素定义元素与否可见或不可见♦visibility:浮动:headmetacharset=UTF-8”〉-style type=ntext/css#dl{width:200px;height:200px;background-color:rec/;f loat:Left;}#d2{width:200px;height:200px;background-color:greenjfloat:Left;}#d3{width:200px;height:200px;background-color:btue;float:Left;}/style/headbodydiv id=,rdlwl/divdiv id=r,d2,r2/divdiv id=,,d3,,3/div/bodydisplayheadUTF-8meta charset=text/cssnstyle type=/*值描述此元素不会被显示none此元素将显示为块级元素，此元素前后会带有换行符block默认此元素会被显示为内联元素，元素前后没有换行符*/inlinebLock;}adisplay:/style/headbodyaAA/aaBB/a/body/htmlvisibility■每一条声明由一种属性和一种值构成，使用花括号来包围声明，属性与值之间使用冒号（:）分开如图:值性屋值性属{color:red;font-size:14px;}干器择值单位尺寸单位摘述%百分比in英寸cm厘米mm至米lem等于当前的字体尺寸em2em等于当前字体尺寸的两倍例如，如果某元素以12Pt显示，那么2em是24pt在CSS中，em是非常有用的单位，因为它可以自动适应用户所使用的字体ex一个ex是一个字体的x-heighto（x-height通常是字体尺寸的一半）（Pt磅1pt等于1/72英寸）（pc12点活字1pc等于12点）px像素（计算机屏幕上的一个点）颜色单位藤色名）颜色名称（比如red）rgbx xx RGB值比如rgb2550,0z z zrgbx%,x%x%RGB百分比值比如rgb100%0%0%zzz）#rrggbb十六进制数（比如#ffooooh1headmeta charset=U7F-8”style type=utext/cssa{vi^ibiJity:hidden;/*display:none;*/divwidth:100px;height:100px\background-color:red;/style/headbodyaAA/aaBB/adiv id=,fdll/div/bodyclear3head4meta charset=UTF-8n5:‘〈style type=text/cssH6img{7float:Left;8clear:both;90/style1/head2ebody3img src=images/ml.pngn/\4img src=images/ml.png/5/body框模型
6.7CSS盒子模型框模型规定了元素框解决元素内容、内边距、边框和外边距方式CSS BoxModelcss框模型概述border⑫框）margin矽卜边距）padding（内边距）delement阮素）height度）width嘘度）元素框最内某些是实际内容，直接包围内容是内边距内边距呈现了元素背景内边距边沿是边框边框以外是外边距，外边距默认是透明，因而不会遮挡其后任何元素边框元素边框（）是环绕元素内容和内边距一条或多条线■border属性容许你规定元素边框样式、宽度和颜色■CSS border惯用属性简写属性，用于把针对于四个边属性设立在一种声明♦border:♦♦border-color:简写属性，定义元素边框中可见某些颜色,或为四个边分别设立颜色用于定义所有边框样式，或者单独为各边设立边框样式border-style:简写属性，用于为元素所有边框设立宽度,或则单独地为各边边框设立宽border-width:度简写属性,用于把上边框所有属性设立到一种声明中border-top:简写属性,用于把右边框所有属性设立到一种声明中border-right:简写属性,用于把下边框所有属性设立到一种声明中♦border-bottom:简写属性,用于把左边框所有属性设立到一种声明中border-left:headmeta charset=UTF-8nstyle type=text/cssnimg/*border:5px solidblue;*/width:200px;height:200px;\border-bottom:5px soLidbLue;;}/style/headbodyimg src=nimages/ml.png//body外边距■环绕在元素边框空白区域是外边距设立外边距会在元素外创立额外“空白”■设立外边距最简朴办法就是使用属性，这个属性接受任何长度单位、百分数值甚margin至负值■惯用属性:♦♦margin:简写属性,在一种声明中设立所有外边距属性♦margin・top:定义元素上外边距定义元素右外边距♦margin-right:定义元素下外边距margin-bottom:margin・le代定义元素左外边距■注意:在使用来定义所有外边距时，可以使用值复制margin如果缺少左外边距值，则使用右外边距值如果缺少下外边距值，则使用上外边距值如果缺少右外边距值，则使用上外边距值内边距■元素内边距在边框和内容区之间控制该区域最简朴属性是属性padding■属性定义元素边框与元素内容之间空白区域CSS padding■惯用属性简写属性，作用是在一种声明中设立元素所有内边距属性padding:定义元素上内边距♦padding-top:定义元素右内边距padding-right:定义元素下内边距♦padding-bottom:定义元素左内边距♦padding-left:headmeta charset=nUTF-8nstyle type=utext/css,rdivwidth:300px;height:300px;background:gray;}img{border:5px soLidblue;width:200px;height:200px;padding:10px;margin-left:50px;outline:3px dottedpurpLe;I}/style/headbodydivimg src=nimages/ml.png//div/body书写注意事项如果值为若干单词，则要给值加引号■各种声明之间使用分号力分开■对大小写不敏感,如果涉及到与文档一起使用时,与名称对大小写敏感■css htmlclass id导入方式
1.4css第一种:内联样式表■要使用内联样式，你需要在有关标签内使用样式属性属性可以包括任何style StyleCSS属性■例如＜＞这是一种＜＞div style=bordeulpx solidblack”DIV/div■注意厂慎用这种方式，它将内容与显示混合在一起,损失了样式表优势■普通状况下,这种方式只有在一种标签上只应用一次样式时才会使用第二种:内部样式表■我们可以使用＜＞标签在文档＜＞中来定义样式表style htmlhead■例如:1!DOCTYPE html2-html3ehead4meta charset=U7F-8”5〈title工nsert titlehere/title6®〈style type=ntext/cssn7span{color:red;}8/style9/head10*body1112div style=border:lpx solidred;”这是一个Div/div1314span内部样式表/span15-------------------16/body17/html这种方式,样式只适合应用于一种页面第三种:外部样式表■如果想要在各种页面使用同一种样式表，可以使用外部样式表来导入■我们可以在页面上使用＜＞标签来导入外部样式表html link■例如国demo.html区国mystyle.css区1!DOCTYPE html2-html2div{bor3,^head4meta charset=UTF-8工nsert titlehere/title，〈link rel=stylesheet“type=text//ss href=,//ystyle.css”7/head8®body910div这是一个Div/div1112span内部样式表/span1314/body15/html■浏览器会从文献中读取样式,并对页面上进行修饰mystyle.css html■外部样式表,应当以为后缀来保存，可以使用任意文本编辑器对文献进行编辑css css第四种导入@import■这种方式也是外部导入®demo.html汉图mystyle.css眼1!DOCTYPE html人1span{color:red;}29html|2div{border:Ipx soLidred;}3-head4meta charset=UTF-85titleInsert titlehere/title6789style type=text/cssn@import mystyLe.css/style/head10^body1112div这是一个Div/div1314span）内部样式表/span1516/body J17/html与引用外部样式表区别【理解】@import这种方式只有支持，而不支持l.@import firefoxie这种方式导入会在整个页面加载后，才会加载样式如果网络不好状况下，会先
2.@import css,看到无样式修饰页面，闪烁一下后，才会看到有样式修饰页面而使用外部样式表，会先装载样式表，这样看到就是有样式修饰页面不支持通过修改样式，而支持
3.@import javascriptlink0优先级问题■内联样式表》内部样式表〉外部样式表:就近原则选取器
1.5CSS■选取器重要是用于选取需要添加样式元素css html■对于来说，它选取器有诸多，我们重要简介如下几种:css选取器id■选取器使用#引入，它引用是属性中值id idstyle type=text/cssn body泪#divl{background-color:div”这是一个Div〈/width:100px;height:100px;/body}/style类选取器■类选取器使用时，需要在类名前加一种点号.■项目中,绝大部都是用类选取器排版headmeta charset=UTF-8nstyle type=text/cssn.divl{background-color:gray;width:100px;height:100px;border:lpx soLidred;}/style/headbodydiv class=divl”这是一个Div〈/div/body/html|元素选取器■这是最常用选取器,简朴说，文档中元素就是选取器headmeta charset=UTF-8”〉style type=text/css”I div]background-color:gray;width:100px;height:100px;border:Ipx soLidred;}/style/headbody这是一个Div〈/divp/p运红^是一个Div/div/body|属性选取器■如果需要选取有某个属性元素，而无论属性是什么，可以使用属性选取器〈styletype=text/css”input[type=1text1]{background-color:gray;width:100px;height:40px;border:Ipx soLidred;/style/headbodyinput type=ntext11placeholder=般A为容”input type=ntext placeholder^〃麟A内容input type=password”input type=nbutton nvalue=ui^^u伪类■伪类用于向某些选取器添加特殊效果css■下面我们简介一下锚伪类在支持浏览器中,链接不同状态都可以不同方式显示css这些状态涉及:活动状态，已被访问状态未被访问状态，和鼠标悬念状态/未访问的链接/••/已访问的链接*/•a:link{color:4FF0000}a:visited/*鼠标移动到链接上*/{cclcr:400FF00}a:hover{cclcr:/选定的链接*/#FF00FF}a:active{color:•#0000FF}UTF-8”〉meta charset=ntext/cssstyle type=a:visited访问后状态*/{color:blue;}/*点击状态*/azactive{color:green;}/*Link普通状态*/a:{color:purple;}/*a:hover black;、/*鼠标悬浮状态这个只能放在后面，不能放{color:/style/headbodyhttp://www.baidu.com~^^/a a href=taobao.淘宝a href=Http://co/n”/auhttp://\^v vi.qq.腾讯ahref=co/n”/a/body层级选取器、元素、类、属性选取器结合Id。
个人认证
优秀文档
获得点赞 0
