CSS( Cascading Style Sheets )集合
- php中世界最好的语言原創
- 2018-03-09 09:38:454052瀏覽
這次帶CSS( Cascading Style Sheets )集合來，使用CSS( Cascading Style Sheets )集合的注意事項有哪些，下面就是實戰案例，一起來看一下。
(註：帶*號的屬性是CSS3新增屬性)
一、基本規則
1.css通常儲存在樣式表(style)中,用於定義如何顯示HTML元素；
2.css主要由兩個部分構成：選擇器和一條或多條宣告。
選擇器通常是需要改變的樣式的HTML元素，聲明需要用花括號包圍起來，每個聲明包括一個屬性和一個對應的值，每個聲明都以分號結束；
範例：p {color:red; text-align:center}
3.註解：/*這裡邊的是註解*/
4.css樣式插入方法：
（1）外部樣式，即從外部css檔案讀取格式應該於網頁；當樣式需要套用到多個頁面時，可用這種方法；
範例：
<head><link rel="stylesheet" type="text/css" href="abc.css"></head>
（2）內部樣式，在頭部檔案中用style標籤進行css格式定義，當單一文件需要特殊樣式時可使用此法；
#例：
<head><style>p {margin-left:20px;}#x {color:yellow;}</style></head>（3）內聯樣式,即在單一元素標籤內部寫入style的方法；
優先：（3）>（2）>（1）,但是如果外部樣式的引入寫在內部樣式的後邊，那麼外部樣式將會覆蓋內部樣式；
二、宣告屬性
1.背景(backgroud)
backgroud-color 背景色，值可以是十六进制颜色值、RGB颜色表示法（如rgb(255,255,0)）、颜色名称（如：red））、transparent(透明，默认）
backgroud-image 背景图，默认是平铺样式；如：body {backgroud-image:url('ba.jpg');}
backgroud-repeat 背景图重复方式，值有repeat-x(水平方向平铺)、repeat-y(竖直方向平铺)、no-repeat(不平铺)
backgroud-attachment 背景图固定还随页面其余部分滚动设置，值有fixed（固定)、scroll(滚动，默认)
backgroud-position 背景图起始位置，由x,y两个方向组成，默认都是center，x方向值有left、right、center,y方向值有top、center、bottom;如果只指定了一个值，其他的值会是center;也可用坐标，可以是有单位的(0px0px)或者是百分比的(0%0%)
backgroud 合并简写，把以上的所有属性按以上顺序都写在这一起（可以省略不需要的属性）；如：body {backgroud:red url('p.png') no-repeat right top;}
backgroud-clip* 背景的绘制区域，值：border-box(默认),padding-box(衬距方框内)，content-box(内容方框内)；
backgroud-origin* 背景图片定位区域，padding-box(相对边框)，border-box(相对于外边距)，content-box(相对于内容框体)；
backgroud-size* 背景图片尺寸，值有高宽两个，如省略一个，另一个会按比例自动计算，值可以是长度单位和%2.文字(text)
color 文本颜色，值为CSS颜色值，可有多种表达方式；
direction 文本书写方向，值有rtl(从右到左)、ltr（默认从左到右）；
letter-spacing 字符间距，值为以px像素为单位的值，可以使用负值；
line-height 行间距，值可以使用像素(px),也可使用数字，也可使用百分比（是在当前字体尺寸上进行百分比缩放）；
text-align 对齐方式，值有left、right、center、justify（两端对齐）；
text-decoration 修饰，值有underline(下划线)、overline(上划线)、line-through(删除线)、blink(闪烁)、none(默认无);
text-indent 缩进，值为像素值；
text-shadow* 阴影，值有四个参数：h-shadow(垂直阴影)、v-shadow(水平阴影)、blur(模糊距离)、color(阴影颜色)前两个为必填项，值为像素px，后两个为可选
text-transform 文本大小写转换，值有capitalize(capitalize)、uppercase(全部为大写)、lowercase(全部小写)、none(默认无)
unicode-bidi 文本是否重写，值有normal(默认不使用附加嵌入层)、embed(创建一个附加嵌入层)、bidi-override(创建，重新排序取决于direction属性)、iniitial(设置属性为它的默认属性)
vertical-align 垂直对齐，值有baseline(默认)、sub(下标)、super(上标)、top(元素顶端与最高元素顶端对齐)、bottom(底端与最低元素底端对齐)、text-top(父元素顶端对齐)、middle(父元素居中)、text-bottom(父元素底端对齐)、%(使用line-height值百分比排列)
white-space 空白处理方式,值有normal(默认忽略空白)、pre(保留空白)、nowrap(文本不换行，直到<br>)、pre-wrap(保留空白符，也能正常换行)、pre-line(合并空白序列，保留换行)
word-spacing 字段单词间距，值为像素px;
hanging-punctuation*设置标点字符是否位于线框外，值none(不在框外放置),first(放在行首边缘外),last(行尾边缘),allow-end,force-end;
punctuation-trim* 对标点进行修剪，值：none,start(在开头放置标点）,end(在行尾修剪结束标点),allow-end,adjacent;
text-align-last* 最后一行对齐方式，值：auto(默认左）,left,right,center,justify（两端对齐），start,end,initial,inherit;
text-emphasis* 重点标记文本，包括两个值，风格和颜色；
text-justify* 规定当 text-align 设置为 "justify" 时所使用的对齐方法。值：auto,none,inter-word（增减单词间距）,inter-ideograph(用表意文本来排齐),inter-cluster(对不包含内部单词间隔内容对齐，如汉语）,kashida(对字符进行拉伸来对齐),distribute;
text-outline* 文本轮廓,包含三个值：thickness,blur,color;第一个为必需的，后两个为可选的；
text-overflow* 文本溢出时处理；值：clip(修剪),ellipsis（显示省略号），string(用给定字符来显示）；
text-wrap* 换行规则，值：normal,none(不换行),unrestricted(在任意两个字符间换行),suppress((压缩元素中的换行）；
word-break* 非中日韩文本换行规则，值：normal,break-all(允许在单词内换行),keep-all(只能在半角空格或连字符处换行);
word-wrap* 对长的不可分割单词进行分割并换到一下行；值：normal,break-word(可在单词内进行换行);3.字體(font)
font-family 类型，如果字体名字超过一个单词需要用引号包围起来，可以同时指定多个字体，用于浏览器不支持一种字体，会继续尝试下一种字体
font-size 大小，默认是16px,值可以使用绝对大小px，也可以使用相对大小em，此单位在当前浏览器的16px基础上进行缩放；还有：xx-samll,x-small,small,medium,large,x-large,xx-large,samller,larger;
font-style 样式，值有normal(默认)、italic（斜体）、oblique(倾斜)；
font-variant 字号，值small-caps小型大写字母字体，即虽然是大写字母，但大小会比普通的小；
font-weight 粗细，值有normal(默认,400)，bold(加粗，700)，lighter(更细)，也可以设为100-900的整百数值；
font 字体所有属性集合；4.列表(ul)
list-style-image 列表项标记图像，值为url('anypicture.png')；
list-style-position 列表项目标记位置，值有inside(文本内)，outside(文本外，位于左侧)；
list-style-type 列表标记类型，值有none(无标记),disc(默认实心圆),circle(空心圆),square(实心方块)，decimal(数字),以及罗马英文拉丁等；
list-style 列表所有属性集合；顺序依次为type,position,image;如果是对其子项进行选择，只需使用ul li样式选择5.邊框(border)
border 边框所有属性合集；对所有边框设置统一格式，值为width style color的值；可缺省，无顺序要求；
border-style 边框所有样式合集；一个值表示四边，两个值依次为上下、左右，三个值依次为上、左右、下，四个值为上、右、下、左；
border-width 边框所有宽度合集；赋值顺序同上；
border-color 边框所有颜色合集；赋值顺序同上；
border-bottom 下边框所有属性合集；值为width style color的值；可缺省，无顺序要求；
border-bottom-color 下边框颜色，值为css颜色；
border-bottom-style 下边框样式，值有none(无边框)，hidden(同none，但在用于表格时除外)，dotted(点状),dashed(虚线),solid(实线),double(双线),groove(定义双线，宽度为border-width),ridge(三维菱形),inset(三维凹边框),outset(三维凸边框)；
border-bottom-width 下边框宽度，值有medium(默认),thick,thin,像素值px;
border-left 左边框所有属性合集；
border-left-color 左边框颜色；
border-left-style 左边框样式；
border-left-width 左边框宽度；
border-right 右边框所有属性合集；
border-right-color 右边框颜色；
border-right-style 右边框样式；
border-right-width 右边框宽度；
border-top 上边框所有属性合集；
border-top-color 上边框颜色；
border-top-style 上边框样式；
border-top-width 上边框宽度；
border-image* 以图片为边框样式合集；例：{ -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */ -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */ border-image: url(border.png) 30 round;}
border-image-source* 图片源，值为url(源)；
border-image-slice* 图像的边界向内偏移度，值为px,%,fill（保留图像的中间部分）；
border-image-width* 图像边界宽度，值为：auto,数字(border-width倍数)，%；
border-image-outset* 设置在边框外部绘制图片的量，包括上右下左四个值（例：1 1 1 1 ），两个值为上下、左右，三个值为上、左右、下；值为：数字（border-width倍数）,长度单位值；
border-image-repeat* 图片铺陈样式，值有stretch(默认拉伸)，repeat(平铺)，round(平铺，但如能完整平铺则会进行缩放)，space(如不能完整平铺，扩展空间分布在图片周围),initial,inherit;
border-radius* 指定从左上角开始顺时针四个角的圆角度，四个值，值可缺省；值：长度单位，%；
box-shadow* 把一个或多个下拉阴影添加到框上，例：h-shadow v-shadow blur spread color inset除了颜色外值都是长度单位值，前两个是必填的，其他为可选；6.輪廓(outline)
輪廓是位於邊框外圍的一條線，可起到突出元素的作用；
outline 所有轮廓属性合集；无顺序要求；
outline-color 颜色；值为css颜色；
outline-style 样式；值有none(无边框)，dotted(点状),dashed(虚线),solid(实线),double(双线),groove(定义双线，宽度为outline-width),ridge(三维菱形),inset(三维凹边框),outset(三维凸边框)
outline-width 宽度；值有medium(默认),thick,thin,像素值px;7.外邊距(margin)
margin 四边属性合集，值可以是像素、厘米、百分比（相对父元素）；一个值表示四边，两个值依次为上下、左右，三个值依次为上、左右、下，四个值为上、右、下、左； margin-bottom 下外边距；值可以是像素、厘米、百分比（相对父元素）；
margin-left 左外边距；值可以是像素、厘米、百分比（相对父元素）；
margin-right 右外边距；值可以是像素、厘米、百分比（相对父元素）；
margin-top 上外边距；值可以是像素、厘米、百分比（相对父元素）；8.內邊距(padding)
padding 四边属性合集，值可以是像素、厘米、百分比（相对父元素）；一个值表示四边，两个值依次为上下、左右，三个值依次为上、左右、下，四个值为上、右、下、左；
padding-bottom 下内边距；值可以是像素、厘米、百分比（相对父元素）；
padding-left 左内边距；值可以是像素、厘米、百分比（相对父元素）；
padding-right 右内边距；值可以是像素、厘米、百分比（相对父元素）；
padding-top 上内边距；值可以是像素、厘米、百分比（相对父元素）；9.元素尺寸(demension)
用於控制元素的高度和寬度，也可用來增加行間距；
height 元素高度；值为px、cm等单位定义高度，也可是%（基于包含它的块级对象）；
max-height 元素最大高度；值为px、cm等单位定义高度，也可是%（基于包含它的块级对象）；
min-height 元素最小高度；值为px、cm等单位定义高度，也可是%（基于包含它的块级对象）；
width 元素宽度；值为px、cm等单位定义高度，也可是%（基于包含它的块级对象）；
max-width 元素最大宽度；值为px、cm等单位定义高度，也可是%（基于包含它的块级对象）；
min-width 元素最小宽度；值为px、cm等单位定义高度，也可是%（基于包含它的块级对象）；7 line-height 行高；值为px、cm等单位定义高度，也可是%（基于包含它的块级对象）；10.定位(position)
position 指定元素的定位类型；值有static(默认),absolute(绝对定位，相对static以外的第一个父元素进行定位),fixed(相对浏览器定位),relative(相对正常位置进行定位)
bottom 定位元素下边距边界与其包含块下边界之间的偏移，值为css单位值；
left 定位元素左边距边界与其包含块左边界之间的偏移，值为css单位值；
right 定位元素右边距边界与其包含块右边界之间的偏移，值为css单位值；
top 定位元素上边距边界与其包含块上边界之间的偏移，值为css单位值；
clip 剪辑一个绝对定位的元素；值为rect(top,righ,bottom,left)坐标的正方形，如果先有overflow,visible，那么clip属性则不起作用；
cursor 显示光标移动到元素区域的显示类型；值有url('picture'),default(默认),auto(浏览器默认),crosshair,pointer,move,e-resize,ne-resize,nw-resize,n-resize,se-resize,sw-resize,s-resize,w-resize,text,wait,help;
overflow 元素内容溢出其区域时的处理;值有visible(默认呈现在元素框外),hidden(隐藏溢出部分),scroll(滚动显示)；
overflow-x 元素内容溢出左右区域时的处理;值有visible(默认呈现在元素框外),hidden(隐藏溢出部分),scroll(滚动显示),auto(如果溢出，则提供滚动机制)，no-display(如果内容不适合框体，则删除整个框),no-content(如果内容不适合框体，则隐藏整个内容)；
overflow-y 元素内容溢出上下区域时的处理;值有visible(默认呈现在元素框外),hidden(隐藏溢出部分),scroll(滚动显示),auto(如果溢出，则提供滚动机制)，no-display(如果内容不适合框体，则删除整个框),no-content(如果内容不适合框体，则隐藏整个内容)；
z-index 元素的堆叠顺序；值为数字，可为负，数字越高越显示在前边；11.浮動(float)
使元素会向左或右移动，其周围的元素也会重新排列；清除这种效果需要使用clear属性；
float 值有left(向左浮动),right(向右浮动),none(不可浮动)
clear 指定段落的左侧或右侧不允许浮动的元素；值有left,right,both,none;12.其他屬性
opacity 透明度
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
#在HTML中如何用3499910bf9dac5ae3c52d5ede7383485標籤寫個人收藏夾
以上是CSS( Cascading Style Sheets )集合的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn