CSS样式表基础-优快云博客

本文链接：https://blog.youkuaiyun.com/jlu16/article/details/74908935

一.CSS基本语法规则

1.CSS语句的组成规则

每个CSS语句都由选择符,样式属性,属性值组成:

selector {property:value;......}
/*注意：value不要加引号*/

2.CSS的继承性

父标签的特性会被子标签继承。

/*CSS*/
p{color:red;}

<!--HTML-->
<p>hello<b>world</b></p>

<!--这里的 world 将会显示为红色，因为标签继承了父标签p-->

3.CSS样式表的注释格式

与html的注释:

<!--这里是要注释的内容-->

不同，在CSS中用：

/*这里是要注释的内容*/

进行注释。

4.多选择符共用规则时

当不同的选择符共用一样的CSS样式时，可以将多个选择符写在同一语句中，中间用逗号隔开：

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

二.CSS选择符类型

1.标记选择符

即将html中的标记作为选择符，那么在对应标记中的内容将使用相应的CSS样式。

例如：

/*CSS*/
body { color:red;}

2.类选择符

基本语法：

(标记名).类名{样式属性：取值; ......}

其中标记名是可以省略的。当标记名被省略时，对所有有 class=类名 的标记都可以使用相应样式；当写有标记名时，只有具有class=类名并且标记为相应标记名时才会运用相应的CSS样式。

例如：

/*CSS*/
p.test{color:red;}


<!--HTML-->
<!--p中字体颜色为红，运用了样式-->
<p class='test'>hello world</p>
<!--h1中没有运用样式-->
<h1 class='test'>hello world</h1>

3.id选择符

在HTML文档中运用id标识一个唯一的元素,id选择符对这一个唯一的元素进行样式定义。

例如：

/*CSS*/
#test{color:red;}

<!--HTML-->
<p id='test'>hello world</p>

4.包含选择符

包含选择符对标记1中的标记2进行样式定义，而不在标记1中的标记2无法运用对应样式。

例如：

/*CSS*/
p b{color:red;}

<!--HTML-->
<!--运用了样式-->
<p><b>hello world</b></p>
<!--没有运用样式-->
<b>hello world</b>

5.伪类

用来定义元素的某种状态时的样式，使用最广泛的是对于超链接的样式定义。

未访问的链接状态(a:link)
已访问的链接状态(a:visited)
鼠标停在链接上的状态(a:hover)
被激活（点击瞬间）的状态(a:active)

例如：

/*CSS*/
a:link{color:red;}
/*应用该样式的网页中的链接在未被点击访问时字体为红色*/

三.使用CSS样式表

1.行内样式

即直接在标记中进行样式定义，这样样式只在该标记中有效，基本语法：

<标记 style=property:value; property:value;...>
</标记>

2.内嵌样式

将样式定义放在head中，这样对整个文件都有效。

例如：

<!--HTML-->
<html>
    <head>
        <style type='text/css'>
        <!--
         /*这里是CSS定义*/
         -->
        </style>
    </head>
</html>

要将CSS定义放在HTML注释中是为了防止当浏览器不支持CSS时，CSS代码直接显示在网页中。

3.链接外部样式

这种方式使用link标签链接外部的.css文件。

例如：

<!--HTML-->
<html>
    <head>
        <link rel='stylesheet' type='text/css' href='url' />
    </head>
</html>

其中的rel,type当使用CSS时为固定格式，href为css文件地址。

4.导入外部样式表

导入外部样式表是在内嵌样式表中导入外部.css文件。

例如：

<!--HTML-->
<html>
    <head>
        <style type='text/css'>
        @import url(addr);
        ...
        ...
        </style>
    </head>
</html>

其中的addr为外部样式表的地址。

样式表的优先级

如果有不同的样式表且定义有冲突，那么究竟使用哪一个定义呢？
样式表的优先级如下：

行内样式
链接外部样式表
内嵌样式表
导入外部样式表