Django学习笔记：CSS基础
CSS基础
-
css概述
CSS是一组格式设置规则，用于控制Web页面的外观。例如，让HTML中的某个div或者span元素北京颜色改为黑色，或者设置图片元素img的长、宽、显示位置等，这些外观的设置功能都可以通过CSS来控制。在Web开发浅短中，HTML用来控制页面的内容，而CSS用来控制页面内容的显示方式。
CSS中的内容一般与HTML中的元素绑定起来，由选择符和属性组成，选择符后面跟着属性，但被一对花括号所包围。属性和值由冒号分隔，每个属性生命以分号结尾。典型的CSS样式设计代码如下
body{ background - color:white; /* 将背景色设置为白色 */ color:black; /* 将前景色设置为黑色 */ }为了能够设置HTML中的元素外观，需要在HTML中引入CSS，具体由三种引入方式
-
内联样式表：将CSS样式设置代码内嵌到HTML文件的
<style>标签中，实例如下<!--skip--> <head> <meta charset='utf-8'/> <title></title> <style type='text/css'> #box{ width:100px; height:100px; background:red; } </style> </head> <body> <div id='box'> </div> </body> <!--skip-->上述代码通过内嵌CSS方式，使得body中id为box的
<div>元素宽、高均设置为100像素，背景颜色设置为红色。 -
超链接样式表：将一个外部样式通过
<link>标签超链接到HTML文件中，实例如下<!--skip--> <head> <meta charset='utf-8'/> <title></title> <link rel='stylesheet' type='text/css' href='style.css(css文件地址)'/> </head> <body> <div id='box'> </div> </body>上述代码对div元素box的控制写在一个额外的css文件style.css中并通过
<link>标签的引入实现对box元素的样式控制。 -
将样式表直接加入到HTML文件的元素设置中，这种方式写入的CSS样式又叫行内样式表，实例如下
<!--skip--> <head> <meta charset='utf-8'/> <title></title> </head> <body> <div id='box' style='width:100px;height:100px;background:red;'> </div> </body> <!--skip-->上述代码中，直接在box元素的style属性中进行CSS样式设置。当然，可以采用这种方式对整个页面元素进行设置，但是这种方式编写的CSS不具有复用性，只能针对当前控制的页面元素，在开发实际项目的过程中相对较少采用这种方式。
-
-
CSS选择器
在css中，选择器是一种模式，用于选择需要添加样式的元素，即通过选择器可以在HTML中找到需要更改外观的元素。下面列举一些经常使用的选择器并介绍其基本的使用方法。
-
ID选择器
ID选择器采用符号#来进行元素选择。ID通常表示唯一值，因此，ID选择器在CSS中通常只出现一次。ID选择器的基本形式如下
#box{ background: red; }上面的代码会将id为box的页面元素的背景设置为红色。
-
类选择器
类（class）选择器就是将相同类型的元素进行分类定义，分类定义的好处就是能够复用。在类名前面加符号
.表示定义一个类选择器，引用的时候在标签后面加class引用。类选择器的基本形式如下.box{ background: red; }上述代码可以将HTML中所有class为box的元素背景置为红色。
-
标签选择器
标签选择器就是直接使用HTML标签名作为CSS选择器的名称，这种方式会影响HTML中所有此标签的样式。标签选择器的基本形式如下
div{ background: red; }上述代码会影响到HTML中所有使用div标签的地方，使得其背景颜色变为红色
-
多元素选择器
当几个元素需要设置相同的CSS风格时，可以使用多元素选择器。选择多个元素的时候，用逗号隔开。多元素选择器基本形式如下
div,span{ background: red; }上述代码会使得HTML中所有div和span标签的背景均为红色
-
后代选择器
后代选择器作用于父元素下面所有的子元素，其级联层次按照HTML中的元素结构进行查找。后代选择器的基本形式如下
<!--skip--> <head> < meta charset='utf-8'/> <title></title> <style> #box p{ color: red; } </style> </head> <body> <div id='box'> <p> Python Web网站开发 </p> </div> </body> <!--skip-->上述代码通过内联样式表进行CSS设置，首先找到
<body>中id为box的<div>元素，然后针对<div>元素中所有的<p>元素将其颜色设置为红色。后代选择器之间使用空格进行元素的递进选择。
-
-
CSS基本属性和布局
CSS提供了很对针对HTML元素的属性可供更改，包括颜色、长、宽、边框大小、背景图片等。合理使用CSS属性进行网页控制和布局，可以制作出美观的网站给用户浏览。下面介绍一些项目开发中经常使用的CSS属性。
-
颜色color
颜色的表示方式有三种：RGB、十六进制和颜色名称。RGB模式将红（R）、绿（G）、蓝（B）三个分量独立出来，每个分量的取值范围为0～255，比如红色可以表示为rgb（255，0，0）。设置示例如下
p{color:rgb(255,0,0);}十六进制表示方法即采用6位十六进制数来精确地表示颜色，如红色位#FF0000。设置示例如下
p{color:#FF0000;}颜色名称指直接用颜色队对应的英文名称表示，如red、green、blue、yellow等。设置示例如下
p{color:red;}CSS可以对边框属性进行设置，包括边框风格border-style（实现、虚线等）、边框宽度border-width、边框颜色corder-color等。设置示例如下
div{ border-style:dotted; /* 设置边框为虚线 */ border-color:red; /* 设置边框位红色 */ border-width:4px; /* 设置边框线宽为4个像素 */ }对指定的HTML的元素背景可以采用固定的颜色值进行设置。
p{ background-color:red; }也可以采用背景图片的方式，通过引入外部图片作为元素的背景。
p{ background-image:url('11.jpg'); /* 填写图片的地址 */ background-repeat:no-repeat; }其中，background-repeat属性用来表示背景图像的显示方式，一般有三种显示方式：水平方向复制图像（repeat-x）、垂直方向复制图像（repeat-y）、不复制（no-repeat）
在Web开发中经常需要对字体进行排版，包括字体大小、颜色、粗细、位置等。CSS提供了一系列属性用于进行字体样式控制，设置示例如下
p{ font-family:'宋体'; /* 设置字体为宋体 */ font-size:14px; /* 设置字体大小为14个像素 */ font-weight:bold; /* 设置字体加粗 */ color:red; /* 设置字体颜色为红色 */ text-align:center /* 设置字体居中对齐 */ }布局就是将不同的HTML元素按照一定的规则防止在浏览器的不同位置，实际操作中经常需要用到填充、边框、边界等属性。在HTML中，直接包围内容时内边距(padding)，内边距呈现了元素的背景。边框以外的事外边距(margin)，外边距默认是透明的，因此不会遮挡其后的任何元素。设置示例如下
#box1{ margin:10px; /* 设置上下左右的外边距为10像素 */ } #box2{ padding:10px; /* 设置上下左右的内边距为10像素 */ }
-