041_CSS及案例-网站主页模板

文章目录

- - 1. CSS介绍
  - 2. 基本语法
  - - 2.1 CSS 页面的引入方法——内联式
    - 2.2 CSS 页面的引入方法——嵌入式
    - 2.3 CSS 页面的引入方法——外联式
  - 3. 常用样式
  - 4. 基本选择器
  - - 4.1 标签选择器
    - 4.2 id 选择器
    - 4.3 类选择器
    - 4.4 层级选择器
    - 4.5 组选择器
    - 4.6 伪类及伪元素选择器
  - 5. 盒子模型
  - 6. CSS 浮动
  - - 6.1 案例-网站主页模板

写在前面：参考 W3School 的 CSS 教程，对 CSS 进行学习，详细名利请移步 W3School 的 CSS 教程

1. CSS介绍

CSS：指层叠样式表 (Cascading Style Sheets)，样式定义如何显示 HTML 元素，从而实现美化 CSS 页面。
优势：让页面更加丰富；让页面的内容和样式能拆分 --> 进而，
CSS 与 HTML 的关系：HTML中大部分表示样式的标签都废弃不用了，HTML 只负责文档的结构和内容，表现形式交给 CSS ，HTML 变得更加简洁。
同时，

样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

2. 基本语法

格式：选择器{属性:值; 属性:值;...}，示例：

h1 {color:blue; font-size:12px}

在这里插入图片描述

2.1 CSS 页面的引入方法——内联式

内联式： 通过标签的 style 属性，在标签上直接写样式

<p style="color: sienna; font-siaze: 20px">
This is a paragraph
</p>

2.2 CSS 页面的引入方法——嵌入式

嵌入式：通过<style> 标签在文档头部定义嵌入样式表

<head>
<style type="text/css">div {color: sienna;}p {margin-left: 20px;}body {background-image: url("images/back40.gif");}
</style>
</head>

2.3 CSS 页面的引入方法——外联式

外联式：通过<link>标签，链接到外部样式表到页面中。当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。样式表文件示例：

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

3. 常用样式

前端语法复杂多样，对每个样式、标签熟练记忆是不现实的，常查常用才是重点，推荐学习网站：W3School
文本样式

font：是否加粗、字号、行高、字体。font: normal 12px '微软雅黑';
line-height：设置文字的行高，line-height:24px;
text-decoration：设置文字下划线，text-decoration: none;
text-indent：实现文本缩进，text-indent: 24px;设置文字首行缩进24px
text-align：设置一个元素中的文本行互相之间的对齐方式，text-align:center;

CSS 颜色值主要的表示方法：

颜色名表示，如：red 红色，gold 金色
rgb 表示，如：rgb(255, 0, 0)表示红色
十六进制表示法，如：#ff0000 表示红色 --> 简写为 #f00

4. 基本选择器

4.1 标签选择器

标签选择器：也叫元素选择器，此种选择器应用范围大，建议尽量应用在层级选择器中。如果设置 HTML 的样式，选择器通常将是某个 HTML 标签，比如 p、h1、em、a，甚至可以是 html 本身：

简单的代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">a{/*去掉超链接的文本装饰下划线*/text-decoration: none;}ul>li{/*去掉列表的文本装饰前面的点*/list-style: none;line-height: 50px;}</style>
</head>
<body>
<a href="www.baidu.com">百度一下
</a><ul><li>1</li><li>2</li>
</ul>
</body>
</html>

4.2 id 选择器

**id 选择器：**通过 id 选择元素，元素的 id 名称不能重复，所以一个样式设置项只能对应于页面上一个标签，不能复用，id 名一般给程序使用，不推荐使用 id 作为选择器。
简单的代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--CSS样式的声明: 写在head标签里面1. div 是最简单的标签选择器--><style type="text/css">div {border: 1px solid red;width: 70px;height: 200px}/*id选择器的设置样式, #id名称*/#box{border: 1px solid blue;width: 90px;}#mybox{border: 1px solid green;width: 90px;}</style>
</head>
<body><div><ul><li>1</li><li>2</li></ul>
</div><!--设置div标签的id信息为“box”-->
<div id="box"><ul><li>1</li><li>2</li></ul>
</div><div id="mybox"><ul><li>1</li><li>2</li></ul>
</div><div><ul><li>1</li><li>2</li><li>3</li></ul>
</div></body>
</html>

执行结果：
在这里插入图片描述

4.3 类选择器

类选择器：通过类名来选择元素，一个类可以应用于多个元素，一个元素也可以使用多个类，应用灵活，可复用，是CSS中应用最多的一种选择器。

补充：

如果是块极元素，居中: margin: 0 auto;
如果是行内元素，居中: text-align: center;

简单的代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">table{/*标签选择器*/border: 1px solid black;width: 50%;text-align: center;/***********重要***********如果是块极元素， 居中:  margin: 0 auto;如果是行内元素， 居中: text-align: center;*/margin: 0 auto;/*设置表格的上外边距为50px*/margin-top: 50px;}#table-header{/*id选择器，设置表格的表头*/font-weight: bold;color: darkseagreen;font-size: 30px;}.odd{/*类选择器*/background-color: lightgray;}.odd:hover{/*当鼠标经过odd类对应的标签时， 元素的样式*//*是原来字体的120%倍，背景变深*/font-size: 120%;background-color: gray;}</style>
</head>
<body><table><caption id="table-header">表格标签</caption><tr><td>1-1</td><td>1-2</td></tr><tr class="odd"><td>1-1</td><td>1-2</td></tr><tr><td>1-1</td><td>1-2</td></tr><tr class="odd"><td>1-1</td><td>1-2</td></tr>
</table></body>
</html>

