CSS介绍
1、定义
CSS指层叠样式表（Cascading Style Sheets）如何显示控制HTML元素，从而实现美化HTML网页.
通俗来说，指样式与页面结构分开，代码更简洁
2、优势
为了让页面元素的样式更加丰富，也为了让页面的内容和样式能拆分开，CSS由此诞生、有了CSS，HTML中大部分表现样式的标签就废弃不用了，HTML只负责文档的结构和内容，表现形式完全交给CSS，因此HTML文档会变得更加简洁
基本语法
格式： 选择器{属性：值； 属性：值；属性：值;…}
CSS页面引入
方法一：内联式
通过标签的style属性，在标签上直接写样式
方法二：嵌入式
通过style标签，在网页上创建嵌入的样式表，比较常用。写在head里
方法三：外联式： 样式表中只要样式
通过link标签，链接到外部样式表到页面中，最常用。写在head里
样式表位置建议写相对路径，CSS样式文件建议直接存到CSS目录中，创建一个CSS目录，再在里面创建一个main.css文件，用来编辑样式代码。
# HTML框架 ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="CSS/main.css">
</head>
<body>
<div>
<ul>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
</ul>
</div>
<div>
<ul>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
</ul>
</div>
</body>
</html>
main.css文件：
div{
border:1px solid red;
width:700px;
height:200px
}
常用CSS样式
文本设置
例如：
a{
/*去掉超链接的文本装饰的下划线，常用*/
text-decoration: none;
}
ul>li{
/*去掉列表的文本装饰前面的点，常用*/
list-style: none;
/*设置行高*/
line-height: 30px;
}
样式有很多很多，用的时候去官网查即可：W3C
颜色表示法
刚开始我们在模仿别人的页面去做的时候，如果看到人家用的好看的颜色想拿来用，可以直接看页面的源代码去找，箭头点击想要的颜色区域，右边查看源代码使用到的颜色
基本选择器
标签选择器
id选择器：只对一个元素
通过id名来选择元素，元素的id是唯一的，名称不能重复，所以一个样式设置项只能对应页面上的一个元素，不能复用
id名一般给程序使用，所以不推荐使用id作为选择器
先设置标签的id号，再去使用id标签：
用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="CSS/main.css">
/* id选择器的设置样式：#id名称{} */
<style type="text/css">
#box{
border: 1px solid blue;
width: 900px;
}
</style>
</head>
<body>
<!-- 设置div标签的id号信息为"box" -->
<div id="box">
<ul>
<li>一</li>
<li>二</li>
<li>三</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 black;
width: 50%;
text-align: center;
/*块级元素居中： margin: 0 auto */
/*行内元素居中 : text-align:center */
margin: 0 auto;
/*设置表格的外边距：上外边距*/
margin-top: 50px;
}
/*类选择器*/
.odd{
background-color: lightgray;
}
/*当鼠标经过odd类对应的标签时，元素的样式*/
.odd:hover{
font-size: 120%;
background-color: gray;
}
/*id选择器*/
#table-head{
font-weight: bold;
color: darkgreen;
font-size:30px ;
}
</style>
</head>
<body>
<table>
<caption id="table-head">表格</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>
层级选择器
主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
组选择器
多个选择器，如果有同样的样式设置，可以使用组选择器
伪类及伪元素选择器
常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after，他们可以通过样式在元素中插入内容
盒子模型
所有HTML元素可以看作盒子，在CSS中，“box model”这一术语是用来设计和布局时使用。
外边距和内边距都有上下左右
边框一般有：宽度、实线、颜色
举例：设计一个盒子它的实际内容宽度为300px，有25px内边距，25px外边距，25px绿色边框
那么盒子的总宽度为：300px(实际宽) + 50px(左右内边距) + 50px(左右外边距) + 50px(左右边框) = 450px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
background-color: lightgray;
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
text-align: center;
}
</style>
</head>
<body>
<div class="box">这里是盒子的实际内容</div>
</body>
</html>
小例子：
<!--声明HTML-->
<!DOCTYPE html>
<!--html文档-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scq的web浏览器 </title>
<style>
.box,img{
width:400px;
}
.box{
border: 2px gray solid;
}
.detil{
font-size: 10px;
padding: 10px;
margin-top: 8px;
}
</style>
</head>
<body>
<div class="box">
<div class="image">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581836845447&di=2931783df08197da0e9525282ac17348&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2018-06-19%2F5b28c49d9ef7c.jpg" alt="picture">
</div>
<div class="detil">
《猫和老鼠》从1940年问世以来，一直是全世界最受欢迎的卡通之一。
还记得汤姆和杰瑞吗？这是一部史上最“疯狂”、最“暴力”，但也最有趣的动画片。
</div>
</div>
</body>
</html>
CSS浮动
1、定义
CSS的Float浮动，会使元素向左或向右移动，其周围的元素也会重新排列。
浮动，往往是用于图像，但它在布局时一样非常有用
2、浮动规则
小案例
<!--声明HTML-->
<!DOCTYPE html>
<!--html文档-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>沈楚琪的web浏览器 </title>
<style>
*{
padding: 0;
margin: 0;
}
.image img{
width: 50%;
height: 50%;
float: left;
}
.box{
border: 1px black solid;
width:500px;
height: 200px;
}
.detil p{
font-size: 15px;
line-height: 20px;
}
</style>
</head>
<body>
<div class="box">
<div class="image">
<img src="http://image.biaobaiju.com/uploads/20190807/14/1565157870-ASngFMtwZo.jpeg" alt="picture">
</div>
<div class="detil">
<p>意境头像小清新高清，插画简洁女生男生，呆萌唯美可爱萌萌哒天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸，灵珠投胎为人，助周伐纣时可堪大用；
而魔丸则会诞出魔王，为祸人间。元始天尊启动了天劫咒语，3年后，天雷将会降临，摧毁魔丸。</p>
</div>
</div>
</body>
</html>
3、清除浮动
clear
案例：网站主页设计
<!--声明HTML-->
<!DOCTYPE html>
<!--html文档-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>沈楚琪的web浏览器 </title>
<style>
*{
padding: 0;
margin: 0;
}
.header,.footer{
background-color: gray;
clear: left;
padding: 20px;
}
.container{
width: 100%;
border: 1px solid gray;
line-height: 150%;
}
.left ul {
text-align: left;
border: 1px black solid;
width: 30%;
float: left;
padding: 50px;
margin-right: 50px;
}
.content {
padding: 16px;
border-left: blueviolet 1px solid;
width: 75%;
}
</style>
</head>
<body>
<div class="container">
<div class="header"><h1 class="head">XXX website</h1></div>
<div class="left">
<ul>
<li>python</li>
<li>go</li>
<li>c</li>
<li>java</li>
</ul>
<div class="content" >
<h2>网站介绍</h2>
<p>
这里是一些介绍这里是一些介绍这里是一些介绍这里是一些介绍这里是一些介绍
这里是一些介绍这里是一些介绍这里是一些介绍这里是一些介绍这里是一些介绍
这里是一些介绍这里是一些介绍这里是一些介绍这里是一些介绍这里是一些介绍
这里是一些介绍
欢迎来到本网站！！！！
</p>
</div>
</div>
<div class="footer"><p><h1>ending</h1></p></div>
</div>
</body>
</html>
典型布局案例
1、分页
在实现分页之前，先介绍一个属性
display属性
规定元素应该生成的框的类型
常用属性:
CSS实现分页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.container{
width: 50%;
margin: 0 auto;
}
.pagination li{
/*删除无序列表前面的标记*/
list-style: none;
/*每个列表设置为行内块元素*/
display: inline-block;
/*设置宽度*/
width: 30px;
/*添加边框*/
/*border: 1px solid black;*/
/*设置背景颜色*/
background-color: gold;
/*设置字体大小*/
font-size: 12px;
/*字体居中*/
text-align: center;
/*设置内边距：上下为5px，左右为10px*/
padding: 5px 10px;
}
.pagination li:hover{
font-size: 120%;
}
.pagination li a{
/*删除超链接的下划线*/
text-decoration: none;
/*设置字体颜色*/
color: black;
}
</style>
</head>
<body>
<div class="container">
<h1>分页案例</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="#">20</a></li>
<li><a href="#">>></a></li>
</ul>
</div>
</body>
</html>
#先设计框架，在读取css样式
注意:
（1）有一个 & lt; & lt; 和 & gt; & gt;
这是 << 和 >>的转义字符，直接写<< 和>>是写不了的
（2）padding 属性的默认值是有4个的，且该属性可以有1~4个值
页面展示:
导航栏：
<!--声明HTML-->
<!DOCTYPE html>
<!--html文档-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>沈楚琪的web浏览器 </title>
<style>
*{margin: 0;
padding: 0}
.container{
margin: 0 auto;
width: 930px;
background-color: aqua;
}
.page ul li{
list-style: none;
display: inline-block;
text-align: center;
padding: 12px;
width: 100px;
height: 18px;
}
.page li:hover{
font-size: 120%;
}
.page li a{
text-decoration: none;
color: white;
}
.header{text-align: center}
</style>
</head>
<body>
<div class="header"><h1 >导航</h1></div>
<div class="container">
<div class="page">
<ul class="ulpage">
<li style="background-color: aquamarine"><a href="#" >首页</a></li>
<li><a href="#">网站建设</a></li>
<li><a href="#">程序开发</a></li>
<li><a href="#">网络营销</a></li>
<li><a href="#">企业VI</a></li>
<li><a href="#">案例展示</a></li>
<li><a href="#">企业联系我们</a></li>
</ul>
</div>
</body>
</html>
注意：首页颜色与其他背景颜色不同的步骤为在列表中设置背景颜色
扫一扫
552
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
