概述
第三周学习周记
- 前言
- 一、CSS简介
- 二、CSS语法
- 1. CSS实例
- 2. CSS注释
- 三、CSS中Id和Class选择器
- 1. Id选择器
- 2. Class选择器
- 四、CSS创建
- 1. 外部样式表
- 2. 内部样式表
- 3. 内联样式
- 总结
前言
在第二周进一步了解了HTML后，有了一定的HTML基础，接下来将进一步学习CSS。
一、CSS简介
CSS指的是层叠样式表(Cascading Style Sheets)，是用来显示HTML等文件样式的计算机语言，而样式通常存储在样式表中，把样式添加到HTML4.0中，是为了解决内容与表现分离的问题。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
二、CSS语法
1. CSS实例
CSS由两个主要的部分构成：选择器，以及一条或多条声明。
h1
{
color:red;
font-size:12px;
}
在上面的实例中：
h1为选择器；
color和font-size为属性；
red和12px为其属性对应的值。
2. CSS注释
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
/*这是个注释*/
p
{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}
三、CSS中Id和Class选择器
如果要在HTML元素中设置CSS样式，则需要在HTML元素中设置"id"和"class"选择器。
1. Id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式，HTML元素以id属性来设置id选择器，CSS中id选择器以"#"来定义。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习</title>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>
2. Class选择器
class选择器用于描述一组元素的样式，class选择器区别于id选择器，class可以在多个元素中使用，在HTML中以class属性表示，在CSS中，类选择器以一个点"."号显示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习</title>
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
</body>
</html>
四、CSS创建
样式表的方法有三种：
外部样式表、内部样式表和内联样式。
1. 外部样式表
当样式需要被应用到多个页面的时候，外部样式表将起到作用，可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
2. 内部样式表
当单个文件需要特别的样式时，就可以用内部样式表，在 head 部分通过style标签定义内部样式表。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
3. 内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式，在相关的标签中使用样式属性，其样式属性可以包含任何CSS属性。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
总结
在CSS的学习中，我学到了如何创建样式表来同时控制多重页面的样式和布局，接下来会继续深入学习CSS。
最后
以上就是清脆狗为你收集整理的第三周学习周记——了解CSS前言一、CSS简介二、CSS语法三、CSS中Id和Class选择器四、CSS创建总结的全部内容，希望文章能够帮你解决第三周学习周记——了解CSS前言一、CSS简介二、CSS语法三、CSS中Id和Class选择器四、CSS创建总结所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复