python 网站页面开发02

2021-07-14

CSS常用选择器、常用属性及网页布局介绍

1、CSS常用选择器

常用兼容性选择器

(1)html选择符（标签选择器）
就是把html标签作为选择符使⽤
如 p{....} ⽹⻚中所有p标签采⽤此样式
h2{....} ⽹⻚中所有h2标签采⽤此样式

(2)class类选择符 (使用点.将自定义名（类名）来定义的选择符)
定义： .类名{样式....} 匿名类
其他选择符名.类名{样式....}
使⽤： <html标签 class="类名">...</html标签>
.mc{color:blue;} /* 凡是class属性值为mc的都采⽤此样式 */
p.ps{color:green;} /*只有p标签中class属性值为ps的才采⽤此样式*/
注意：类选择符可以在⽹⻚中重复使⽤

(3)Id选择符:
定义： #id名{样式.....}
使⽤： <html标签 id="id名">...</html标签>
注意： id选择符只在⽹⻚中使⽤⼀次.
选择符的优先级：从⼤到⼩ [ID选择符]->[class选择符]->[html选择符]->[html属性]

(4)关联选择符（包含选择符）
格式： 选择符1 选择符2 选择符3 ...{样式....}
table a{....} /*table标签⾥的a标签才采⽤此样式*/
h1 p{color:red} /*只有h1标签中的p标签才采⽤此样式*/

(5)组合选择符（选择符组）
格式： 选择符1,选择符2,选择符3 ...{样式....}
h3,h4,h5{color:green;} /*h3、 h4和h5都采⽤此样式*/

(6)伪类选(伪元素)择符：
格式： 标签名:伪类名{样式....}
a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */
a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */
a:hover {color: #FF00FF; text-decoration: underline} /* ⿏标在链接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */

其他选择器

(1)关系选择器：
(2)属性选择器
(3)结构性伪类选择器：
(4)状态伪类选择器
(5)其他伪类选择器

2、CSS常用属性

Color颜色属性

图 9

字体属性：font
文本属性
背景属性：background
边框：border
内补白：padding
外补白：margin
定位：position
布局：Layout
弹性盒子
用户界面
多栏
表格相关属性
过渡：transition
动画 Animation
2D变换
媒体查询属性

盒子模型

图 7

3、CSS网页布局

传统的DIV+CSS布局

HTML5语义化标签+CSS3布局
<header>  定义页面或区段的头部（页眉）
<footer>    定义页面或区段的尾部（页脚）
<nav>         定义页面或区段的导航区域（导航）
<section>  页面的逻辑区域或内容组合（区块）
<article>    定义正文或一篇完整的内容（文章）
<aside>      定义补充或相关内容（侧边栏）

响应式布局
第一种：直接在页头中使用CSS样式修饰。

<style type="text/css">
	/* 宽度范围 最高度*/
	@media all and (min-width:300px) and (max-width:800px){
		body{
			color: red;
		}
	}
	@media all and (min-width:100px) and (max-width:300px){
		body{
			color: green;
		}
	}
</style>

第二种：导入不同的css样式文件：

<link media="all and (min-width:300px) and (max-width:800px)" 
		rel="stylesheet" href="my.css" />

<link media="all and (min-width:100px) and (max-width:200px)" 
		rel="stylesheet" href="test.css" />