【前端】CSS-2022/7/20

前言

开CSS了,但这不意味着HTML就全部学完了,还有一些东西我们还没讲(比如表单),还有一些琐碎的标签,但到了后面就发现这些标签也没什么好讲的了,需要用到的时候自己查查文档就好

CSS是什么

CSS 指层叠样式表 ( Cascading (级联)  Style Sheets)

样式表定义如何显示 HTML 元素,就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。

CSS负责的是网页的样式,一个没有CSS的网页基本就是全文字的,甚至连颜色都只有白与黑的单一样式。难以理解?下面有张对比图:

当我的个人网站关闭CSS后:

图片[1]-【前端】HTML-2022/7/16-Abyss-博客

如果开了CSS(正常显示):

图片[2]-【前端】HTML-2022/7/16-Abyss-博客

我猜没有任何一个人会喜欢第一张图。

当然你也可以直接在HTML里面就写好CSS,但这样做并不规范。

CSS的三种写法

  • 内联样式
    • 写法:
      • 在标签内部通过sty1e属性来设置元素的样式
    • 问题:
      • 使用内联样式,样式只能对一个标签生效,
      • 如果希望影响到多个元素必须在每一个元素中都复制一遍
      • 并且当样式发生变化时,我们需要一个个的修改,非常繁琐。
    • 注意:开发时绝对不要使用内联样式(要明确分工,HTML文档中只处理结构)
  • 内部样式表
    • 写法:
      • 将样式编写到<head>标签中的<style>标签里,然后通过css的选择器来选中元素并为其设置各种样式。
    • 好处:
      • 可以同时为多个标签设置祥式,并且修改时只需要修改一处即可,方便对样式进行复用
    • 问题:
      • 这种写法是将页面的所有CSS都写在HTML文档里了,这样会让HTML过于冗长,并且分工不明确
      • 内部样式表只能对一个网页起作用,不能跨页面进行复用
    • 注意:开发时也尽量不要使用内联样式。
  • 外部样式表
    • 写法:
      • 将CSS样式内容写在一个单独的CSS文件里(文件后缀名:.css),再在HTML文档中使用<link>标签引用该样式表。
      • link标签的写法:<link rel=”stylesheet” href=”文件路径”>
    • 好处:
      • 只要写好了一个CSS外部样式表,就可以在任何网页中进行引用,只要知道了这个CSS文件的路径,在另一个服务器的网站里也能引用。
    • 将样式编写到外部的CSS文件中,可以让浏览器的缓存机制发挥作用,从而加快网页的加载速度,提高用户的体验。
    • 注意:在开发时,使用外部样式表是最方便,最规范,最推荐的。

CSS基本语法

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

图片[3]-【前端】CSS-2022/7/20-Abyss-博客

选择器通常是需要改变样式的 HTML 元素

每条声明由一个属性和一个组成(名值对结构)

属性是您希望设置的样式属性。每个属性有一个值。属性被冒号分开。

选择器决定该样式要在哪个HTML元素中被应用。

CSS声明总是以分号 ; 结束,声明总以大括号 {} 括起来:

p {color:red;text-align:center;}

 

为了让CSS可读性更强,你可以每行只描述一个属性:

实例

p { 
color:red; 
text-align:center; 
}

 

CSS 注释

CSS注释以 /* 开始, 以 */ 结束, 例如:

/*这是个注释*/

 

常用选择器

元素选择器

元素选择器,根据元素的名称进行选择,优点是一次就能选中页面中的所有需要同样的元素,但这也是它的缺点,在很多时候,我们希望同样的元素在不同的情况下也能有不同的效果,比如:

<h1>月夜忆舍弟</h1>
<h2>杜甫</h2>
<p>戍鼓断人行,边秋一雁声。</p>
<p>露从今夜白,月是故乡明。</p>
<p>有弟皆分散,无家问死生。</p>
<p>寄书长不达,况乃未休兵。</p>

<h1>夜上受降城闻笛</h1>
<h2>李益</h2>
<p>回乐烽前沙似雪,受降城外月如霜。</p>
<p>不知何处吹芦管,一夜征人尽望乡。</p>

 

我希望《月夜忆舍弟》中h1标签的颜色为红色,《夜上受降城闻笛》中h1标签的颜色为绿色

怎么办?还是直接用元素选择器吗?

h1{ 
color: red; 
}

这样会把所有h1标签都设成红色。

这个时候我们可以使用id选择器

id选择器

id选择器是根据元素的id属性值来选择的,且这个id属性值必须唯一,不能同时给两个元素设置成同一个id。

我们需要这么写:

HTML:

<h1 id="red">月夜忆舍弟</h1>
<h2>杜甫</h2>
<p>戍鼓断人行,边秋一雁声。</p>
<p>露从今夜白,月是故乡明。</p>
<p>有弟皆分散,无家问死生。</p>
<p>寄书长不达,况乃未休兵。</p>

<h1 id="green">夜上受降城闻笛</h1>
<h2>李益</h2>
<p>回乐烽前沙似雪,受降城外月如霜。</p>
<p>不知何处吹芦管,一夜征人尽望乡。</p>

CSS:

#red{
    color: red;
}
#green{
    color: green;
}

id属性值必须唯一,如果我们非要复用的话,就可以选择class选择器:

class选择器

class选择器又称类选择器,类选择器作用与id选择器类似,但它可以复用(允许同时在不同的地方设置同一个属性值)因此,它也可以用来分组。

我们需要这么写:

HTML:

<h1 class="red">月夜忆舍弟</h1>
<h2>杜甫</h2>
<p>戍鼓断人行,边秋一雁声。</p>
<p>露从今夜白,月是故乡明。</p>
<p>有弟皆分散,无家问死生。</p>
<p>寄书长不达,况乃未休兵。</p>

<h1 class="red">夜上受降城闻笛</h1>
<h2>李益</h2>
<p>回乐烽前沙似雪,受降城外月如霜。</p>
<p>不知何处吹芦管,一夜征人尽望乡。</p>

CSS:

.red{
    color: red;
}

也就是说,下面的写法是正确的:

HTML:

<h1 class="color font">月夜忆舍弟</h1>
<h2>杜甫</h2>
<p>戍鼓断人行,边秋一雁声。</p>
<p>露从今夜白,月是故乡明。</p>
<p>有弟皆分散,无家问死生。</p>
<p>寄书长不达,况乃未休兵。</p>

<h1 class="color font">夜上受降城闻笛</h1>
<h2>李益</h2>
<p>回乐烽前沙似雪,受降城外月如霜。</p>
<p>不知何处吹芦管,一夜征人尽望乡。</p>

CSS:

.color{
    color: red;
}
.font{
    font-size: 30px
}

只要注意:多个class属性值用空格隔开即可

之后还会有更多的选择器需要学习。

© 版权声明
THE END
喜欢就支持一下吧
点赞0赞赏 分享
评论 抢沙发

请登录后发表评论