静态网页第四讲

时间：2024-03-10 22:03:24
 
 
### 课前吐槽
  • 其实我是拒绝讲解CSS的。我们知道，HTML是规划网页布局的，而CSS则是美化网页的。
  • 举个不是那么恰当的例子，HTML就像一个人的五官，大家都是两只眼睛一个鼻子，两只耳朵一张嘴，脸型就是圆脸方脸。再细一点就是告诉你有没有眉毛，眼睫毛，胡须，鼻梁是高是矮，眼睛是小是大等等。
  • CSS就像是整形和美容化妆，你要让这个人颜值大幅度提升。动作大点的，就是要不要削骨、垫鼻梁、整牙，开眼角什么的啊，动作小点，就是画一画眼线啊，腮红涂不涂啊，口红色是什么颜色啊，脸上擦的粉等等。所以我这种资历浅薄，经验稀少的人，过来教大家怎么化妆，就很难受。我可以告诉大家怎么使用工具，但是成果长得丑，那就没办法了。理想情况下，就是我教大家的如何把一张脸整成网红脸，（至于网红脸好不好看，那就仁者见仁智者见智了）
  • CSS有多细呢？我举一个例子。（表格的边框的例子）
  • 另外我要吐槽的一个点就是，CSS它是不正交的。
    • 啥叫正交呢？比如你看一个视频，播放速度，声音，亮度一般是你要考虑的，你调播放速度时声音和亮度不会被影响，同样你调声音、播放速度，亮度不会被影响，这就叫正交。
    • CSS它是不正交的，想象你看视频时，你调个声音，屏幕亮度突然变了，播放速度突然变了，那感觉一定是非常非常糟糕。
  • 总结下来，就是CSS它不是科学，它是艺术。
 
### 课程中常用的HTML+CSS应用方式（事实上CSS有三种应用方式，课程最后我再给出其他两种）
<!DOCTYPE html>
<html>
<head>
    <meta charset=UTF-8" />
    <title>HTML5 Template</title>
    <style>
    /* CSS 规则放在<style>标签中 */
    </style>
</head>
<body>
    <!-- HTML 元素放在<body>标签中 -->
</body>
</html>
 
 
### CSS的规则
 
CSS的规则其实很简单，只包含两部分。
  • 要修改的元素
  • 要应用给该元素的样式
比如：p {color: red;}
 
下面我们来看第一个CSS的例子：
代码4.1 CSS初步介绍
 
对这个基本的结构，有三种方法可以拓展
  • 第一种方法：多个声明包含在一条规则里。
    p{color:red;    font-size:12px;    font-weight:bold;}
    这样一条规则就把段落设置为红色，12像素大，粗体。
 
  • 第二种方法：多个选择符（选择器）组合在一起
    h1{color:blue;    font-weight:bold;}
    h2{color:blue;    font-weight:bold;}
    h3{color:blue;    font-weight:bold;}
    这样，可以把h1,h2,h3都变成蓝色，粗体
    其实也可以这样写：
    h1, h2, h3{color:blue;    font-weight:bold;}（推荐这样写，减少重复的代码）
 
  • 第三种方法：多条规则应用给一个选择符（选择器）
    h1, h2, h3{color:blue;    font-weight:bold;}
    h3{font-style:italic;}
    这是你已经给h3定义规则之后，又再给h3增加一条规则，想让他变为斜体。
 
 
### HTML5知识的补充以及div块的介绍
 
 
（在介绍这里时，我需要对HTML5的知识进行一些补充），这里我们仅作了解
 
 
 
同样的，规划网页布局，我们常常会用到标记div，然后div中有两个重要的属性，一个是id属性，一个是class属性。
 
下面我们通过代码来介绍这两个属性。
代码4.2 div元素中id属性与class属性的介绍。
 
 
 
### 上下文选择符
 
现在我们定下一个小目标。你想写一条 CSS 规则，希望给位于附注栏（aside 元素）中的一个段落添加样式，让这个段落看起来与正文（比如 article 元素）中的段落不一样。但我们到目前为止看到的规则，会影响整个文档中同种类型的所有元素。应该怎么做呢？
可以应用上下文选择符。
 
上下文选择符的语法规则如下：
标签1    标签2{声明}
（这里标签1必须是标签2的祖先）
 
现在我们先看下面这段代码：
代码4.3 上下文选择符（选择器）
 
 
#### 特殊的上下文选择符
 
  • 子选择符，
    • 标签1 > 标签2（其中标签1必须是标签2的父亲）
  • 紧邻同胞选择符
    • 标签1 + 标签2（其中标签2必须紧紧跟着标签1）
  • ID和类选择符
    • ID用    #
    • class用    .
    • 标签带类选择器
      • 比如有多个类出现在不同标签下，你需要用    标签.类    来选中这个标签下单独的类
 
### 属性选择器
 
  • 属性名选择器
 
    标签名[属性名] {声明}
    例如：img[title] {border:2px solid blue;}
 
什么情况下会用到这个属性选择符呢？比如，可以在用户鼠标移动到这些图片上时，此时浏览器会显示一个（利用 title 属性中的文本生成的）提示条。一般来说，人们经常给 alt 和 title 属性设定相同的值。alt 属性中的文本会在图片因故未能加载时显示，或者由屏幕阅读器朗读出来。而 title 属性会在用户鼠标移动到图片上时，显示一个包含相应文本的提示。
 
  • 属性值选择器
    
    标签名[属性名=“属性值”]{声明}
    例如：img[title="red flower"] {border:4px solid green;}
 
### 伪类选择器
 
这里我还是给出伪类选择器的链接吧，讲伪类还是比较耗费时间的。https://www.w3school.com.cn/css/css_pseudo_classes.asp
 
 
### 伪元素选择器
 
顾名思义，伪元素就是，你的HTML文档中没有这个元素，然后CSS添上去的元素，称为伪元素。
这里介绍几个比较有用的伪元素选择器：
 
代码4.4：伪元素选择器
 
 
### 继承 
 
CSS 中的祖先元素也会向后代传递一样东西：CSS 属性的值。文档层次结构时提到过，body 是所有元素的老祖宗，所有标签都是它的后代。直到后代元素中出现新的样式，覆盖了前面的样式。
 
 
 
 
### CSS的其他其他两种应用方式：
 
 
目前的话，其实只是讲解了CSS基础的一部分，要想学好CSS，至少还要学习盒子模型和定位。
 
 
 
### 盒子模型
 
咱们之前曾经在讲div块的时候，画出来许多的盒子。
其实，HTML的每一个元素都会在页面上生成一个盒子。因此，HTML实际上是由一堆盒子组成。默认情况下，我们是看不清这个盒子的，我们可以通过Google 浏览器的工具看到这个盒子模型。
 
 
 
 
我们可以把盒子模型中的元素分为三组：
  • 边框（border），可以设置边框的宽窄，颜色和样式
  • 内边距（padding），可以设置盒子内容区与边框的距离
  • 外边距（margin），可以设置盒子和相邻元素的间距
 
一个盒子有四条边，因此它和边框，内边距，外边距相关的属性，分别有四个，即上、右、下、左。
 
 
今天的作业，希望大家去了解一下CSS中的盒子模型与定位。
 
 
 
 
 
 
 
 
 

相关文章