CSS注释以 "/*" 开始, 以 "*/" 结束, 实例如下:
//CSS 背景
background-image:url('gradient2.png');
background-repeat: repeat-x no-repeat repeat-y
background-position: left top; //改变图像在背景中的位置
background-attachment: fixed scroll（默认）; //
background-color：rgb（255，0，255） yellow #00ff00
//文本的对齐方式
text-align: center right justify
font:
font-family: times courier arial serif sans
font-size: xx-small smaller larger length 100% inherit
font-style : normal italic oblique
font-variant: small-caps normal inherit
font-weight: light normal （400） bold（700） bolder （900）
//字体样式
font-style: normal italic
//CSS 表格
//<tr> 必须在<table></table>里面
//<th>：表头单元格，文字以粗体显示
<td>：定义单元格标签
<table>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
//CSS 文本格式
text-decoration:overline line-through underline
text-transform:uppercase lowercase capitalize
text-indent:50px
//CSS 链接
a:link visited hover active
//CSS 列表
list-style-type:circle square upper-roman lower-alpha
list-style-image:url('')
table,td,th{
border-collapse:collapse;
border:1px solid red;
}
image
//CSS 盒子模型(Box Model)
div{
width:220px;
padding:10px;
border:5px solid gray;
margin:0;
}
//CSS 边框属性
border:3px dotted red;
//display 属性
display:block inline none inline-block
元素的显示方式：
块级元素：
特点：单独占一行，可以给这个元素设置宽高。
display(显示方式):block;
所属标签：div,p,h1,ul,li,ol,dl
行内元素：
特点：可以多个标签放在同一行，但是给标签设置宽高没有作用。
display(显示方式):inline;
所属标签：
span,b,u,i,s,ins,del,strong,em
行内块级元素：
特点：可以多个标签放在同一行，并且可以标签设置宽高。
display(显示方式):inline-block;
img
//## 盒子(Box) 属性
overflow-x:是否对内容的左右边缘进行裁剪 （属性hidden，scroll，visible，auto，no-display，no-content）
overflow-y:是否对内容的上下边缘进行裁剪
//color属性：
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
opacity:1;
//## 尺寸(Dimension) 属性
max-height
max-width
min-height
min-width
//## 弹性盒子模型（Flexible Box） 属性(新)
#main
{
width:220px;
height:300px;
border:1px solid black;
display:flex;
}
#main div
{
flex:1;
}
//## 字体（Font） 属性
//## 用户外观(User-interface) 属性
resize:定义元素是否可以改变大小(none both horizontal vertical)
//CSS3 outline-offset 属性
//## 文本（Text） 属性
direction:rtl; //规定文本的方向 / 书写方向
letter-spacing:2px . // 设置字符间距
line-height:100% //设置行高
text-decoration:overline line-through underline
text-indent:50px
text-transform:uppercase lowercase captialize
//CSS3 教程
//CSS3 圆角
div{
border:2px solid gray;
padding:10px 40px;
background: lightgray;
width: 100px;
border-radius:10px; 10%（用百分比也行）
}
//CSS3 盒阴影
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
//CSS3 圆角
//线性渐变 - 从上到下
background: linear-gradient(red, blue); /* 标准的语法（必须放在最后） */
//CSS3 多列
column-count : 3
column-gap : 40px
column-rule-style : solid dotted
column-rule-width : 3px 属性指定了两列的边框厚度:
column-rule-color : 属性指定了两列的边框颜色：
column-rule : 1px solid lightblue 厚度，样式及颜色：
column-span : all
column-width :列的宽度
//CSS3 框大小
box-sizing: border-box; 实际宽度 = width + padding + border
//按钮宽度
默认情况下，按钮的大小有按钮上的文本内容决定( 根据文本内容匹配长度 )。 我们可以使用 width 属性来设置按钮的宽度
//多种css样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */
</style>
</head>
<body>
<h2>按钮颜色</h2>
<p>我们可以使用 background-color 属性来设置按钮颜色:</p>
<button class="button">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>
</body>
</html>
//transform 属性
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
translate(x,y) --- translate（10px，20px）
translateX(x) --- translateX(10px)
translateY(y) --- translateY(10px)
scale(x,y) --- scale (1.2 ,1.5)
scaleX(x) --- scaleX（1.2）
scaleZ(z) ---
网友评论