首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【前端】CSS : 入门

【前端】CSS : 入门

作者头像
Gavin-ZYX
发布2019-03-04 16:27:25
9350
发布2019-03-04 16:27:25
举报

介绍

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

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

语法

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

图片来自http://www.runoob.com/css/css-syntax.html

如:

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>

效果:这个选择器只能在<p>中生效

注:类名的第一个字符不能使用数字!它无法在 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(部分内容来源)

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.12.18 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 介绍
  • 语法
  • 样式
    • 内联样式
      • 内部样式
        • 外部样式
        • 选择器
          • 基本选择器
            • 更多选择器用法
              • 组合选择器
                • 属性选择器
                • 参考
                领券
                问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档