CSS概要

墨蓝 2022-06-13 20:21 222阅读 0赞

CSS规则由两部分组成：选择符和属性

selector{ property:value; property:value value value; property:value,value,value,value; }
    selector,selector{ property:value; }

> 选择符

## \- 类型选择符 ##

样式化的元素或HTML标签命名

h1{ font-size:120%; }
    p{ color:blue; }

## \- 类选择符 ##

可以在不同的元素上多次使用相同的CSS规则，类选择符以“.”开头

.warning{ border:1px solid black; padding:40px; }

## \- ID选择符 ##

类似于类选择符，但是一个ID选择符在整个Web文档中只出现一次，以”\#“开头

#navigation{ text-align:justify; }

## \- 后代选择符 ##

后代选择符在一行里依次相接，并且将覆盖类型选择符合类选择符的样式

li a{ text-decoration:none; }

## \- 子选择符 ##

只有当一个元素是父元素的直接子代时，该元素才会被样式化

div > strong{ text-decoration:underline; }

## \- 通配选择符 ##

仅以一个”\*“表示，在该选择符中设定的属性会应用于所有元素

*{ font-family:Verdana,Arial,sans-serif; }

## \- 相邻选择符 ##

相邻描述的是页面标记流里两个元素左右相邻的关系，用”+“衔接

li + li{ font-size:200%; }

该规则选择的是紧跟在li之后的li对象

## \- 属性选择符 ##

*  \[属性\] - 基于属性的匹配

a[href]{ text-decoration:none; }

只要a标签申明了href属性，超级链接就没有下划线

*  \[属性=值\] - 基于值的匹配

a[href='csscookbook.com']{ text-decoration:none; }

只要链接指向的是csscookbook.com，这个链接就没有下划线

*  \[属性~=值\] - 有些元素属性中可能包含若干个值（以空格分开），这种模式匹配属性值中包含特定值的所有元素

a[title ~= 'digital']{ text-decoration:none; }

只要“digital”出现在a元素的title属性里，这个链接就没有下划线修饰

*  \[属性 |= 值\] - 这种模式匹配属性值里包含特定值，且特定值后带有连字号的匹配

a[href |= 'digital']{ text-decoration:none; }

如果a元素的href属性里带有“digital-”，这个链接就没有下划线

## \- 伪类 ##

a:link { color: #FF0000}
    a:visited { color: #00FF00}
    a:hover { color: #FF00FF}
    a:active { color: #0000FF}

*提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。a:active 必须被置于 a:hover 之后，才是有效的。*

p:first-child { font-weight: bold; }

*选择首个子对象*

q:lang(no){
        quotes: "~" "~"
    }
    
    <p>一些文本 <q lang="no">段落中的引用</q> 一些文本。</p>

*:lang 伪类允许您为不同的语言定义特殊的规则*

## \- 伪元素 ##

“first-letter” 伪元素用于向文本的首字母设置特殊样式

p:first-letter{ color:#ff0000; font-size:xx-large; }

“first-line” 伪元素用于向文本的首行设置特殊样式

p:first-line{ color:#ff0000; font-variant:small-caps; }

“:before” 伪元素可以在元素的内容前面插入新内容

h1:before{ content:url(logo.gif); }

“:after” 伪元素可以在元素的内容之后插入新内容

h1:after{ content:url(logo.gif); }

> 盒模型

\[CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距(margin），边框(border)，填充(padding)，和实际内容(content)。  
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

1.  W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分
2.  IE盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的content 部分包含了 border 和 padding  
    \]([https://img-blog.csdn.net/20170615132137163?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTURyZWFtbG92ZQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast][https_img-blog.csdn.net_20170615132137163_watermark_2_text_aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTURyZWFtbG92ZQ_font_5a6L5L2T_fontsize_400_fill_I0JBQkFCMA_dissolve_70_gravity_SouthEast])

[https_img-blog.csdn.net_20170615132137163_watermark_2_text_aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTURyZWFtbG92ZQ_font_5a6L5L2T_fontsize_400_fill_I0JBQkFCMA_dissolve_70_gravity_SouthEast]: https://img-blog.csdn.net/20170615132137163?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTURyZWFtbG92ZQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast