阅读 89

【前端】CSS : 入门

介绍

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

CSS 可以通过以下方式添加到HTML中:内联样式、内部样式、外部引用。 这三种方式下面会一一介绍

语法

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

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

如:

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

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

样式

CSS 可以通过以下方式添加到HTML中

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

内联样式

写在标签的style中,当特殊的样式需要应用到个别元素时,就可以使用内联样式。

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

效果:

内联样式

内部样式

当单个文件需要特别样式时,就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表。

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

效果:

内部样式

外部样式

当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。(常用的写法) 例:在css文件夹下创建mystyle.css,并使用<link>引用

css

<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属性不要以数字开头,数字开头的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选择器

当然,class选择器可以选择多个

例:

.class1 {
    color: #27ad9a;
}
.class2 {
    background: #000000;
}
复制代码
<a class="class1 class2">class选择器-a</a>
复制代码

效果

class1 class2
会发现,两个选择器的属性都会表现出来

疑问:如果两个选择器中有相同的属性会怎么样?试一下 例: 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选择器属性会覆盖前面定义的 带着这个想法再来验证一下:

调换class1、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选择器同时使用

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

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

.class2 {
    color: #FFFFFF;
    background: #000000;
}
p {
    color: yellow;
}
复制代码
<p class="class2">class选择器-p</p>
复制代码

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

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

更多选择器用法

多个

同时作用于h1,h2,p

h1,h2,p
{
    color:green;
}
复制代码
嵌套
  • p{ }: 为所有 p 元素指定一个样式。
  • .marked{ }: 为所有 class="marked" 的元素指定一个样式。
  • .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
  • p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。

例:

.class1 {
    background: #27ad9a;
}
p {
    color: #27ad9a;
}
.class1 p {
    color: #FFFFFF;
}
p.class1 {
    color: #FFFFFF;
}
复制代码
<p>p标签 绿色文本</p>
<span class="class1">class1 绿色背景</span><br/>
<div class="class1"><p>class1中的p标签 绿色背景,白色文本</p></div>
<p class="class1">p标签 + class1 绿色背景,白色文本</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 : display

CSS : position

CSS : float

CSS : 对齐、居中

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

关注下面的标签,发现更多相似文章
评论