CSS学习入门

1.添加css的方法

1)链接外部样式表

  <head> <link rel=stylesheet type=text/css href="文件所在路径"> </head>

2)内部样式表

  <head> <style> </style> </head>

3)内嵌样式

  <table style=color:red>

2.字体属性

1)字体font-family

font-family:"字体1","字体2"

2)字号font-size

font-size:24px

3)字体风格font-style

font-size:normal正常,italic斜体,oblique偏斜体

4)加粗字体font-weight

font-weight:normal正常,bold粗体,bolder特粗体,lighter特细体,number(100-900具体数值)

5)小写字母转为大写font-variant

font-variant:normal正常,小写转化为大写且字体较小small-caps

6)字体复合属性

font:bold italic "宋体"

3.颜色和背景属性

1)颜色属性color

color:颜色取值(关键字/16进制RGB值)

2)背景颜色background-color

background-color:颜色取值

3)背景图像background-image

background-image:url(图像地址)

4)背景重复background-repeat

background-repeat:no-repeat不平铺,repeat平铺排满整个网页,repeat-x水平方向平铺,repeat-y垂直方向平铺

5)背景附件background-attachment

background-attachment:scroll背景图像随对象滚动而滚动,fixed背景图像固定在页面上不动,其他内容随滚动条滚动

6)背景位置background-position

background-position:位置取值(数字:50% 50%/关键字:center center)

7)背景复合属性

background:url(images.jpg) no-repeat left top;

4.段落属性

1)单词间隔word-spacing

word-spacing:normal/长度值(正负)

2)字符间隔letter-spacing

letter-spacing:取值

3)文字修饰text-decoration

text-decoration:none不修饰,underline对文字添加下划线,overline对文字添加上划线,line-through对文字添加删除线,blink文字闪烁效果

4)垂直对齐方式vertical-align

vertical-align:baseline默认,sub文字的下标,super文字的上标,top垂直靠上对齐,text-bottom使元素和上级元素的字体向下对齐

5)文本转换text-transform

text-transform:none使用原始值,capitalize每个单词第一个字母大写,uppercase所有字母大写,lowercase所有字母小写

6)水平对齐方式text-align

text-align:left左对齐,right右对齐,center居中对齐,justify两端对齐

7)文本缩进text-indent

text-indent:缩进值(长度/百分比)

8)文本行高line-height

line-height:行高值(长度/倍数/百分比)

9)处理空白white-space

white-space:normal默认,将连续的多个空格合并;pre源代码中的空格和换行符会保留;nowrap强制在同一行显示所有文本,直到文本结束或遇到<br>对象

10)文本反排

direction:ltr从左到右,rtl从右到左,inherit文本流的值不可继承
unicode-bidi:bidi-override严格按照direction属性的值重排序,normal默认值,embed对象打开附加的嵌入层

5.外边距与内边距属性

1)上边距margin-top

margin-top:长度值/百分比/auto

2)其他边距margin-bottom、margin-left、margin-right

3)外边距复合属性margin

margin:10pt 30px 10px 20px(上下左右)

4)顶端内边距padding-top

padding-top:间隔值(长度/百分比)

5)其他内边距padding-bottom、padding-right、padding-left

6)内边距复合属性padding

padding:10pt 30px 10px 20px(上下左右)

6、边框属性

1)边框样式border-style

border-top-style: 上边框样式
border-bottom-style: 下边框样式
border-left-style: 左边框样式
border-right-style: 右边框样式

 

取值 含义    
none 默认值,无线框
dotted 点线边框
dashed 虚线边框
solid 实线边框
double 双实线边框
groove 边框具有立体感的沟槽
ridge 边框成脊形
inset 整个边框凹陷
outset 整个边框凸起

2)边框宽度border-width

3)边框颜色border-color

4)边框属性border

border-top:2px dashed #00ccff;

5)边框圆角border-radius

border-radius: 5px 5px 5px 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;

 7.定位属性

1)定位方式position

static默认值,absolute采用绝对定位,fixed页面滚动时元素不随着滚动,relative采用相对定位,对象不可层叠

2)元素位置top、right、bottom、left

3)层叠顺序z-index

auto遵从其父对象的定位;数字必须是无单位的整数

4)浮动属性float

none对象浮动;left文字浮动在元素的右边;right文字浮动在元素的左边

