HTML语言基础学习(II)-基础CSS for dummy

请注意,本文编写于 166 天前,最后修改于 130 天前,其中某些信息可能已经过时。

那么这两天先继续将HTML语言一口气学完好了。这一次的Markdown文档是在新版本的印象笔记上键入的,印象笔记目前支持MarkDown语言,所以在这里尝试使用以下。
接着上一次的傻瓜教程,今日依然是傻瓜CSS教程。


Introduction

我们已经建立了基础的HTML知识和对CSS的了解,CSS是Cascading Style Sheets的简称,描述一个网络页面的presentation,是美化网页的关键。在上一篇的style章节中我们已经在tags中使用过style属性来给给相应的网站内容添加样式了。这些添加在tags中的style属性被称为lnline styles
另一种调用CSS的方式是,我们可以将CSS declaration放在<style>标记内部,并隐藏在<head>标记内。

<!doctype html>
<html>
 <head>
 <style>
   p{
      color: blue;
      font-size: 14px;
     }
   </style>
  </head>
  <body>
   <p> 我需要CSS。</p>
   <p>我也需要。</p>
  </body>
 </html>

这段代码展示出来便是:

1.png
1.png

通常我们用这种方法给整个网页的内容设置相同的样式,因此,给网页设置一个(外部样式表单)External style sheets,再将这个表单链接(Link)到网页中会更加方便。
外部样式表单是一个独立的text文件,使用css的代码和.css的文件名后缀。和HTML文件一样,我们可以使用任何txt编辑器来创建它。

 p {
    color: blue;
    font-size: 14px:
    }

这是一个external style sheets,将他link进网页中的方式是添加<link>标记,在此标记中,我们需要添加一个type属性为"text/css",添加一个rel属性为"stylesheet",最后使用href属性来指向CSS文件:

<!doctype html>
<html>
  <head>
    <link rel="stylesheet"
    type="text/css" href="styles.css">
   </head>
   <body>
   <p>我需要CSS!</p>
   <p>我也需要</p>
  </body>
 </html>

需要注意的是,当我们打开一个网页,style sheets通常会串进一个单独的表单,如果在HTML的tags中也有同样style属性的设置,即会产生冲突之处,一旦产生冲突,网页会默认执行位列最末的样式表现形式。

Selectors

简而言之,style sheets的规则包含选择器(selectors)声明(declarations)

 p {
    color: blue;
    font-size: 14px:
    }

在这段代码中,p为选择器,可以选择HTML里所有<p>中的内容,使用{}中的声明。
选择器可以用来选择基于HTML的IDtypeclasses等元素。

type

type是最简单的,<p>,<body>这类皆为type

ID

当我们想要选择多个元素中某一个特定元素,即如果包含多个<p>,想要给其中一个特定的<p>中内容设置特征样式的时候,我们便要用到ID选择器。
在CSS文件中,我们可以创造一个特定的id,选择器记号为:#id

#topParagraph {
               font-size: 16px;
                    }

插入相应html中为:

<!doctype html>
<html> 
  <head>
    <link rel="stylesheet"
     type="text/css" href="styles.css">
  </head>
  <body>
   <p id="#topParagraph"> 我是一个调用了css样式的段落。 </p>
   <p>我是一个普通的段落。</p>
  </body>
 </html>

要注意的是,一个特定的id只能在网页html中插入一次,即因为id的特殊性,它只能出现在一个tag记号中。

classes

如果想要多次使用,并插入一堆特定的元素,我们需要使用class属性。
在CSS文件中,我们可以创造一系列特定的class,选择器记号为:.class

 .box {
        border-style: solid;
       }
  .primary-text{
              font-family: "Lucida Grande"
               }

这些class选择器可以根据需要单独插入一个tags,也可以一次性插入多个class。如:

<!doctype html>
<html> 
  <head>
    <link rel="stylesheet"
     type="text/css" href="styles.css">
  </head>
  <body>
   <p cass="primary-text"> I am a paragraph。 </p>
   <p cass="box"> I am also a paragraph。 </p>
   <div class="box primary-text" >我不是段落,so what?</div>
  </body>
 </html>

以上代码在<div>标记中,插入了.box.primary-text这两个选择器。

2.png
2.png

 
 

Property

