样式表分类
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>排版方式 从左到右或从右到左