Python全栈开发，Day15 - Web前端-CSS

本章内容

1. CSS选择器
2. CSS常用属性

 

概述

css是英文Cascadins Style Sheets的缩写，称为层叠样式表，用于对页面进化美化。

存在方式有三种：元素内联、页面嵌入和外部引入，比较方式的优缺点。

语法：style="key1:value1;key2:value2;"

• 在标签中使用 style="xx:xxx;"
• 在页面中嵌入< style type="text/css"> </style>块
• 引入外部css文件

必要性：美工会对页面的色彩搭配和图片的美化负责，开发人员则必须知道是如何实现的。

 

一、CSS选择器

　　CSS选择器有很多，这里介绍几个比较常用的。

　　1.标签选择器

　　　　通过标签来设置HTML样式，例如:

　　　　div{ background-color:red;}

　　　　<div></div>

　　　　为<div>标签设置红色背景

　　2.class选择器

　　　　通过class来设置HTML样式

　　　　看例子：

　　　　.bd{ background-color:red;}

　　　　<div class="bd" > </div>

　　　　p.bd{ color:red;}

　　　　<div class="bd" > </div>

　　语法：类名前加" . "。看上面的例子，第一个是为所有的class="bd"，全部设置红色背景；第二个是为所有<p>标签中的class="bd"，全部设置红色背景。

　　3.id选择器

　　　　通过id来进行设置HTML样式

　　　　#idselect { background-color:red}

　　　　<div id="idselect" > </div>

　　　　语法：#xxx{}

　　4.关联选择器

　　　　#idselect p{ background-color:red;}

　　　　<div id="idselect" > <p></p> </div>

　　　　这个选择器呢，应该是先找id="idselect"，然后在找下面的<p>标签，为<p>标签设置红色背景

　　5.组合选择器

　　　　input,div,p{ background-color:red;}

　　　　同时为input、div、p标签全都设置红色背景

　　6.属性选择器

　　　　input[type="text"]{ width:100px;height:200px;}

　　　　为input标签中的text属性设置宽度100px，高度200px

 

二、CSS常用属性

　　1.background

• background-color

　　　　　　<div style="background-color:red;" >background-color</div>

• background-image

　　　　<div style="background-image;height:900px;width:900px;" >background-image</div>

我们发现因为1.jpg是固定大小300px X 300px，所以它会重复显示

•  background-repeat

进行平铺

 repeat-x和repeat-y分别导致图像只在水平和垂直方向上重复，no-repeat则不允许图像在任何方向上平铺。

　　<div style="background-image;height:900px;width:900px;background-repeat：no-repeat" >background-repeat</div>

 

• background-position

　　　　　用于背景定位

　　<div style="background-image;height:900px;width:900px;background-repeat：no-repeat;background-position:center;" >background-position</div>

 

　　2.border

　　　　设置所有边框属性

<div style="border:1px solid red;height:10px;"></div>

<br/>

<div style="border:1px dotted red;height:10px;"></div>

<br/>

<div style="border:1px dashed red;height:10px;"></div>

<br/>

3.margin

　　设置外边距

　　<div style="border:1px solid red;height:70px;">

　　　　<div style="background-color:green;height:50px;margin-top:20px;"></div>

　　</div>

外边距相当于整体移动而不会改变整体的大小，也就是不会改变自身的大小

4.padding

　　设置内边距

<div style="border:1px solid red;height:70px;">

　　　　<div style="height:50px;padding-top:20px;"></div>

　　</div>

5.display

　　display属性规定元素应该生成的框的类型

　　<div style="display:none;background-color:#dddddd;">none</div>

　　<div style="display:block;background-color:#dddddd;">block</div>

　　<div style="display:inline;background-color:#dddddd;">inline</div>

值为none，此元素不会被显示。

值为block，此元素将显示为块级元素，此元素前后会带有换行符。

值为inline，默认。此元素会被显示为内联元素，元素前后没有换行符。

6.cursor

　　cursor属性规定要显示的光标的类型（形状）

• cursor值

　　<span style="cursor:pointer;">pointer</span>

　　<span style="cursor:help;">help</span>

　　<span style="cursor:wait;">wait</span>

　　<span style="cursor:move;">move</span>

　　<span style="cursor:crosshair;">crosshair</span>

　　效果分别为：

　　　　pointer：光标呈现指示链接的指针（一只手）

　　　　help：此光标指示可用的帮助（通常是一个问号或一个气球）

　　　　wait：此光标指示程序正忙（通常是一只表或沙漏）

　　　　move：此光标指示某对象可被移动

　　　　crosshair：光标呈现为十字线

• 伪造超链接

　　　　　<span style="cursor:pointer;color:bule;">pointer</span>

• 自定义（一般不用）

　　　　　<span style="cursor:url(image/favicon.ico),auto;">mine</span>

　　7.float

　　　　浮动问题还是直接看吧，点这里-->

　　8.position

　　　　position属性规定元素的定位类型

　　　　可能的值：

absolute：生成绝对定位的元素，相对与static定位以外的第一个父元素进行定位。元素的位置通过"left","top","right","bottom"

fixed：生成绝对定位的元素，相对于浏览器窗口进行定位，元素的位置通过"left","top","right","bottom"

relative：生成相对定位的元素，相对于其正常位置进行定位。

static：默认值。没有定位，元素出现在正常的流中（忽略top、left、right、bottom或者z-index声明）

inherit：规定应该从父元素继承position属性的值

 　　　　更多详细资料：http://www.cnblogs.com/canuseethat/archive/2010/09/16/1827804.html

 　　9.透明度

　　　　使用opacity来设定透明度，从0.0到1。

　　　　更多点这里  -->

 

 

 

 

注：本文仅为学习笔记、摘要。

CSS教程：http://www.w3school.com.cn/css/index.asp

 

转载于:https://www.cnblogs.com/yangweirdo/p/6880826.html