执行结果：
在这里插入图片描述

4.4 层级选择器

层级选择器： 主要应用在选择父元素下的子元素，或是子元素下的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突

代码示例：如上所述 .odd:hover{...}

4.5 组选择器

组选择器： 多个选择器，如果有相同的样式设置，可以使用组选择器

简单代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">.box1, .box2, .box3  {/*组选择器:(逗号分隔)多个选择器,如果有同样的样式设置,可以使用组选择器。举例:*/width: 100px;height: 100px;border: 1px solid black;}.box1{background-color: darkseagreen;}.box2{background-color: cornflowerblue;}.box3{background-color: green;}</style>
</head>
<body><div class="box1">div1
</div>
<div class="box2">div1
</div>
<div class="box3">div1
</div></body>
</html>

执行结果：
在这里插入图片描述

4.6 伪类及伪元素选择器

伪类及伪元素选择器： 常见的伪类选择器有 hover，表示鼠标悬浮在元素上的状态，伪元素选择器有 before 和 after 可以通过样式在元素中插入内容

“:before” 伪元素可以在元素的内容前面插入新内容。
“:after” 伪元素可以在元素的内容之后插入新内容。

简单的代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box1, .box2, .box3 {/*组选择器:(逗号分隔)多个选择器,如果有同样的样式设置,可以使用组选择器。举例:*/width: 100px;height: 100px;border: 1px solid black;}.box1 {background-color: darkseagreen;}.box2 {background-color: cornflowerblue;}.box3 {background-color: green;}.box1:hover {font-size: 150%;}.box2:before, .box3:before {/*before: 所有选择的标签前面添加信息*/content: "行首文字";}.box3:after {/*after: 所有选择的标签后面添加信息*/content: "行tail文字";}</style>
</head>
<body><div class="box1">div1
</div>
<div class="box2">div1
</div>
<div class="box3">div1
</div></body>
</html>

执行结果：
在这里插入图片描述

5. 盒子模型

参考W3School 的 CSS 框模型，对盒子模型进行理解，如下图所示：
在这里插入图片描述

element : 元素，盒子内的实际内容
padding : 内边距，呈现了元素的背景，注：背景应用于由内容和内边距、边框组成的区域
border : 边框
margin : 外边距，默认是透明的，因此不会遮挡其后的任何元素

计算元素框宽度：

总元素的宽度 = 宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
总元素的高度 = 高度 + 顶部填充 + 底部填充 + 上边框 + 下边框 + 上边距 + 下边距
假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素：

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">.box,  img{width: 232px;}.box{border: 2px gray solid;}.detail{font-size: 12px;/*设置内边距为8PX*/padding: 8px;}</style>
</head>
<body><div class="box"><div class="img"><img src="img/movie.jpg"></div><div class="detail">天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸，灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。元始天尊启动了天劫咒语，3年后天雷将会降临，摧毁魔丸。</div>
</div></body>
</html>

执行结果：
在这里插入图片描述

6. CSS 浮动

**CSS 浮动：**使得元素向左或向右移动，其周围的元素也会重新排列。Float 往往用于图像，在布局时非常有用

代码示例1：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">.box, img {width: 126px;}.box {/*指定边框的宽度, 样式, 颜色 */border: 1px gray solid;/*让所有的div标签向左浮动， 排列在同一行*/float: left;/*设置外边距*/margin: 5px;padding-bottom: 10px;}.detail {font-size: 10px;/*设置内边距为5PX*/padding: 8px;height: 20px;/*如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。*/overflow: auto;/*内容会被修剪，并且其余内容是不可见的*//*overflow: hidden;*/}.clear {/*指定段落的左侧或右侧不允许浮动的元素：float:right; float:both;*/clear: left;}</style>
</head>
<body><div class="box"><div class="img"><img src="img/movie.jpg"></div><div class="detail">天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸，灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。元始天尊启动了天劫咒语，3年后天雷将会降临，摧毁魔丸。</div>
</div><div class="box"><div class="img"><img src="img/movie.jpg"></div><div class="detail">天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸，灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。元始天尊启动了天劫咒语，3年后天雷将会降临，摧毁魔丸。</div>
</div><div class="box"><div class="img"><img src="img/movie.jpg"></div><div class="detail">天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸，灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。元始天尊启动了天劫咒语，3年后天雷将会降临，摧毁魔丸。</div>
</div><div class="box clear"><div class="img"><img src="img/movie.jpg"></div><div class="detail">天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸，灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。元始天尊启动了天劫咒语，3年后天雷将会降临，摧毁魔丸。</div>
</div><div class="box"><div class="img"><img src="img/02.jpg"></div><div class="detail">天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸，灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。元始天尊启动了天劫咒语，3年后天雷将会降临，摧毁魔丸。</div>
</div></body>
</html>

执行结果：
在这里插入图片描述

6.1 案例-网站主页模板

示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">*{margin: 0;padding: 0;}.container{width: 100%;border: 1px solid gray;line-height: 150%;}.header, .footer{padding: 8px;background-color: gray;color: white;/*清除向左浮动*/clear: left;}.left{border: 1px solid red;float: left;width: 20%;height: 200px;padding: 16px;}.content{border: 1px solid red;float: left;height: 200px;padding: 16px;}</style></head>
<body><!--
网站主页:头部(header):主题部分:leftcontent尾部(footer):--><div class="container"><div class="header">头部</div><div class="left">左边部分</div><div class="content">主题部分主题部分主题部分主题部分</div><div class="footer">尾部</div></div></body>
</html>