首页 > 代码库 > 【3-24】css样式表分类、选择器、样式属性、格式布局

【3-24】css样式表分类、选择器、样式属性、格式布局

一、css样式表分类:

(一)内联样式表:代码写在标签内的样式表  控制精确 代码重用性差  优先级最高

格式:<p style="样式属性">内容</p>

 <div style="text-decoration:line-through;">第四格第三元</div>

 

(二)内嵌样式表:将代码写在标签<style type="text/css"></style>之间,此标签一般写在head之中

内嵌样式表 代码重用性好 没有内联精确 优先级第二

格式:<style type="text/css">

.组名{样式属性}

</style>

技术分享

(三)外部样式表:把css写在单独的文件中,后缀名以.css命名

在<head>内用<link>标签连接

格式:<link href="http://www.mamicode.com/相对路径" rel="stylesheet">

.div1 {
    width:100px;
    height:150px;
    background-color:red;
}
    <link href="http://www.mamicode.com/3-23练习.css" rel="stylesheet" />

二、选择器

1、class选择器

格式: 

.class名

属性名: 属性值; 

….}

2、ID选择器

格式:

 

#id名

属性名: 属性值;

 ….}

3、标签选择器

格式:

某个html标签{ 

属性名:属性值; 

…}

4、复合选择器

(1)并列复合:多选择器名 并用“,”隔开,适用于不同标签并列

例:

.div3,.a1{
    width:400px;
    height:200px;
    border:1px dashed black;
}

(2)后代复合:使用空格隔开,适用于同一标签不同级别 

例:

.div1 .b1 {
    width:800px;
    height:initial;
    font-size:5px;
    font-style:italic;
    font-family:华文行楷;
    font-weight:bold;
    border: 1px solid black;
}

三、样式属性

(一)格局大小:

width:宽;

height:高;

(二)背景属性: (background)

色彩 :background-color:   ;

图片 :background-image: url(相对路径 );

平铺方式 :background-repeat: no-repeat;

滚动 :background-attachment: fixed;(固定) scroll;(滚动)

图片大小:background-size:像素;

位置 :background-position: left;(水平) top(垂直);

(三)字体属性:(font)

大小 :font-size: 像素px;

颜色:color:    ;

字体:font-family:    ;

样式 :font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)

粗细 :font-weight: bold;(粗体) lighter;(细体) normal;(正常)

修饰 :text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)

变体 :font-variant: small-caps;(小型大写字母) normal;(正常)

大小写 :text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)

常用字体: (font-family)

(四)对齐对齐

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

垂直对齐 :vertical-align: baseline;(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;

(需配合display:table-cell;使用)

缩进 :text-indent: 数值px;

行高 :line-height: normal;(正常) 

词间距word-spacing: normal; 数值

空格white-space: pre;(保留) nowrap;(不换行)

显示 :display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题) 

(五)边界边框

 外边界:margin:;顺序:上右下左

内边界:padding:;

边框格式:border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;

边框宽度:border-width:; 

边框颜色:border-color:#;

和写边框:border:  border-width  border-style  border-color;

(六)列表方块

序号图像:list-style-image: url(..);

有无列表序号:list-style:none;

类型:list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;

位置:list-style-position: outside;(外) inside;

(七)其他常用属性

(1)display:none;--隐藏,不保留位置

visibility:hidden;--隐藏,保留位置

overfllow:scoll;--滚动条

透明:optacity:(0-1);

-moz-opacity:(0-1);

filter:alpha(opacity=0-100);

圆角:border-radius:像素;

阴影:box-shadow:像素(左偏移)像素(右偏移)像素(扩散度)

补充留用:

a:link /*超链接文字格式*/

a:visited /*浏览过的链接文字格式*/

a:active /*按下链接的格式*/

a:hover /*鼠标转到链接*/

鼠标光标样式:

链接手指 CURSOR: hand

十字体 cursor:crosshair

箭头朝下 cursor:s-resize

十字箭头 cursor:move

箭头朝右 cursor:move

加一问号 cursor:help

箭头朝左 cursor:w-resize

箭头朝上 cursor:n-resize

箭头朝右上 cursor:ne-resize

箭头朝左上 cursor:nw-resize

文字I型 cursor:text

箭头斜右下 cursor:se-resize

箭头斜左下 cursor:sw-resize

漏斗 cursor:wait

光标图案(IE6) p {cursor:url("光标文件名.cur"),text;}

【3-24】css样式表分类、选择器、样式属性、格式布局