<!--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. iOS UIBezierPath类 介绍

      使用UIBezierPath类可以创建基于矢量的路径,这个类在UIKit中.此类是Core Graphics框架关于path的一个封装.使用此类可以定义简单的形状,如椭圆或者矩形,或者有多个直线和 ...

  2. MYSQL 主从复制（NIOT）

    一.主数据库操作设置(A) 1.修改配置文件,vim /etc/my.cnf,然后重启mysqld,/etc/init.d/mysqld restart [mysqld]<要在mysqld中括号 ...

  3. dpkg -P <pkg>

    http://www.linuxquestions.org/questions/debian-26/how-do-i-get-rid-of-those-rc-packages-as-seen-in-d ...

  4. lucene 多字段查询-MultiFieldQueryParser

    /** * 搜索域加权 */ Map<String, Float> boosts = new HashMap<>(); boosts.put("title" ...

  5. ftp服务器端的安装及配置

    搭建过程 安装 vsftp 服务(yum 安装即可) 配置/etc/vsftpd/vsftpd.conf   anonymous_enable=NO #禁止匿名登录 local_enable=YES ...

  6. Webbench源代码分析(转载)

    转载地址 http://blog.csdn.net/kangroger/article/details/42500703 Web Bench是一个网站压力测试的工具.其最后更新时间是2004年,已经十 ...

  7. 安装openblas和matcaffe时遇到的问题

    1.在安装openblas时,报错:/usr/bin/ld: cannot find -lgfortran 这里是需要安装的是libgfortran-x.x-dev,“x.x”是版本名.使用sudo ...

  8. mysqldump 数据库备份命令及脚本

    mysql -uroot -phowhy@123 -e 'show databases;' | grep -ivE 'waring|database|mysql'|sed -r "s#^(. ...

  9. Android的JunitTest

    1.在manifest的配置:首先,manifest的下层级中配置: <instrumentation android:name="android.test.Instrumentati ...

  10. 第九十四节，html5+css3移动手机端流体布局，旅游部分，媒体查询

    html5+css3移动手机端流体布局,旅游部分,媒体查询 媒体查询 媒体查询是手机网站和自适应网站的重要部分,媒体查询可以根据不同的屏幕大小,做响应的处理,如文字的大小,区块隐藏等等 媒体查询,这里 ...