学习笔记：网络技术Ch5.CSS3和响应式网页设计

(来源：notes of course Web Technology.Ch5.CSS3 and RWD)

049_001.jpg

前面谈到了HTML，但是一般来说，HTML只能传输数据的内容，如果想要字能上点颜色，变变位置呀，根据程序员的习惯，这种东西肯定是要再来一个包解决，这样把字和形态分离更有利于后期的修改以及引用。

于是CSS诞生了，他只用来搞内容的样式，在整个文章中起着格式刷的作用。

CSS语法（Syntax）：

包括两个部分：

  • selector
  • declaration block

来个例子：

1
2
3
4
selector{
property1: value1;
property2: value2:
}

也就是

1
2
3
4
h1{
color: red;
font-size: 10px;
}

先来看看selector：

分为：

  • Universal selector: *{。。。}
  • Element/Type selector：h1,h2,h3{ 。。。}
  • ID selector: 在定义内容时会定义个id， #intro{。。。}
  • Class selector：也会定义class，h1.main{…..}
  • Child selector: 就是包含内的元素 p>a{…..}
  • descendant selector：选择父类的 p a{…..}
  • Atrribute selector:选择特定的属性的，p[type=”new”]{…..}
  • Pseudo element selector: 不好指定对象，比如我要第一个单词什么样 h1.main:first-letter{…..}
  • Pseudo class selector:指定一个类，比如所有的链接什么样：a:link{….}

那么，如果有叠加的CSS，咋办，就是按照权重（priorities),进行分配，，指定的越细，越针对到个体的，权重越高，巧的是，正是上面排列的顺序。

如果我指定了body，想他下面的p也是这样样子咋整，当然你可以再指定p也是这样样子，但是程序员懒，所以也可以用继承（inheritance），跟java差不多，extend关键词。

好，那怎么把CSS写进HTML里呢？

  • 直接在HTML前面加style关键词
  • 在head里面加个style块
  • 把它写成个css文件，和html放一个文件夹里

推荐第三种，实现了完全的分开（seperate）。

如果是只传来一个网页，不想传来一个网页包，推荐第二种，比如邮件。

好，问题就又来了，如果我这三种CSS都写了呢？

还是按照权重来看，越细致，指定到个人的，权重越高，巧的是，还是按照上面的顺序，权重依次降低。

Box Model：

所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

049_002.jpg

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
div {
    background-color: lightgrey;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}
</style>
</head>
<body>

<h2>盒子模型演示</h2>

<p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>

<div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div>

</body>
</html>

输出结果是：

049_003.jpg

盒子模型就是为了更好的布局调整，但是在考虑布局调整之前，先来看看，如何丈量你所看到的东西：

  • Absolute unit：就是实际的宽度长度，pixel
  • Relative unit：就是相对的长度，%、em（相对于周围元素）、rem（相对于root)

布局：

CSS Position(定位)

CSS Float（浮动） | 菜鸟教程

RWD：

随着2007年发布了iphone，手机也能浏览html文件了，于是，很多网站为了能让手机适配，就开发了专门用手机访问的页面，他们和传统页面有着不同的url，但是因为手机的尺寸千变万化，修改一次网站，就要多增加许多的工作量，这是一件繁琐的事情。

众所周知，懒使得科学进步，有没有一种，只开发一个网页，他能根据屏幕自动适配排版的技术呢？

RWD就出现了，因为CSS3的media queries特性，CSS可以知道用户的屏幕类型，分辨率，以及比例，所以CSS3为RWD的出现制造了条件。

设计思路（Content Strategy）：

  • Think about the content before thinking about the designof a website
  • Most important information should be at the top of a page
  • Divide content into chunks that can be rearranged on a page
  • All users (regardless of the device) should have accessto all the content of a website
CS硕士课程
学习笔记：网络技术Ch5.CSS3和响应式网页设计
https://yiyuwang.be/2021/01/01/2021-01-01-341213103/
作者
StevenWong
发布于
2021年1月1日
许可协议