CSS的语法结构为   选择符 {属性：值；}    Selector {Property : Value；}

选择符：通配 *{....}  ， 元素  body{....} 、h1{....}、p{....}  ， 群组 h1,h2,h3,p {....} 同时可一个给多个标签赋予相同的属性

           关系选择符：包含  h1 a{....}　

【一些基本属性：文字装饰text-decoration:    字体 font-family    字体颜色 color    字体大小font-size:px;   外边距margin    内边距padding】

CSS的引入方式用就近原则

行内引用 （直接在标签里写入style属性）

     例如：<body style="background-color:#8484FF;">

                <h1 style=" font-size:20px; font-family:仿宋;">在H1标签里写入style属性</h1>

                <p style="font-size: 10px;">在P标签里写入style属性</p>

          </body>

页内引用  （当单个文件需要特别样式时，就可以使用内部样式表）

定义单文件个在<head> 部分通过 <style>标签定义内部样式

例如：     <head>

             <style type="text/css">

                  body {

                   background-color:#cccccc;

                }

             </style>

          </head>

　　　　         <body>

                     <h1>这是一个H标签</h1>
                     <h1>这是一个H标签</h1>
　　　　　　　　　</body>

页外引用

CSS的代码注释用  /* ~ */    开始~结束    /*导航开始*/  #nav{....}  /*导航结束*/

通配选择符用 *{....}    同时定义body里所有标签的样式

          例如： <style>

                    *{

                        color:red;

                        font-family:仿宋;

                          }

                </style>

              </head>

                <body>

                    <h1>标签</h1>

                    <p>第一个标签</p>

                    <p>第二个标签</p>

                    <p>第三个标签</p>

                </body>

元素选择符用 body{....} ，h1{....},  p{....}    选择性定义body里的单个标签样式    （ 例如我选择性的定义b标签）

        例如：<style>

                b {

                    color:red;

                    font-family:仿宋;

                     }

              </style>

              </head>

             <body>

                 <h1>标签</h1>

                 <b>第一个标签</b>

   　　　         <p>第二个标签</p>

                 <p>第三个标签</p>

             </body>

           </html>

群组选择符 需要修改的标签进行挑选   例如：h1, h3, h6 {....}    选择性的定义body里的多个标签样式   （例如我选择性定义b和Pb标签，必须用逗号隔开）

　　　　　　例如：<style>

    　　　　　　　　　b,p {

  　　　　　　　　　　  color:red;

    　　　　　　　　　　font-family:仿宋;

  　　　　　　　　　　　　  }

   　　　　　　　 </style>

　　　　　　　　　</head>

　　　　　　　　　<body>

    　　　　　　　　　　<h1>标签</h1>

   　　　　　　　　　　 <b>第一个标签</b>

    　　　　　　　　　　<p>第二个标签</p>

   　　　　　　　　　　 <p>第三个标签</p>

　　　　　　　　　</body>

　　　　　　　　　</html>

 

关系选择符分为4种：1.包含选择符   一个标签被另一个标签所包含，包含关系不限包含层次（注意：多个选择符组成的包含选择符一定要使用空格隔开）

单用h1{....}h1标签是红色，单用em{....}p标签和h1标签的em是绿色，单用h1 em{....}则h1里面的em是绿色，p标签则没获得任何样式。

 例如：    <style>

              h1{

                color: red;

                }

              em{

                 color:green;

                }

           h1 em{

                  color: red;

                }

            </style>

            </head>

            <body>

                   <h1>标签</h1>

                   <b>第一个标签</b>

                   <p><em>第二个标签</em></p>

                   <p>第三个标签</p>

                   <h1>红色文字<em>绿色文字</em> 红色文字</h1>

            </body>

            </html>

