【前端】CSS : 入门

时间 2019-11-08

标签前端 css 入门栏目 CSS 繁體版

原文原文链接

介绍

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。css

CSS 能够经过如下方式添加到HTML中：内联样式、内部样式、外部引用。这三种方式下面会一一介绍html

语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明：浏览器

（ 图片来自www.runoob.com/css/css-syn…）

如：post

p {
    color: #FFFFFF;
    background: #27ad9a;
}
复制代码

上面就是一个对<p>标签订义的样式，样式中申明了颜色和背景。spa

样式

CSS 能够经过如下方式添加到HTML中3d

内联样式 - 在HTML元素中使用"style" 属性
内部样式 - 在HTML文档头部 <head>区域使用<style> 元素来包含CSS
外部引用 - 使用外部 CSS 文件

内联样式

写在标签的style中，当特殊的样式须要应用到个别元素时，就能够使用内联样式。例code

<p style="color: #FFFFFF; background: #27ad9a;">震惊</p>
复制代码

效果： cdn

内部样式

当单个文件须要特别样式时，就能够使用内部样式表。你能够在<head> 部分经过 <style>标签订义内部样式表。例htm

<head>
    <style type="text/css"> p { color: #FFFFFF; background: #27ad9a; } </style>
</head>
<p>我什么都没写</p>
复制代码

效果： blog

外部样式

当样式须要被应用到不少页面的时候，外部样式表将是理想的选择。使用外部样式表，你就能够经过更改一个文件来改变整个站点的外观。（经常使用的写法） 例：在css文件夹下建立mystyle.css，并使用<link>引用

<head>
    <link rel="stylesheet" type="text/css" href="css/mystyle.css">
</head>
<p>外部样式表</p>
复制代码

效果：

接下来有个疑问，若是这几种样式同时使用会怎么样？ 写个例子，定义好：外部样式：black；内部样式：green；内联样式：red；

p {
    color: black;
}
复制代码

<head>
    <style> p { color: green; } </style>
</head>
复制代码

<p style="color: red;">
复制代码

场景1：外部样式 + 内部样式

结果：之内部样式为准

场景2：外部样式 + 内联样式

结果：之内联样式为准

场景3：内部样式 + 内联样式

结果：之内联样式为准

场景4：外部样式 + 内部样式 + 内联样式

结果：之内联样式为准

能够下个结论： 优先级：内联样式>内部样式>外部样式

选择器

在 CSS 中，选择器是一种模式，用于选择须要添加样式的元素。

基本选择器

id选择器

id 选择器能够为标有特定 id 的 HTML 元素指定特定的样式。用**#**定义选择器的id，标签中的id与其对应便可

例：

#p1 {
    color: #27ad9a;
}
复制代码

<p id="p1">id选择器</p>
复制代码

效果：

注：ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起做用。

class选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class能够在多个元素中使用。用**.（点）表示类选择器，标签中的class**与其对应便可

例：

.class1 {
    color: #27ad9a;
}
复制代码

<p class="class1">class选择器-p</p>
<a class="class1">class选择器-a</a>
复制代码

效果：

固然，class选择器能够选择多个

例：

.class1 {
    color: #27ad9a;
}
.class2 {
    background: #000000;
}
复制代码

<a class="class1 class2">class选择器-a</a>
复制代码

效果

会发现，两个选择器的属性 都会表现出来

疑问：若是两个选择器中有相同的属性会怎么样？试一下 例： class2中也定义了color属性，两个相同的属性结果？

.class1 {
    color: #27ad9a;
}
.class2 {
    color: #FFFFFF;
    background: #000000;
}
复制代码

<a class="class1 class2">class选择器-a</a>
复制代码

效果

猜测：后引用的选择器属性会覆盖前面引用的 为了验证这个猜测，把使用顺序调换一下

<a class="class2 class1">class选择器-a</a>
复制代码

效果：

呃~~尴尬，猜测错误

继续猜测：后定义class选择器属性会覆盖前面定义的 带着这个想法再来验证一下：

