zoukankan      html  css  js  c++  java
  • css属性大全(基础篇)

     
    什么是CSS?

    CSS全称为Cascading Style Sheets,中文翻译为“层叠样式表”,简称CSS样式表,所以称之为层叠样式表(Cascading Stylesheet)简称CSS。在网页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。

    CSS作用:
    CSS具有对网页的布局、颜色、背景、宽度、高度、字体进行控制,让网页按您的美工设计布局的更加美观漂亮。

    在初级学CSS样式的觉得好多,记不了那么多,现在我也整合了一份经常用上的CSS属性。方便大家一起学习,与交流

    样式开始最常见的是*号,

    这里的“*”号是通配符,即指,网页html中所有标签意思。在*定义的属性,一般是设置页面一些固定的属性,比喻,字体大小,也字体样式这种。

    从边框说起:

    1.border:边框

    边框样式的参数:

    solid;/*边框为实线实线边框(常用)*/

    none; /*无边框*/

    dotted; /*边框为点线*/

    dashed;/*边框为长短线*/

    double;/*边框为双线*/

    groove ;/*根据border-color的值画3D凹槽*/

    ridge;/*根据border-color的值画菱形边框*/

    inset; /*根据border-color的值画3D凹边*/

    outset ;/*根据border-color的值画3D凸边*/

    1.1、border四个边框
    border-left 设置左边框,一般单独设置左边框样式使用

    border-right 设置右边框,一般单独设置右边框样式使用

    border-top 设置上边框,一般单独设置上边框样式使用

    border-bottom 设置下边框

    在开发中我们一般这样写CSS 边框,优化简写,常见对对象设置使用属性代码:border:1px solid #blue;。

    2.背景属性: (background)

    background /*颜色*/

    background-image: url();/*背景图片*/

    在开发中我们经常看到一些小图标,那样做法就是页面的减少请求,

    css sprites直译过来就是CSS精灵。通常被解释为“CSS图像拼合”或“CSS贴图定位”。其实就是通过将多个图片融合到一张图里面。

    在线合并网站:https://www.toptal.com/developers/css/sprite-generator

     background-repeat: no-repeat;/*不重复平铺背景图片*/

    repeat-x;/*使图片只在水平方向上平铺*/

    repeat-y;/*使图片只在垂直方向上平铺*/

    /*如果不指定背景图片重复属性,浏览器默认的是背景图片向水平、垂直两个方向上平铺。*/

    /*背景图片固定,背景图片固定控制背景图片是否随网页的滚动而滚动。如果不设置背景图片固定属性,浏览

    器默认背景图片随网页的滚动而滚动。为了避免过于花哨的背景图片在滚动时转移浏览者的注意力,一般都设为固定*/

    background-attachment: 参数

    参数取值范围:

     background-attachment: fixed;(固定)

    scroll;(滚动)

    background-position: left;(水平)

    top(垂直);位置 

    fixed:网页滚动时,背景图片相对于浏览器的窗口而言,固定不动

    scroll:网页滚动时,背景图片相对于浏览器的窗口而言,一起滚动

    3、超链接设置 text-decoration: 参数 主要用途是改变浏览器显示文字链接时的下划线。
    参数取值范围: underline:为文字加下划线
    overline:为文字加上划线
    line-through:为文字加删除线
    blink:使文字闪烁
    none:不显示上述任何效果

    CSS连接属性:

    a /*所有超链接*/

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

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

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

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

    鼠标

    cursor:鼠标形状参

    CSS鼠标形状参数表:

    cursor:hand手

    cursor:crosshair十字形

    cursor:text" 文本形

    cursor:wait沙漏形

    cursor:move"十字箭头形:

    cursor:help问号形

    cursor:e-resize右箭头形

    cursor:n-resize上箭头形

    cursor:nw-resize左上箭头形

    cursor:w-resize左箭头形

    cursor:s-resize下箭头形

    cursor:se-resize右下箭头形

    cursor:sw-resize"左下箭头形

     4.Float常跟属性值left、right、none

    Float:none 不使用浮动

    Float:left 靠左浮动

    Float:right 靠右浮动 

    清除浮动 :clear:none|left|right|both

    5.margin延伸(单独设置四边间距属性单词)简写写法:margin:上 右 下 左 (四个值)
     
    margin-left 对象左边外延边距 margin-left:80px; 左边外延距离80
     
     
    margin-right 对象右边外延边距 margin-right:80px; 右边外延距离80
     
     
    margin-top 对象上边外延边距 margin-top:80px; 上边外延距离80px
     
     
  • 相关阅读:
    AngularJS SQL
    CSS border-collapse 属性
    AngularJS 表格
    <option> 标签的 value 属性
    AngularJS Select(选择框)
    [Leetcode] N-Queens II
    [Leetcode] N-Queens
    [Leetcode] Climbing Stairs
    [Leetcode] Linked List Cycle II
    [Leetcode] Linked List Cycle
  • 原文地址:https://www.cnblogs.com/LCH-M/p/8214658.html
Copyright © 2011-2022 走看看