CSS学习（页外引用还不懂）的更多相关文章

  1. css学习笔记（1）

    为什么要重新学css,理由有很多,css这个小婊砸,接触至今已有三年,但真的说熟练恐怕不见得.特此,为了我的目标,开始重新整理css的知识,我希望,每一篇笔记都能有个例子,从而来巩固我的知识. 在学习 ...

  2. CSS学习总结（一）

    不知道大家对CSS的印象是怎么样的呢?也许有些模糊,也许根本不清楚.其实它跟我们密切相关,一旦我们浏览网页,都在与它打交道.没有它,我们看不到现在如此丰富多彩的网页效果.那么它到底是什么呢?又该如何使 ...

  3. 说说CSS学习中的瓶颈

    虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名 ...

  4. CSS学习中的瓶颈期深入分析

    虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名 ...

  5. 算警示吧——此文来自张鑫旭（说说CSS学习中的瓶颈）

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2523 虽已数年,但未 ...

  6. CSS学习摘要-定位实例

    CSS学习摘要-定位实例 注:全文摘自MDN-CSS定位实例 列表消息盒子 我们研究的第一个例子是一个经典的选项卡消息框,你想用一块小区域包括大量信息时,一个非常常用的特征.这包括含有大信息量的应用, ...

  7. CSS 学习手册

    目录 CSS 简介 1.CSS 简介 CSS 概述 层叠次序 2.CSS 基础语法 CSS 语法 值的不同写法和单位 记得写引号 多重声明: 空格和大小写 3.CSS 高级语法 选择器的分组 继承及其 ...

  8. css学习归纳总结（三） 转

    原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...

  9. css学习归纳总结

    来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00 ...

随机推荐

  1. zabbix监控redis

    导入监控模板 点击[configuration]-->[templates]-->[import],导入xml监控模板. 配置客户端key 在被监控的主机上,新建/etc/zabbix/z ...

  2. 【R与数据库】R ＋ 数据库 ＝ 非常完美

    前言 经常用R处理数据的分析师都会对dplyr包情有独钟,它强大的数据整理功能让原始数据从杂乱无章到有序清晰,便于后期进一步的深入分析,特别是配合上数据库的使用,更是让分析师如虎添翼,轻松搞定Exce ...

  3. javaScript-什么是变量?

    什么是变量? 从字面上看,变量是可变的量:从编程角度讲,变量是用于存储某种/某些数值的存储器.我们可以把变量看做一个盒子,为了区分盒子,可以用BOX1,BOX2等名称代表不同盒子,BOX1就是盒子的名 ...

  4. 20个php框架

    对于Web开发者来说,PHP是一款非常强大而又受欢迎的编程语言.世界上很多顶级的网站都是基于PHP开发的.本文我们来回顾一下20个2014年最优秀的PHP框架. 每一个开发者都知道,拥有一个强大的框架 ...

  5. CSS小技巧-为内盒子添加margin-top时，会带着父盒子一起下来，如何解决？

    1.为父盒子添加一个padding 2.为父盒子添加一个border 3.为父盒子添加一个overflow:hidden

  6. 网络编程2之Socket简介和java.net包

    一.Socket 通信链路的端点就被称为"套接字"(英文名Socket) 是提供给应用程序的接口 图文说明Socket Socket通信原理 二.java.net包 Java.ne ...

  7. 惊心动魄的SAP S4客户额度调整运动

    今天一大早,收到商务部发来的消息,说某一个客户的额度超额了,但实际上并未超额.从SAP系统中反馈的额度来看,显示超了2万多.后来经过在BP画面检查信用段发现,这个客户额度占用里面,某一个未清订单已经部 ...

  8. 带着问题写React Native原生控件--Android视频直播控件

    最近在做的采用React Native项目有一个需求,视频直播与直播流播放同一个布局中,带着问题去思考如何实现,能更容易找到问题关键点,下面分析这个控件解决方法: 现在条件:视频播放控件(开源的ijk ...

  9. AngularJS高级程序设计读书笔记 -- 指令篇 之 自定义指令

    2. 自定义指令(15-17 章) Module.directive(name, factory) 2.1 创建自定义指令的方法 Module.directive(name, factory) 示例 ...

  10. 单人纸牌_NOI导刊2011提高（04）

    单人纸牌 时间限制: 1 Sec  内存限制: 128 MB 题目描述 单人纸牌游戏,共 36 张牌分成 9 叠,每叠 4 张牌面向上.每次,游戏者可以从某两个不同的牌堆最顶上取出两张牌面相同的牌(如 ...