1.引入层叠样式表：

　　A.行内引入

<bodystyle="background-color:#cccccc">;

      在标签内使用style属性

</body>

　B.内联样式表

<html>

    <head>

        <title>内联样式表</title>

        <style type="text/css">

            body{

                background-color:#ccc;

            }

        </style>

    </head>

    <body>

    </body>

</html>

　　C.外部样式表

<html>

    <head>

        <title>外部样式表</title>

        <link rel="stylesheet" href="index.css" type="text/css">

    </head>

    <body>

    </body>

</html>

2.三种样式表的优先级对比（就近原则）

　　行内引入 > 内联样式表 > 外部样式表

3.代码注释：

　　/* 代码段 */

CSS:

　　/* background-color:#ccc; */

4.各浏览器前缀

     前缀            浏览器
-webkit-   chrome和safari
-moz-       firefox
-ms-       IE
-o- 　　opera

　　

　　
　　

　

5.CSS选择符：

　　A. 通配选择符

CSS：

    *{

        代码块；

    }

　　B. 元素选择符，路body、h1、p

CSS:

    body{

        代码块；

    }

    h1{

        代码块；

    }

　　C. 群组选择符

CSS:

    h1,h2,p{

        代码块；

    }

　　D. 关系选择符

HTML: (包含选择符 E F)

    <div>

        <a>我是div的子元素a标签</a>

    </div>

　　<p>

　　　　<a>我是p的子元素a标签</a>

　　</p>

CSS:

    div p{

        代码块；

    }

　

HTML:(子选择符 E>F)

  　 <div>

          <a>我是div的子元素a标签</a>

     </div>

　　<p>

　　　　<a>我是p的子元素a标签</a>

　　</p>

CSS:

　　div>p{

　　　　代码块；

　　}

CSS基础知识，学前准备的更多相关文章

  1. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  2. CSS基础知识之float

    前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉).现对float进行更深入的学习,在此把学习心得分享给大家. 浮动 ...

  3. (转)第一天　XHTML CSS基础知识 文章出处：标准之路(http://www.aa25.cn/div_css/902.shtml)

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也 ...

  4. CSS基础知识之position

    最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中position的用法,在此把学习笔记分享给大家. CSS定位机制 标准文档流(Nor ...

  5. 【CSS】 CSS基础知识 属性和选择

    css基础知识 html的基本标签都是千篇一律的,为了能够个性化外观,就需要进行样式的调整,而css就是专门用来维护,管理样式的一种格式.在html中定义css有三种方法 1. 为标签添加style属 ...

  6. CSS基础知识01

    一.CSS基础知识介绍 1.css是cascading style sheet层叠式样式表的简写 2.css小用法 加粗:font-weight:bold;             正常用:norma ...

  7. 〖前端开发〗HTML/CSS基础知识学习笔记

    经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...

  8. Web学习篇之---css基础知识（一）

    css基础知识(一) 1.css样式: 载入css样式有下面四种: 1).外部样式 2).内部样式 3).行内样式 4).导入样式 <link href="layout.css&quo ...

  9. DIV+CSS专题：第一天　XHTML CSS基础知识

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准.   学习本系列教程需有一定html和css基础 ...

  10. HTML+CSS基础知识（2）选择器的使用、盒子模型的讲解、列表的使用

    文章目录 1.CSS基础知识 2.css样式 2.1.代码: 2.2 测试结果 3.CSS的语法 3.1 代码 4.块元素和行内元素 4.1 代码 4.2 测试结果 5.常用的选择器 5.1 代码块 ...

随机推荐

  1. 内置函数——format

    说明: 1. 函数功能将一个数值进行格式化显示. 2. 如果参数format_spec未提供,则和调用str(value)效果相同,转换成字符串格式化. >>> format(3.1 ...

  2. Linux系统——FTP

    FTP连接及传输模式1. 控制连接:TCP21,用于发送FTP命令信息2. 数据连接:TCP20,用于上传.下载数据3. 数据连接的建立类型:(1)主动模式:服务器制动发起数据连接首先由客户端向服务端 ...

  3. mac3.0环境搭建

    export ANDROID_SDK_ROOT=/Users/sjxxpc/Documents/ADT/sdk export ANDROID_NDK_ROOT=/Users/sjxxpc/Docume ...

  4. 对Java平台的理解

    1)  Java是一种面向对象的语言(封装,继承,多态),最显著的特性有两个方面: ----书写一次,到处运行(Write once,run anywhere) 能够非常容易的获得跨平台的能力 --- ...

  5. 2017-2018-1 JaWorld 团队作业--冲刺3

    2017-2018-1 JaWorld 团队作业--冲刺3 (20162306) 总体架构 我们本次团队项目设定为基于Android系统Java架构下的打飞机小游戏 游戏中所有模型的原型设定是精灵,因 ...

  6. 2017-2018-1 JaWorld 团队作业--冲刺4

    2017-2018-1 JaWorld 团队作业--冲刺4 (20162305) 总体架构 我们本次团队项目设定为基于Android系统Java架构下的打飞机小游戏 游戏中所有模型的原型设定是精灵,因 ...

  7. 网络安全、Web安全、渗透测试之笔经面经总结（一）

    本篇文章总结涉及以下几个方面: 对称加密非对称加密? 什么是同源策略? cookie存在哪里?可以打开吗 xss如何盗取cookie? tcp.udp的区别及tcp三次握手,syn攻击? 证书要考哪些 ...

  8. ZOJ 3541 The Last Puzzle（经典区间dp）

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3541 题意:有一排开关,有个开关有两个值t和d,t是按下开关后在t秒后会自 ...

  9. [转]如何使用VS 2013發布一個可以在Windows XP中獨立運行的可執行文件

    https://read01.com/Mg337.html (台/湾的论坛,需要f/q) 1. 閱讀此文章的同學先看看我的另外一篇文章: 現在,我們深入探討一下: <如何使用VS 2013發布一 ...

  10. MongoDB中的数据聚合工具Aggregate和Group

    周煦辰 2016-01-16 来说说MongoDB中的数据聚合工具. Aggregate是MongoDB提供的众多工具中的比较重要的一个,类似于SQL语句中的GROUP BY.聚合工具可以让开发人员直 ...