当前位置 博文首页 > mxd:(17)css 杂记之一

    mxd:(17)css 杂记之一

    作者:[db:作者] 时间:2021-08-28 13:20

    (1)当同一个HTML元素被应用不止一个样式定义时?

    ??????? 一般而言,所有的样式会根据以下的规则层叠与一个新的虚拟样式表中:1. 浏览器缺省设置 2.外部样式表 3.内部样式表(<head>标签内) 4.内联样式(元素内部)。优先级为4>3>2>1。

    (2)创建css的三种方式?

    ????????? 1、外部样式表??? <head>标签中添加<ling rel="stylesheet" type="text/css" href="***.css" />

    ????????? 2、内部样式表?? <head>标签中添加<style type="text/css">样式</style>

    ????????? 3、内联样式?????? 在相关元素中使用style属性

    (3)CSS继承

    ??????? CSS的继承是指应用于某个元素的属性会被该元素的所有子元素继承。而THML中有如下<td class="code"></td>,CSS有如下规则:td {font-family: courier,courier-new,serif;} 或?td.code {font-family: courier-new,serif;} 。前一个表示对所有td应用样式font-family: courier,courier-new,serif?,而不是body设置的样式。后一条则表示对于包含code类的td,优先使用样式font-family: courier-new,serif,而不是对全部td设置的样式,更不是body设置的样式。所以,选择器更加特定于他所应用的元素。

    (4)选择器

    ? ? ? ? ? ??1、类型(元素)选择器:h1,td,p{}

    ????????? 2、id选择器:#id p {}??? id选择器常用于建立派生选择器,表明指定id的div等中的某些元素应用何种样式

    ????????? 3、 类选择器 (类的第一个字符不能为数字,firefox不支持)

    ?????????????????? .class p {}构建派生选择器,? td.classname {}? 包含类classname的td应用对应规则。

    多类选择器: .class1 .class2 {} 只有同时包含两个累的元素才能匹配该规则,例如:

    ? ?<p class="class2 class1"></> 或者<p class="class2 class3 class1"></>


    ????????? 4、通配符选择器:* {} ?为所有元素添加属性

    ? ? ? ? ? ??5 属性选择器:[title] {} 带有title属性的所有元素; [title=ss]{} title属性值为ss的所有元素

    ????????????? (举个栗子:input [type="text"] {}??? input[type="button"] {})而a[href] [title] {}则对同时有href和title属性的a元

    素应用规则

    ? ? ? ? ? 6、后代选择器(依据元素位置的上下文关系定义):li strong {} li元素中的strong 元素将应用该样式

    ? 7、子元素选择器(与后代选择器先比,只能选择作为某元素直接子元素的元素):li > strong {}

    ? ? ? ? ??8、相邻兄弟选择器(对于有相同父元素的多个元素,匹配紧邻的后一个元素):li + strong {},将匹配与li紧邻

    ? ? ? ? ? ? ? ? 的兄弟元素strong




    cs
    下一篇:没有了