5)清除属性clear

none:允许两边都可以有浮动对象;left不允许左边有浮动对象;right不允许右边有浮动对象;both不允许有浮动对象

6)可视区域clip

clip:auto对象不裁切;rect(5px,5px,5px,5px)上右下左

7)层的宽度和高度width、height

8)超出范围overflow

visible:层的大小和内容都会自动显示出来
auto:只有在内容超出层的范围时才显示滚动条
hidden:会隐藏超出层范围的内容
scroll:总是显示滚动条

9)可见属性visibility

inherit:继承父对象的可见性,默认值
visible:无论父对象是否可见,子层都是可见的
hidden:无论父对象是否可见,子层都隐藏

8.列表属性

1)列表符号list-style-type

取值 含义
disc 默认值,实心圆
circle 空心圆
square 实心方块
decimal 阿拉伯数字
lower-roman 小写罗马字母
upper-roman 大写罗马字母
lower-alpha 小写英文字母
upper-alpha 大写英文字母
none 不使用任何符号

2)图像符号list-style-image

none/url(图像地址)

3)列表缩进list-style-position

outside列表项目标记放置在文本以外,且环绕文本不根据标记
inside列表项目标记放置在文本以内,且环绕文本根据标记

4)列表复合属性list-style

list-style-type:square;
list-style-image:url(图像地址);
list-style-position:outside;

9.光标属性cursor

cursor:auto | 形状取值 | url(图像地址)
光标形状取值 含义
default 默认,箭头
hand 竖起一只手
crosshair 简单的十字线光标
text 大写字母I的形状
help 带有问号标记的箭头
wait 用于标示程序忙用户需要等待的光标
e-resize 向东的箭头
ne-resize 向东北的箭头
n-resize 向北的箭头
nw-resize 向西北的箭头
w-resize 向西的箭头
sw-resize 向西南的箭头
s-resize 向南的箭头
se-resize 向东南的箭头
auto 默认值,根据浏览器

10.滤镜属性

1)不透明度alpha

filter:alpha(参数=参数值)
参数值 含义
opacity 开始时的透明度,0-100
finishopacity 结束时的透明度,0-100
style 渐变样式,0无渐变,1直线渐变,2圆形渐变,3矩形渐变
startx 设置透明渐变开始点的水平坐标
starty 设置透明渐变开始点的垂直坐标
finishx 设置透明渐变结束点的水平坐标
finishy 设置透明渐变结束点的垂直坐标

2)动感模糊blur

filter:blur(add=参数值,direction=参数值,strength=参数值)
add:设置是否显示原始图片;direction:设置动态模糊的方向;strength:设置动态模糊的强度

3)对颜色进行透明处理chroma

filter:chroma(color=颜色代码或颜色关键字)

4)阴影效果dropShadow

dropShadow(color=阴影颜色,offX=水平移动,offY=垂直移动,positive=是否透明1/0)

5)对象翻转flipH、flipV

filter:FlipH水平翻转
filter:FlipV垂直翻转

6)发光效果glow

filter:Glow(color=颜色,strength=强度)

7)灰度处理gray

filter:gray转换成为黑白图片

8)反相invert

9)X光片效果xray

10)遮罩效果mask

filter:Mask(Color=颜色)

11)波形滤镜wave

filter:wave(add=参数值,freq=参数值,lightstrength=参数值,phase=参数值,strength=参数值)
add:是否把图像按照波形样式打乱true/false
freq:设置图片上的波浪数目
lightstrength:设置波浪的光照强度0-100
phase:设置波浪的起始位置
strength:设置波浪的强度大小

11.背景属性

  background-image : url(image/bg.gif) 背景图片  
  background-attachment : fixed 固定背景   background-repeat : repeat 重复排列-网页预设   background-repeat : no-repeat 不重复排列   background-repeat : repeat-x 在x轴重复排列   background-repeat : repeat-y 在y轴重复排列   background-position : 90% 90% 背景图片x与y轴的位置

 12.链接属性

  a 所有超连接
  a:link 超连接文字格式
  a:visited 浏览过的连接文字格式
  a:active 按下连接的格式
  a:hover 鼠标移至连接

 

 
 
posted @ 2017-12-19 10:22  付刚的博客  阅读(60)  评论(0编辑  收藏