CSS知识点总结

选择符:HTML选择标记符:<P></P>段落。ID选择符:#mydiv{width:200px;height:100px;border:2px solid red;}CLASS选择符:mydiv{width:200px;height:100px;border:2pxsolid red;}

伪类:(link用在对象处于的链接状态,visited用在已经访问过的链接上,active用于获得焦点【比如被单击】,hover用于鼠标光标置于其上的链接),默认条件时:已链接文本颜色是蓝色的,已访问的链接文本是紫色的。

注释:不会显示在浏览器中,只起一个对对象解释说明的作用/*文本文本*/

单位:有效的相随单位:em(元素的字体的高度)ex(x-height,字母“x”的高度)px(像素,相对于屏幕的分辨率)

绝对长度单位视输出介质而定,所以逊色于相对单位,有效的绝对单位:in(英寸,1英寸=2.54厘米)cm(厘米,1厘米=10毫米)mm(毫米,1=1000毫米)pt(点,1=1/72英寸)pc(帕,1=12)

使用CSS要在<title></title>后加上<styletype=”text/css”>

CSS属性方面的知识:

1:字体:     font:font-style字体形式(可选normal正常,italic斜体,ablique倾斜的字体)||font-variant是否为小型的大写字母(可选normal正常,small-caps小型大写字母)||font-weight(对象文本的粗细,也称字重)||font-size(对象文本字体大小)||line-height(对象文本字体高度)||font-family(对象文本字体名称序列)

字体颜色:color

字体大小:font-size后面可接(xx-small,x-small,small,medium,large,x-large,xx-large,smaller,length代表字体尺寸的值)

字体重量:font-weight:normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900

字体类型:font-famlily:fontname,fontname是指字体类型,如宋体,courier,couriernew

行距:line-height:#

文本间距:word-spacing:normal|长度单位

文本间隔:letter-spacing:normal|长度单位

2:文本设置

字母大小写转换:text-transform:capitalize(使每个词的首字母大写)|uppercase(使每个词的所有字母大写)|lowercase(使每个词的所有字母小写)|none(字母以正常形式显示)

文本修饰:text-decoration:underline(下划线)overline(上划线)line-through(删除线)blink(文字在闪烁)none(缺省使用无)

空格处理方式:white-space:normal(正常)pre(用等宽字体现实预先格式化的文本。不合并字间的空白距离和进行两端对齐)nowrap(强制在同一行内显示所有文本,知道文本结束或者遭遇br对象)

文本垂直对齐:vertical-align:baseline(使元素和上级元素的基线对齐)sub(使对象以下标的形式显示)super(使对象以上标的形式显示)top(使元素和行中最高的元素向上对齐)text-top(使元素和上级元素的字体向上对齐)middle(纵向对齐元素基线加上上级元素的x-高度,字母X的高度的一半的中点)bottom(使元素和行中最高的元素向下对齐)text-bottom(使元素和上级元素的字体向下对齐)

文本水平对齐:text-align:left(左对齐)right(右对齐)center(居中)justify(左右对齐)

文本缩进:text-indent:长度或者百分比

3:设置背景

颜色背景background-color :transparent(背景色透明)color(颜色)

图像背景background-image:none(默认值)url(图像路径)

背景图像滚动background-attachment:scroll(图像因内容滚动而滚动)fixed(背景图像固定在网页中)

背景图像位置background-position:length length(30px20%),background-position:position position(bottom center)

背景图像铺排background-repeat:repeat(默认值,背景图像在纵向和横向上铺平)no-repeat(背景图像不铺平)repeat-x(背景图像仅在横向上平铺)repeat-y(背景图像仅在纵向上平铺)

4:设置尺寸

宽度:width:auto|lengthauto是默认值,根据浏览器窗口调节宽度)

高度:heightauto|length

5:设置外补丁:对象与外面距离或外延距离,网页中的层与层之间明显的间隔,margin

Marginauto|length

Margin后接四个数值或百分率值表示上有下左,即按顺时针方向表示外延的值。

接一个数值或百分率值表示对是四周的外延。

接两个数值或百分率时,前一个表示上下的外延值,后一个表示左右的外延值。

接三个数值或百分率时,前一个表示上端的外延值,第二个表示左右的外延值,最后一个表示下端的外延值。

层漂移floatdirection

6:设置内补丁:对象中的内部填充距离,

Paddinglength

7:设置对象边框

边框颜色border-colorcolor如果提供全部四个参数值,按上有下左的顺序作用于四个边框,如果只提供一个,将用于全部的四条边,如果提供两个,第一个用于上下,第二个用于左右,如果提供三个,第一个用于上,第二个用于左右,第三个用于下

边框样式border-stylenone(无边框,默认)|dotted(表示点线,有一个个点组成的边框)|dashed(边框用虚线表示)|solid(边框用实线表示)|double(双线边框,两条单线加上他们的间隔即使边框宽度,宽度越宽,间隔距离越大)|groove(立体形式的凹槽)|ridge(立体形式的凸槽)|insert(立体形式的凹边)|outset(立体形式的凸边)

边框宽度:border-widthmedium(默认值)|thin(小于默认宽度)|thick(大于默认宽度)|length(直接表示边框宽度的值)

设置四个边框的属性 border-top|left|right|bottom

8:定位:positionstatic(无特殊定位)|absolute(将对象从文档流中流出,使用leftrighttopbottom等属性表示最接近的一个父对象的绝对定位的方向)|relative(对象不可层叠)

 设置对象层叠顺序:z-indexauto|number

设置对象的边框位置:topleftrightbottom):auto|length

9:列表

列表的图像List-style-imagenone|url(url)

列表的文本排列list-style-positionoutside(列表项目放置在文本外,且环绕文本不根据标记对齐)|inside(列表项目标记放置在文本内,且环绕文本根据标记对齐)

列表的预设项目list-style-typedisc(实心圆)|circle(空心圆)|square(实心方块)|decimal(阿拉伯数字)|lower-roman(小写罗马数字)|upper-roman(大写罗马数字)|lower-alpha(小写英文字母)|upper-alpha(大写英文字母)|none(不使用项目符号)

10:用CSS控制表格

设置表格边框独立border-collapseseparate

设置表格边框合并border-collapsecollapse

设置表格布局的算法table-layoutauto|fixed

11CSS设置滚动条

Scrollbar-3dlight-colorcolor(滚动条亮边框颜色)

Scrollbar-highlight-colorcolor(滚动条3D界面的亮边颜色)

Scrollbar-face-colorcolor(滚动条3 D表面)

Scrollbar-arrow-colorcolor(滚动条方向箭头的颜色)

Scrollbar-shadow-colorcolor(滚动条3D界面的暗边框颜色)

Scrollbar-darkshadow-colorcolor(滚动条暗边框颜色)

Scrollbar-track-colorcolor(滚动条的拖动区域颜色)

12CSS在网页中的应用方式:

(1)     内联式样式表:直接写在现有的标记中, <p  style="color:red">...</p>

(2)     嵌入式样式表:使用<style></style>标签嵌入到HTML文件的头部<head>标记内, <style type="text/css">...</style>

(3)     外部链接式:将样式表写在一个独立的css文件中,然后再页面head<head>标记内用<link>标签调用它,<link  href="main.css" rel="stylesheet"  type="text/css">

(4)     导入式样式表:导入式样式表和链接式样式表的功能基本相同,只是语法和动作方式略有不同,同样也将导入式样代码写在<head>标记内,如:

                  <style type="text/css">

                  @import url(basic.css);

猜你喜欢

转载自blog.csdn.net/qq_41698013/article/details/79235967