• CSS基础之简单介绍


    网页诞生初期,没有描述样式的语言,创建了很多用于描述样式的标签。但这些标签破坏了html作为一门结构语言的表现。

    于是,W3C在1995年开始起草CSS,提出将结构和样式分离的解决方案。

    元素

    元素是文档结构的基础,在CSS中,每个元素都会生成一个框(或者说盒)

    表现形式

    替换元素:替换元素的内容并非有浏览器直接生成,典型的莫
    过于img元素了;
    非替换元素:大部分html元素都是非替换元素,如div元素、p元素等
    
    块级元素:填充父元素的内容区
    行内元素:在文本行内生成元素框
    

    声明CSS

    [1] 外部样式表

    永久样式表(persistent style sheet)
    如果指定rel属性为stylesheet,没有指定title属性,那么它
    将成为一个永久样式表
    <link rel="stylesheet" href="/style.css">
    
    候选样式表(alternate style sheet)
    如果为link标签指定一个title属性,那么它将成为一个
    候选样式表
    <link href="/style1.css" title="mystyle1">
    
    首选样式表(preferred style sheet)
    在link标签已经指定rel为stylesheet的情况下,再指定
    title属性,那么它将成为一个首选样式表
    <link href="stylesheet" href="/style1.css" title="mystyle1">
    
    ```
    其他属性:
    media:
    all //所有媒体
    screen //屏幕媒体
    handheld //手持设备
    aural //语音合成器
    tv //电视
    tty //固定间距环境
    print //打印设备
    embossed //Braille打印设备
    braille //Braille设备
    projection //投影设备
    ```
    

    [2] 文档样式表

    在文档中使用style标签包含样式表,成为文档样式表
    (document style sheet)或内嵌样式表(embedded style sheet)
    <style>
        div {
            color: #f60;
        }
    </style>
    
    在style标签内可以使用@import加载外部样式表
    @import url(style2.css) screen;
    
    @import与link标签相比较:
    声明必须放在所有样式前面
    无法指定候选样式表,所有声明的样式都会被加载
    

    [3] 内联样式

    使用style属性为单个元素设置属性,inline在这里翻译为内联
    ,而不是行内,意为内部自带
    <p style="color:#f60">天若有情</p>
    
    注意:不推荐使用,一个内联样式只能放一个声明快,不能放整个样式表
    ,因此不能使用诸如@import之类的规则,style属性的值只能是出现
    在大括号之间的部分。
  • 相关阅读:
    数学之美
    作为一个程序员,你知道每天自己在做什么吗
    搭建ssm框架log4j日志
    webpack实践——DLLPlugin 和 DLLReferencePlugin的使用
    一些实用的技巧
    详解Vue 开发模式下跨域问题
    vue resource 携带cookie请求 vue cookie 跨域
    解决vue中element组件样式修改无效
    ES6 Promise 异步操作
    js 字符串操作函数
  • 原文地址:https://www.cnblogs.com/juetan/p/13137634.html
Copyright © 2020-2023  润新知