CSS基础知识

2024-04-27 15:03:21

字体：大中小

来源：转载

供稿：网友

1.添加CSS的方法

1）链接外部样式表

2）内部样式表

3）导入外部样式表

<head><style>@import slstyle.css</style></head>

4）内嵌样式

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;

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-100finishopacity结束时的透明度，0-100style渐变样式，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/falsefreq：设置图片上的波浪数目lightstrength：设置波浪的光照强度0-100phase：设置波浪的起始位置strength：设置波浪的强度大小

上一篇：html居中通用办法

下一篇：Web开发者易犯的五大严重错误