样式表分类

　　1 内联式    在head后加style   在style里写选择器  

       2 外部式    创建css文本 ，在文本里写样式  用link连接将样式套入

       3内嵌式   独立写个样式在必须head后 

 

选择器

    1 标签选择器 用表签名做选择器            : 直接在css里边写标签的名称 比如h1 div

     2  class选择器 都是.{}开头                     : html 里边写class=“ 选择器名称”   css里边写 .+选择器名称{}

     3 ID选择器       都是以#开头                   :html 里边写id=“选择器名称”          css里边写#+选择器名称{}

     4  复合选择器    用，隔开表示并列        ：直接在css里边写两个以上的选择器的时候，用，隔开 ，比如id1，id2{}

     5  后代选择器     用空格隔开表示后代   ：用空格隔开表示标签的下级标签的选择器 例如 div p{} 就是选择div下的p标签

     6  筛选选择器    用.开头                       

 

 

存否和值选择器

 

这些选择器允许基于一个元素自身是否存在（例如href）或者基于各式不同的按属性值的匹配，来选取元素。

 

选择器示例描述
[attr] a[title] 匹配带有一个名为attr的属性的元素——方括号里的值。
[attr=value] a[href="https://example.com"] 匹配带有一个名为attr的属性的元素，其值正为value——引号中的字符串。
[attr~=value] p[class~="special"]

匹配带有一个名为attr的属性的元素 ，其值正为value，或者匹配带有一个attr属性的元素，其值有一个或者更多，至少有一个和value匹配。

注意，在一列中的好几个值，是用空格隔开的。
[attr|=value] div[lang|="zh"] 匹配带有一个名为attr的属性的元素，其值可正为value，或者开始为value，后面紧随着一个连字符。

 

下面的示例中，你可以看到这些选择器是怎样使用的。

 

  • 使用li[class]，我们就能匹配任何有class属性的选择器。这匹配了除了第一项以外的所有项。
  • li[class="a"]匹配带有一个a类的选择器，不过不会选中一部分值为a而另一部分是另一个用空格隔开的值的类，它选中了第二项。
  • li[class~="a"]会匹配一个a类，不过也可以匹配一列用空格分开、包含a类的值，它选中了第二和第三项。

 

子字符串匹配选择器

这些选择器让更高级的属性的值的子字符串的匹配变得可行。例如，如果你有box-warning和box-error类，想把开头为“box-”字符串的每个物件都匹配上的话，你可以用[class^="box-"]来把它们两个都选中。

选择器示例描述
[attr^=value] li[class^="box-"] 匹配带有一个名为attr的属性的元素，其值开头为value子字符串。
[attr$=value] li[class$="-box"] 匹配带有一个名为attr的属性的元素，其值结尾为value子字符串
[attr*=value] li[class*="box"] 匹配带有一个名为attr的属性的元素，其值的字符串中的任何地方，至少出现了一次value子字符串。

下个示例展示了这些选择器的用法：

  • li[class^="a"]匹配了任何值开头为a的属性，于是匹配了前两项。
  • li[class$="a"]匹配了任何值结尾为a的属性，于是匹配了第一和第三项。
  • li[class*="a"]匹配了任何值的字符串中出现了a的属性，于是匹配了所有项。

 

     

 

选择器属性值大小写不区分

如果你想在大小写不敏感的情况下，匹配属性值的话，你可以在闭合括号之前，使用i值。这个标记告诉浏览器，要以大小写不敏感的方式匹配ASCII字符。没有了这个标记的话，值会按照文档语言对大小写的处理方式，进行匹配——HTML中是大小写敏感的。

 

下面的示例中，第一个选择器将会匹配一个开头为a的值，这样它只匹配了第一项，因为另外两项开头是大写的A。第二个选择器使用了大小写不敏感的标记，于是匹配了所有项。

 

 

 

 例如：

<h1>Case-insensitivity</h1>
<ul>
    <li class="a">Item 1</li>
    <li class="A">Item 2</li>
    <li class="Ab">Item 3</li>
</ul>
li[class^="a"] {
    background-color: yellow;
}

li[class^="a" i] {
    color: red;
}

 

 

样式属性  

     1   <del></del> ：     删除线

     2   <boder-radivs>后跟像素或百分比：       圆角                （注意：百分比情况下最多只能加到百分比）

     3  <box-shadow>   颜色后跟3个数值        表示方块阴影

     4  <text-shadow>    颜色后跟3个数值       表示文字阴影

     5 <position>     定位

     6<margin:0px auto>居中

     7<float>排版方式  从左到右或从右到左