• 常见的CSS属性和值CascadingStyleSheets


    字体
    文本
    背景
    位置
    边框
    列表
    其他

    CSS中修饰字体的属性

    属    性

    描    述

    属  性  值

    font-family

    字体族科

    任意字体族科名称都可以使用例如Times、serif等,而且多个族科的赋值是可以使用的,中间用逗号分隔,以防止选择不存在的字体族科

    font-size

    字体大小

    可以使用绝对大小、相对大小、长度或百分比

    font-style

    字体风格

    normal(普通),italic(斜体)或oblique(倾斜)

    font-weight

    字体加粗

    normal、bold、bolder或lighter等

    font-variant

    字体变形

    normal(普通)或small-caps(小型大写字母)

    font: [ <字体风格> || <字体变形> || <字体加粗> ]? <字体大小> [ / <行高> ]? <字体族科>

    文字颜色:color:red

    CSS中常见的控制文本的属性 

    属    性

    描    述

    属  性  值

    letter-spacing

    字母间隔

    该值必须符合长度格式,允许使用负值

    word-spacing

    文字间隔

    该值必须符合长度格式,允许使用负值

    text-decoration

    文字修饰

    underline(下划线),overline(上划线),line-through(删除线),blink(闪烁),或默认地使用none(无)

    text-align

    横向排列

    left、right、center或justify

    text-indent

    文本缩进

    该值必须是一个长度或一个百分比,若百分比则视上级元素的宽度而定

    line-height

    行高

    可以接受一个控制文本基线之间的间隔的值。当值为数字时,行高由元素字体大小的量与该数字相乘所得。百分比的值相对于元素字体的大小而定。不允许使用负值

     text-tranform:lowercase,uppercase

    CSS中常见的控制背景的属性 

    属    性

    描    述

    属  性  值

    background-color

    背景颜色

    值和color属性值设定方式相同,或使用transparent(透明)值

    background-image

    背景图象

    图片URL或none(无)

    background-repeat

    背景重复

    repeat、repeat-x、repeat-y、no-repeat

    background-attachment

    背景附件

    scroll(滚动)或fixed(固定),拖动滚条背景是否滚动设置

    background-position

    背景位置

    横向的关键字(left, center, right),纵向的关键字(top, center, bottom)百分比和长度也可用做安排背景图象的位置

    background:  <背景颜色> || <背景图象> || <背景重复> || <背景附件> || <背景位置>

     应用多个图标放到同一个图片里

    多个图标放到同一个图片里,通过定义某区块的背景定位,调用同一个图片中不同位置上的小图标,
    好处是可以减少对服务器的请求次数,从而加快页面的访问速度

    <style>
    div
    {
    backgroud-image:url(bg.png) no-repeate 190px 180px;
    }
    </style>

    边框属性 
    任何一个元素都可以设置边框
    边框属性是用于设置一个元素边框风格、边框宽度、边框颜色的略写,可以一起设置4边的边框,也可对上边框、右边框、下边框和左边框单独设置。 

     边框风格属性

    可以通过边框风格属性border-style设定上下左右边框的风格,该属性用于设置一个元素边框的样式,而且必须用于指定可见的边框。可以使用1到4个关键字,如果四个值都给出了,它们分别应用于上、右、下和左边框的式样。
    如果给出一个值,它将被运用到各边上。
    如果两个或三个值给出了,省略了的值与对边相等
    也可以分别使用border-top-style、border-bottom-style、border-left-style和border-right-style属性单独设置各边的风格 

     各边的风格使用的属性值 

    none:没有边框,无论边框宽度设为多大
    dotted:点线式边框
    dashed:破折线式边框
    solid:直线式边框
    double:双线式边框
    groove:槽线式边框
    ridge:脊线式边框
    inset:内嵌效果的边框
    outset:突起效果的边框

     边框宽度属性 

    可以通过边框宽度属性border-width设定上下左右边框的宽度,该属性用1到4个值来设置元素的边界,值是一个关键字或长度,不允许使用负值长度。
    如果四个值都给出了,它们分别应用于上、右、下和左边框的式样。
    如果只给出一个值,它将被运用到各边上。
    如果两个或三个值给出了,省略了的值与对边相等。这个属性是上边框宽度、右边框宽度、下边框宽度和左边框宽度属性的略写。
    也可以分别使用border-top-width、border-bottom-width、border-left-width和border-right-width属性单独设置各边的宽度。除了可以使用长度单位定值外,还可以用medium(是默认值)、thin(比medium细)或thick(比medium粗)值。

     边框颜色属性 

    可以通过边框颜色属性border-color设定上下左右边框的颜色,可以使用1到4个关键字。如果四个值都给出了,它们分别应用于上、右、下和左边框的式样。如果给出一个值,它将被运用到各边上。如果两个或三个值给出了,省略了的值与对边相等

     略写的边框属性

    CSS属性border是边框属性的一个快捷的综合写法,是一个用于设置一个元素边框的宽度、式样和颜色的略写,它包含border-width,border-style和border-color属性。
    边框属性border只能设置四种边框,也只能给出一组边框的宽度和式样。为了给出一个元素的四种边框的不同的值,网页制作者必须用一个或更多的属性,如:上边框、右边框、下边框、左边框、边框颜色、边框宽度、边框式样、上边框宽度、右边框宽度、下边框宽度或左边框宽度。

    鼠标光标属性 

    在网页中默认的鼠标指针只有两种,一种是最普通的箭头,另一种是当移动到链接上时出现的“小手”。但现在越来越多的网页都使用了CSS鼠标指针技术,当将鼠标移动到链接上时,可以看到多种不同的效果。CSS可以通过Cursor属性实现鼠标形状的改变,其属性可以是默认的鼠标形状default、小手形状hand、交叉十字crosshair、文本选择符号text、Windows的沙漏形状wait、带有问号的鼠标help以及各个方向的箭头属性值。 

    CSS中常见的控制列表的属性 

    属    性

    描    述

    list-style-type

    设定引导列表项的符号类型,可以设置多种符号类型,值为disc、circle、square等

    list-style-image

    使用图像作为定制列表符号

    list-style-position

    决定列表项目缩进的程度

    decimal,lower-roman,upper-roman,lower-alpha,upper-alpha
    <ol style="list-style-type:decimal">
    <li>aa</li>
    </ol>

    为了兼容各浏览器,一般设置style="list-style-type:none",然后再设置list-style-image:url();

  • 相关阅读:
    团队作业9——测试与发布(Beta版本)
    团队作业8 ----第二次项目冲刺(Beta阶段)博客汇总
    【Beta】 第七次Daily Scrum Meeting
    【Beta】 第六次Daily Scrum Meeting
    【Beta】 第五次Daily Scrum Meeting
    【Beta】 第四次Daily Scrum Meeting
    【Beta】 第三次Daily Scrum Meeting
    Flask-论坛开发-5-memcached缓存系统
    Flask-论坛开发-4-知识点补充
    Flask-论坛开发-3-数据库
  • 原文地址:https://www.cnblogs.com/exmyth/p/3227705.html
Copyright © 2020-2023  润新知