property是CSS中需要修订的部分,包括字符大小,字体样式等等,对应值有较多的数据类型,如font-size的值可以使用关键词(px, em等),长度和百分号(%)等不同的描述方式。
其中值得注意得是,px是一个绝对值,而em是一个相对值,em取决与default值,2em表示default值的两倍。
 
property也可以是用来控制一个边框HTML元素高度和宽度的值以及其单位。
比如

.box  {
   border-style: solid;
   width: 100%;
   height: 50px;  
  }
  {!doctype html>
   <html>
    <head>
    <link rel="stylesheet"
     type="text/css" href="styles.css">
  </head>
  <body>
    <div class="box"></div>
  </body>
 </html>

3.png
3.png

字体

对于字体来说,使用的property包含font family,font size,font style, font weight等等。

有的时候,我们的网页中出现的漂亮字体,在对方的电脑上会无法显示。因此当我们希望使用一种非常用的font family时,最好对字体库进行一个备份,即多添加几种font-family

  . headline { 
     font-family:"Akzidenz-Grotesk","Helvetica","Serif";
     font-size:1.5em;
     font-weight: bold:
     }
   {!doctype html>
   <html>
    <head>
    <link rel="stylesheet"
     type="text/css" href="styles.css">
  </head>
  <body>
   <h1 class="headline">I shot the serif</h1>
  </body>
 </html>

5.png
5.png

浏览器会尝试调用所设定的font family,如果无法获取,会接着调用第二个。到最后会使用默认的serif或者sans-serif的font family。

快捷方式

快捷方式可以让你在一行代码中设定所有的性质,是一种更加省时的方式,让你的style sheets变得更加易于阅读。如下的代码将font的性质都整合到了一行中。

  .trailer { 
     font:italic bold 1.5em “Lucida Grande", sans-serif;
     }
   {!doctype html>
   <html>
    <head>
    <link rel="stylesheet"
     type="text/css" href="styles.css">
  </head>
  <body>
   <div class="trailer">我是你的字体,你是我的类型~</div>
  </body>
 </html>

边框的性质也可以整合,如.box{ border: 2px dotted red;}可以出现一个高度为2px的红色点点框框。

颜色

之前我们已经提到,颜色的property为color或background-color,值得一提的是,property后的值可以有多种表现形式。
最普通的是直接输入英文单词,如color: red;background-color: yellow;等等。这些和颜色相关的单词总共有140个,涵盖了大多数的颜色,甚至是papayawhip和peachpuff这种生僻的颜色词汇。但是,140个单词依然无法包含所有的颜色,因此,我们用到更多的是十六进制颜色(hexadecimal colors)的值。十六进制颜色在网页上非常常用,始于一个#符号,跟着3个或者6个字符,来表示各种各样的颜色。
 
 

Boxes

盒模型和基础的display属性

盒模型(box model)是一个长方形的盒子,可以将HTML元素包含在盒子内部。
如给盒子定义一个class,

 .box {
       background-color: gray;
        width: 50px;
        height: 25px;
        }

调用在HTML中,我们可以得到一个灰色的高度为25px,宽度为50px的盒子。
我们还可以用disply属性,将这个盒子变为行内元素(inline)、块级元素(block)和行内块状元素(inline-block)。这三种元素的主要区别是:

  • 行内元素没有宽高,只占据它对应标签的边框所包含的空间;只能容纳文本或者其他内联元素。
  • 块级元素可以包含行内元素和块级元素。
  • 行内块状元素既具有 block 元素可以设置宽高的特性,同时又具有 inline 元素默认不换行的特性。

隐藏特定元素的方式

我们由两种方式可以不显示某些特定的元素。比如添加将visibility属性设置为hidden,或将display属性设置为none。

.box{
   background-color: gray;
   width: 50px;
   height: 25px;
   border: 1px solid black;
   }
  #box1 {
    visibility: hidden;
    }
   #box2 {
    display: none
    }  

这两种方式的区别在于,使用visibility,元素隐藏但是依然占位;使用display,元素消失。

Margins

Margins是盒模型的最外层,在border外提供一个空白区,使得这个元素和其他相邻的元素得以隔开。我们可以使用margin-top,margin-right,margin-bottom和margin-righ的property分别设置盒模型最外层的四个方向的margin长度。
按照上右下左的顺序,我们可以设置margin快捷键,如margin: 10px 25px 10px 25px;

padding

padding是盒模型的填充部分,padding在元素外和border内部创建一个空白区

小结

一般来说,设置宽度和高度,我们实际上设定的是内容的宽高,而在整个维度上,宽高应包括整个盒模型的padding,borders和margins。

  p{ background-color: #44b3c2;
     width: 150px;
     height: 100px;
     padding: 25px;
     border: 25px solid #f1a94e;
     margin: 25px 0px;
     }
{!doctype html>
   <html>
    <head>
    <link rel="stylesheet"
     type="text/css" href="styles.css">
  </head>
  <body>
   <p>这是真实的内容</p>
  </body>
 </html>

通过以上代码,我们可以得到一个总宽度为300px,总高度为200px的盒子内容!

6.png
6.png

 
 

display

现在我们来研究一下元素如何在页面中排版的问题。

float

首先要用到的一个属性就是float
float属性可以让一个元素排布在主要内容的左边或者右边
当元素具有float属性,他们会按照顺序从最初始开始按顺序排布在左边或者右边,直到碰到主题内容或其他float元素的边界。

.box{
  width: 200px;
  height: 200px;
  float: left;
}
 .blue{ background: #44accf;}
.green{ background: #b7d84b;}
.orange{ background: #e2a741;}
.pink{ background: #ee3e64;}
  {!doctype html>
   <html>
    <head>
    <link rel="stylesheet"
     type="text/css" href="styles.css">
  </head>
  <body>
   <div class="blue box"></div>
   <div class="green box"></div>
   <div class="blue box"></div>
   <div class="green box"></div>
  </body>
 </html>

注:此处的background是一个快捷方式,可以设置和background相关的一切内容。
根据这段代码,盒子们按照顺序拍成了一排,并靠左边悬浮。

7.png
7.png

floated也可以作为一个class选择器的属性来使用。

.box{
  width: 200px;
  height: 200px;
}
 .blue{ background: #44accf;}
.green{ background: #b7d84b;}
.orange{ background: #e2a741;}
.pink{ background: #ee3e64;}
.floated{ float: left:}
  {!doctype html>
   <html>
    <head>
    <link rel="stylesheet"
     type="text/css" href="styles.css">
  </head>
  <body>
   <div class="blue floated box"></div>
   <div class="green floated box"></div>
   <div class="orange box"></div>
   <div class="pink box"></div>
  </body>
 </html>

8.png
8.png

在这个图中,我们发现橙色的盒子不见了!其实橙色的盒子在蓝色盒子的正下方
因为悬浮元素取代了正常排,紧跟着被悬浮元素的的元素会被被悬浮元素盖住。

如果我们想让这个橙色的盒子出现,应该怎么做呢?此时添加一个cleared的class选择器即可。

.box{
  width: 200px;
  height: 200px;
}
 .blue{ background: #44accf;}
.green{ background: #b7d84b;}
.orange{ background: #e2a741;}
.pink{ background: #ee3e64;}
.floated{ float: left;}
.cleared{ clear: left;}
  {!doctype html>
   <html>
    <head>
    <link rel="stylesheet"
     type="text/css" href="styles.css">
  </head>
  <body>
   <div class="blue floated box"></div>
   <div class="green floated box"></div>
   <div class="orange cleared box"></div>
   <div class="pink box"></div>
  </body>
 </html>

9.png
9.png

此时,橙色的盒子就出现了~

了解了悬浮的原理,我们可以用悬浮元素来进行一些简单的排版。

#header{
  background: #44accf;
  height: 50px;
}
#content{
   background: #b7d84b;
   width: 75%;
   height: 500px;
   float: left;
}
#navigation{ 
   background: #e2a741;
   width: 25%;
   height: 500px;
   float: right;
}
#footer{ 
    background: #ee3e64;
    height: 50px;
    clear: both
}
  {!doctype html>
   <html>
    <head>
    <link rel="stylesheet"
     type="text/css" href="styles.css">
  </head>
  <body>
   <div id="header"></div>
   <div id="content"></div>
   <div id="navigation"></div>
   <div id="footer"></div>
  </body>
 </html>

10.png
10.png

注意#footer的内容中必须添加clear,不然会被隐藏起来。

position

位置元素也是排版中非常重要的一个元素。
位置元素有以下几种
1.relative
position属性为relative的盒子依然在其正常的排列之内,是相对于其他内容的位置。我们通过添加left,right,top和bottom属性来调整这个盒子的位置。

.box{
  background: #44accf;
  width: 200px; 
  height: 200px;
  position: relative;
  left: 20px;
}
  {!doctype html>
   <html>
    <head>
    <link rel="stylesheet"
     type="text/css" href="styles.css">
  </head>
  <body>
   <div class="box"></div>
  </body>
 </html>

11.png
11.png

2.absolute
position为absolute的盒子不在正常的排布中,它填满它应该填充的地方,不关心其他元素对它造成的影响。

.box{
  background: #44accf;
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
}
  {!doctype html>
   <html>
    <head>
    <link rel="stylesheet"
     type="text/css" href="styles.css">
  </head>
  <body>
   <div class="box"></div>
  </body>
 </html>

12.png
12.png

3.fixed
position为fixed的元素也不在正常排布之列,但是和浏览器的窗口有关,即表示固定在浏览器的某个位置。

#footer {
  background: #44accf;
  height: 20px;
  position: fixed;
  right: 0px;
  bottom: 0px;
  left: 0px;
}
  {!doctype html>
   <html>
    <head>
    <link rel="stylesheet"
     type="text/css" href="styles.css">
  </head>
  <body>
   <div id="footer"></div>
  </body>
 </html>

13.png
13.png

margins

margin也可以作为位置属性的一种。
如果将margin设置为auto,元素与top的距离为0px,且位于窗口左右的中心。

p {
  background: #44accf;
  width: 150px;
  margin: auto;
 }
  {!doctype html>
   <html>
    <head>
    <link rel="stylesheet"
     type="text/css" href="styles.css">
  </head>
  <body>
   <p>将我放在中心吧</p>
  </body>
 </html>

14.png
14.png

如果将右margin和左margin都设置为auto,元素可以出现在垂直中心。

我们同样可以将margin设置为负数!看看接下来的代码:

#header {
  background: #44accf;
  width: 100%;
  height: 50px;
 }
p {
   background: white;
   border: 2px solid #b7d84b;
   width: 50%
   height: 20px;
   padding: 20px;
   margin: -25px auto 0px auto;
}
  {!doctype html>
   <html>
    <head>
    <link rel="stylesheet"
     type="text/css" href="styles.css">
  </head>
  <body>
   <div id="header"></div>
   <p>Fly me to the moon.</p>
  </body>
 </html>

15.png
15.png

下半部份的元素通过margin的负值嵌入了上部分的元素,使用这个技巧,我们可以给网页制作一些overlap的样式。
 
 

Special Selectors

“*”

通用的选择器为*,它适用于任何类型的元素,因此可以选择网页上的每个单独元素。

* {
  border: 1px solid black;
  box-sizing: border-box;
 }
*.box {
   background: #44accf;
}
  {!doctype html>
   <html>
    <head>
    <link rel="stylesheet"
     type="text/css" href="styles.css">
  </head>
  <body>
   <div class="box"></div>
   <p><span>I'm in<span/></p>
   <ul>
    <li><span>I'm not</span></li>
    <li><span>I'm not</span></li>
   </ul>
  </body>
 </html>

16.png
16.png

可以看到*是个很好的方式将每一个元素的box-sizing都变为相应的样式。

“space”

通过使用空格隔开两个selectors,我们可以从一堆tags中挑选出我们想要改变的tags的样式。使得selectors更具有特定性。如p span{}便是将所有<p>中的<span>内部的内容设定为{}中的样式。空格所选择的元素包括子集和任何子子集。

p span {
  font-weight: bold;
 }
  {!doctype html>
   <html>
    <head>
    <link rel="stylesheet"
     type="text/css" href="styles.css">
  </head>
  <body>
   <div class="box"></div>
   <p><span><span/></p>
   <ul>
    <li><span></span></li>
    <li><span></span></li>
   </ul>
  </body>
 </html>

17.png
17.png

可以看到,所有处于<p>标记内部<span>标记里的文字都加粗了,而在<p>标记外部的<span>标记里的文字,没有加粗。

“>”

使用>选择器,可以选择选择>前标记的子标记的内容。需要注意的是,>选择器只选择直接连接的内容,子集又子集里的内容不会被选择。

div > p {
  font-weight: bold;
 }
  {!doctype html>
   <html>
    <head>
    <link rel="stylesheet"
     type="text/css" href="styles.css">
  </head>
  <body>
   <div>
    <p>I'm in</p>
   </div>
   <div>
     <ul>
     <li><p>I'm not</p></li>
     </ul>
   </div>
  </body>
 </html>

18.png
18.png

可以看到,与<div>直接连接的子集中的<p>内文字发生了变化,而没有与<div>直接连接的子集中的<p>内文字没有发生变化。因为这些内容还被诸如<ul><li>的标记隔开了。

“:classes”

在标记后加入:并跟一些特定的属性,可以给页面带来一些特定的修饰。

a {
  background: black;
  color: white;
 }
a:active{
   background: white;
   color: black
}
  {!doctype html>
   <html>
    <head>
    <link rel="stylesheet"
     type="text/css" href="styles.css">
  </head>
  <body>
   <a href=:"http://labgirl-aoi.zone">Follow the white ... link!</a>
  </body>
 </html>

19.png
19.png

当链接还未点击的时候,呈现的样子是黑底白字,而当我们加入了a:active的样式之后,在链接被点击或者打开之后,就会变成白底黑字。这可以提示我们这个链接曾经被打开过。
还有一些类似的:标记如:hover
 
另一个很有用的:classes:first-child。顾名思义,多个子集按顺序排布的时候,是选中父集的第一个子集。

 p:first-child {
  font-weight: bold;
 }
  {!doctype html>
   <html>
    <head>
    <link rel="stylesheet"
     type="text/css" href="styles.css">
  </head>
  <body>
   <div>
    <p>I'm in</p>
    <p>I'm not</p> 
   </div>
   <div>
     <div>I'm not even a paragraph
     <p>I'm not</p> 
     </div>
  </body>
 </html>

20.png
20.png

可以看到,所有父集的第一个<p>子集的样式都发生了变化。
 
::系列是更加精确的选中集合中的内容。
p::first-letter {}可以选择性修饰段落中文字的第一个字母。
再如p::first-line {}可以选择性修饰段落中文字的第一行文字。
 
我们也可以使用tags中的任意一个属性作为选择器。
a[href="http://labgirl-aoi.com"]{}使用中括号把属性包裹起来,相对应tags中的内容便会得到css的修饰。
 
如果一些selectors具有相同的{}中的修饰内容,我们可以用将这些selector写在一起,用逗号隔开。如div, .trailer, #listItem1 {}无论是type,class还是id都可以摆在一起,使用同一套修饰内容。
 
还有一个非常特殊的法则。我们可以通过将selectors排列在一起(不加空格),来制作一个组合。

.box {
  width: 100px;
  height: 100px;
}
.blue.bordered {
  border: 2px solid #7cc4dd;
}
.pink.bordered {
  border: 2px solid #f37792;
}
.blue { background: #44accf; }
.pink { background: #ee3e64; }
  {!doctype html>
   <html>
    <head>
    <link rel="stylesheet"
     type="text/css" href="styles.css">
  </head>
  <body>
   <div class="blue bordered box"></div>
   <div class="pink bordered box"></div>
   <div class="blue box"></div>
   <div class="pink box"></div>
  </body>
 </html>

21.png
21.png

可以看到,不同的组合带来的盒子式样是不一样的~

Specificity

最后我们要来谈一谈如果多个选择器中的style发生冲突的时候,执行选择器的规则。
ID>Classes>Type

#box1 {
  background: green;
}
.box {
  bacground: red;
  width: 200px;
  height: 200px;
}
div {
  background: friebrick;
  border: 2px solid black;
}
  {!doctype html>
   <html>
    <head>
    <link rel="stylesheet"
     type="text/css" href="styles.css">
  </head>
  <body>
   <div class="box" id="box1">
  </body>
 </html>

22.png
22.png

可以看到这个盒子最终执行了id里的颜色,class里的宽高和type里的边框式样。
然而当盒子颜色在三个类型都出现时,最终选择的时ID里的绿色。

。那么我们下次再见。">好了今天的学习就到这里,更新小站简直成为支撑我学下去的动力了... icon_mrgreen.png 。那么我们下次再见。

Comments

添加新评论

已有 2 条评论

花了很多时间啊

Aoi Aoi 回复 @Brian

是吼!有努力学一会!

Title - Artist
0:00