Html基本结构、语法规则、常用标记/标签 |
您所在的位置:网站首页 › 常用的css选择符都有哪些类型 › Html基本结构、语法规则、常用标记/标签 |
Html基本结构、语法规则、常用标记/标签及空格符
一、HTML的定义:
HTML:是超文本标记语言(Hpyer text markup language); XHTML是可扩展超文本标记语言(扩展成XML文档)(Extensible text markup language); HTML5:指的是第五次大修改规范(新标准); 二、站点的定义:是存放整个网站的素材,网页及他们之间的联系; 站点文件夹的命名: 文件夹名只能以小写英文字母开头,下划线、数字组合;不能以汉字、空格、特殊字符开头和包含他们; 三、html基本结构、语法标准: 1、html文档命名:①、必须一小写英文字母开头、下划线、数字组合; ②、不能用汉字、空格、特殊字符(标点符号); ③、文档后缀名:html/htm; ④、首页必须命名成index.html或index.htm(这主要是因为加超链接必须以此规则命名) 2、html基本结构: (声明文档类型) (说明写的是html标记语言) (头部信息) (告诉服务器用的是国际编码格式) 网站标题(显示在网页状态栏上) 所要写的网站内容(网页的内容可以是文本、图像等) 3、用电脑中的记事本/文本文档(text),来写HTML5文档,不能插入图片,只能用写文本和标记(经常用,要会)说明:保存的时候要另存为html格式且编码格式要勾选成utf-8; 4、html的语法(就是标准):1>、内容文本 (双标记); 如: 2>、(单标记) 说明: 1)写在中的第一个单词叫做标记、标签、元素名; 2)标记和属性用空格隔开,属性与属性值用”=“(等号)链接,属性值要写在""(双引号内); 3)一个标记可以没有属性也可以有多个属性,属性与属性之间部分先后顺{一个属性也可以有多个属性值(如:标记的id/class名可以取多个名;)} 4)单标记没有结束标记,用"/"来代替结束; 5、网页中有哪些结构:段落结构 表单结构 列表结构 标题结构 超链接结构 图片结构 表格结构等 6、html的常用标签(重点要死记):1)、文本标题标签: 标题文本; 标题文本 、字体样式:font-family:“字体”,“字体”,… 说明: ①、当字体为中文时必须加双引号""; ②、当英文字体名称是多个英文单词组时,需加双引号""; ③、当字体名称是单个英文单词时,不需要加双引号; ④、字体与字体之间用逗号”,“隔开; ⑤、标点符号必须为英文状态; ⑥、当一段代码已经使用过双引号之后,里面只能使用单引号”’“; ⑦、当有多个字体时,浏览器会按先后顺序寻找浏览者电脑上有的字体显示,如果浏览者电脑上没有,则显示默认字体; 4>、字体加粗样式:font-weight:bold(加粗)/bolder(更粗)/100-900/normal(取消加粗); 说明:100-500常规字体;600-900加粗字体; (注意:样式都是用css来改,记住包括加粗、倾斜、等) 5>、字体倾斜样式:font-style:italic(倾斜小)/oblique(倾斜大的)/normal(取消倾斜); 说明:italic与oblique都是倾斜,浏览器区别不大; 6>、文字的水平对齐方式:text-align:left/right/center/justify(两端对齐,对中文不明显,主要针对英文不常用) 7>、文字的垂直对齐方式:vertical-align:top/middle/bottom; 说明:他不能单独使用,只能和display属性配合是使用; 8>、文本的行高:line-height:数值px;(用的多注意理解) 说明: ①、当单行文本的行高等于容器高时,可实现单行文本在容器中垂直方向居中对齐; ②、当单行文本的行高小于容器高时,可实现单行文本在容器中垂直中齐以上任意位置的定位; ③、当单行文本的行高大于容器高时,可实现单行文本在容器中垂直中 齐以下任意位置的定位(IE6及以下版本存在浏览器兼容问题) 倍行高:{line-height:2;} 2倍 ,{line-height:1.5;}1.5倍; 注:当使用倍行高为单位时,不加px; 注意:此属性的理解,写网页时往往先从行高入手,用的多,实际工作中多为用ps测量出来 9>、文字属性简写:font:font-style font-weight font-size/line-height font-family; 如:font:italic bold 12px/24px “黑体”,“微软雅黑”,roman,”segoe script“; 说明:font的属性值应按以下次序书写(各个属性值之间用空格隔开) 顺序: font-style font-weight font-size / line-height font-family (1)简写时 , font-size和line-height只能通过斜杠/组成一个值,不能分开写。 (2) 顺序不能改变 ,这种简写法只有在同时指定font-size和font-family属性时才起作用,而且,你没有设定font-weight , font-style 他们会使用缺省值。 10>、文本下划线修饰:text-decoration:none(没有下划线)/underline(下划线)/overline(上划线)/line-through(删除线);注意:此属性没有继承性; 11>、边框属性:border:数值px 线型 颜色(#f00);如:border:1px solid(实线)/dashed(虚线)/dotted(点划线)/double(双线) #f00; 说明: 可以设置单个边的样式: border-right:solid;右边框 border-left:dashed;左边框 border-top:dotted;上边框 border-bottom:double;下边框 注意:此属性没有继承性; 12>、首行缩进:text-indent:数值px; 如:text-indent:12px; 说明: ①、text-indent可以取负值; ②、text-indent属性只对第一行起作用; ③、缩进两个字符可以写成:text-indent:2em; 注意:border(边框)属性、text-decoration(下划线)属性、background(背景)属性,没有继承性,即:子元素不会继承父元素的这些属性 13>、可以了解的属性: ①、字间距:letter-spacing:value; 控制英文字母或汉字的字距。 ②、词间距:word-spacing:value; 控制英文单词词距。 ③、控制文本大小写 text-transform: capitalize(首字母大写)/uppercase(全大写)/lowercase(全小写) ④、小型大写字母:font-variant: small-caps ⑤、文本流控制 layout-flow:horizontal(自左向右)/vertical-ideographic(自上而下); (注:此属性只有IE浏览器支持) 2、关于列表的属性(主要针对ul(无序列表)/ol(有序列表)):1、定义列表符号样式:list-style-type:disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号); 2、使用图片作为列表符号: list-style-image:url( 所使用图片的路径及全称 ); 3、定义列表符号的位置: list-style-position:outside(外边)/inside(里边); list-style:none;去掉列表符号 注意:此属性加载的列表符号,各个浏览器显示列表符号与内容的间距不一样,导致我们不用此属性加载列表符号;常用ist-style:none;去掉列表符号,然后用给每个li加背景当列表符号(重要常用) 3、关于背景的属性:(注意此属性没有继承性)1、背景颜色 background-color:颜色值; 2、背景图片 background-image:url( 背景图片的路径及全称 ); 3、网页上有两种图片形式:插入图片、背景图; 插入图片:属于网页内容,也就是结构。 背景图:属于网页的表现,背景图上可以显示文字、插入图片、表格等 背景图片的显示原则 : 1)容器尺寸等于图片尺寸,背景图片正好显示在容器中; 2)容器尺寸大于图片尺寸,背景图片将默认平铺,直至铺满元素; 3)容器尺寸小于图片尺寸,只显示元素范围以内的背景图。 4、背景图片平铺background-repeat:no-repeat(不平铺)/repeat(平铺)/repeat-x(水平平铺)/repeat-y(垂直平铺) } 5、背景图片的位置background-position:值1 值2; 说明: ①属性值有两个值组成,值1是水平位置的坐标值,值2是垂直位置的坐标值; ②值1 = left/center/right/数值; 值2 = top/center/bottom/数值;当两个值都是center的时候可缩小为一个; ③当属性值是数值时,向右方向,向下方向正值 6、背景属性的缩写语法:background:属性值1(背景颜色) 属性值2(背景图片) 属性值2(背景平铺) 属性值3(背景的定位:值1(x) 值2(y)) 属性值4(背景固定); 如:background:url(背景图片的路径及全称) no-repeat center top; 注意:此属性值没有顺序要求,但但定位的background-position的属性值不能分开; 7、背景图的固定background-attachment:scroll(滚动)/fixed(固定);(此属性主要针对标签用); 8、网页上常用的图片格式1)jpg:有损压缩格式,靠损失图片本身的质量来减小图片的体积,适用于颜色丰富的图像;(像素点组成的,像素点越多会越清晰 )(适用于banner图及轮播图) 2)gif:有损压缩格式,靠损失图片的色彩数量来减小图片的体积,支持透明,支持动画,适用于颜色数量较少的图像; (适用于网页上的小图标) 3)png:有损压缩格式,损失图片的色彩数量来减小图片的体积,支持透明,不支持动画,是fireworks的 源文件格式,适用于颜色数量较少的图像; 9、浮动属性:(浮动后脱离了文档流) 浮动属性float:none/left/right; 10、清除浮动(某一侧不出现浮动元素) Clear:both/left/right 注意: 1、浮动的元素要放在一个容器元素里面; 2、float:none;是元素不浮动,该元素不具有浮动的特性; clear:both;是清除元素的两边浮动,此时是浮动元素被拽下,被拽下来的浮动元素具有浮动的特性;通俗的讲就是把加有浮动元素的元素,从浮动的位置上拽下来,回到原来的位置,此时被拽下来的元素具有浮动的特性(比如:浮动元素的宽高是有内容撑起来的)(注意理解重要) 属性值有是none的属性:list-style(列表样式取消)/text-decoration(下划线样式取消)/float(浮动取消) 五、CSS选择符(选择器)的定义、常用的10种选择符、以及他们的权重值 一、css选择符的定义:选择符表示要定义元素的对象,可以是元素的本身,也可以是一类元素或制定的元素名称。 二、10种常用选择符: 1、类型选择符(类选择符、元素选择符):语法:元素名称{属性:属性值;} 例如:a{font-size:12px;} 说明: ①、使用中的元素中的元素名称直接作为选择符,如:body、div、p、img等; ②、所有的页面元素都可以作为类型选择符; ③、功能: A、要改变一个标签的默认样式,可以用类型选择符; B、要统一网页面中某一元素的样式可以用类型选择符; 注意:对于div、span等通用结构元素,不建议使用类型选择符,除非有十足的把握,以为他们应用的范围广泛,使用类型选择符会相互干扰,影响效果; 2、id选择符:语法:#id名称{属性:属性值;} 例如:#box{width:300px; height:300px;} (其中box为 )说明: ①、使用id选择符时,需要给元素定义一id属性及属性值;如: ;②、在css文件中写id选择符时,id名称前需加#;如:#box{width:300px; height:300px;} ③、取id名时,只能取英文名但不能用关键字(所有的元素、标记、标签都是关键字xua;) ④、id选择符的基本作用:对每个页面中唯一出现的元素进行样式定义; 注意:一个元素、标签可以同时取id名和class名,并且可以用这两个名进行修饰;如: 3、class选择符:语法:.class名{属性:属性值;} 说明: ①、使用class选择符时需要先为元素定义一个class属性及属性值;如: ②、一个class属性可以定义多个属性值(即可以定义多个class名,class名用空格隔开);如: ;(css可以用他任何一个class名对该元素进行样式修饰,且在符合css三大属性机制的(继承性、层叠性、特殊性)的前提下,样式互不影响:注意理解); ③、作用: A、可以对同类(相同的)元素、标签进行不同样式设定; B、可以对不同的元素、标签进行相同的样式设定; 扩展:div.box{background:red;} 指定选择符 只会给class名为box的div标签进行样式修饰,不给 标签修饰;(了解此选择符即可) 4、群组选择符:语法:选择符1,选择符2,选择符3,等{属性:属性值;} 说明: A、对一组具有相同样式的元素进行样式指定;如:h1,h2,h3,p{font-size:12px; color:#fff;} B、使用逗号对选择符进行分离,对页面中使用相同样式的地方,只需书写一次即可,可减少代码量,改善css代码的结构; 5、包含选择符(后代选择符):语法:选择符1 选择符2 选择符3 {属性:属性值;} 说明: A、对某个元素的子元素进行样式的设定;例如:div a{font-size:12px; color:#848488;}; B、包含选择符指选择符组合中前一个标签包含后一个标签,中间用空格隔开; C、使用包含选择符可以避免过多的使用class及id名的设置; D、并且直接对所需要设置的元素进行样式设置; E、选择符除了二级包含,还可以多级包含; 注意:标记、标签不能随便嵌套:尤其h1-h6标题标签就不能互相随便嵌套,还有p标签也不能自己互相嵌套; 6、伪类选择符(针对超链接标签):语法🅰️link{属性:属性值;} 超链接的初始状态; a:visitied{属性:属性值;}超链接被访问后的状态; a:hover{属性:属性值;}鼠标划过超链接的状态; a:active{属性:属性值}当鼠标点击超链接时的状态; 说明: A、当这4个超链接伪类选择符联合使用时,应注意他们的顺序,正常顺序为🅰️link a:visitied a:hover a:active,不能颠倒,否则会使超链接的样式部分失去; B、为了简化代码,可以吧伪类选择符中相同的声明提出来放在a选择符中;例如:a{color:#ff0;} a:hover{color:green;}表示超链接三种状态相同,只有鼠标划过变色。(经常使用的就是简化样式) 7、子选择符:语法:选择符1>选择符2{属性:属性值;} 说明:子元素选择器只能修饰匹配父元素下的第一级子元素;(注意理解) 8、通配符:语法:*{属性:属性值;} 说明:通配符的写法是“*”,其含义就是若有元素。 用法:常用来重置样式。 常用结构:*{margin:0; padding:0;}将所有元素的页边距和填充值清零; margin:0 auto;使元素居中,(谁要居中给谁用) 9、伪元素选择符:1、选择符:after和content配合使用,会在对象(定义选择符的元素)后面加上内容; 例如: ①: div:after{content:“文本内容”;}(加的是文本可以是汉字,注意是通过css文件加到页面上的内容;); ②、div:after{content:url(图片存放的相对路劲及图片全称+扩展名);}(加的是图片;注意是通过css文件加到页面上的内容;) 注意:冒号“:”不能丢 2、选择符:before和content配合使用,会在对象(定义选择符的元素)前面加上内容; 例如: ①: div:before{content:“文本内容”;}(加的是文本可以是汉字,注意是通过css文件加到页面上的内容;); ②、div:before{content:url(图片存放的相对路劲及图片全称+扩展名);}(加的是图片;注意是通过css文件加到页面上的内容;) 注意:冒号“:”不能丢 3、选择符:first-letter定义对象内第一个字符的样式。 例如div:first-letter{color:#f00;} 4、选择符:first-line定义对象内第一行的样式。 例如div:first-line{color:#ff0;} 说明: a;(该伪元素选择器只能用于块级元素。) b;ie6及以下版本浏览器不支持伪对象选择符。 10、html注释符:css注释符: /注释内容/ HTML元素标标的分类(display重点理解):块状元素(block)、行内元素(inline)以及元素类型之间的相互转换(display)、vertical-align的使用方法、块状元素与内联元素表 六、选择符的权重值(选择符权重值越大,显示的优先级越高): css中用四位数字表示权重,权重的表达方式如:0,0,0,0 类型选择符的权重:0001 class选择符的权重:0010 id选择符的权重:0100 子选择符的权重:0000 属性选择符的权重:0010(后面讲) 伪类选择符的权重:0010 伪元素选择符的权重:0010(后面讲) 包含选择符的权重:包含的选择符权重值之和 内联样式的权重:1000 继承样式的权重:0000(后面讲) 一,块状元素(block):1.块状元素在网页中就是以块的形式显示,所谓块状就是元素显示为矩形区域 常用的块状元素包块div,dl,dt,dd,ol,ul,fieldset,(h1-h6),p,form,hr,colgroup,col,table,tr,td,等; 2.块元素的特点: ①默认情况下,块状元素都会独占一行,块状元素会按顺序自上而下排列; ②块状元素都可以直接定义自己的宽度和高度(当不给宽度时,会默认继承父元素的宽度(100%),不给高度,则由内容撑起高度); ③块状元素遵循盒模型的所有规则,一般都作为其他元素的容器,它可以容纳其它内联元素和其它块状元素;(p标签除外) ④大部分块状元素默认情况下有margin值或padding值(在浏览器中可以查看,就是因为如此每次写网页要重置margin值和padding值,然后在后续再根据需要给各个元素加;),其中div、form默认情况下没有margin和padding值,是比较干净的,而form常用来插入表单使用,所以常用div来做网页布局; 注意: p标签特殊:由于浏览器的解析错误,p标签内部不能嵌套其他块状元素(可以嵌套行内元素);如果p标签内部嵌套块状元素,则会在嵌套的块状元素外部上下各加一个p标签(浏览器解析出来显示的时候可以查看);所以p标签内部最好只能放文字,不能作布局元素用; 二、内联(行内、行间)元素(inline):1.常见的内联元素如:a,span,i,em,strong,b、br等 2.内联元素的特点: ①内联元素其后如果是内联元素则会在一行内逐个进行显示,且内联元素之间会自动加一定的间距)(去除间距的方法:①给内联元素添加浮动(float)或②在html书写内联元素时不换行书写),; ②内联元素显示的宽度、高度只能根据所包含内容的高度和宽度来确定,不能直接定义它的宽和高,它的最小内容单元也会呈现矩形形状; ③内联元素也会遵循盒模型基本规则,但个别属性不能正确显示;(上下间距显示不正确,左右正常显示,即:支持左右margin、padding值,不支持上下margin、padding值;) ④行内元素默认请况下没有margin和padding值,默认情况下完全是由内容撑起来的,(默认情况下不和里面的文字或图片高度或宽度一致,主要是因为有行高一说)(注意理解这句话)例如: 使用规则: 1、内联元素一般不嵌套块元素(不是绝对); 2、一般我们是把行内元素转换成块状元素使用,而不把块状元素转变成内联元素使用,(需要内敛元素直接找个本省市内联元素的使用即可;) 三、可变元素:是根据上下文确定是块状元素还是内敛元素如:button是可变元素 四、元素类型的转换(通过display属性):1.display的作用:设置或检索元素的类型。属性值19个:block/inline/inline-block/none/list-item/table-header-group/table-footer-group… 2.属性值中有5个最常用的属性值 ①block 块元素的display默认属性值,当给元素加display:block后元素变为块元素。 (注:当元素设置了float属性后,就相当于给该元素加了display:block;属性;) ②inline 内联元素的display默认属性值,当给元素加display:inline元素变为内联元素 ③inline-block 内联块元素默认属性值:行内的其他元素显示在同一行,但可以直接设置宽高, 如:img,input(注:只有这一个元素类型支持vertical-align属性) ④.none 元素被隐藏不显示 ⑤.list-item 将元素转换成列表。li的display默认属性值; 注意:li归到块状元素,img/input归到内敛元素 总结: 1、line-height、text-align文本水平对齐属性对子元素是行内元素起作用(也就是说此属性不仅仅只针对文本) line-height 2、margin: 0 auto;只针对加过宽度的块元素居中起作用,不能让内联元素居中; 五、vertical-align的使用规则:第一种用法,先看后面一句“在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。”这很容易理解,如果给一个表格的td加一个vertical-align:middle的样式,表格里面的内容会垂直居中,同样的如果给一个vertical-align:bottom就会底部对齐,如果给一个vertical-align:top就会顶部对齐。 第二种用法,看前页一句“该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。”专业的语言我不会说的,可以打个比喻:假设有两个行内元素a和b,a和b都是img,当a加了一个vertical-align:middle样式之后,b的底部(基线)就会对齐a的中间位置,如下图: 如果a和b都加了一个vertical-align:middle样式,那么就互相对齐了对方的中间位置,也就是它们在垂直方向上的中线对齐了,如下图: 说到这里,思路就清晰了(PS:理应知道vertical-align可以设middle,top,bottom等等,甚至可以设置具体的值或百分比,如果想知道会有怎样的效果,可以自己实验一下,这里就不多说了。)。 接下来回到这篇文章的主题,现在我要让class="img404"的img在class="wall"的div里面垂直居中,我可以在div里面加一个span空标签,把它的高度设为100%,再给它一个vertical-align:middle样式,同样地给img一个vertical-align:middle样式,那么img就可以在div里面垂直居中了。如图: 七、CSS3新增的选择器(属性选择器、目标结构选择器、层级选择器)、浏览器前缀名、优雅降级和渐进增强、核心属性(文字属性:text-shadow/@focus-face(服务端字体))、CSS插入图标方法、背景尺寸(background-size)、多背景属性、背景色(rgba)/边框属性4个)、透明(transparent) 一、CSS3简介:CSS即层叠样式表(Cascading StyleSheet) CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的 模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等 CSS 用于控制网页的样式和布局。 CSS3 是最新的 CSS 标准。 CSS3 完全向后兼容,因此您不必改变现有的设计。 浏览器通常支持 CSS2。 二、CSS3能做什么?CSS3到底给我们带来了哪些新特性呢?简单的说,CSS3把很多以前需要使用图片和脚本来实现的效果,只需要短短几行代码就能搞定。比如圆角,图片边框,文字阴影和盒阴影、渐变等。CSS3不仅能简化前端开发工作人员的设计过程,还能加快页面载入速度。 三、CSS3选择器CSS3选择器是个难以置信地强大的工具:它们允许我们在标签中指定特定的HTML元素而不必使用多余的 class、 ID 或JavaScripts。而且它们中的大部分并不是CSS3中新添加的,而是没有被得到应有的广泛应用。如果你在尝试实现一个干净的、轻量级的标签以及结构与表现更好的分离,高级选择器是非常有用的。它们可以减少在标签中的class和ID的数量并让设计师更方便的维护样式表。 a. 属性选择器 b. 伪类选择器 :结构性伪类选择器 目标伪类选择器 UI 元素状态伪类选择器 语言伪类选择器 否定伪类选择器 动态伪类选择器 1、属性选择器(极为重要)在css3中,增加了如下所示的四个属性选择器,使得属性选择器有了通配符的概念。标签[属性名=“value”] 匹配属性等于某特定值的元素标签 [属性名^=“value”] 匹配属性包含以特定的值开头的元素标签 [属性名$=“value”] 匹配属性包含以特定的值结尾的元素标签 [属性名*=“value”] 匹配属性包含含有特定的值的元素浏览器支持: 只有IE6不支持CSS的属性选择器。IE7和IE8、Opera、Webkit核心和Gecko核心的浏览器都支持。所以在你样式中使用属性选择器是比较安全的 2、结构性伪类选择器(极为重要)选择器描述E:first-child选择第一个子元素E E指的就是所要选择的标签(子元素类型全部相同) E:last-child 选择最后一个子元素E(子元素类型全部相同) E:nth-child(n)选择一个或多个特定的子元素 (第一个编号为1)n(子元素类型全部相同) E:nth-last-child(n)选择一个或多个特定的子元素,从最后一个子元素开始算 E:nth-of-type(n)选择指定的元素,仅匹配使用同种标签的元素(子元素类型不相同) E:nth-last-of-type(n)选择指定的元素,从元素的最后一个开始计算,仅匹配使用同种标签的元素n可以是数值、公式(2n/2n+1)、也可以英文单词Nth-of-type(odd)奇数 Nth-of-type(even)偶数选择器 E:first-of-type匹配父元素下使用同种标签的第一个子元素(子元素类型不相同) E:last-of-type匹配父元素下使用同种标签的最后一个子元素(子元素类型不相同) E:only-child匹配父元素下仅有的一个子元素 E:only-of-type匹配父元素下使用同种标签的唯一 一个子元素 E:empty匹配一个不包含任何子元素的元素 ( 文本内容也被看作子元素 ):not(s)匹配不符合当前选择器的任何元素( 反选 ) 3、层级选择器(极为重要)子元素选择器选择器描述E > FE元素内的第一级子元素F兄弟选择器选择器 描述E + F(相邻兄弟)E元素后面的第一个兄弟元素F E ~ F(通用兄弟)所有在E元素之后的所有兄弟元素F 4、伪元素(伪对象)选择器(带双冒号也行)1)标签:first-line伪元素选择器 first-line伪元素选择器用于向某个元素中的第一行文字使用样式。 div:first-line{color:#f00;} 2)标签:first-letter伪元素选择器 first-letter伪元素选择器用于向某个元素中的文字的首字母(欧美文字)或第一个字(中文或者是日文等汉字)使用样式。 例如:div:first-letter{color:#f00;} 3)标签:before伪元素选择器 before伪元素选择器用于在某个元素之前插入一些内容。 div:before{content:“文本内容”; width:20px;height:40px;}div:before{content:url(图片存放的相对路劲及图片全称+扩展名);width:20px;height:40px;} 4)标签:after伪元素选择器 after伪元素选择器用于在某个元素之后插入内容。例如:div:after{content:“文本内容”; width:20px;height:40px;}div:after{content:url(图片存放的相对路劲及图片全称+扩展名);width:20px;height:40px;}注意:标签后也可以是双冒号也行 5、目标伪类选择器(需要了解。知道用的时候可以查)标签:target:匹配URl中锚点指定的元素,用此选择器可以给锚点指定的元素加样式 语法:例如: Div:target{属性:属性值;} 6、UI元素状态伪类选择器(需要了解理解。知道用的时候可以查)这些选择器的共同特征是:指定的样式只有当元素处于某种状态下时才起作用,在默认状态下不起作用选择器描述E:enabled匹配表单中可用的元素E:disabled匹配表单中禁用的元素E:checked匹配表单中被选中的radio(单选框)或checkbox(复选框)元素E::selection用来改变浏览网页选中文本的默认效果基本上只有 background 、color 有效果 7、语言伪类选择器语言伪类选择器允许为不同的语言定义特殊的规则,这在多语言版本的网站用起来是特别的方便。E:lang(language)表示选择匹配E的所有元素,且匹配元素指定了lang属性,而且其值为language。例如: 我是唐老鸭。 I live in Duckburg. 注释:对于在 IE8 中工作的 :lang,必须声明 DOCTYPE。 否定伪类选择器如果想对某个结构元素使用样式,但是想排除这个结构元素下面的子结构元素,让它不使用整个样式时,可以使用not选择器 :not(标签):匹配类型为E,不匹配选择符为 s 的元素。 8、动态伪类选择器a:link{ color: #ff6600 } /* 未被访问的链接 */ a:visited{ color: #87b291 } /* 已被访问的链接 */ a:hover{ color: #6535b2 } /* 鼠标指针移动到链接上 */ a:active{ color: #55b28e } /* 正在被点击的链接 */ a:active用于用户点击元素那一下的效果(正发生在点的那一下,松开鼠标左键此动作也就完成了) 注意:标签后也可以是双冒号也行input:focus用于元素成为焦点,这个经常用在表单元素上(重要会背)。 提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。 浏览器的前缀名(极为重要) CSS3属性都需要带各浏览器的前缀,甚至到现在,依然还有很多属性需要带前缀。浏览器厂商以前就一直在实施CSS3,但它还未成为真正的标准。为此,当一些CSS3样式语法还存在波动时,就提供了针对浏览器的前缀来表示它们的私有属性;**Gecko (火狐)前缀-moz-属性名:属性值;Presto (欧朋)前缀-o- 属性名:属性值;Trident (IE)前缀-ms-属性名:属性值;Webkit (苹果、谷歌)前缀-webkit-属性名:属性值;**Css3优雅降级和渐进增强问题(面试题)1、渐进增强(Progressive Enhancement):一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。2、优雅降级(Graceful Degradation):一开始就构建站点的完整功能,然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用,然后逐步针对各大浏览器进行 hack 的修改使其可以在低版本浏览器上正常浏览。 四、Css3新增的部分属性 1、关于文本的、文本阴影:text-shadow: h-shadow v-shadow blur color(重要)h-shadow 必需。 水平阴影的位置。允许负值;v-shadow 必需。 垂直阴影的位置。允许负值。 blur 可选。模糊的距离(程度)。 color 可选。阴影的颜色。 2、文本换行①、是否允许长单词换行:word-wrap:normal \ break-wordnormal 默认值,只在允许的断字点换行(空格处);break-word 在长单词或 URL 地址内部进行换行。(长单词会另起一行) ②、是否允许长单词换行(加上后长单词换行,但不会另起一行显示):word-break:normal\ break-allnormal 使用浏览器默认的换行规则Break-all 允许在单词内换行。 注释:目前 Opera 不支持 word-break 属性(所以尽量不用)服务器端字体: @font-face(重要)可将该字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上使用方法:@font-face{ font-family:webFont; src:url(‘font/字体名称.otf’); } Div{font-family:webFont;}扩展小图标的插入:(通过css的方法、还有别的方法JS) 1**、****在iconfont.cn网站(阿里网站的图标数据库下载图标代码)**;解压文件后 2、将以上所有文件复制到要写的网页的站点里面,建个fonts文件夹存放字体 3、用外部链接样式表插入到html文件的头部,一定要放在我们定义的修饰css前面,因为我们有可能有需求要修改他的样式(理解); 4、再把图标写在内联元素里面(span/i/b/strong/a/em/)【也可以放在块元素里面不过一般放在内联元素里】,再给内联元素起2个class名,固定:class=“iconfont(图标(解压出来的)文件名) icon-home(图标在加压文件中的名字)” 说明:1、这样通过css加载的图标就是文字,可以通过font-size来改变图标大小、倾斜(font-style)图标的等样式; 2、通过定位span的位置来定位图标位置修饰样式时:只能用定义的class名,不能用内联元素标签作为选这符如:.iconfont{font-size:20px;}或.icon-home{font-style:italic;}在HTML结构中 八、 Css3新增的关于背景的属性1、背景裁切:Background-clip; 用来规定背景的绘制区域(对于背景颜色)值解释border-box背景被裁剪到边框盒。(默认值)padding-box背景被裁剪到内边距框。content-box背景被裁剪到内容框。 2、背景原点:Background-origin;用来规定 background-position 属性相对于什么位置来定位(对于背景图片)属性值解释padding-box背景图像相对于内边距框来定位。(默认值)border-box背景图像相对于边框盒来定位。content-box背景图像相对于内容框来定位。 3、背景尺寸:Background-size; 用来规定背景图像的尺寸(重要)值描述数值设置背景图片高度和宽度。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为 auto(自动)百分比将计算相对于背景定位区域的百分比。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为"auto(自动)"cover把背景图像等比例扩大或缩小,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。contain把图像扩大或缩小至合适尺寸,以使其宽度或高度完全适应内容区域 4、CSS3 多背景属性多个背景图可用逗号隔开Background:url(…) no-repeat left top, url(…) no-repeat left top, url(…) no-repeat left top, url(…) no-repeat left top, url(…) no-repeat left top;5、CSS3 背景颜色模式:rgba(r:红色;g:绿色;b:蓝色;a:alpha) (用此方法可以写一个背景透明,内容不透明的重要用于移动端,pc端不能用,有兼容性;) Hsl颜色模式(色调,饱和度,亮度)如: 0代表红色,120代表绿色,240代表蓝色 Hsla (色调,饱和度,亮度,透明度) Background:rgba(0,0,0,1) 表示黑色,不透明 Background:hsla(8,97%,98%,0.5)Css3新增的关于边框的属性Border-color 边框颜色 border:2px solid #f00;table {border-color: red} - 所有的边框都是红色。(1个值:四边一样色)table {border-color: red green} - 上边框和下边框是红色,而左边框和右边框是绿色。 (2个值:上下;左右)table {border-color: red green blue}- 上边框是红色,左边框和右边框是绿色,下是蓝色(3个值:上 ; 左右 ; 下) table {border-color: red green blue yellow} - 上边框是红色,右边框是绿色,下边框是蓝色,左边框是黄色。(4个值:上; 右 ;左 ;下) Border-width: 边框粗细; Border-style: 边框线性 Border-radius:圆角边框 Border-radius:5px;Border-radius:50%; Border-radius:20px 20px; Border-radius:40px 0px 30px ; border-radius:5px 15px 20px 25px ; border-radius:20px / 10px ; (扩展)透明色:transparent |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |