层叠样式表（英语：Cascading Style Sheets，简写CSS），一种用来为结构化文档（如[HTML])文档或[XML]添加样式（字体、间距和颜色等)的计算机语言。
Inline CSS
style直接在body中的具体内容修改，缺点就是一旦有调整需要每一个区域都作出调整。
<p style="color: chartreuse;font-size: 200%">This domain is established to be used for illustrative examples in documents.</p>
内部CSS
大部分情况采用此种配置方法，直接在head中定义style进行配置。
<style>
p{
color: cornflowerblue;
font-size: 200%;
}
</style>
class 和 id
class可以有多个，id只能有一个。span可以对一部分进行修改。
<style>
.large{ font-size: 150%; }
#green{ color:chartreuse; }
.underline{ text-decoration: underline; }
.bold{ font-weight: bold; }
</style>
<p class="large">this is some text</p>
<p id="green" class="large"> this is some more text</p>
<p>this is the <span class="large underline bold" id="green"> third </span> text </p>
div (division区域)
div {
background-color: aliceblue; //设置背景颜色
width: 500px; //设置区域的宽度
height: 200px; //设置区域的高度
}
HTML 颜色代码
六位的颜色代码可以去此网站查询 https://html-color-codes.info/
向左对齐
float: left;
float: right;
clear.both //清除所有布局
设置位置 position
position: relative; //还有absolute，fixed(网页上下移动，但是fixed固定位置不变)，static等用法
top: 80px; //向下移动80像素的位置
left: 100px;//向右移动100像素的位置
z-index: 3;//图层优先级，数字越大显示在越上层（使用时要配置position:relative）
Margin 间距
margin:50px 在所选中的区域周围建立50像素的间隔
margin: 100px 80px 150px 200px; 距离上方100像素，距离右方80像素，距离下方150像素，距离左方200像素 (顺序上右下左)
margin-left: 300px; 左边距
margin-top: 100px; 上边距
margin-right: 200px; 右边距
margin-bottom: 400px;下边距
margin:40px auto; //居中处理
Padding
padding: 20px 100px; //调整区域内的文件间距
border 边框
border: 20px yellowgreen solid;// 在选定区域外加20宽带像素的边框 solid代表实心
border-style 相关类型参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-style
border-width 设置宽度
border-color 设置颜色
border-radius: 15px; 边框的圆角显示
字体
https://www.w3schools.com/css/css_font.asp 此网站可以查询CSS font 格式。
p {
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
text-align:left //向左对齐
text-align:right //向右对齐
text-align:center //居中对齐
text-align:justify //自动调节
font-size: 2em;//设置字体大小，尽量不要用像素 不知道网页缩放
格式化超链接
<a href="http://www.baidu.com" target="_blank" >baidu</a> 在新建的窗口打开网页
a:visited{
color: darkgreen;
} //访问过的网站颜色变化
a:hover{
font-size: 50px;
} //鼠标经过链接的时候发生变化，本次设置的是字体大小发生变化。
CSS3方框圆角
box-sizing: border-box;// padding设置之后margin大小不会改变。
border-bottom-left-radius: 50px; //左下角设置为圆角
CSS3颜色
background:linear-gradient(to left,blue,yellow); //颜色渐变
background: radial-gradient(green,yellow,red);//圆形渐变
background: rgba(255, 255, 255,0.5);//设置颜色和透明度
CCS3 shadows 背影
box-shadow: 10px 20px 10px -10pxblack; 第一个参数设置影子宽度，第二个参数设置影子长度，第三个参数设置影子扩散程度，第四个参数设置离中间的距离，第五个参数设置影子颜色。
text-shadow: 0 2px 5px blue;//同理可以给字体设置shadow
CSS3动画和变形
@keyframes box{ //设置从一个动画形态到另一个动画形态到参数
from{
background-color:coral;
border-radius: 20px;
top:0;
left: 0;
}
to{
background-color:darkseagreen;
border-radius: 100px;
top:100px;
left: 100px;
}
}
#box{
animation-name: box; //动画演示的ID
animation-duration:3s;//动画演示的时间
animation-iteration-count:4;//动画演示的次数
animation-direction:alternate;//动画从from 到to ,再从to 到 from
animation-timing-function:ease-in-out;//速度先快后慢
animation: box 3s 88 alternate ease-in-out;//上述代码的简化形式
}
#box2:hover{
background: red;
width: 300px;
height: 300px;
transition:width 2s, height 5s, background 10s; //动画过渡演示，分别对宽度，高度，背景颜色进行不同时间的渐变
}
CSS 3 中 -webkit-, -moz-, -o-, -ms- 这些私有前缀什么时候可以移除？
由于浏览器厂商众多，不同的厂商有着自己的利益，所以很多时候对于同一规范并不会完全按照执行。特别是早期。对于CSS部分属性的前缀，不同的浏览器添加不同的前缀到今天来说已经是成为历史了。使用PostCSS的Autoprefixer插件可以解决这些问题，你也不需要担心CSS属性应该添加什么样的前缀。你只需要控制你自己需要兼容什么样的浏览器版本，那么这个插件就可以帮你解决后顾之忧。
ColorZilla 网页颜色提取插件，用此插件可以提取网页的颜色。
用火狐浏览器，查看页面元素进行debug.
P标签默认都有margin根据浏览器不同值不同，在使用是要用margin:0去掉。
外部CSS文件
将<style type="text/CSS"></style>中的全部内容剪切出去，新建一个后缀名为.css的文件。
在htiml 通过引用css文件，达到和之前一样的效果。
<link rel = "stylesheet" type = "text/css" href = "style.css" />
网友评论