Web前端基础【2】--CSS基础
Web前端基础【2】--CSS基础
CSS指层叠样式表，用来定义如何显示HTML元素，一般和HTML配合使用。CSS样式表的目的是为了解决内容与表现分离的问题：即使同一个HTML文档也能表现出外观的多样性。作一个形象的比喻：对于一个页面丰富多彩的网页，HTML是它的骨架、JavaScript是它的肌肉，CSS就是它的衣服。
在HTML中使用CSS样式一般有三种方法：
1：内联样式表：CSS代码直接写在现有的HTML标记中，直接使用style属性改变样式。
例如：
<body style="background:green; margin:(); padding:();"></body>。
2：嵌入式样式表：CSS代码写在<style type="text/css"></style>标记之间。
比如看一下知乎首页的网页构造：
3：外部样式表：CSS代码写在一个单独的外部文件中，这个CSS样式文件以".css"为扩展名，在<head>内，使用<link>标记将CSS样式文件链接到HTML文档中。
例如：<linnk rel="StyleSheet" type="text/css" href="style.css">。
比如看一下知乎首页的<head>标签中，就有一个外部样式表。
CSS规则由两个主要的部分构成：选择器，以及一条或者多条声明。选择器通常是需要改变样式的HTML元素。每条声明由一个属性和一个值组成。每个属性有一个值。属性和值用冒号(:)隔开。
例如：
h1{color:blue; font-size:12px}.
其中h1为选择器，color和font-size为属性，blue和12px为属性值。其意思是将h1标记的颜色设置为蓝色，字体大小为12px。
根据选择器的定义方式，可以将样式表的定义分为三种：
1：HTML标记定义：上面的例子就是这种定义方式。即是将HTML标记符作为选择器。一个选择器可以控制几个样式属性，它们之间用分号(;)隔开。
2：ID选择器定义：ID选择器可以为标有特定ID的HTML元素指定特定的样式。HTML元素以ID属性来设置ID选择器，CSS中ID选择器以"#"来定义。
例如：
#word{text-align:center; color:red;}
意思是将HTML中ID为word的元素设置为居中，颜色为红色。
3：class选择器定义：class选择器用于描述一组元素的样式。class选择器在HTML中以class属性表示。在CSS中，class选择器以一个点"."号显示。
例如：
.center{text-align:center;}
意思将所有拥有center类的HTML元素设为居中。
说完选择器，下面说一些CSS中常见的属性。主要有颜色属性、字体属性、背景属性、文本属性和列表属性。
1：颜色属性：
① 颜色名称：如color:green。
② 十六进制：如color:#ff6600。
③ RGB方式：如rgb(255,255,255)
2：字体属性：
① font-size：定义字体大小。如font-size:12px
② font-family：定义字体.如font-family:微软雅黑。
③ font-weight：定义字体加粗。
3：背景属性：
① background-color：用来定义背景颜色。
② background-image：用来定义背景图片。
③ background-repeat：用来定义背景重复方式。
④ background-position：用来定义背景位置。
4：文本属性：
① text-align：设置文本对齐方式。
② line-height：设置文本行高。
③ text-indent：代表首行缩进。
④ letter-indent：设置字符间距。
5：列表属性：
① list-style-type：用来指明列表项标记的类型。
② list-style-position：用来指明列表项中标记的位置。
③ list-style-image：用来设置图像列表标记。
对于以上知识只需要了解知道即可，在Python爬虫开发中，需要了解网页的各种构成，能够读懂网页就可以了，而并不是要达到编写网页的水平。
每天学习一点点，每天进步一点点。