<!--CSS
    一.概念:CSS的全称是Cascading Style Sheets,层叠样式表,用来控制HTML标签样式,在美化网页中起到非常重要的作用

    CSS的编写格式是键值对形式的,比如
    color: red;

    font-size: 20px;

    冒号:冒号左边是属性名,冒号右边是属性值

    二.CSS的3中书写形式
        1.行内样式:(内联样式)直接在标签的style属性中书写
            <body style = "color: red;">
        2.页内标签:在本网页的style标签中书写
            <style>
                body{
                    color:red;
                }
            </style>
        3.外部样式:在单独的CSS文件中书写,然后在网页中用link标签引用
        <link rel="stylesheet" href="index.css">

      三.CSS规律:
        1.就近原则
        2.叠加原则

      四.CSS的两大重点
        1.属性:通过属性的复杂叠加才能做出漂亮的网页
        2.选择器:通过选择器找到对应的标签设置样式
            a.标签选择器: 作用:选择对应的标签,为之添加样式
                        根据标签名找到标签
                        <div>div1</div>
                        <div>div2<div>
                        div{
                            color:red
                        }
            b.类选择器
            <p class="high">第一段文件</p>
            <p>第二段文字</p>

            <div class="high">div1</div>
            <div>div2</div>

            .high {
                color:red
            }

            c.id选择器
            <p id="first">第一段文件</p>
            <p>第二段文字</p>

            #first {
                color:red;
            }

            d.并列选择器
            <p class="high">第一段文件</p>
            <p>第二段文字</p>

            <div class="high">div1</div>
            <div>div2</div>

            div, .high {
                color:red
            }

            e.复合选择器
            <p class="high">第一段文件</p>
            <p>第二段文字</p>

            <div class="high">div1</div>
            <div>div2</div>

            div.high {
                color:red
            }

            f.后代选择器
            <div>
                <p>div里边的p</p>
                <span>
                    <p>div里边的span里边的P</p>
                </span>
            </div>

            <P>外面的p</P>

            div p {
                color: red;
            }

            g.直接后代选择器
                div>p {
                }

            h.相邻兄弟选择器
                div+p {
                    color: red;
                }

             i.属性选择器
             1)<div name="jack">111</div>
             <div name="rose">222</div>
             <div>333</div>

             div[name] {
                color:red;
             }

             2)<div name="jack">111</div>
             <div name="rose age="20">222</div>
             <div>333</div>

             div[name][age] {
                color:red;
             }

             3)<div name="jack">111</div>
             <div name="rose">222</div>
             <div>333</div>

             div[name="jack"] {
                color:red;
             }

    五.伪类:在点击的时候触发的操作

    六:标签之间的类型转化

    七:CSS的属性
        CSS有N多种属性,根据继承性,主要分为可继承属性和不可继承属性
        1.可继承属性
            父标签的属性值可以传递给子标签
            一般是文字控制属性
        2.不可继承属性
            父标签的属性值不能传递给子标签
            一般是区块控制属性
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

CSS的基本概念的更多相关文章

  1. HTML-HTML5+CSS3权威指南阅读（五、设备像素和CSS像素的概念）

    在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如<html>元素,也包括窗口和屏幕 这篇文章是关于桌面浏览器的,其唯一目的就是为移动浏览器中相似 ...

  2. CSS Sprites的概念、原理、适用范围和优缺点

    CSS Sprites概念 CSSSprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就 ...

  3. css术语和概念

      .vocabulary{ height:99px; color:transparent; } 属性 上面示意css代码中的height和color就是属性.   值 上面的99px就是值 整数值: ...

  4. css盒子模型概念

    CSS css盒子模型 又称框模型 (Box Model) ,包含了元素内容(content).内边距(padding).边框(border).外边距(margin)几个要素.如图: 图中最内部的框是 ...

  5. css常见的概念

    padding-top:10px;是指容器内的内容距离容器的顶部有10个像素,是包含在容器内的: margin-top:10px;是指容器本身的顶部距离其他容器有10个像素,不包含在容器内: top: ...

  6. 理解CSS

    写在前面的话:对于web开发,html完成网页的structure,css完成网页的presentation,js完成网页的behavior,今天就来说一说css,通过理解一些css的基础概念,能够更 ...

  7. Atitit.css 规范 bem  项目中 CSS 的组织和管理

    Atitit.css 规范 bem  项目中 CSS 的组织和管理 1. 什么是BEM?1 1.1. 块(Block)2 1.2. 元素(Element)2 1.3. BEM树(和DOM树类似).3 ...

  8. CSS系列：CSS的继承与层叠特性

    1. CSS的继承特性 所有的CSS语句都是基于各个标记直接的继承关系,CSS继承是指子标记会继承父标记的所有样式风格,并可以再父标记样式风格的基础上再加以修改,产生新的样式,而子标记的样式完全不会影 ...

  9. ife任务刷题总结（一）－css reset与清除浮动

    本文同时发布于本人的个人网站www.yaoxiaowen.com 百度创办的前端技术学院,是一个面向大学生的前端技术学习平台.虽然只有大学生才有资格报名,提交代码进行比赛排名.但是这并不妨碍我们这些初 ...

随机推荐

  1. PIE 阻断回溯——Cut

    PIE(Prolog Inference Engine)通常是搜索所有的解.举个例子, 当然dialog窗口中一开始调用 run. 只会显示一个解(虽然事实上会得到两个解),在前面加上 X=1,就可以 ...

  2. CNN计算过程

  3. Javascript中valueOf与toString区别

    前言 基本上,所有JS数据类型都拥有这两个方法,null除外.它们俩解决JavaScript值运算与显示的问题,重写会加大它们调用的优化. 测试分析 先看一例:var aaa = {  i: 10,  ...

  4. Entity Framework映射的总结

    EF是一个ORM工具,映射永远是最核心的部分.所以接下来详细介绍Code First模式下EF的映射配置. 通过Code First来实现映射模型有两种方式Data Annotation和Fluent ...

  5. 5. test命令

    Shell中的 test 命令用于检查某个条件是否成立,它可以进行数值.字符和文件三个方面的测试. 1. 数值测试 参数 说明 -eq 等于则为真 -ne 不等于则为真 -gt 大于则为真 -ge 大 ...

  6. Linux Date命令学习笔记

    date 根据给定格式显示日期或设置系统日期时间.print or set the system date and time 指令所在路径:/bin/date 命令参数: 参数 描述 -d 显示字符串 ...

  7. mysql索引类型-形式-使用时机-不足之处--注意事项

    一.索引的类型 1.普通索引   增加 create  index  index_name on table(colume(length));                       例子:cre ...

  8. hadoop报错 Message missing required fields: callId, status

    今天群里有人问hadoop的问题,说百度上怎么都查不到,还好hadoop之前玩过一阵,也遇上过这个问题 hadoop-2.2.0  hbase 0.95-hadoop2的 ,hdfs正常 ,启动 hb ...

  9. linux中fork（）函数详解（转）

    转自:http://blog.csdn.net/jason314/article/details/5640969 一.fork入门知识 一个进程,包括代码.数据和分配给进程的资源.fork()函数通过 ...

  10. 对adapter的封装优化

    一般不优化的adapter通常继承自BaseAdapter会出现一下几个问题: getCount(), getItem(), getItemId()代码都要去重写,一个adapter还行,如果adap ...