CSS: 级联样式表
优势:
内容与表现分离
网页的表现统一,容易修改
丰富的样式,使得页面布局更加灵活
减少网页的代码量,增加网页的浏览速度,节省网络带宽
运用独立于页面的CSS,有利于网页被搜索引擎收录
行内样式:
<p style="color: red;">我叫 xxx</p>
内部样式表(一般书写在head标签内部):
<style type="text/css">
p{ color: red;}
</style>
外部样式:
<link href="css/index.css" rel="stylesheet" type="text/css">
优先级别:
行内样式 > 内部样式表 >外部样式表
标签选择器:
P{ color:red;}
类选择器(class):
.xxx{ …}
ID选择器(id):
#xxx{ …}
优先级:
ID选择器>类选择器>标签选择器
字体样式
font-family 设置字体类型 font-family:"隶书";
font-size 设置字体大小 font-size:12px;
font-weight 设置字体的粗细 font-weight:bold;
font 在一个声明中设置所有字体属性 font: bold 36px "宋体";
文本属性
属性 含义 举例
color 设置文本颜色 color:#00C;
text-align 设置元素水平对齐方式 text-align:right;
text-indent 设置首行文本的缩进 text-indent:20px;
line-height 设置文本的行高 line-height:25px;
text-decoration 设置文本的装饰 text-decoration:underline;
text-shadow 设置文本阴影 text-shadow:30px -10px 2px red;
行级元素:
1.与其他行内元素共享一行
2.不能修改width、height属性,大小由内容撑开
3.padding属性 top、right、botto、left设置都有效;margin属性只有left、right设置有效
a 、 img 、 span …
块级元素:
1.独占一行,在不设置自己的宽度的情况下,块级元素会默认填满父级元素的宽度
2.可以修改width、height属性
3.padding、margin四个方向的值设置均有效
div 、p 、h1~h6 …
display:
none: 隐藏元素,不显示
block:以块级元素的特点显示
inline:以行级元素特点显示
inline-block:使元素变成行内块级元素,结合了行内元素和块级元素的特性(不独占一行的块级元素),即
1.与其他行内元素共享一行
2.可以修改width、height属性
3.padding、margin四个方向的值设置均有效
伪类样式:
伪类名称 含义 示例
a:link 未单击访问时超链接样式 a:link{color:#9ef5f9;}
a:visited 单击访问后超链接样式 a:visited {color:#333;}
a:hover 鼠标悬浮其上的超链接样式 a:hover{color:#ff7300;}
a:active 鼠标单击未释放的超链接样式 a:active {color:#999;}
设置伪类的顺序:a:link->a:visited->a:hover->a:active
设置鼠标样式:
cursor:pointer /设置鼠标样式为手指/
列表样式:
List-style-type:设置列表格式(列表每一项前面的符号),设置(实心圆、空心圆、正方形…),如果设置为none,表示列表项没有符号
list-style-image:设置列表项为自定义图片(需注意图片的路径)
list-style-image: url("../image/bang.gif")
背景:
background-color:背景颜色
background-image:设置背景图片
background-repeat:设置背景图片是否重复
background-position:设置背景图片位置
background-size:设置背景图片大小(拉伸…)
背景颜色渐变:
线性渐变
background: linear-gradient(white,#5bc0de 30%,white)
径向渐变
background: radial-gradient(yellow 30%, red 50%,green,white);
CSS动画
translate():平移函数,基于X、Y坐标重新定位元素的位置
右平移20像素:transform: thranslate(20px,0px)
scale():缩放函数,可以使任意元素对象尺寸发生变化
缩放0.8倍: transform: scale(0.8)
rotate():旋转函数,取值是一个度数值
旋转45度:transform: rotate(45deg)
skew():倾斜函数,取值是一个度数值
水平倾斜45度:transform: skew(45deg,0deg)
合在一起写:空格隔开
transform: thranslate(20px) scale(0.8) rotate(45deg)
transition呈现的是一种过渡,是一种动画转换的过程,如渐现、渐弱、动画快慢等
CSS3 transition的过渡功能更像是一种“黄油”,通过一些CSS的简单动作触发样式平滑过渡
transition: all 1s ease-in-out 1s;
过渡动画速度:
ease:速度由快到慢(默认值)
linear:速度恒速(匀速运动)
ease-in:速度越来越快(渐显效果)
ease-out:速度越来越慢(渐隐效果)
ease-in-out:速度先加速再减速(渐显渐隐效果)
设置过渡步骤:
在默认样式中声明元素的初始状态样式
声明过渡元素最终状态样式,如悬浮状态
在默认样式中通过添加过渡函数,添加一些不同的样式
animation实现动画主要由两个部分组成
1.通过类似Flash动画的关键帧来声明一个动画
2.在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果
盒子模型
Border 边框
border: solid 1px red
;` 边框类型 边框粗细 边框颜色
margin:外边距 (网页居中)
设置他的上外边距15px 左外边距 10px 右外边距 20px 下外边距5px;
margin:15px 20px 5px 10px
; 顺时针(上右下左)
margin: 15px 20px;
上下外边距 15px ,左右外边距20px;
margin: 0px auto;
设置盒子居中(必须要有宽度)
padding:内边距
设置他的上内边距15px 左内边距 10px 右内边距 20px 下内边距5px;
padding:15px 20px 5px 10px;
顺时针(上右下左)
padding: 15px 20px;
上下内边距 15px ,左右内边距20px;
盒子模型总尺寸=border+padding+margin+内容宽度
圆角边框
border-radius: 15px;
四个角都设置15px
border-radius: 15px 10px 20px 5px
;`顺序依次为左上、右上、右下、左下(顺时针)
盒子阴影(用法同text-shadow):
box-shadow: #999999 5px 5px 10px;
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)