首页 >web前端 >css教程 > 正文

CSS( Cascading Style Sheets )集合

原创2020-10-27 15:27:4601937
这次给大家带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中文网其它相关文章!

相关阅读:

详解Vue列表渲染

在HTML中如何用<a>标签编写个人收藏夹

以上就是CSS( Cascading Style Sheets )集合的详细内容,更多请关注php学习网其它相关文章!

phpStudy Linux 面板(小皮面板)
  • 相关标签:Cascading Sheets Style
  • 本文原创发布php学习网,转载请注明出处,感谢您的尊重!
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    作者信息

    php学习网

    认证0级讲师

    推荐视频教程
  • javascript初级视频教程javascript初级视频教程
  • jquery 基础视频教程jquery 基础视频教程
  • 视频教程分类