zoukankan      html  css  js  c++  java
  • WEB前端第八课——CSS基础

    1.CSS用于HTML文档中元素样式的定义,实现了将内容与表现分离,提高了代码的可重用性和可维护性,文件后缀是“.css”

    2.HTML=结构层,CSS=表示层,JavaScript=行为层

    3.CSS样式表的引入方式:

      ① 内联方式(行内样式),直接把CSS代码用style属性添加到开始标签中,

        语法:<p style="color:red;">红色字体</p>

      ② 内部样式表,直接把CSS代码添加到头部<head>的style标签中,语法:

    <head>
          <style type="text/css">
                 p{color:red;}
          </style>
     </head>
    

      ③ 外部样式表,将CSS代码单独存放于外部文件,HTML页面调用

        语法:<link rel="stylesheet" herf=""/>,stylesheet的意思是样式调用

      ④ 导入式,类似于第③种方式

    <head>
        <style>
            @import url(CSSfile.css);
        </style>
    </head>
    

      优先级:行内样式>内部样式>外部样式>导入样式

    4.CSS加载方式Link和@import的区别,为什么不推荐使用@import

      ① @import只能用于加载CSS,link标签除了可以加载CSS外,还可以做很多其他事情,比如定义rel连接属性等

      ② 加载顺序差别,当一个页面被加载的时候,link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部下载完再被加载,所以有时候浏览@import加载CSS的页面时开始会没有样式(不断闪烁),网速慢的时候会比较明显

      ③ 兼容性差别,@import在IE5以上才能识别,而link标签无此问题

      ④ 使用dom控制样式时的差别,当使用JavaScript控制dom去改变样式的时候,只能用link标签,因为dom操作元素的样式时,用@import方式的样式也许还未加载完成

      ⑤ 使用@import方式会增加HTTP请求,会影响加载速度

    5.CSS规则和注释

      语法:color:red;

        ① css是以属性和属性值成对形式出现

        ② 属性和属性值之间使用冒号(:)连接

        ③ 多对属性之间用分号(;)隔开

      注释:

        ① 注释标识 “/* css注释语句 */”,HTML注释标识 “<!-- HTML注释语句 -->”

        ② 注释快捷键,HTML和CSS都是 “ Ctrl+/ ”(单行注释/取消注释)、“ Ctrl+shift+/ ”(多行注释/取消注释)

    6.Chrome调试小技巧

      ① 调试工具打开快捷方式“ F12 或 Ctrl+shift+i ”

      ② 调试界面左边为HTML元素结构,右边为css样式

      ③ 在右边css样式中可以直接修改数值和颜色查看更改后的效果

    7.CSS基础选择器

      选择器种类:

      ① 通用选择器/全局选择器,用“ * ”表示,可与任何元素匹配,常用语设置一些默认样式,适用范围最广但优先级别最低

      ② 元素选择器,用HTML文档中的标签元素表示,如 p、b、div、a、img、body等

      ③ 类选择器,书写格式 “ . className{ } ”,一个页面中class名称可以重复,要配合标签的class属性使用

      ④ ID选择器,书写格式 “ #idName{ } ”,一个页面中id相同的id名只能出现一次,要配合标签的id属性使用

      ⑤ 合并选择器,书写格式 “ 选择器1,选择器2,…{ } ”,可以提取共同样式,减少重复代码

      优先级,ID选择器>类选择器>元素选择器>通用选择器

      通常需要重复使用的样式不适用ID选择器,因为ID属性是唯一的

      选择器命名规范:

      ① 建议使用字符a-z、A-Z、0-9、连接符(-)、下划线(_),不建议使用中文

      ② 类名不能以数字开头

      组合选择器:

      ① 后代选择器,以空格分隔,如 div  p{ }

      ② 子元素选择器,以大于号分隔,如 div>p{ }

      ③ 相邻兄弟选择器,以加号分隔,如 div+p{ }

      ④ 普通兄弟选择器,以波浪号分隔,如 div~p{ }

    8.CSS样式表特性

      继承性,指被包含在内部的标签可以拥有外部标签的样式,比如text-*、font-*、line-* 等,但有些属性不能继承,如border、padding、margin等

      层叠性,可以定义多个样式

      优先级,样式定义冲突时,按照不同样式规则的优先级来应用样式

    9.link,用于在文档与将要使用的外部资源之间建立联系,最常见的用途是链接样式表,只能存在于<head>部分

      语法样式:<link rel="stylesheet"  type="text/css"  href="items.css">

      常用属性:

        type,规定被链接文档的MIME类型,只有设置了href属性时才能使用该属性,link标签常用的MIME类型是“text/css”,它规定样式表

        href,定义被链接文档的位置地址url

        rel,定义当前文档与被链接资源之间的关系(必需属性)

    10.rel属性值

      alternate, 链接到该文档的替代版本(比如打印页、翻译或镜像)

      author, 链接到该文档的作者

      help, 链接到帮助文档

      icon, 导入表示该文档的图标

      license, 链接到该文档的版权信息

      next, 表示该文档是集合中的一部分,且集合中的下一个文档是被引用的文档

      prefetch, 规定应该对目标资源进行缓存

      prev, 表示该文档是集合中的一部分,且集合中的上一个文档是被引用的文档

      search, 链接到针对文档的搜索工具

      stylesheet, 要导入的样式表的URL

  • 相关阅读:
    出栈序列的可能性判定
    阿里离线数据处理平台2013暑期学校
    终于算完了这道『1+1』
    数据结构学习笔记之一 链表
    经典解释监视器和对象锁
    Sybase中字符串替换函数 STR REPLACE
    使用Arrays sort 方法進行排序
    clustered和nonclustered索引的区别
    Java序列化的作用和反序列化
    Java多线程下载并具断点续传功能JAR
  • 原文地址:https://www.cnblogs.com/husa/p/13345735.html
Copyright © 2011-2022 走看看