调换class一、class2的顺序

.class2 {
    color: #FFFFFF;
    background: #000000;
}

.class1 {
    color: #27ad9a;
}
复制代码

<a class="class2 class1">class选择器-a</a>
复制代码

效果：

结论：若是有相同属性，后定义的class选择器会覆盖以前定义的 （至于缘由，有待指教）

标签选择器

class选择器还能够能够指定特定的HTML元素使用class

**例：**指定p元素颜色

p.class1 {
    color: #27ad9a;
}
复制代码

<p class="class1">class选择器-p</p>
<a class="class1">class选择器-a</a>
复制代码

**效果：**这个选择器只能在

中生效

注：类名的第一个字符不能使用数字！它没法在 Mozilla 或 Firefox 中起做用

疑问：id选择器和class选择器同时使用，会怎么样？

**例：**定义相同的属性color

#p1 {
    color: #27ad9a;
}
.class2 {
    color: #FFFFFF;
    background: #000000;
}
复制代码

<p id="p1" class="class2">class选择器-p</p>
复制代码

效果：

结论选择器优先级：id选择器>类选择器>标签选择器

疑问：外联样式和class选择器同时使用会怎么样？ 例：

.class2 {
    color: #FFFFFF;
    background: #000000;
}
p {
    color: yellow;
}
复制代码

<p class="class2">class选择器-p</p>
复制代码

效果： 选择器覆盖了外部样式。

结论
样式、选择器优先级：内联样式>选择器>内部样式>外部样式

组合选择器

在 CSS3 中包含了四种组合方式:

后代选择器(以空格分隔)
子元素选择器(以大于号分隔）
相邻兄弟选择器（以加号分隔）
普通兄弟选择器（以破折号分隔）

后代选择器

用于选取某元素的后代元素例：

div p {
    background-color: #27ad9a;
    color: #FFFFFF;
}
复制代码

<div>
    <p>在div中的p</p>
    <span>
        <p>在更div、span中的p</p>
    </span>
</div>
<p>在外面的p</p>
复制代码

效果：

子元素选择器

只能选择做为某元素子元素的元素

例：

div>p {
    background-color: #27ad9a;
    color: #FFFFFF;
}
复制代码

html代码同上 效果：

只有在div中的p有效果，而span中的p就没有了

相邻兄弟选择器

可选择紧接在另外一元素后的元素，且两者有相同父元素。

例：

div+p {
    background-color: #27ad9a;
    color: #FFFFFF;
}
复制代码

<div>div</div>
<p>跟在div后面的p</p>
<p>跟在div、p后面的p</p>
复制代码

效果：

后续兄弟选择器

选取全部指定元素以后的相邻兄弟元素例：

div~p {
    background-color: #27ad9a;
    color: #FFFFFF;
}
复制代码

html代码同上 效果：

属性选择器

属性选择器是一种特殊类型的选择器，它根据元素的属性和属性值来匹配元素。它们的通用语法由方括号 ([]) 组成，其中包含属性名称，后跟可选条件以匹配属性的值。属性选择器能够根据其匹配属性值的方式分为两类：存在和值属性选择器和子串值属性选择器。

例：

[food] {
    background-color: #7FD0F3;
}
[food="vegetable"] {
    color: #FFFFFF;
}
复制代码

<div food="meat">meet</div>
<div food="vegetable">vegetable</div>
复制代码

效果：

参考

runoob（部份内容来源）

相关阅读

有错误之处，感谢指出，接收批评

【前端】CSS : 入门

介绍

语法

样式

内联样式

内部样式

外部样式

场景1：外部样式 + 内部样式

场景2：外部样式 + 内联样式

场景3：内部样式 + 内联样式

场景4：外部样式 + 内部样式 + 内联样式

选择器

基本选择器

id选择器

class选择器

标签选择器

更多选择器用法

多个

嵌套

组合选择器

后代选择器

子元素选择器

相邻兄弟选择器

后续兄弟选择器

属性选择器

参考