<!--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. html-webpack-plugin

    插件地址:https://www.npmjs.com/package/html-webpack-plugin 这个插件用来简化创建服务于 webpack bundle 的 HTML 文件,尤其是对于在 ...

  2. 【锋利的Jquery】读书笔记一

    封面镇楼: 读这本书应该是7月份,二周读完,经典的好书,一直没怎么复习.so....温故而知新下. 一.jquery的风格 链式风格 <div class="box"> ...

  3. linux安装GraphicsMagick

    下载GraphicsMagick-1.3.21.tar.gz 解压:tar -zxvf GraphicsMagick-1.3.21.tar.gz cd /usr/local/GraphicsMagic ...

  4. Dylans loves numbers

    Problem Description Who is Dylans?You can find his ID in UOJ and Codeforces. His another ID is s1451 ...

  5. WPF Image Binding Uri Source 失败解决办法

    在ListView 的ListItem里动态绑定Image. 首先代码写的是没有问题的.但最后运行却无法显示图片.先看代码: 1. XAML部分 代码如下: <ListView x:Name=& ...

  6. WCF发布错误及解决方案

    一:在本机直接运行时出错 使用WCF写了一个小程序测试一下它的功能在运行时报错.“添加服务失败.服务元数据可能无法访问.请确保服务正在运行并且正在公开元数据.” 如下图所示: 查了下资料把它解决了,记 ...

  7. HDU-1757--A Simple Math Problem（矩阵乘法）

    Problem Description Lele now is thinking about a simple function f(x).If x < 10 f(x) = x.If x > ...

  8. HDU猜数字

    G - 猜数字 Time Limit:10000MS       Memory Limit:32768KB       64bit IO Format:%I64d & %I64u Descri ...

  9. Char device registration

    The kernel uses structures of type struct cdev to represent char devices internally. Include <lin ...

  10. Android实现图片宽度100%ImageView宽度且高度按比例自动伸缩

    在ListView中为了实现图片宽度100%适应ImageView容器宽度,让高度自动按比例伸缩功能,查了很多资料,搞了一下午都没找出个现成的办法,不过貌似有个结论了,就是: Android自身不能实 ...