CSS百宝箱

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 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)