Django学习笔记：CSS基础

最新推荐文章于 2024-03-29 14:38:19 发布

那么大圆筒啊

最新推荐文章于 2024-03-29 14:38:19 发布

阅读量1k

点赞数 1

分类专栏： Django学习笔记文章标签： python css django

本文链接：https://blog.csdn.net/qq_20083473/article/details/114646007

版权

Django学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS基础

css概述

CSS是一组格式设置规则，用于控制Web页面的外观。例如，让HTML中的某个div或者span元素北京颜色改为黑色，或者设置图片元素img的长、宽、显示位置等，这些外观的设置功能都可以通过CSS来控制。在Web开发浅短中，HTML用来控制页面的内容，而CSS用来控制页面内容的显示方式。

CSS中的内容一般与HTML中的元素绑定起来，由选择符和属性组成，选择符后面跟着属性，但被一对花括号所包围。属性和值由冒号分隔，每个属性生命以分号结尾。典型的CSS样式设计代码如下
```
body{
  background - color:white; /* 将背景色设置为白色 */
  color:black;	/* 将前景色设置为黑色 */
}
```
为了能够设置HTML中的元素外观，需要在HTML中引入CSS，具体由三种引入方式
1. 内联样式表：将CSS样式设置代码内嵌到HTML文件的<style>标签中，实例如下
```

<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>

```
  上述代码通过内嵌CSS方式，使得body中id为box的<div>元素宽、高均设置为100像素，背景颜色设置为红色。
2. 超链接样式表：将一个外部样式通过<link>标签超链接到HTML文件中，实例如下
```

<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元素的样式控制。
3. 将样式表直接加入到HTML文件的元素设置中，这种方式写入的CSS样式又叫行内样式表，实例如下
```

<head>
  <meta charset='utf-8'/>
  <title></title>
</head>
<body>
  <div id='box' style='width:100px;height:100px;background:red;'>
    
  </div>
</body>

```
  上述代码中，直接在box元素的style属性中进行CSS样式设置。当然，可以采用这种方式对整个页面元素进行设置，但是这种方式编写的CSS不具有复用性，只能针对当前控制的页面元素，在开发实际项目的过程中相对较少采用这种方式。
CSS选择器

在css中，选择器是一种模式，用于选择需要添加样式的元素，即通过选择器可以在HTML中找到需要更改外观的元素。下面列举一些经常使用的选择器并介绍其基本的使用方法。
1. ID选择器
  
  ID选择器采用符号#来进行元素选择。ID通常表示唯一值，因此，ID选择器在CSS中通常只出现一次。ID选择器的基本形式如下
```
#box{
  background: red;
}
```
  上面的代码会将id为box的页面元素的背景设置为红色。
2. 类选择器
  
  类（class）选择器就是将相同类型的元素进行分类定义，分类定义的好处就是能够复用。在类名前面加符号.表示定义一个类选择器，引用的时候在标签后面加class引用。类选择器的基本形式如下
```
.box{
  background: red;
}
```
  上述代码可以将HTML中所有class为box的元素背景置为红色。
3. 标签选择器
  
  标签选择器就是直接使用HTML标签名作为CSS选择器的名称，这种方式会影响HTML中所有此标签的样式。标签选择器的基本形式如下
```
div{
  background: red;
}
```
  上述代码会影响到HTML中所有使用div标签的地方，使得其背景颜色变为红色
4. 多元素选择器
  
  当几个元素需要设置相同的CSS风格时，可以使用多元素选择器。选择多个元素的时候，用逗号隔开。多元素选择器基本形式如下
```
div,span{
  background: red;
}
```
  上述代码会使得HTML中所有div和span标签的背景均为红色
5. 后代选择器
  
  后代选择器作用于父元素下面所有的子元素，其级联层次按照HTML中的元素结构进行查找。后代选择器的基本形式如下
```

<head>
  < meta charset='utf-8'/>
  <title></title>
  <style>
    #box p{
      color: red;
    }
  </style>
</head>
<body>
  <div id='box'>
    <p>
      Python Web网站开发
    </p>
  </div>
</body>

```
  上述代码通过内联样式表进行CSS设置，首先找到<body>中id为box的<div>元素，然后针对<div>元素中所有的<p>元素将其颜色设置为红色。后代选择器之间使用空格进行元素的递进选择。
CSS基本属性和布局

CSS提供了很对针对HTML元素的属性可供更改，包括颜色、长、宽、边框大小、背景图片等。合理使用CSS属性进行网页控制和布局，可以制作出美观的网站给用户浏览。下面介绍一些项目开发中经常使用的CSS属性。
1. 颜色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;}
```
  1. 边框border
  CSS可以对边框属性进行设置，包括边框风格border-style（实现、虚线等）、边框宽度border-width、边框颜色corder-color等。设置示例如下
```
div{
  border-style:dotted; /* 设置边框为虚线 */
  border-color:red; /* 设置边框位红色 */
  border-width:4px; /* 设置边框线宽为4个像素 */
}
```
  1. 背景background
  对指定的HTML的元素背景可以采用固定的颜色值进行设置。
```
p{
  background-color:red;
}
```
  也可以采用背景图片的方式，通过引入外部图片作为元素的背景。
```
p{
  background-image:url('11.jpg'); /* 填写图片的地址 */
  background-repeat:no-repeat;
}
```
  其中，background-repeat属性用来表示背景图像的显示方式，一般有三种显示方式：水平方向复制图像（repeat-x）、垂直方向复制图像（repeat-y）、不复制（no-repeat）
  1. 字体font
  在Web开发中经常需要对字体进行排版，包括字体大小、颜色、粗细、位置等。CSS提供了一系列属性用于进行字体样式控制，设置示例如下
```
p{
  font-family:'宋体'; /* 设置字体为宋体 */
  font-size:14px; /* 设置字体大小为14个像素 */
  font-weight:bold; /* 设置字体加粗 */
  color:red; /* 设置字体颜色为红色 */
  text-align:center /* 设置字体居中对齐 */
}
```
  1. 布局
  布局就是将不同的HTML元素按照一定的规则防止在浏览器的不同位置，实际操作中经常需要用到填充、边框、边界等属性。在HTML中，直接包围内容时内边距(padding)，内边距呈现了元素的背景。边框以外的事外边距(margin)，外边距默认是透明的，因此不会遮挡其后的任何元素。设置示例如下
```
#box1{
  margin:10px; /* 设置上下左右的外边距为10像素 */
}
#box2{
  padding:10px; /* 设置上下左右的内边距为10像素 */
}
```

那么大圆筒啊

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Django学习笔记：CSS基础

CSS基础css概述CSS是一组格式设置规则，用于控制Web页面的外观。例如，让HTML中的某个div或者span元素北京颜色改为黑色，或者设置图片元素img的长、宽、显示位置等，这些外观的设置功能都可以通过CSS来控制。在Web开发浅短中，HTML用来控制页面的内容，而CSS用来控制页面内容的显示方式。CSS中的内容一般与HTML中的元素绑定起来，由选择符和属性组成，选择符后面跟着属性，但被一对花括号所包围。属性和值由冒号分隔，每个属性生命以分号结尾。典型的CSS样式设计代码如下body{
复制链接

扫一扫