• 第二章 CSS基本属性


    1、CSS:层叠样式表

    一个元素允许同时应用多种样式,页面元素最终的样式即为多种样式的叠加效果。

    2、CSS样式优先级
    行内样式表>内部样式表>外部样式表【就近原则】
    id选择器>类选择器>标签选择器

    3、文本属性:(缩写形式) font:风格 粗细 大小/行高  字体1,字体2,字体3;
    font-weight(粗细100-900) font-size(大小) font-family(字体)font-style(风格)

    行距、对齐等:
    line-height (行高) text-align (对齐)  text-decoration(文本修饰)
    letter-spacing (字符间距)white-space (空白处理)

    【注意事项】

    • @charset "utf-8";    作用是为了避免样式中存在中文,打开时出现乱码的情况
    •  字体大小单位:px 固定值  相对值em(响应式布局)  转换关系16px=1em

    4、背景相关属性: background (缩写形式):color image repeat attachment position ;
    background-color(背景色)
    background-image(背景图 )
    background-repeat(背景图重复方式)
    background-position(位置坐标、偏移量)【右下为正】
    background-size(背景图大小)【cover覆盖、contain原图按比例拉伸、百分比】 

    background-attachment (背景图像是否固定)【scroll默认随页面滚动、fixed固定、inherit继承】

    5、列表相关属性:列表(li)常用属性 list-style (列表风格)
    属性值 方式 语法实现 示例
    none 无风格 list-style:none; 刷牙 洗脸
    disc 实心圆 <ul>list-style:disc; ● 刷牙 ● 洗脸
    circle 空心圆 list-style:circle; ○ 刷牙 ○ 洗脸
    square 实心正方形 list-style:square; ■ 刷牙 ■ 洗脸
    decimal 数字 <ol>list-style:decimal 1. 刷牙 2. 洗脸

    6.处理溢出(overflow):
    ?overflow 的取值可以是 visible | hidden | scroll | auto , 其中 visible 是默认值。
    ?值 visible 表示不裁减内容,也不添加滚动条,强制显示元素内容;
    ?hidden 表示裁减内容,而且不显示超出对象尺寸的内容;
    ?scroll 表示裁减内容,同时提供滚动条;
    ?auto 表示只有在必要时才裁减内容并添加滚动条。
    注:如果我们要使用 overflow 属性,那么该元素的 position 属性必须指定
    为绝对定位(absolute)
    例:position: absolute;overflow: scroll;

    7.指定裁剪区域(clip):
    ?clip属性可以确定定位对象的裁减区域
    ?取值为 rect (top right bottom left) | auto
    ?其中 top、 right、 bottom 和 left用于指定上、 右、 下、 左 4 个方向上的裁减长度
    ?取值为长度值或 auto。 如果任意一边使用 auto,则相当于该边没有进行裁减。
    注:如果我们要使用 clip 属性,那么该元素的 position 属性必须指定
    为绝对定位(absolute)
    例:clip: rect(50px 200px auto auto);

    8、元素可见性(display 属性和 visibility 属性):
    ?display 属性确定一个元素是否应显示在页面上以及如何显示。
    ?它的取值包括: none、 block、 inline等。
    ?none:元素在页面隐藏起来,不仅元素看不见,而且元素也将退出当前的页面布局层,不占用任何空间。
    ?block(块级): 可以强制将 HTML中的内嵌元素变为块级元素,从而引起后续对象换行
    ?inline(内嵌级):CSS强制将 HTML 中的块级元素变为内嵌元素。
    ?visibility 属性控制定位的元素是否可见。
    ?取值包括: visible(可见)、hidden(隐藏)和inherit(继承),默认值为 inherit(即继承父级元素的显示属性)。
    ?visibility 属性与 display 属性的不同之处在于:
    ?visibility当隐藏元素时,visibility 属性定义的元素仍然为保留原有的显示空间。
    ?display 当隐藏元素时,display 属性定义的元素在页面隐藏起来,不仅元素看不见,而且元素也将退出当前的页面布局层,不占用任何空间。

  • 相关阅读:
    如何正确拆分数据集?常见的三种方法总结
    模型的度量指标和损失函数有什么区别?为什么在项目中两者都很重要?
    联合概率和条件概率的区别和联系
    Go 语言标准库之 log 包
    Go 语言基础之单元测试
    Thrift IDL
    Spring Cloud入门看这一篇就够了
    SpringCloud Alibaba Nacos服务组件
    上传文件至腾讯云服务器,上传失败?
    cobaltstrike4.0环境配置安装使用
  • 原文地址:https://www.cnblogs.com/suola/p/8275800.html
Copyright © 2020-2023  润新知