<!--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. Two Pointers - leetcode [两指针问题]

    125. Valid Palindrome consider only alphanumeric characters and ignore cases. transform(s.begin(), s ...

  2. C#泛型委托及约束

    泛型委托: namespace 泛型委托 { public delegate void Mydelegate<T>(T msg); class Program { static void ...

  3. 一箭N雕：多任务深度学习实战

    1.多任务学习导引 多任务学习是机器学习中的一个分支,按1997年综述论文Multi-task Learning一文的定义:Multitask Learning (MTL) is an inducti ...

  4. 学习node的REPL

    REPL: read eval print loop 支持 多行代码 编辑模式,即 识别{} () 为代码块. 在repl中快速查看 对象的属性 gl = global repl command .h ...

  5. 一个初学者的辛酸路程-socket编程-8

    前言: 你会发现会网络是多么幸福的事情 主要内容: socket 概念: socket本质上就是2台网络互通的电脑之间,架设一个通道,两台电脑通过这个通道来实现数据的互相传递.我们知道网络通信都是基于 ...

  6. 微信小程序支付步骤

    http://blog.csdn.net/wangsf789/article/details/53419781 最近开发微信小程序进入到支付阶段,一直以来从事App开发,所以支付流程还是熟记于心的.但 ...

  7. html中 iframe子页面 与父页面之间的方法调用 ;

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. c#委托与事件（详解）

    引言 委托 和 事件在 .Net Framework中的应用非常广泛,然而,较好地理解委托和事件对很多接触C#时间不长的人来说并不容易.它们就像是一道槛儿,过了这个槛的人,觉得真是太容易了,而没有过去 ...

  9. tomcat识别不出maven web项目

    解决办法: 点中项目-->Properties-->project facets 勾选:Dynamic Web Module.java.javaScript Apply-->OK 解 ...

  10. BOS物流管理系统-第一天

    BOS物流管理系统-第一天-系统分析.环境搭建.前端框架 BoBo老师 整体项目内容目标: 对项目概述的一些理解 亮点技术的学习 注意学习方式:优先完成当天代码. 其他内容. 最终: 学到新的技术,会 ...