资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

CSS样式表回忆录-创新互联

三种声明方式:

创新互联建站2013年至今,是专业互联网技术服务公司,拥有项目网站设计制作、做网站网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元大姚做网站,已为上家服务,为大姚各地企业和个人服务,联系电话:028-86922220

标签内style声明,内联式

HTML头部声明,内部

单独的CSS文件声明,外部,需要在html里调用:

< link rel="stylesheet" type="text/css" href="mystyle.css">< /head>

优先级:标签内style>组合定义/层定义>。定义>#定义(还遵循定义时就近原则)

html类别:行标签(a\span)、块标签(div)

块标签:点据一整行、有position\padding属性

行标签:占据一部分、没有position\padding属性

行块转换:display属性,inline转换为行、block转换为块、inline-block拥有块属性的行标签。

CSS中的伪元素:

语法: :伪元素名

link\visited\active\hover\focus\first-letter\first-line\first-child\before\after\lang

CSS基本语法:

选择器{

属性1:值;

属性2:值;

......

}

1、选择器:

标签名1 [标签名2] [标签名3]......:根据标签顺序匹配嵌套标签

.选择器名:在标签的class属性中调用

#idname  :id是标签的属性,#应用于所有标签id为idname的标签

[属性=值]:pname是标签的属性,可以是任何属性

复杂一点的选择器:

ul.pagination li a:hover:not(.active) {background-color: #ddd;}
ul标签的pagenation类下的li标签a标签的active类

属性:

1、background:

参数顺序:

backgournd:RGB(255,255,255) url('image/1.jpg') no-repeat right top;

单独声明一项:

background-color:颜色, #DDDDD/RGB(255,255,255)/red

background-image:背景图片,url('images/1.jpg')

background-repeat:图片重复,默认重复,no-repeat不重复,repeat-x水平重复,repeat-y垂直重复

background-attachment:背景固定,默认scroll不固定,fixed固定(字动图不动),inherit背景继承父元素的属性。

background-position:背景图片位置,left,right,top,bottom,center

background-size:背景图片大小,(长 宽)

background-clip:背景大小匹配,border-box匹配到边框最外侧大小,padding-box匹配到内侧,content-box匹配到文本

2、link定义超链接的式样

注意: a:hover 必须在 a:link 和 a:visited 之后,需要严格按顺序才能看到效果。

注意: a:active 必须在 a:hover 之后。

a:link{}:正常,未访问的链接

a:visited{}:访问过的链接

a:hover{}:鼠标放在链接上时

a:active{}:鼠标点击时

为不同的链接,定义不同的样式




 



将鼠标移至链接上查看其样式改变.

This link changes color

This link changes font-size

This link changes background-color

This link changes font-family

This link changes text-decoration

创建一个链接框:




 



注册
登陆

3、margin、border、padding、content。

边距,边框,填充,和实际内容,用来定义元素的位置。

CSS样式表回忆录

margin:高 宽

可分别定义

margin-right:

border:宽 线类型 颜色

类型:dotted(点)、dashed(虚线)、solid、double、groove(3D)、ridge(3D)、inset(3D)、outset(3D)

可分别定义不同边框的式样

border-bottom-style: 
border-bottom-color: 
border-bottom-width:
border-style:solid;
border-radius:5px; 倒角
border-radius: 15px 50px 30px 5px;定义不同角度
border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);

padding:上 右 下 左,只写一个参数情况下,所有填充都是

默认padding会计算在border里,也就是说padding会撑大标签,使用box-sizing:border-box来限制(推荐所有元素里使用)

可分别定义:

padding-left:

width:

height:

border:

4、CSS多列(类似WORD分栏功能)

column-count 指定元素应该被分割的列数。
column-fill 指定如何填充列
column-gap 指定列与列之间的间隙
column-rule 所有 column-rule-* 属性的简写
column-rule-color 指定两列间边框的颜色
column-rule-style 指定两列间边框的样式
column-rule-width 指定两列间边框的厚度
column-span 指定元素要跨越多少列
column-width 指定列的宽度
columns 设置 column-width 和 column-count 的简写

5、display(显示)

控制元素显示,有三个属性:

block:把行标签变成块

inline:把块标签变成行

inline-block:行标签具有块属性,(不独占一行)

none:元素不可见

6、position(定位)

使用定位后,使用top\bottom\left\right来改变元素位置,(以元素的左上角为基点)

不定义position,以上定义无效

static:(默认)没有定位,静态定位的元素不会受到 top, bottom, left, right影响。

fixed:元素的位置相对于浏览器窗口是固定位置。(右下角的浮动广告效果)

relative:相对定位元素的定位是相对其正常位置。根据元素当前位置,进行偏移。

absolute:绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于

              通常父元素调置relative、子元素设置absolute来进行定位。

sticky:基于用户的滚动位置来定位。

元素居中技巧:position的top\left设置50%,使用margin-top、margin-left设置元素大小的负一半

width:500px;
height:700px;
position:fixed;
left:50%;
right:50%;
margin-left:-250px;
margin-top:-350px;

7、overflow overflow-x overflow-y(超出显示范围的显示方式)

scroll:始终显示滚动条

hidden:超出部分隐藏

auto:如果超出,显示滚动条,如果不超不显示滚动条

visible:(默认)超出,依然显示内容。

8、clip(裁剪)

指定一个绝对定位的元素,该尺寸应该是可见的,该元素被剪裁成这种形状并显示。

    注意:: 如果先有"overflow:visible",clip属性不起作用。

页面小图标效果,可以使用clip,防止图片过多产生多个请求。

img 
	{
	position:absolute;
	clip:rect(0px,60px,200px,0px);
	} 
div{
    background-color:yellow;    
    background-clip:content-box;
}

9、z-index(元素显示顺序)

可以为负数,数值越大显示位置越靠前。

10、float(元素浮动)

会使元素向左或向右移动,其周围的元素也会重新排列。

浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。

left:左浮动
    right:右浮动
    none:不浮动
    inherit:从父元素继承 float 属性的值。

浮动会产生元素串位,在上层使用clear:both清除

同时,FLOAT还要在父标签设置position:relative,在子标签设置position:absolute,进行定位,子标签超出父标签,父标签没设置高度时自动调整,

10、text:

text-align
text-align-last
text-decoration 定义下划线样式
text-decoration-color
text-decoration-line
text-decoration-style
text-indent 行首缩进

text-overflow :text-overflow属性指定当文本溢出包含它的元素,应该发生什么。

        text-overflow: clip|ellipsis|string;elipsis超出显示省略号,string自定义显示字符

text-shadow :文字阴影text-shadow: 2px 2px #ff0000;

text-transform :控制文本的大小写

其它:

block加阴影

角度  阴影距离 扩散范围 阴影大小

box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);

鼠标形状:

cursor: pointer;

透明度:0最小、1大

opacity: 1;

标签位移:

transform: translateY(10px);

transform: translateX(10px);

其它参考:

https://www.runoob.com/c***ef/css3-pr-align-content.html

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


当前文章:CSS样式表回忆录-创新互联
文章起源:http://cdkjz.cn/article/cdccdc.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220