背景 - 背景颜色、背景图片
文本 - 文本颜色、对齐、删除线、大小写转换、缩进、行距、间距、换行、阴影、倒序、图片的靠上下
字体 - 宋体系列、斜体、大小、粗细、小型大写
链接 - 未访问、已访问、移动至链接、点击链接
列表 - 有序ul、无序ol、框内图
表格 - 盒子（边框线宽；实线；颜色）、边框与单元格间隔、表名位置、文本位置
盒子模型 - 外边距、边框、内边距、内容（width）
边框（border） - 实线、宽度、颜色
轮廓（outline） - 实线、宽度。颜色
外边距（margin）- 四周边距
填充（padding）- 四周边距
尺寸 - 元素高度、宽度
显示与可见性 - 文本隐藏、列表一排显示
对齐 - 文本放置
定位 - 文本随意放置
浮动 - 用于图片左右文本不受影响,多个元素在一行
导航栏
下拉菜单
提示工具
图片廊
图像透明/不透明
图像拼合
循环播放：
animation:mymove 5s infinite;
<!-- 兼容 Safari 和 Chrome -->
-webkit-animation:mymove 5s infinite;
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
轮播图：
position: relative;
overflow: hidden;
animation-name: fade;
animation-duration: 2s;
animation-iteration-count: 3，infinite;
animation-fill-mode: forwards;
animation-play-state: paused，running；
animation-timing-function: linear;
@-webkit-keyframes fade{
from{
opacity: 0.;
}
to{
opacity: 1;
}
}
@keyframes fade{ .......
翻页按钮：
z-index: -1，1；
position
opacity: 0.3;
display:none;
cursor: pointer;
transition:opacity 1s;
-webkit-transition: opacity 1s;
块元素居中：
父元素：水平居中 text-align:center; 垂直居中 vertical-align:middle; display: table-cell;
子元素：display:inline-block; vertical-align:middle;
<!-- css背景 -->
属性：
background-color（背景颜色）: red; #e0ffff；rgb(0, 255, 115)
background-image（背景图片）: url('./image/color.jpg');
background-repeat: repeat-x（横向平铺）,no-repeat（不平铺）,repeat-x（纵向平铺）
background-attachment: fixed(图片固定不随页面滑动)
background-position: right top（图片放置右上角）
margin-right: 100px（文字在左显示，文本边缘离右边距离）
margin-left:
background-size: 100%;
简写：
body {background:#ffffff url('img_tree.png') no-repeat fixed right top;}
<!-- 实例 -->
<style>
body
{
background:#ffffff url('img_tree.png') no-repeat fixed right top;
}
h1
{color:yellow;}
</style>
</head>
<body>
<h1>字体颜色是黄色</h1>
<p>背景颜色白色，图片不平铺、固定不随页面滑动、在右上角显示。</p>
</body>
<!-- 文本 -->
<!-- 属性 -->
color（文字颜色）：#6495ed; #e0ffff；rgb(0, 255, 115)
direction（文本正、倒序显示）：:rtl（文本倒序显示）
text-align（文本对齐):center; right； justify（每一行被展开为宽度相等，左，右外边距是对齐）
text-decoration（删除线）：none（链接无下划线）；overline（删除线在文本头上）；line-through（删除线）；underline（文本底部）
text-transform（大小写转换）：uppercase（单词转大写）；lowercase（单词转小写）；capitalize（单词首字母大写）
text-indent（文本缩进）:2em；50px
letter-spacing（指定字符间的间距）：2px；-3px
line-height（行与行之间的间距）：70%；200%
word-spacing（单词之间的间距）：20px
white-space（ 文本显示规则）：nowrap（文字不会换行）；pre（按实际文本显示）；pre-wrap（保留空白符序列，但是正常地进行换行）；pre-line（合并空白符序列，但是保留换行符）
vertical-align（图片左右的文字显示位置）：text-top（上显示）; text-bottom（靠下显示）
text-shadow（文本阴影）：12px 2px blue（文字，阴影，阴影颜色三个属性值都要有）
<!-- 例子 -->
<style type="text/css">
a {text-decoration:none;}
h3 {text-decoration:underline;}
p.date {text-align:right;color: red;font-size: 20px;}
</style>
</head>
<body>
<div><p>链接无下划线: <a href="http://www.runoob.com/">runoob.com</a></p></div>
<h3>划线在文本底部</h3>
<p class="date">文本右对齐显示</p>
</body>
<!-- 字体 -->
<!-- 属性 -->
font-family（字体系列）："Times New Roman",Times,serif; Arial,Helvetica,sans-serif;
font-style（字体样式）：italic（斜体）
font-size（字体大小）：:30px；100%
font-weight（字体加粗）：lighter（加细）；bold 加粗 ；400（400等于正常）
font-variant（单词转小型大写字体）：small-caps
简写：
body {font:italic bold 12px/30px Georgia,serif;}
<!-- css链接 -->
a:link {background-color:#B2FF99; color:#000000; text-decoration:none;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {font-size:150%;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
a:link,a:visited {color:#00FF00;}
a.one:link {color:#00FF00;}
<p><a href="http://news.baidu.com/" target="_blank">这是一个链接</a></p>
<p> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果; a:active 必须在 a:hover 之后</p>
<!-- css列表 -->
<!-- 属性 -->
list-style-type（无序:u1，有序:o1）; none（无列表图）:circle(圆），square（方框），upper-roman（罗马计数），lower-alpha（a,b,c）；cjk-ideographic（一,二）；decimal（1,2）
list-style-image（无序框内图）：url('sqpurple.gif')
<!-- 简写 -->
ul {list-style: square list-style-position url("sqpurple.gif");}
<!-- 例子 -->
<style>
ul
{
list-style-type:none;
padding:10px;
margin:40px;
}
ul li
{
background-image:url(sqpurple.gif);
background-repeat:repeat-x;
background-position:10px 5px;
padding-left:14px;
}
</style>
<!-- 表格 -->
<!-- 属性 -->
border：3px solid red（3px表格宽度）
border-collapse：collapse（边框为无间隔）；
caption-side：bottom（表名在底端）
vertical-align:bottom（文字在表格底端）
padding-top:5px;
padding-bottom:4px;
<!-- 例子 -->
<style>
table,th,td
{border:1px solid black;}
table {border-collapse: collapse; width:100%; height:150px;}
td {text-align:right; vertical-align:bottom; padding:15px;background-color:green; padding-top:5px;}
caption {caption-side:bottom;}
</style>
<q>collapse:边框为无间隔;bottom:文字在底端；padding：文字与边框距离;caption-side:bottom表名在底端</q>
<!-- 盒子模型 -->
<!-- 属性 -->
margin（外边距）: 25px;auto（居中，配合width才有效）
border(边框): 25px solid green;
padding（内边距）: 25px;
width(内容) : 30px
<!-- css边框 -->
<!-- 属性 -->
border-style（边框风格属性）：
border-top-style（单独设置顶边框的风格）
border-bottom-style
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。 效果取决于边框的颜色值
none：无边框
border-width（使用边框宽度，先使用 "border-style" 属性来设置边框）:5px; medium
border-left-width
border-color（使用边框颜色，先使用 "border-style" 属性来设置边框）：#98bf21; red
border-right-color
<!-- 简写 -->
p {border:5px solid red;}
<!-- 例子 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
p.one {border-style:solid;border-top:thick double #ff0000;}
p.two {border-style:solid; border-color:#98bf21; border-width:5px;}
p.three {
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;}
p.four {
border-style:solid;
border-left:thick double #ff0000;}
</style>
</head>
<body>
<p class="one"> 顶部边框设置风格，其他边框方向为实线</p>
<p class="two"> border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式</p>
<p class="three">单独设置边框四个方向风格</p>
<p class="four">单独设置左边框风格</p>
</body>
</html>
<!-- 轮廓 -->
<!-- 属性 -->
outline-style：solid（与边框属性一样）
outline-color：#00ff00
outline-width: 3px，thin，medium，thick，length
<!-- 简写 -->
outline：green dotted thick
<!-- 例子 -->
<style>p {
border:1px solid red;
outline:green dotted medium;
}</style>
<!-- margin外边距 -->
<!-- 属性 -->
margin:100px 50px（100px：上下；50px:左右间距）; 2cm ; 25%
margin-top
margin-bottom
margin-right
margin-left
<!-- padding填充 -->
<!-- 属性 -->
padding:25px 50px;
padding-top
padding-bottom
padding-right
padding-left
<!-- css元素尺寸 -->
<!-- 属性 -->
height：100%；auto；200px
line-height（设置行高）
max-height（最大高度）
min-height（最低高度）
width：100%；auto；200px
max-width
min-width
<!-- display与Visibility可见性 -->
<!-- 属性 -->
visibility:
hidden（元素被隐藏,但有占位）
visible（默认显示）
collapse（tr,td表格或表内容被隐藏 ）
display:
none (元素被隐藏，不占位)
inline (li列表水平显示)
block (使元素为块级元素)
inline-block (下拉菜单列显示)
<!-- 注意 -->
inline: 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)
和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
inline-block: 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
<!-- 定位 -->
position: 使用position来对齐元素时, 通常元素会设置 margin和padding
static: 默认
fixed: 独立与其他元素，不占空间;
sticky: 类似fixed但与其他元素重叠，需指定 top, right, bottom 或 left 之一
relative: 移动且占用原空间,和其他元素重叠
absolute: 不占空间,和其他元素重叠
left；top；bottom；right（位置）：-20px; 20px
z-index: -1（在重叠文本之后）
clip(裁剪): rect(0px,1500px,155px,0px);
overflow(内容溢出元素框): scroll(给出滚动条), hidden(隐藏), visible(溢出), auto(如果导航栏选项多,允许滚动)
overflow-x；overflow-y
<!-- 更改鼠标指针 -->
cursor: default(正常), text(输入), auto(输入), move(移动), pointer(手势), wait(转圈),
progress(转圈指针等待), help(帮助), crosshair(裁剪), e-resize(左右裁), n-resize(上下裁), ne-resize(左底裁), nw-resize(右底裁)
<!-- 浮动 -->
float：right(图片右侧浮动), left
clear(元素两侧不能出现浮动元素): both, left, right
<!-- 居中 -->
margin: auto (同时使用width,并将它放到块元素中)
text-align: center
<!-- 下拉菜单 -->
display：
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);（让下拉菜单像个盒子）
<!-- 例子 -->
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content { /* 下拉菜单盒子设置 */
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
}
.dropdown:hover .dropdown-content { /* 下拉菜单文本设置 */
display: block;
}
</style>
<div class="dropdown">
<span>鼠标移动到我这！</span>
<div class="dropdown-content">
<p>菜单1</p>
<p>菜单2</p>
</div>
<!-- 提示工具 箭头 -->
border-radius（为提示框添加圆角）： 6px；
opacity(提示工具的淡入效果): 1
.case13::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -15px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #FFFFFF transparent;
}
<!-- 图片透明/不透明 -->
opacity ：0.4 （通常与 :hover 选择器一起使用，在鼠标移动到图片上后改变图片的透明度）
<!-- css创建 -->
<p><b>注意：</b>如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式</p>
<!-- 选择器 -->
<!-- id例子 -->
<style>
#name{
color:red;
}
</style>
<p id="name">red text</p>
<!-- class例子 -->
<style>
.value{
text-align:center;
}
</style>
<!--下面的文字是居中对齐的-->
<p class="value">center text</p>
<!-- class例子 -->
<style>
p .value{
text-align:center;
}
</style>
<!--段落文本居中对齐-->
<p class="value">文本居中t</p>
<h3 class="value">不居中</h3>
</style>
<!-- 包含选择器 -->
<style>
.first span{
color:red;
}
</style>
<body>
<p class="first"><span>内容为红色</span>
<ol>
<li><span>内容也是红色</span></li>
<li><span>内容也是红色</span></li>
</ol></p>
</body>
<!-- 子选择器 -->
<style>
div>p{
color:red;
}
</style>
<div>
<p>red text</p><!--文字是红色的-->
<table>
<tr>
<td>
<p>no red text;</p><!--文字是非红色的-->
</td>
</tr>
</table>
</div>
<!-- 兄弟选择器 -->
<style>
div~p{
color:red;
}
</style>
<div>
<p>no red text</p><!--文字是非红色的-->
<div>no red text</div>
<p>red text</p><!--文字是红色的-->
</div>
<!-- 通用选择器 -->
*{color:red;}
<!-- css属性选择器 -->
[title]
[title=hello]
[title~=hello]
[lang|=en]
input[type="text"]
<style>
[title]
{
color:blue;
}
</style>
</head>
<body>
<h1 title="tittle1">Hello world</h1>
<h1 title="hello">Hello world</h1>
<h1 title="hello world">Hello world</h1>
<p lang="en-us">Hi!</p>
Firstname:<input type="text" name="fname" value="Peter" size="20">
</body>
</html>css基础整理
猜你喜欢
转载自blog.csdn.net/qq_28905427/article/details/80701437
今日推荐
周排行