<!--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. Web Service接口返回泛型的问题（System.InvalidCastException: 无法将类型为“System.Collections.Generic.List`1[System.String]”的对象强制转换为类型“System.String[]”）

    在使用C#写Web Service时遇到了个很奇怪的问题.返回值的类型是泛型(我用的是类似List<string>)的接口,测试时发现总是报什么无法转换为对象的错误,百思不得其解. 后来在 ...

  2. [ mysql优化一 ] explain解释select语句

    NOSQL  没有什么数据表, 只是一些变量,key_value  ,redis 支持的变量比较多.可以持久化文件到硬盘上. mysql 关系型数据库 ,表和表中间有各种id的关系. 缺点  高并发读 ...

  3. iOS 8 AutoLayout与Size Class自悟(转载)

    iOS 8 AutoLayout与Size Class自悟 Size classiOS 8 AutoLayout 前言 iOS8 和iPhone6发布已经过去蛮久了,广大的果粉终于迎来了大屏iPhon ...

  4. php 便利数组方法

    数组在PHP中是一个非常强大的武器,用起来方便.容易,由于使用起来异常灵活,用它就可以实现数据结构中的链表.栈.队列.堆以及所谓的字典.集合等,也可以转换成XML格式. 1.使用for for语句遍历 ...

  5. Java集合初体验

    背景:        因为对Java的集合完全不了解,所以才在网上找了找能形成初步印象的文章进行学习,大多涉及的是一些概念和基础知识. 一.数组array和集合的区别: (1)数组是大小固定的,并且同 ...

  6. lumen框架

    1,获取配置 app(); 说明:app()返回的是全局唯一的application对象,该对象的原型是Laravel\Lumen\Application 加载配置文件(config/app.php) ...

  7. 简单的jquery ajax文件上传功能

    /* * 图片上传 * 注意如果不加processData:false和contentType:false会报错 */ function uploadImage(image) { var imageF ...

  8. linux截取字符串的多种方法

    Linux 的字符串截取很有用.有八种方法. 假设有变量 var=http://www.hao.com/123.htm . . 一 # 号截取,删除左边字符,保留右边字符. echo ${var#*/ ...

  9. Retrofit,Rxjava,OkHttp3的配置

    这几个库的版本都更新了,和以前的使用略有不同,这是两篇介绍的博客:http://www.jianshu.com/p/91ac13ed076d ,https://drakeet.me/retrofit- ...

  10. jquery远程班备忘

    基础第一课: 1. $(obj)获取的是一个集合,因此length最小是1, jquery,如果元素不存在,也不会报错,可通过$(obj).length<1就可以查看该元素是否存在. 2. at ...