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

最新推荐文章于 2024-04-25 09:32:26 发布

VIP文章 Stephen-wzw

最新推荐文章于 2024-04-25 09:32:26 发布

阅读量127

点赞数

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

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

版权

加一点样式

从第一章到第六章，都是在学习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

最低0.47元/天解锁文章

Stephen-wzw

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
《Head First HTML and CSS 》学习笔记——7、CSS入门

目录加一点样式CSS基本语法把CSS放入HTML中选择器创建一个CSS文件继承覆盖继承为单独的段落指定样式相关链接加一点样式从第一章到第六章，都是在学习HTML的相关知识，用来创建Web页面结构。从这一章开始学习CSS，来控制页面的表现。CSS基本语法假设有一所房子，主人要重新设计一到两个房间，看看他的想法吧：bedroom { drapes: blue; carpet: wool shag; }bathroom { tile: 1in white; drape
复制链接

扫一扫