Home > Article > Web Front-end > CSS( Cascading Style Sheets )集合

CSS( Cascading Style Sheets )集合

php中世界最好的语言Original: 2018-03-09 09:38:453922browse

This time I will bring you the CSS (Cascading Style Sheets) collection. What are the precautions for using the CSS (Cascading Style Sheets) collection? The following is a practical case, let's take a look.

(Note: The attributes marked with * are new attributes of CSS3)
1. Basic rules
1.css is usually stored in the style sheet (style), which is used to define how Display HTML elements;
2.css mainly consists of two parts: the selector and one or more statements.
The selector is usually the HTML element whose style needs to be changed. The statement needs to be surrounded by curly braces. Each statement includes an attribute and a corresponding value. Each statement ends with a semicolon;
Example: p {color:red; text-align:center}
3. Comments: /*Here are comments*/
4.css style insertion method:
(1) External style, that is, from external css The file reading format should be in the web page; when the style needs to be applied to multiple pages, this method can be used;
Example:

(2) Internal style, use the style tag in the header file css format definition, this method can be used when a single document requires a special style;

Example:

(3) Inline style, that is, the method of writing style inside a single element tag;
Priority: (3)>(2)>(1), but if the introduction of external style is written after the internal style, then the external style will override the internal style;

2. Declare attributes
1.Background(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(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(文本不换行，直到
)、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)

    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.List(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)

    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)

The outline is a line located outside the border, which can highlight the element. Function;

     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. Element size(demension)

Used to control the height and width of elements, and can also be used to increase line spacing;

     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. Positioning(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(float)

使元素会向左或右移动，其周围的元素也会重新排列；清除这种效果需要使用clear属性；
     float        值有left(向左浮动),right(向右浮动),none(不可浮动)
     clear        指定段落的左侧或右侧不允许浮动的元素；值有left,right,both,none;

12. Other attributes

     opacity        透明度

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

CSS( Cascading Style Sheets )集合

Related articles