CSS3基本语法-优快云博客

2.CSS语法

2.1.CSS基本语法

在页面上使用时，通常在head>部分写入style标签，样式代码放在style标签中。CSS基本语法：

选择器 {
    样式声明;
    样式声明;
    ... ...
}

什么是选择器：选择器就是找到你要渲染的那个HTML标签。

<style type="text/css">
    /* p是html选择器，表示给所有的p标签设置样式 */
    p {
        color:red;
        font-size:24px;
    }
</style>

2.2.CSS选择器

2.2.1.基本选择器

基本选择器有三种：

HTML标签选择器：直接作用于某个HTML标签

<style>
    p {
        color:red;
        font-size:24px;
    }
</style>

类选择器：可在页面中被多次使用

<style>
    .one {
        color:red;
        font-size:24px;
    }
</style>
<p class="one">这是一个p标签</p>

ID选择器：作用于同一ID的某个资源，同一个页面中只能使用一次

<style>
    #first {
        color:red;
        font-size:24px;
    }
</style>
<!-- 在一个页面中，id属性的值必须唯一 -->
<p id="first">这是一个p标签</p>

2.2.2.层次选择器

后代选择器： E F 选择所有被E元素包含的F元素

生效范围：所有div内部的p元素，不论嵌套层级

<style>
    div p {
        color:red;
        font-size:24px;
    }
</style>
<div>
    <p>这是div里的p标签</p>
</div>
<p>这是p标签</p>

子选择器： E > F 选择所有作为E元素的子元素F（只选择第一代子元素）

<style>
    div > p {
        color:red;
        font-size:24px;
    }
</style>
<div>
    <p>这是div里的p标签</p>
    <ul>
        <li><p>这是ul里的p标签</p></li>
    </ul>
</div>

群组选择器：多个选择器通过逗号连接而成，利用群组选择器同时声明风格相同样式

<style>
    html,body {
        width:100%;
        height:100%;
    }
</style>

2.2.3.伪类选择器

类型选择器（:first-of-type、:last-of-type、:nth-of-type）

:first-of-type
选择父元素下同类型元素的第一个，不受其他类型元素干扰
示例：.container div:first-of-type 选中第一个 <div> 元素
:last-of-type
选择父元素下同类型元素的最后一个
示例：.container p:last-of-type 选中最后一个 <p> 元素
:nth-of-type(n)
通过数学公式定位同类型元素的第n个
支持参数：3n+2（每3个选第2个）、odd（奇数）、even（偶数）

位置选择器（:nth-child、:nth-last-child、:last-child）

:nth-child(n)
选择父元素中所有子元素的第n个
示例：.container :nth-child(2) 选中第二个子元素（无论类型）
:nth-last-child(n)
从末尾开始反向计数选择第n个子元素
示例：.container :nth-last-child(2) 选中倒数第二个子元素
:last-child
选择父元素中最后一个子元素
错误示例：.container :last-child(2) 语法错误（该伪类不接受参数）

:first-of-type：选择一组子元素中的第一个（即使有其他子元素，也不会受到影响）

<style>
    div p:first-of-type{
        color: red;
    }
</style>
<div>
    <p>dsfsdgfdsgdfg</p>
    <p>dsfsdgfdsgdfg</p>
    <p>dsfsdgfdsgdfg</p>
</div>

:last-of-type：选择一组子元素中的最后一个（即使有其他子元素，也不会受到影响）

<style>
    div p:last-of-type{
        color: red;
    }
</style>
<div>
    <p>dsfsdgfdsgdfg</p>
    <p>dsfsdgfdsgdfg</p>
    <p>dsfsdgfdsgdfg</p>
</div>

:nth-of-type()：使用索引来选择某一个子元素（即使有其他子元素，也不会受到影响）

<style>
    div p:nth-of-type(2){
        color: red;
    }
</style>
<div>
    <p>dsfsdgfdsgdfg</p>
    <p>dsfsdgfdsgdfg</p>
    <p>dsfsdgfdsgdfg</p>
</div>

4.E:nth-child(n)

匹配父元素中的第n个子元素E

选择器书写时需换行

<style>
			.container
			:nth-child(2){
				background-color: red;
			}
			
		</style>

<div class="container">
			<div class="node">1 d-1</div>
			<p class="status">2 p-a</p>
			<div class="node">3 d-2</div>
			<div class="node">4 d-3</div>
			<p class="status">5 p-b</p>
			<p class="status">6 p-c</p>
			<div class="node">7 d-4</div>
			<div class="node">8 d-5</div>
		</div>

5.E:nth-last-child(n)

匹配父元素中的倒数第n个结构子元素E

<style>
			.container
			:nth-last-child(2){
				background-color: red;
			}
			
		</style>

<div class="container">
			<div class="node">1 d-1</div>
			<p class="status">2 p-a</p>
			<div class="node">3 d-2</div>
			<div class="node">4 d-3</div>
			<p class="status">5 p-b</p>
			<p class="status">6 p-c</p>
			<div class="node">7 d-4</div>
			<div class="node">8 d-5</div>
		</div>

6.E:last-child

匹配父元素中最后一个E元素

<style>
			.container
			:last-child(2){
				background-color: red;
			}
			
		</style>

<div class="container">
			<div class="node">1 d-1</div>
			<p class="status">2 p-a</p>
			<div class="node">3 d-2</div>
			<div class="node">4 d-3</div>
			<p class="status">5 p-b</p>
			<p class="status">6 p-c</p>
			<div class="node">7 d-4</div>
			<div class="node">8 d-5</div>
		</div>

2.3.CSS引入方式

CSS的引入方式共有三种：

行内样式
内嵌样式
外部样式。

前面我们使用的CSS引入方式就是内嵌样式。

2.3.1.行内样式

写在某个标签中，只对本行有效。（内联样式）

<p style="font-family:华文行楷;color:green;font-size:32px">这是一个行内样式</p>

2.3.2.内嵌样式

样式写在某个页面的style标签中，只对本页面有效。前面的例子都是内嵌样式。

<style>
    div > p {
        color:red;
        font-size:24px;
    }
</style>

2.3.3.外部样式

将样式代码写在一个单独的文件中（.CSS文件），使用时要将这个.CSS文件导入使用。

<link href="common.css" rel="stylesheet" type="text/css" />

注意：href和rel属性是必须的。

2.4.CSS优先级

2.4.1.基本规则

CSS 优先规则：

从引用方式方面来说：行内样式 > 内嵌样式/外部样式
从选择器方面来说：ID 选择器 > 类选择器（属性选择器、伪类选择器） > 标签选择器

选择器类型	示例	权值	优先级顺序
ID选择器	#header	100	最高
类/属性/伪类选择器	.menu, [type]	10	次高
标签/伪元素选择器	div, ::before	1	最低

2.4.2.样式叠加时的优先级

如果在同一选择器上，外部样式、内嵌样式、行内样式都对某一属性使用了样式，也就是存在样式叠加时，那么要使用以下3个原则来决定到底哪一种样式有效。

就近原则：距离最近的样式有效。
顺序原则：这里的顺序是指的书写顺序，也就是最后书写(不是调用)的样式有效。
精细原则：或者叫特殊原则。既选择器的指向越精细越优先。

2.5.CSS继承

2.5.1.html 文档树（DOM节点树）

整个html就是一个树型结构。它的根就是html。

2.5.2.CSS继承

CSS继承规则：

子标签可以继承父标签的样式风格
子标签的样式不会影响父标签的样式风格
一般只有文字文本具有继承特性，如文字大小、文字加粗、文字颜色、字体等。

2.6.CSS中的颜色

主要有以下两种：

使用英文单词作为颜色值：如：red、green、blue、black、white、yellow ......
使用十六进制的颜色值：如：#000000 #FFFFFF 45F87E（其中前两位表示红色，中间两位表示绿色，最后两位表示蓝色。也可以使用简写：FF0088 -> #F08）