《Head First HTML and CSS 》学习笔记——7、CSS入门

最新推荐文章于 2024-07-25 15:44:34 发布

Stephen-wzw

最新推荐文章于 2024-07-25 15:44:34 发布

阅读量147

点赞数

分类专栏：《Head First HTML and CSS》学习笔记文章标签： css html html5 css3

本文链接：https://blog.csdn.net/weixin_51370367/article/details/114271582

版权

《Head First HTML and CSS》学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

加一点样式

从第一章到第六章，都是在学习HTML的相关知识，用来创建Web页面结构。从这一章开始学习CSS，来控制页面的表现。

CSS基本语法

假设有一所房子，主人要重新设计一到两个房间，看看他的想法吧：

bedroom {
  drapes: blue;      
  carpet: wool shag;	
}

bathroom {
  tile: 1in white;
  drapes: pink; 
}

CSS中的每个语句包括一个场所（如卧室），以及这个场所的一个属性（如窗帘或地毯），还有要应用到这个属性的一个样式（如蓝色，或一英寸的瓷砖）。

现在回到HTML，HTML没有房间，但它有元素，这些元素将作为要指定样式的场所。想把你的<p>元素的墙刷成红色？没问题。只不过段落没有墙，所以必需换成段落的background-color属性：

p {
  background-color: red;
}

选择需要增加样式的元素，在这里就是<p>元素。注意，在CSS中，不用在名字两边加尖括号。
把<p>元素的所有样式放在大括号中。
最后指定你想要设置样式的属性和属性值，在这里就是把background-color设置为red。注意，中间有一个冒号相隔，最后加一个分号结尾。

想要指定多个属性，比如你还想为段落增加一个边框，可以这样：

p {
  background-color: red;
  border: 1px solid gray;	/* 粗细为1像素、灰色、实线 */
}

注意：

可以采用很多不同方式为不同的元素指定样式，甚至可以为元素子集指定样式。
你可以在MDN上了解哪些属性可以设置样式。

把CSS放入HTML中

现在给Head First休闲室的主页增加CSS，直接在<head>元素中增加开始和结束style标记。

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Head First Lounge</title>
  
  <style>
    p {
      color: maroon;
    }
    
    h1,h2 {
      font-family: sans-serif;
      color: gray;
    }
    
    h1 {
      border-bottom: 1px solid black;
    }
  </style>
  
</head>

<body>
  <h1>Welcome to the New and Improved Head First Lounge</h1>
  <p>
    <img src="images/drinks.gif" alt="Drinks">
  </p>
  <p>
    Join us any evening for refreshing
    <a href="beverages/elixir.html">elixirs</a>,
    conversation and maybe a game or two of
    <em>Dance Dance Revolution</em>.
    Wireless access is always provided;
    BYOWS (Bring Your Own Web Server).
  </p>
  <h2>Directions</h2>
  <p>
    You'll find us right in the center
    of downtown Webville. If you need help finding
    us, check out our
    <a href="about/directions.html">detailed directions</a>.
    Come join us!
  </p>
</body>

</html>

注意：

改变段落中的文本颜色（茶红色），使用CSS color属性（并不是font-color或text-color）。注意，段落中链接的颜色不会变。
font-family：字体类型。
为多个元素编写一个规则，只需在选择器之间加上逗号，如”h1, h2“。
border-bottom：下边框。

选择器

从CSS的基本语法中已经知道如何选择一个或多个元素来增加样式，比如：

h1，h2 {
  color: gray;
}

h1就称为选择器，样式应用到选择器选择的元素。CSS允许你指定各种选择器，来确定将样式应用到哪些元素，我们只能对体（body）中的元素增加样式。

创建一个CSS文件

之前已经为”lounge.html“增加了所有样式，不过”elixir.html“和”directions.html“还需要和主页外观一致。把style元素和其中的所有CSS规则复制到这两个文件吗？不是这样的。有一种更好的办法：

取出”lounge.html“中的规则，把他们放到一个”lounge.css“的文件中。
从”lounge.html“文件创建一个到这个文件的外部链接。
在”elixir.html“和”directions.html“中创建同样的外部链接。

