CSS介绍
CSS指层叠样式表（Cascading Style Sheets）定义如何显示控制HTML元素，从而实现美化HTML网页。
优势： 为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生,有了CSS,html中大部分表现样式的标签就废弃不用了,html只负责文档的结构和内容,表现形式完全交给CSS,html文档变得更加简洁。
基本语法
格式： 选择器{属性:值;属性:值;属性:值;…}
CSS页面引入方法
内联式： 通过标签的style属性，在标签上直接写样式。
CSS简单案例：
<!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: 500px;
height:200px;
}
</style>
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html>
嵌入式： 通过style标签，在网页上创建嵌入的样式表。
外联式： 通过link标签，链接到外部样式表到页面中。
外联式样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--CSS样式的声明：写在head标签里面
1.div是最简单的标签选择器
-->
<link rel="stylesheet" type="text/css" href="main.css ">
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html>
常用CSS样式
文本设置
| color | 设置文字的颜色,如: color:red; |
|---|---|
| font-size | 设置文字的大小,如:font-size:12px; |
| font-family | 设置文字的字体,如:font-family:‘微软雅黑’; |
| font-style | 设置字体是否倾斜,如:font-style:‘normal’; 设置不倾斜 |
| font-weight | 设置文字是否加粗,如:font-weight:bold; |
| font | 同时设置文字的几个属性,建议按照如下顺序写: |
| font | 是否加粗 字号/行高 字体;如: font:normal 12px/36px ‘微软雅黑’; |
| line-height | 设置文字的行高(也就是行间距) |
| text-decoration | 设置文字的下划线,如:text-decoration:none; 将文字下划线去掉 |
| text-indent | 设置文字首行缩进,如:text-indent:24px; 设置文字首行缩进24px |
| text-align | 设置文字水平对齐方式,如text-align:center 设置文字水平居中 |
CSS颜色表示法：
css颜色值主要有三种表示方法:
1、颜色名表示,比如:red 红色,gold 金色
2、rgb表示,比如:rgb(255,0,0)表示红色
3、16进制数值表示,比如:#ff0000 表示红色,这种可以简写成 #f00
基本选择器
标签选择器
标签选择器,此种选择器影响范围大,建议尽量应用在层级选择器中。举例:
<!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="#">
百度一下
</a>
<ul>
<li>1</li>
<li>2</li>
</ul>
</body>
</html>
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: 500px;
height:200px;
}
#box{
border: 1px solid blue;
width: 800px;
}
</style>
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<!--设置div的标签的id信息为box-->
<div id="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html>
类选择器
通过类名来选择元素,一个类可应用于多个元素,一个元素上也可以使用多个类,应用灵活,可复用,是css中应用最多的一种选择器。举例:
类选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
table {
border: 1px solid green;
width: 50%;
text-align: center;
/*
如果是块级元素，居中：margin 0 auto;
如果是行内元素，居中：text-align:center
*/
margin: 0 auto;
margin-top: 50px;
}
#table-header{
/*id选择器,设置表格的表头*/
font-weight: bold;
font-size: 30px;
color: lightseagreen;
}
.odd{
/*类选择器*/
background-color: lightgrey;
}
.odd:hover{
/*鼠标经过odd类对应的标签时，元素的样式*/
background-color: grey;
/*是原先字体的130%*/
font-size: 130%;
}
</style>
</head>
<body>
<table>
<caption id="table-header">表格名称</caption>
<tr>
<td>1-1</td>
<td>1-2</td>
</tr>
<tr class="odd">
<td>2-1</td>
<td>2-2</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
</tr>
<tr class="odd">
<td>4-1</td>
<td>4-2</td>
</tr>
</table>
</body>
</html>
层级选择器
主要应用在选择父元素下的子元素,或者子元素下面的子元素,可与标签元素结合使用,减少命名,同时也可以通过层级,防止命名冲突。举例:
组选择器
多个选择器,如果有同样的样式设置,可以使用组选择器。举例:
组选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box1,.box2,.box3{
/*
组选择器：（逗号分隔）
多个选择器,如果有同样的样式设置，可以使用组选择器
*/
border: 1px solid red;
width: 100px;
height: 100px;
}
.box1{
background-color: lightseagreen;
}
.box2{
background-color: aqua;
}
.box3{
background-color: blue;
}
</style>
</head>
<body>
<div class="box1">
div1
</div>
<div class="box2">
div2
</div>
<div class="box3">
div3
</div>
</body>
</html>
伪类及伪元素选择器
常用的伪类选择器有hover,表示鼠标悬浮在元素上时的状态,伪元素选择器有before和after,它们可以通过样式在元素中插入内容。
伪元素选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box1,.box2,.box3{
/*
组选择器：（逗号分隔）
多个选择器,如果有同样的样式设置，可以使用组选择器
*/
border: 1px solid red;
width: 100px;
height: 100px;
}
.box1{
background-color: lightseagreen;
}
.box2{
background-color: aqua;
}
.box3{
background-color: blue;
}
.box1:hover{
font-size: 150%;
}
.box2:after,.box3:after{
/*after：所有选择的标签后面添加信息*/
content: "行尾文字";
}
.box2:before,.box3:before{
/*before:所有选择的标签前面添加信息*/
content: '行首文字';
}
</style>
</head>
<body>
<div class="box1">
div1
</div>
<div class="box2">
div2
</div>
<div class="box3">
div3
</div>
</body>
</html>
盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
- 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
- 总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
盒子模型：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box{
/*指定盒子的宽度*/
width: 300px;
/*指定内间距为25px*/
padding: 25px;
/*指定外边距为25px*/
margin: 25px auto;
/*边框宽度为25px*/
border: 25px solid green;
/*文本居中*/
text-align: center;
}
</style>
</head>
<body>
<div class="box">这里是盒子内的实际内容。有25px内间距，25px外间距，25px绿色边框</div>
</body>
</html>
盒子模型案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box,detail{
width: 500px;
}
.box{
border: 1px royalblue solid;
}
.haizei-image{
width: 500px;
}
.detail{
font-size: 20px;
/*设置内边距为10px*/
padding: 20px;
}
</style>
</head>
<body>
<div >
<div class="box" class="haizei-image">
<img src="海贼王.jpg">
</div>
<div class="box" class="detail">
传奇海盗哥尔•D•罗杰在临死前曾留下关于其毕生的财富“One Piece”的消息，由此引得群雄并起，
众海盗们为了这笔传说中的巨额财富展开争夺，各种势力、政权不断交替，整个世界进入了动荡混乱的“大海贼时代”。
生长在东海某小村庄的路飞受到海贼香克斯的精神指引，决定成为一名出色的海盗
</div>
</div>
</body>
</html>
CSS浮动
什么是 CSS Float（浮动）？
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像，但它在布局时一样非常有用。
元素怎样浮动?
- 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
- 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
- 浮动元素之后的元素将围绕它。
- 浮动元素之前的元素将不会受到影响。
- 如果图像是右浮动，下面的文本流将环绕在它左边：
CSS浮动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box,img{
width: 300px;
}
.box{
border: 1px royalblue solid;
/*让所有的div标签向左移动，排列在一行*/
float: left;
/*设置外边框*/
margin: 10px;
}
.detail{
font-size: 2px;
/*设置内边距为10px*/
padding: 20px;
height: 20px;
/*如果指定信息溢出，那么影藏信息*/
/*overflow: hidden;*/
/*可以滑动查看*/
overflow: auto;
}
</style>
</head>
<body>
<div class="box">
<!--<div class="haizei-image">-->
<img src="海贼王.jpg">
<!--</div>-->
<div class="detail">
传奇海盗哥尔•D•罗杰在临死前曾留下关于其毕生的财富“One Piece”的消息，由此引得群雄并起，
众海盗们为了这笔传说中的巨额财富展开争夺，各种势力、政权不断交替，整个世界进入了动荡混乱的“大海贼时代”。
生长在东海某小村庄的路飞受到海贼香克斯的精神指引，决定成为一名出色的海盗
</div>
</div>
<div class="box" >
<!--<div class="haizei-image">-->
<img src="海贼王.jpg">
<!--</div>-->
<div class="detail">
传奇海盗哥尔•D•罗杰在临死前曾留下关于其毕生的财富“One Piece”的消息，由此引得群雄并起，
众海盗们为了这笔传说中的巨额财富展开争夺，各种势力、政权不断交替，整个世界进入了动荡混乱的“大海贼时代”。
生长在东海某小村庄的路飞受到海贼香克斯的精神指引，决定成为一名出色的海盗
</div>
</div>
<div class="box">
<!--<div class="haizei-image">-->
<img src="海贼王.jpg">
<!--</div>-->
<div class="detail">
传奇海盗哥尔•D•罗杰在临死前曾留下关于其毕生的财富“One
Piece”的消息，由此引得群雄并起，众海盗们为了这笔传说中的巨额财富展开争夺，各种势力、政权不断交替，
整个世界进入了动荡混乱的“大海贼时代”。生长在东海某小村庄的路飞受到海贼香克斯的精神指引，
决定成为一名出色的海盗
</div>
</div>
</body>
</html>
浮动案例—电影排行榜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
/*去除所有的默认内外边距设置*/
padding: 0px;
margin: 0px;
}
.content{
width: 350px;
height: 183px;
}
img{
width: 150px;
height: 140px;
float: left;
}
.content {
height: 140px;
font-size: 3px;
line-height: 15px;
}
</style>
</head>
<body>
<div class="content">
<img src="海贼王.jpg">
<p>
传奇海盗哥尔•D•罗杰在临死前曾留下关于其毕生的财富“One Piece”的消息，由此引得群雄并起，
众海盗们为了这笔传说中的巨额财富展开争夺，各种势力、政权不断交替，整个世界进入了动荡混乱的“大海贼时代”。
生长在东海某小村庄的路飞受到海贼香克斯的精神指引，决定成为一名出色的海盗
</p>
</div>
</body>
</html>
浮动案例—网站主页模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.container{
width: 100%;
margin: 0px;
border: 1px solid grey;
line-height: 150%;
}
.header,.footer{
padding: 8px;
color: white;
background-color: grey;
clear: left;
}
h1.header{
padding: 0px;
margin: 0px;
}
.left{
float: left;
width: 160px;
margin: 0px;
padding: 50px;
}
.content{
margin-top: 30px;
padding: 16px;
margin-left: 50px;
border-left: 16px;
}
</style>
</head>
<body>
<div class="container">
<div class="header"><h1 class="header">西部开源技术中心</h1></div>
<div class="left">
<ul>
<li>Python</li>
<li>JAVA</li>
<li>C++</li>
<li>Node.js</li>
</ul>
</div>
<div class="content">
<h2>Free Web Building Tutorials</h2>
<br>
<p>fadfjkaljs;f lajdfs;ljfd;aljfa;kldjf;akjffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
fk;lasdjfkaldfakljdfhlkjadf</p>
<p>kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
</div>
<div class="footer">尾部部分</div>
</div>
</body>
</html>
经典布局案例
html和css实现页面分页案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.container{
/*行内块元素居中*/
margin: 0 auto;
width: 50%;
/*文本居中*/
text-align: center;
}
.pagination>li{
/*删除无序列表前面的标记*/
list-style: none;
font-size: 12px;
/*行内块元素*/
display:inline-block;
/*设置宽度*/
width: 30px;
/*border: solid black 1px;*/
/*设置背景颜色*/
background-color: gold;
/*设置内边距：上下为5px，左右为10px*/
padding: 5px 10px;
}
.pagination>li>a{
/*删除超链接的下划线*/
text-decoration: none;
/*设置字体颜色*/
color: black;
}
.pagination>li:hover{
font-size: 110%;
}
</style>
</head>
<body>
<div class="container">
<h1 align="center">分页案例</h1>
<ul class="pagination">
<!--转义字符<< -->
<li><a href="#"><<</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li>...</li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">>></a></li>
</ul>
</div>
</body>
</html>
扫一扫
210
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
