【CSS】课程网站开发示例 ① ( 文件目录结构准备 | CSS 属性书写顺序 - 重要 )

韩曙亮

发布于 2023-04-02 09:53:34

51000

代码可运行

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

运行总次数：0

代码可运行

文章目录

一、文件目录结构准备

文件目录结构准备 :

首页文件是 index.html ;
图片放在 images 目录中 ;
样式文件准备 , HTML 标签结构与 CSS 样式要进行分离 , 这里将 CSS 样式定义在 style.css 文件中 ;

在 index.html 的 <head> 标签中 , 通过 <link rel="stylesheet" href="style.css"> 标签 , 引入 CSS 样式文件 , 完整的文件内容如下 :

	<!DOCTYPE html> 
	<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
	    <title>课程网站</title>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		首页
	</body>
	</html>

向 style.css 样式文件中 , 拷贝一些通用设置 , 如 : 清除内外边距 , 设置总体背景 , 清除列表样式等样式设置 ;

/* 清除标签默认的内外边距 */
* {
   padding: 0;     
   margin: 0;
}

/* 清除列表默认样式 ( 主要是前面的点 ) */
li {
	list-style: none;
}

/* 设置总体背景 */
body {
	background-color: white;
}

/* 插入图片自适应 */
img {
	width: 100%;
}

最终的展示效果如下 , body 中的文本 , 内外边距清除后 , 紧贴浏览器左上角 ;

二、 CSS 属性书写顺序 - 重要

在一个 CSS 选择器中 , 配置对应标签的属性样式 , 配置的属性在十几个到几十个不等 , 这里建议按照如下的顺序进行排列 ;

布局定位属性 :
- display 显示模式
- position 定位
- float 浮动
- clear 清除浮动
- visibility 设置可见性
- overflow 溢出设置 ;
自身属性 ( 盒子模型样式 ) :
- width 宽度
- height 高度
- margin 外边距
- padding 内边距
- border 边框
- background 背景 ;
文本属性 :
- color 颜色
- font 字体
- text-decoration 文本装饰
- text-align 水平对齐
- vertical-align 设置元素内部行内元素的垂直对齐方式
- white- space 设置如何处理元素内的空白字符
- break-word 强制单词在需要时换行
CSS3 属性 :
- content 插入额外的内容
- cursor 设置鼠标指针在元素上的样式
- border-radius 圆角边框
- box-shadow 向元素添加阴影效果
- text-shadow 为文本添加阴影效果
- background:linear-gradient 设置元素的背景颜色或背景图片

CSS 配置示例 :

.class {
	/* 布局定位属性 */
    display: block; 	// 显示模式
    position: relative;	// 定位
    float: left;		// 浮动

	/* 布局定位属性 */
    width: 100px;		// 宽度
    height: 100px;		// 高度
    margin: 0 10px;		// 外边距
    padding: 20px 0;	// 内边距

	/* 文版本属性 */
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;	// 设置字体
    color: #333;		// 设置字体颜色
    background: rgba(0,0,0,.5);	// 设背景

	/* CSS3 属性 */
    -webkit-border-radius: 10px;	// 使用 WebKit 浏览器引擎内核的浏览器圆角边框 10 像素
    -moz-border-radius: 10px;		// 使用 Mozilla 浏览器引擎内核的浏览器圆角边框 10 像素
    -o-border-radius: 10px;			// 使用 Opera 浏览器引擎内核的浏览器圆角边框 10 像素
    -ms-border-radius: 10px;		// 使用 Microsoft 浏览器引擎内核的浏览器圆角边框 10 像素
    border-radius: 10px;			// 圆角边框 10 像素
}

进入到网页中 , 按下 F12 健进入调试模式 , 任意选择一个标签盒子 , 在右侧查看其样式 , 可以看到此处的样式就是按照上述顺序编写的 ;