推荐网站建设话术,制作网站要步骤,服装移动网站策划案,最好的进销存软件排名在CSS中追加了三个属性选择器#xff1a;[att*val]、[att^val]、[att$val] [att*val]属性选择器 如果元素用att表示的属性的值中包含用val指定的字符#xff0c;那么该元素使用这个样式。 [att^val]属性选择器 如果用att表示的属性值的开头字符为用val指定的字符的话#xf… 在CSS中追加了三个属性选择器[att*val]、[att^val]、[att$val] [att*val]属性选择器 如果元素用att表示的属性的值中包含用val指定的字符那么该元素使用这个样式。 [att^val]属性选择器 如果用att表示的属性值的开头字符为用val指定的字符的话那么该元素使用这个值 [att$val]属性选择器 如果元素用att表示的属性的属性值的结尾字符为用val指定的字符那么该元素使用这个样式。 伪类选择器以及伪元素 1.类选择器 在CSS中可以使用类选择器把相同的元素定义成不同的样式。 p.left{text-align:left} p.rigth{text-align:right} 2.伪类选择器 类选择器和伪类选择器的区别在于类选择器我们可以随意起名而伪类选择器是CSS中已经定义好的选择器不可以随意起名。 最常见的伪类选择器 a:link{color:#ff6600}/*未被访问的链接*/ a:visited{color:#ff6600}/*已被访问的链接*/ a:hover{color:#ff6600}/*鼠标指针移动到链接上*/ a:active{color:#ff6600}/*正被点击的链接*/ 3.伪元素选择器 伪元素选择器针对于CSS中已经定义好的伪元素使用的选择器。 使用方法 选择器伪元素{属性值} 与类配合使用 选择器.类名伪元素{属性值} 4.在CSS中主要有四个伪元素选择器 1first-line伪元素选择器用于向某个元素中的第一行文字使用样式 2first-letter伪元素选择器用于向某个元素中的文字的首字母欧美文字或第一个字中文或者是日文等汉字使用样式。 3before伪元素选择器用于在某个元素之前插入一些内容 4after伪元素选择器用于在某个元素后插入内容 5.结构性伪类选择器root、not、empty和target 1root选择器将样式绑定到页面的根元素中 2not选择器想对某个结构元素使用样式但是想排除这个结构元素下面的子结构元素让它不使用这个样式时我们就可以使用not选择器 3empty选择器指定当元素中内容为空白时使用的样式 4target选择器对页面中某个target元素指定样式该样式只在用户点击了页面中的超链接并且跳转到target元素后起作用。 6.选择器first-child、last-child、nth-child和nth-last-child 1first-child选择器单独指定第一个子元素的样式 2last-child选择器单独指定最后一个子元素的样式 3nth-child选择器 nth-childn选择器匹配正数下来第N个子元素 nth-childodd选择器匹配正数下来第奇数个子元素 nth-childeven选择器匹配正数下来第偶数个子元素 4nth-last-child选择器 nth-childn选择器匹配倒数数下来第N个子元素 nth-childodd选择器匹配倒数数下来第奇数个子元素 nth-childeven选择器匹配倒数数下来第偶数个子元素 7.选择器net-of-type和nth-of-type 在CSS中用来避免子元素有不同类型用的时候只针对同类型的子元素进行计算 8.循环使用样式 nth-childAnBA表示每次循环中包括几种样式B表示指定的样式在循环中所处的位置 9.only-child选择器 只对含有唯一一个子元素的部分起作用当有大于一个子元素的部分不能起作用 使用选择器在页面中插入内容 1.使用选择器插入内容 在CSS2中使用before选择器在元素前面插入内容使用after在元素后面插入内容在选择器content属性中定义要插入的内容还可以给他定义样式进行美化颜色背景字体样式等。 适用方法 style typetext/css h2:before{ content:Title希望插入的内容; } /style 2.插入图片文件 使用before或者after除了可以在元素前后插入文字之外还可以插入图片。在插入图片是需要使用URL指定的图片路径。 使用方法 style typetext/css h2:before{ content:url(1.gif); } /style 3.插入项目编号 1在多个标题前加上连续编号在content属性中使用counter属性来对多个项目追加连续的编号。 使用方法 元素before{ content:counter计数器 } 适用计数器来计算编号计数器可以任意命名。 除了使用计数器还需要在元素的样式中追加对元素的counter-increment属性的指定为content属性值中所指定的计数器名称。 元素{ counter-incrementcontent属性值中所指定的计数器名称 } 2在项目编号中追加文字 h1:before{ content:第counter(content属性值中所指定的计数器名称)章 } 变成另一种效果“第一章、第二章...” 3指定编号的样式 比如给他在编号后面带一个“.”文字并且设置编号的颜色为绿色字体大小42像素。 h1:before{ content:countercontent属性值中指定的计数器名称‘.’; color:green; font-size:42px; } 变成另一种效果“1./2./...” 4指定编号的种类 before和after不仅可以追加数字编号号可以追加字母编号或者罗马数字编号。 content:counter计数器名编号种类 可以使用list-style-type属性的值来指定编号的种类。比如指定大写字母编号时使用“upper-alpha”属性指定大写罗马字母时使用“upper-roman”属性。 h1:before{ content:counter计数器名编号种类.; color:green; font-size:42px; } 5编号嵌套、重置编号 我们可以在大编号中嵌套中编号在中编号中又嵌入小编号 1大编号中嵌入中编号 2counter-reset属性重置编号 6中编号中嵌入大编号 h2:before{ content:counter大编号的计数器-counter中编号的计数器 } 7在字符串两边嵌套文字符号 可以使用content属性的open-quote属性值与close-quote属性值在字符串两边添加诸如单引号、双引号之类的文字字符。 open-quote开始符号 close-quote结尾字符 quote字符类型使用双引号的时候需要使用转义字符“\” 使用方法 style h1:before{ content:open-quote; } h1:after{ content:open-quote; } h1{ quote:( ); } /style 文字阴影与自动换行 1.text-shadow属性的使用方法 在CSS3我们可以使用text-shadow属性给页面上的文字添加阴影效果。 1text-shadow的使用方法 text-shadowlength length length color 第一个length表示的是阴影离开文字的横方向距离 第二个length表示的是阴影离开文字的纵方向距离 第三个length表示的是阴影模糊半径 color表示的是阴影的颜色。 2位移距离text- shadow所使用的参数中前两个参数是阴影离开文字的横方向和纵方向的位移距离使用的时候必须指定这两个参数 3阴影的模糊半径text-shadow属性的第三个参数就是阴影模糊半径代表阴影向外模糊时的模糊范围。 4阴影的颜色color可以放在三个参数之前也可以之后。没有指定颜色时会使用文字color的颜色值 5指定多个阴影我们可以使用text-shadow属性来给文字指定多个阴影并且针对每个阴影使用不同的颜色。指定多个阴影的时候使用逗号将多个阴影进行分割。 2.word-break浏览器自动换行 指定自动换行的处理方法在CSS3中可以使用word-break属性来设置自动换行的处理方法。 normal使用浏览器默认的规则 keep-all智能在半角空格或者连字符处理换行 break-all允许在单词内换行 用法示例 style div { word-break:keep-all } /style 3.长单词与URL地址自动换行 在CSS3中使用word-wrap属性来实现长单词和URL的自动换行 使用方法 div { word-wrapbreak-word } word-wrap属性的属性值有两个 第一个normal 浏览器保持默认处理方式只在半角空格或者是连字符的地方换行 第二个break-word 浏览器可以在长单词或URL地址内部进行换行。 服务器端字体和font-face属性 1.在页面上显示服务器端的字体 在CSS3中可以使用font-face属性来利用服务器端字体 font-face属性的使用方法 font-face{ font-family:webFont; src:url(font/字体名称.otf)format(opentype); } font-family属性值中使用webfont来声明字体文件的格式可以省略文件格式的声明单独使用src属性值。可以使用的字体文件格式otf/ttf/eot 2.定义斜体或粗体字体 在定义字体的时候可以把字体定义成斜体或者粗体在使用服务器端字体的时候需要根据斜体还是粗体使用不同的文字。 3.显示客户端本地的字体 font- face除了可以显示服务器端的字体还可以显示本地字体。 首先将font-family设置为本地的字体名然后将src属性设置为local(‘字体’) 用法示例 font-face{ font-family:Arial; src:local(Arial); } 4.属性值的指定 1font-family设置文本的字体名称 2font-style设置文本样式 取值normal不使用斜体/italic使用斜体/oblique使用倾斜体inherit从父元素继承 3font-variant:设置文本是否大小写 取值normal使用浏览器默认值/small-caps使用小型大写字母/inherit从父元素继承 4font-weight设置文本的粗细 取值normal/bold/bolder/lighter 100-900从细字体到粗字体值必须是100的倍数其中400等于normal700等同于bold 5font-stretch设置文本是否横向拉伸变形。 取值normal正常文字宽度 wider把伸展比例设置为更进一步的收缩值 narrower把收缩比例设置为更进一步的收缩值 ultra-condensed比正常文字宽度窄4个基数 extra-condensed比正常文字宽度窄3个基数 condensed比正常文字宽度窄2个基数 semi-condensed比正常文字宽度窄1个基数 semi-expanded比正常文字宽度宽1个基数 6font-size设置文本字体大小 7src设置自定义字体的相对路径或者绝对路径注意此属性只能在font-face规则里使用 转载于:https://www.cnblogs.com/YamLilac-1101/p/10461570.html
