不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start!
第6章 开始学习CSS,为网页添加样式
6-1 认识CSS样式
CSS全称:Cascading Style Sheets叠层样式表
主要用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。
如下列代码:
p{
font-size:12px;
color:red;
font-weight:bold;
}
6-2 CSS样式的优势
以下举例:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
span{
color:blue
}
</style>
</head>
<body>
<p>CSS全称:<span>Cascading Style Sheets</span>叠层样式表
主要用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。</p>
</body>
</html>
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
注:掘金markdown只能识别内联式style。
6-3 CSS代码语法
css 样式由选择符和声明组成,而声明又由属性和值组成:
image选择符又称选择器,指明网页中要应用样式规则的元素。
声明在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号“:”分隔。当有多条声明时,中间可以英文分号“;”分隔,如下所示:
p{font-size:12px;color:red;}
注意:
1、最后一条声明可以没有分号,但是为了以后修改方便,一般也加上分号。
2、为了使用样式更加容易阅读,可以将每条代码写在一个新行内,如下所示:
p{
font-size:12px;
color:red;
}
6-4 CSS注释代码
如同<html>的<!--声明内容-->一样
> CSS的注释语法为:<br>
> /*这是注释内容*/ <br>
> p{<br>
> color:green;<br>
> font-size:24px;<br>
}
tips:注释内容可以放在任意地方。
网友评论