文章目录
- 一、 文件目录结构准备
- 二、 CSS 属性书写顺序 - 重要
一、 文件目录结构准备
文件目录结构准备 :
- 首页文件是 index.html ;
- 图片放在 images 目录 中 ;
- 样式文件准备 , HTML 标签结构 与 CSS 样式要进行分离 , 这里将 CSS 样式定义在 style.css 文件 中 ;
在这里插入图片描述
- 在 index.html 的
<head>标签中 , 通过<link rel="stylesheet" href="style.css">标签 , 引入 CSS 样式文件 , 完整的文件内容如下 :
代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>课程网站</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
首页
</body>
</html>- 向 style.css 样式文件中 , 拷贝一些通用设置 , 如 : 清除内外边距 , 设置总体背景 , 清除列表样式 等样式设置 ;
代码语言：javascript
复制
/* 清除标签默认的内外边距 */ * { 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 配置示例 :
代码语言：javascript
复制
.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 健进入调试模式 , 任意选择一个标签盒子 , 在右侧查看其样式 , 可以 看到此处的样式就是按照上述顺序编写的 ;
在这里插入图片描述
在这里插入图片描述
