CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。
样式插入引用
外部样式表:
<link rel="stylesheet" type="text/css" href="xxxxxxx.css">
添加条件(浏览器屏幕最大宽度没有超过640像素时使用)
media="only screen and (max-width:640px)" rel="x.css">
内容样式表:
>| 去掉style标签,可以将其内容保存成css文件,然后使用上面的外部样式表方式进行引用
>| 确定深度:使用空格分隔,可以实现层级关系
>| 确定广度:使用逗号分隔,可以实现多个共用样式
1 <style type="text/css"> 2 /*标签样式,元素选择器*/ 3 span{ 4 border: 9px dotted green; 5 } 6 id索引样式,id选择器 7 #dong_id p{ 8 1px solid red; 9 } 10 class索引样式,类选择器11 .dong_cl1,.dong_cl2{ 12 font-size: 9px; 13 } 14 属性选择器 如:<p dong="" >zz</p>15 [dong]{ 16 color: red; 17 } 18 属性和值选择器 如:<span dong="dongxiaodong">xx</span>19 [dong=dongxiaodong]{ 20 green; 21 } 22 </style>
添加条件(浏览器屏幕最大宽度没有超过640像素时使用)对应有min-width,多个条件合并可以使用and进行连接
1 @media screen and (max-width:640px){ 2 body{ 3 background-color:4 } 5 div{ 6 } 7 }
内联样式表:
直接在标签中添加style属性
div style="width: 150px;height: 50px;">dongxiaodong</div>
样式显示规则:
就近原则,越离得近的优先级越高,如内联样式的优先级是最高的,但是如果使用【!important;】表示最高优先级,如:【background-color: red !important;】
样式集合:
【width:80%;height:50px;】宽高设置
【min-height: 50px;min-height: 50px;】最小宽高,对应有最大宽高(max)
【padding: 10px;】内边距设置,有对应的上、下、左、右各值设置
【margin:100px】外边距设置,上下左右外边距,也有单独的上下左右设置,如:margin-left
【float:left】浮动在左边,另外值有right
【clear: both】清除浮动,因为一经浮动,接下来的标签会自动跟随,所以可以在接下来标签中清除浮动,值有分左、右、左右都。在父级div包裹不了浮动的子内容时可以在最后使用【<div style="clear: both;"></div>】
【border: 1px dashed #00FDE9;】设置边框,参数(大小,样式,颜色),其中样式有 直线(solid) 虚线(dashed)
【border-radius: 50%;】圆角效果,可以使背景、边框、图片圆角化
【text-align:center;】水平居中
【line-height: 100px;】垂直居中,参数为整个高度,解释:其是设置行高
【margin: 0px auto;】布局居中,适用于<body>及其一级子标签,解释:上下为外边距为零,左右外边距自适应。
【opacity: 0.2;】透明度设置,1为原图
【cursor: grab;】鼠标放至时显示的鼠标样式,有多值
【visibility: hidden;】设置为占位隐藏,其他值:可见(visible)
【display: inline;】将块级标签(div)变成内联标签(span)
【display: block;】与上效果相反
【display: none;】不占位隐藏
【display:inline-block】使标签占据整行(高度),可以设置宽高
【overflow: auto;】div标签中非浮动内容超出大小则出现滚动条
【overflow: hidden;】div标签中非浮动内容超出大小则隐藏超出内容
文本相关:
1 颜色 2 color: red; 3 4 文字位置 值有:left right center 5 text-align:center; 6 7 文字大小 8 font-size: 30px; 9 10 文字缩进或突出的字符(汉字也为1),参数可为正负值text-indent: 2em; 12 13 单词样式,每个首字母大写:capitalize,全部大写:uppercase,全部小写:lowercase14 text-transform:inherit; 15 16 阴影效果 参数:(背景居左距离, 居上距离,清晰度,颜色)17 text-shadow: 5px 5px 2px #0000FF; 18 19 自动换行实现,更加宽度进行自动换行20 width: 10px; 21 text-wrap:normal; 22 23 设置字体24 定义字体,设置字体25 @font-face{ 26 font-family:dongfont; 字体名字27 src: url(font/邯郸-韩鹏毛遂体.TTF); 28 } 29 使用字体30 .pp1{ 31 32 dongfont,"宋体","楷体";多个字体设置33 34 } 35 字体样式,斜体(italic)36 font-style:italic; 37 38 加粗39 font-weight:bold;
背景相关:
背景颜色background-color: red; 背景图片background-image:url(img/0.jpg) ; 设置背景图片是否可重复 8 repeat-x 纵向重复, repeat-x 横向重复,no-repeat 不重复 9 background-repeat:repeat; 10 11 固定背景图片,不链接滚动条12 background-attachment:fixed; 13 14 宽高自适应,100%填充*/ background-size:100% 100%; 16 17 设置图片位置,整体居左,图片居中18 background-position: right center; 19 20 背景移动background-position-x:0px; background-position-y:-10px;
鼠标操控:
未被点击span:link{ 3 font-size: 20px; 4 } 5 已被点击 6 span:visited{ 7 50px; color: 9 } 鼠标放至在其上span:hover{ 5px; 13 } 正在被点击span:active{ 100px; 17 }
<a>标签:
text-decoration: none;设置无下划线*/
列表项标签相关:
ul li{ 2 各种有序或者无序的字符 list-style:lower-greek; 4 5 设置图片 6 list-style-image: url("img/kkfei.png"); 7 8 } li{ 10 设置列表在一行显示11 display:inline; 12 13 }
表格标签相关:
table,td,th{ 2 3 设置边框,参数(大小,样式,颜色) 4 其中样式有 直线(solid) 虚线(dashed) 5 1px dashed #00FDE9; 6 } table{ 8 合并两个挨着的边框线 9 border-collapse: collapse; 11 设置表格整体宽高 width: 500px; height: 500px; 14 表格内容居中15 text-align: center; 16 }
边框轮廓相关:
方法一:
1 2 3 border: 1px dashed #00FDE9; 4 border-bottom: 1px dotted red;//只显示底部边框
方法二:
虚线(dashed),实线(solid),双实线(double),立体(ridge)等等2 outline-style:double; 3 4 outline-color: red; 5 大小,宽度6 outline-width: 10px;
方法三:
上下左右整体设计border-style: dotted; 3 4 单独设置一边(上)border-top-style: double; border-top-color: red; border-top-width: 10px;
边框阴影:
参数:(背景居左距离, 居上距离,透明度,颜色)*/ box-shadow: 5px 1px 100px #FF0000;
布局及偏移量:
relative:相对布局,内容嵌与页面中absolute:绝对布局,内容浮于页面顶层fixed:基于绝对布局的,不绑定滚动条position:fixed; 向左偏移,向上偏移left: 300px; top: 20px; 7 排序,如果重合时,该值大则较顶端显示8 z-index: 10;
例:实现内容浮动固定在浏览器窗口的右下方
position: fixed; 浮动right: 10px;右偏移bottom: 20px;左偏移*/
例:实现内部定位
="position: relative"> span ="position: absolute;right: -10px;bottom:10px">我是文字span> >
效果样式
效果:
移动,参数(x,y)transform: translate(200px,200px); 3 旋转,参数(角度)transform:rotate(50deg); 缩放,参数(宽倍数,高倍数)transform:scale(5,0.5); 9 倾斜,参数(x轴,y轴)transform: skew(5deg,0deg); 3D旋转transform:rotateX(20deg); transform:rotateY(30deg); 16 transform:rotateZ(10deg);
过渡效果:
img{ 2 width: 200px; height: 4 需要使用动画效果的效果属性定义 5 当定义的效果属性应外部因素改变原值时,将自动进入执行动画 transition-property: width,height,transform; 7 动画时长 transition-duration: 2s,10s,6s; 9 动画时间曲线10 transition-timing-function:ease-in-out; 11 开始时间延时 transition-delay: 0.5s; 13 14 } 15 效果属性值改变 img:hover{ 17 18 height:19 transform:rotate(360deg) 20 21 }
动画:
div 2 { width:100px; height:background:red; position:relative; 7 规定需要绑定到选择器的 keyframe 名称animation-name: dongan; 规定完成动画所花费的时间,以秒或毫秒计animation-duration: 5s; 12 规定动画的速度曲线13 animation-timing-function:规定在动画开始之前的延迟animation-delay: 1s; 规定动画应该播放的次数,参数可为具体的次数或者一直执行(infinite)animation-iteration-count:infinite; 18 规定是否应该轮流反向播放动画animation-direction: alternate; 20 } 21 @keyframes dongan 23 { 颜色和大小的改变,有渐变效果25 0% {left:0px;} 26 50% {left:700px; 50px;} 27 80% {200px;green;} 28 100% {29 }
分栏显示
分栏的数量column-count: 4; 分栏线与下一栏的间距column-gap: 10px; 分栏线的样式,参数(大小,线样式,颜色column-rule: 1px dashed #FF00FF;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。