注意：此章为后端人员，只需了解即可，不需要过分记忆，皆因多数时间后端不会使用。
如英语过6级，无需查看此章，只需记住使用CSS时一些特定语法。
CSS概述
前端css:Cascding Style Sheet(层叠眼样式表语言)
CSS是一种样式表语言，专门用来修饰HTML页面。美化页面。
在HTML中嵌入CSS的三种方式：
内联样式： 此样式优于内部样式和外部样式
<标签 style =“样式名：样式值”；“样式名：样式值…”><标签>
内部样式：从上到下顺序覆盖
外部样式：从上到下顺序覆盖
将css代码写入一个指定文件然后引入
```<html>
<head>
<meta charset="utf-8" />
<title>css语言的编辑位置</title>
<!--如果编写css了，三种写法的优先级：
内联样式：永远是第一位
内部样式和外部样式的优先级的顺序：从上到下的顺序覆盖-->
<!--代码编写位置二：将所有的css代码提出来，放如一个style的标签中。内部写法--->
<style type="text/css">
div{
color:burlywood;
}<!--对所有的div标签进行设置，大括号中设置属性-->
</style>
<!---代码编写位置三：将所有的css代码提取出来，放入一个独立的css文件中，外部样式写法-->
<link href="css/a.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<!--代码编写位置 一：可以在任意的html标签中使用style属性，在属性中便编写
css代码，内联样式写法
这种写法会导致过多的代码，使得标签看起来比较乱-->
<div style="color:aqua;font-size:30px">撒旦发生法发我的</div>
<div>按时打算发给v额外付钱</div>
<div>阿斯顿发份v额法网法网发给我</div>
<div>啊师傅瓦房店市公司</div>
<span>埃是法国文案</span><br />
<span>撒飞洒乳房war发放给·11</span>
</body>
</html>
CSS中的选择器！
CSS中的选择器分位基本选择器和其他选择器！
1.类选择器 ： 此选择器优于标签选择器
2.标签选择器：
3.id 选择器：此选择器由于类选择器
其使用方式如下：
<html>
<head>
<meta charset="utf-8">
<title>基本选择器</title>
<style type="text/css">
/* 类选择器使用标签class属性值*/
.c1{
color:blue;
}/*类选择器大于标签选择器*/
/*标签选择器，使用的是我们的标签名称*/
span{
color:red;
}/*id选择器大于类标签*/
/*id 选择器：使用标签中id属性值。使用#*/
#d1{
color:black;
}
</style>
</head>
<body>
<div id="d1" class="c1">阿萨法发噶我认罚五个挖吖我发给哇</div>
<div class="c1">阿萨法发噶我认罚五个挖吖我发给哇</div>
<span class="c1">阿萨法发噶我认罚五个挖吖我发给哇</span>
<span >啊是富农矮黑人佛i瓦活佛共i阿黄体哦啊</span>
</body>
</html>
其他选择器
统配选择器：表示整个页面，
分组选择器：将多种选择器放在一起
属性选择器：
其使用方式如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
/* 统配选择器：表示整个页面，但不包含输入的*/
*{
font-size:35px;
}
/*分组选择器 将多种选择器放一起*/
span,label,#d1,c1{
color:red;
}
/*属性选择器，此处type直接对应的是双引号中的属性，如改成password，将改为密码背景*/
input[type="text"]{
background-color:red;
}/*注意如要区分input是否嵌套，则在其input前加入标签
如： form input【】{}*/
</style>
<form action="http://www.jd.com" method="get">
<label>账号：</label>
<input type="text" placeholder="请输入账号" size="10"
id ="d1" class="c1">
<label>密码：</label>
<input type="password" placeholder="请输入密码" size="10"
id="d1" class="c1">
</form>
</html>
文本和文字
在其文本和文字有许多的设置，具体请参考API文档。此下代码只列下部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本和文字</title>
<style type="text/css">
#d1{font-size:150%;/*文本的样式*/
font-style:italic;/*倾斜*/
font-variant:small-caps;/*英文字母转换*/
font-weight:bolder;/*加粗*/
font-family:华文彩云;/*字体，需注意此字体一定要是有效的准确名称*/
}
#d2{
text-decoration-line:line-through;/*添加线的样式*/
text-decoration-color:red;/*颜色*/
text-decoration-style:wavy;/*线性*/
text-indent:2em;/*间距*/
line-height:1.5em;/*行高*/
text-align:center;/*居中*/
letter-spacing: 0.5em;/*字符距离*/
direction:rtl;/*字体方向*/
}
h1,h3,h4{
background-color:red;
}
</style>
</head>
<body><span>
<h1>afweuiiiiiiiisdfsdfwetw</h1>
<h2>afweuiiiiiiiisdfsdfwetw</h2>
<h3>afweuiiiiiiiisdfsdfwetw</h3>
<h4>afweuiiiiiiiisdfsdfwetw</h4>
</span>
<div id="d1">阿瑟东sadasdsi啊哈佛i娲皇宫i哦啊我国呵呵【忽然色鬼瑟瑞【股票</div>
<div id="d2">阿瑟东sadasdsi啊哈佛i娲皇<br/>宫i哦啊我国呵呵【忽然色鬼瑟瑞【股票</div>
</body>
</html>
超链接的多种状态
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
<style type="text/css">
/* 未被访问*/
a:link{
color:red;
}
/*已经被访问*/
a:visited{
color:green;
}
/*鼠标的悬停*/
a:hover{
color:blue;
font-size:50px;
}
/*激活*/
a:active{
color:yellow;
}
</style>
</head>
<body>
<a href="http://www.jd.com"target="_blank">京东</a><br />
<a href="http://www.baidu.com"target="_blank">百度</a><br />
<a href="http://www.taopao.com">淘宝</a>
</body>
</html>
至此所列都为参考，如想深入则需多多参考同行,API，等
如其所见。在CSS中多数代码无逻辑，死绑，只需要知道在其正确的位置使用正确的代码，便可得到正确的效果。
需注意：前台所有的页面，你所看到的不一定就是你想到的做法，一种效果有多种做法，不同的软件使用都有达成理想的效果，一切以效果为主！
最后请铭记：
只有产生商业价值的软件，才是正在的如软件！
如无商业价值，则将被历史埋汰。
6211
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