/* lounge.css */

h1, h2 {    
  font-family: sans-serif;
	color: gray;
}

h1 { 
	border-bottom: 1px solid black;
}

p {
  font-family: sans-serif;
	color: maroon;
}

外部链接（将<style>元素替换为<link>元素）：

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Head First Lounge</title>
  <link type="text/css" rel="stylesheet" href="lounge.css">
</head>

<body>
  <h1>Welcome to the New and Improved Head First Lounge</h1>
  <p>
    <img src="images/drinks.gif" alt="Drinks">
  </p>
  <p>
    Join us any evening for refreshing
    <a href="beverages/elixir.html">elixirs</a>,
    conversation and maybe a game or two of
    <em>Dance Dance Revolution</em>.
    Wireless access is always provided;
    BYOWS (Bring Your Own Web Server).
  </p>
  <h2>Directions</h2>
  <p>
    You'll find us right in the center
    of downtown Webville. If you need help finding
    us, check out our
    <a href="about/directions.html">detailed directions</a>.
    Come join us!
  </p>
</body>

</html>

剖析<link>元素：<link type="text/css" rel="stylesheet" href="lounge.css">

使用<link>元素链接外部信息，它是一个void元素，没有结束标记。
type="text/css"：指定这个信息的类型是”text/css“，这个一个CSS样式表。在HTML5中，这个属性是可选的。
rel="stylesheet"：指定了HTML文件与所链接的文件之间的关系。这里要链接一个样式表，所以使用值”stylesheet“。
href="lounge.css"：样式表放在这个href中（相对链接或完整的URL）。

继承

注意到了吗？为p选择器增加font-family属性时，也会影响<p>元素中内部元素的字体。这就是继承，比如你会从你父母那里继承蓝眼睛，同样的，元素也可以从它们的父元素那里继承样式（不是所有的样式都能继承）。

如果想要大多数元素都继承这个font-family属性，把它上移到<body>元素怎么样？这样一来，<body>元素所有子元素的字体都会改变。再去测试下新CSS吧：

body {
	font-family: sans-serif;
}

h1, h2 {    
	color: gray;
}

h1 { 
	border-bottom: 1px solid black;
}

p {
	color: maroon;
}

覆盖继承

如果不需要每个元素都使用这个san-serif字体，比如，希望<em>元素使用serif字体。可以只为<em>元素提供一个特定的规则来覆盖继承：

body {
	font-family: sans-serif;
}

h1, h2 {    
	color: gray;
}

h1 { 
	border-bottom: 1px solid black;
}

p {
	color: maroon;
}

em {
  font-family: serif;
}

注意：

CSS注释：/* 注释可以跨多行 */
你可以在MDN上了解哪些属性可以继承。

为单独的段落指定样式

如何让每个饮料下面的文本与这个饮料的颜色一致？实质上就是为每个段落单独设置一个样式。在这里引入类的概念，我们可以定义一类元素，并对该类的所有元素应用样式。

首先打开”elixir.html“文件，找到”Green Tea Cooler“段落，为<p>元素增加一个属性”class“，并提供类名：<p class="greentea">。

再在CSS文件中创建一个类选择器：p.greentea。先选择要处理的元素，再用一个”.“指定元素中一个类，最后是类名。

body {
	font-family: sans-serif;
}

h1, h2 {    
	color: gray;
}

h1 { 
	border-bottom: 1px solid black;
}

p {
	color: maroon;
}

p.greentea {
	color: green;
}

如果想把<h1>、<h2>、<p>、<blockquote>都增加到greentea类，可以这样做：

/* 如果省略所有的元素名，只有一个点，后面是类名，那么这个规则会应用到这个类的所有成员 */

.greentea {  
	color: green;
}

同时，元素还可以加入多个类，只需把各个类名放在class属性中，之间用空格分开即可，类名的顺序并不重要，如：<p class="greentea raspberry blueberry">。

《Head First HTML and CSS 》学习笔记——7、CSS入门

目录

加一点样式

CSS基本语法

把CSS放入HTML中

选择器

创建一个CSS文件

继承

覆盖继承

为单独的段落指定样式

相关链接