建设企业网站支票打印软件,做网站要,个人网站设计案例,wordpress 跳转引言#xff1a;CSS样式规则有两个主要部分。选择器决定将格式化应用到哪些元素。声明则定义要应用的格式化。 构造选择器选择器可以定义五个不同的标准来选择要进行格式化的元素。 元素的类型或者名称。如下所示。 h1{color:red;
} 元素所在的上下文。如下所示。 h1 em{color… 引言CSS样式规则有两个主要部分。选择器决定将格式化应用到哪些元素。声明则定义要应用的格式化。 构造选择器选择器可以定义五个不同的标准来选择要进行格式化的元素。 元素的类型或者名称。如下所示。 h1{color:red;
} 元素所在的上下文。如下所示。 h1 em{color:red;
} 元素的类或ID。如下所示。 /*类选择器*/
.error{color:red;
}
/*ID 选择器*/
#gaudi{color:red;
} 元素的伪类或伪元素。如下所示。 a:link{color:red;
} 元素是否有某些属性和值。如下所示。 a[title]{color:red
} 按名称选择元素选择要格式化的元素最常见的标准可能是元素的名称。如下所示 h2{color:red;
} 按照类型选择要格式化的元素 输入selector,其中selector是目标元素的类型名称。输入{。输入希望应用到选中元素的样式用属性值得形式表示。输入}结束样式规则。按类或ID选择元素元素中标识了class或id可以在选择器中使用这个标准从而支队已标识的元素进行格式化。推荐使用类选择器。如下所示 /*类选择器*/
.error{color:red;
}
/*ID 选择器*/
#gaudi{color:red;
} 按类选择要格式化的元素 输入.点号。不加空格直接输入classname. 输入{。 输入希望应用到选中元素的样式用属性值得形式表示。 输入}结束样式规则。 按id选择要格式化的元素 输入#井号。不加空格直接输入id。输入{。输入希望应用到选中元素的样式用属性值得形式表示。输入}结束样式规则。按上下文选择元素根据元素的祖先、父元素或同胞元素来定位需要格式化的元素。 祖先ancestor是包含目标后代descendant元素的任何元素不管它们之间隔了多少代。 按祖先元素选择要格式化的元素 输入希望格式化的元素的祖先元素的选择器。输入一个空格。如果需要对后续的每个祖先元素重复以上两步。输入希望格式化的元素的选择器。 .architect p{color:red;
} 按父元素选择要格式化的元素 输入希望格式化的元素的父元素的选择器。输入大于号。如果需要对后续每代父元素重复以上两步。输入希望格式化的元素的选择器。 .architectp{color:red;
} 按相邻同胞元素选择要格式化的元素 输入包含在同一父元素中的、直接出现在目标元素前面的元素选择器。输入加号。如果需要对每个后续的同胞元素重复以上两步。输入要格式化的元素的选择器。 .architect pp{color:red;
} 选择第一个或者最后一个子元素有时需要选择仅作为某元素第一个或最后一个子元素的元素。需要使用伪类:firsh-child和:last-child。如下 li:frist-child{color:red;
}li:last-child{color:red;
} 选择某元素的第一个或者最后一个子元素进行格式化 输入代表我们想应用样式的第一个或者最后一个子元素。选择第一个子元素输入:first-child。最后一个子元素输入:last-child。 选择元素的第一个字母或者第一行分别使用:first-letter和:first-line伪元素只选择元素的第一个字母或第一行。如下 P:first-letter{color:red;font-size:1.4em;font-weight:bold;
}p:first-line{color:red;
} 选择元素的第一个字母 输入要对其格式化的元素选择器。输入:first-letter。 选择元素的第一行 输入要对其第一行进行格式化的元素的选择器。输入:first-line。 按状态选择链接元素CSS允许根据链接的当前状态对他们进行格式化。 按状态选择要格式化的链接元素的步骤 输入aa是链接元素的名称。输入冒号前后都没有空格。完成第2步后执行下列操作影响链接状态。输入link以设置从未被激活或指向当前页没有被激活或指向的链接的外观。输入visited以设置访问者已激活过链接的外观。输入focus前提是链接是通过键盘选择并已准备好激活的。输入hover以设置光标指向链接时链接的外观。输入active以设置激活过的链接的外观。 /*未访问过*/
a:link{color:red;
}
/*访问过的链接*/
a:visited{color:orange;
}
/*链接获取焦点*/
a:focus{color:purple;
}
/*光标停留在连接上*/
a:hover{color:green;
}
/*激活链接时*/
a:active{color:blue;
} 一定要按照以下的顺序定义规则link、visited、focus、hover、active缩写为LVFHA。 按属性选择元素对给定属性或属性值的元素进行格式化。例如 p[class]{color:red;
} 按属性选择要格式化的元素 输入要考察其属性的元素的选择器。输入[。输入选择元素需要考察的属性的名称。根据需要输入属性的匹配符号和匹配值。输入。如果想要为元素指定其他属性或者属性值。重复2-4步骤。属性选择器参考表选择器属性值[attribute]匹配指定属性不论具体指是什么。[attributevalue]完全匹配指定属性值。[attribute~value]属性值是以空格分隔的多个单词其中有一个完全匹配指定值。[attribute|value]属性值以value-打头。[attribute^value]属性值以value开头value为完成的单词或单词的一部分。[attribute$value]属性值以value结尾value为完整的单词或单词的一部分。[attribute*value]属性值为指定值的子字符串。 /*选择rel属性值等于external的a元素*/
a[relexternal]{color:red;
}/*配置以空格相隔的多个单词中的一个*/
article[class~barcelona]{color:red;
}/*这个选择器也能匹配因为这个选择器匹配部分字符串*/
article[class*barcelona]{color:red;
}/*选择任何带有lang属性且属性值以es开头的h2*/
h2[lang|es]{color:red;
}/*选择任何带有lang属性且属性值以es开头的元素*/
*[lang|es]{color:red;
}/*选择既有href属性又有任意是属性值包含单词howdy的title属性的a元素*/
a[href][title~howdy]{color:red;
}/*选择既有href属性又有任意属性值包含how的title属性的a元素*/
a[href][title*how]{color:red;
}/*匹配href属性值以http://开头的a元素*/
a[href^http://]{color:red;
}/*匹配任何src属性值完全等于logo.png的img元素*/
img[srclogo.png]{border:1px solid green;
}/*匹配任何src属性值以.png结尾的img元素*/
img[src$.png]{border:1px solid green;
} 指定元素组对于使用相同样式规则的多个元素可以使用元素组设置样式规则。 将样式应用于元素组的步骤 输入第一个元素名称。输入逗号。输入第二个元素名称。对其他元素重复第二和第三步。 h1,
h2{color:red;
} 组合使用选择器现实中常常需要组合使用以上技术才能找到要格式化的元素。如 /*选择em元素包含在p元素中这样的p元素是lang属性值以es开头的h2元素的直接相邻同胞元素且class等于project的任何元素的子元素*/
.project h2[lang|es]p em{color:red;
}
