1，css的三种引入方式

1，行内样式

2，内接样式

3，外接样式：链接式和导入式。

HTML的缺陷：

  1. 不能够适应多种设备
  2. 要求浏览器必须智能化足够庞大
  3. 数据和显示没有分开
  4. 功能不够强大

CSS 优点：

  1. 使数据和显示分开
  2. 降低网络流量
  3. 使整个网站视觉效果一致
  4. 使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css

行内样式

1 <div>

2     <p style="color: green">我是一个段落</p>

3 </div>

行内样式的级别最高

内接样式

<style type="text/css">

    /*写我们的css代码*/

    span{

    color: yellow;

    }

</style>

外接样式-链接式

<link rel="stylesheet" href="./index.css">

外接样式-导入式

<style type="text/css">

        @import url('./index.css');

</style>

2，css的选择器

1，标签选择器

标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“

<!DOCTYPE html>

<html>

<head>

    <meta charset=utf-8>

    <meta name=description content="">

    <meta name=viewport content="width=device-width, initial-scale=1">

    <title></title>

    <style type="text/css">

        /*标签选择器*/

       a{

           font-size: 12px;

           text-decoration: none;

       }

        /**/

        span{

            color: red;

            /*让鼠标显示小手的样式*/

            cursor: pointer;

        }

        /*id选择器 一般不会设置样式，通常都与js有很大关系*/

        #p1{

            color: green;

            font-size: 20px;

        }

        /*类选择器*/

        .w{

            width: 968px;

            height: 100px;

            background-color: blue;

            border: 1px solid red;

            /*让一个盒子居中显示*/

            margin: 0 auto;

        }

        .t{

            border: 1px solid yellow;

        }

        .lv{

            color: green;

        }

        .big{

            font-size: 40px;

        }

        .line{

            text-decoration: underline;

        }

        .d:hover{

            text-decoration: underline;

            color: red;

        }

        /**/

    </style>

</head>

<body>

    <!-- 基本选择器： 标签选择器、id选择器、class选择器、*通配符选择器 

        标签选择器：不管你的标签藏的多深，都会被选中，选的"共性"，而不是特性

    -->

    <div>

        <div>

            <div>

                <span>内容</span>

                <a href="" class="d">哈哈</a>

                <a href="">哈哈</a>

                <a href="">哈哈</a>

            </div>

        </div>

        <span>另一个内容</span>

        <a href="">哈哈</a>

        <p id="p1">一个段落</p>

        <!-- <a href="" id="app">超链接</a> -->

        <div class="w t">

        </div>

        <div class="w">

        </div>

        <div class="w">

        </div>

        <div>

               <p class="lv big">段落1</p>

             <p class="lv line">段落2</p>

             <p class="line big">段落3</p>

         </div>

    </div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

    <title>选择按钮</title>

</head>

<body>

    <form>

        姓名:<input type="radio" name="请输入用户名">

    </form>

</body>

</html>

2，id选择器

3，类选择器

.  点加类名

5.22 css和基本选择器的更多相关文章

  1. css的各种选择器

    一.基本选择器 1. * 通用元素选择器,匹配任何元素 2. E 标签选择器,匹配所有使用E标签的元素 3. .info class选择器,匹配所有class属性中包含info的元素 4. #foot ...

  2. CSS基础--属性选择器、伪类选择器

    属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  3. CSS伪类选择器

    一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...

  4. Lining.js - 为CSS提供 ::nth-Line 选择器功能

    在CSS中,我们使用 ::first-line 选择器来给元素第一行内容应用样式.但目前还没有像 ::nth-line.::nth-last-line 甚至 ::last-line 这样的选择器.实际 ...

  5. CSS 子元素选择器与后代选择器区别实例讲解

    css子元素选择器和后代选择器在功能描述上非常相同,但是他们其实是有区别的,本文章通过两个简单的实例向大家介绍子元素选择器与后代选择器的区别,需要的朋友可以参考一下. 首先我们来了解一下子元素选择器与 ...

  6. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

  7. CSS的总结(选择器,伪类等...)

    关于组合选择器可参考:http://www.cnblogs.com/starof/p/4453458.html 主要内容 CSS概述 CSS和HTML结合的四种方式 CSS样式优先级和代码规范 CSS ...

  8. 关于CSS伪类选择器

    #CSS伪类选择器 ##使用css伪类选择器需要注意的 使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始 ...

  9. CSS之后代选择器与多类选择器

    <新人报到,欢迎拍砖#- -> 一.后代选择器 说起CSS的后代选择器.它属于派生选择器中的一种,两者附属关系如下: -->派生选择器 ----CSS 后代选择器 ----CSS 子 ...

随机推荐

  1. [hdu6183][Color it]

    题目链接 题目大意 有一个矩阵,总共有4种操作 0:清空这个矩阵 1 x y c:将\((x,y)(1 \leq x ,y\leq 10^6)\)这个点加上一种颜色c\((0\leq c \leq 5 ...

  2. [luogu3369][普通平衡树]

    题目链接 思路 模板 只是有几个容易出错的地方 第45行容易忘记 第54行里面的cnt--和siz--容易忘记 第56行是根据id判断不是val 第60行siz--容易忘记 第64行是siz+1不是s ...

  3. Django cookie相关操作

    Django cookie 的相关操作还是比较简单的 首先是存储cookie #定义设置cookie(储存) def save_cookie(request): #定义回应 response = Ht ...

  4. CMakeLists.txt使用

    背景:C++代码在编译的过程中需要进行文件的包含,该文主要介绍CMakeLists.txt相关语法 CMake之CMakeLists.txt编写入门

  5. 关于react-native项目在MacBookPro环境下打包成IPA

    苹果开发者打包是需要接入公司的开发者账户里面的.看是企业账户还是什么,具体我不太清楚. 不过打包的方法倒是大同小异. 我们一起新建项目,先跑起来这个项目 npm install -g yarn rea ...

  6. TODO 动态执行appium代码，便于修改和调试

    https://testerhome.com/topics/9040 还没尝试过. 不过不是很懂怎么实现的,java不是编译后再运行的语言吗?怎么一边编译一边运行呢???

  7. java 学习：在java中启动其他应用，由jenkins想到的

    在jenkins的实践中遇到了一个问题: 我的项目依赖其他第三方应用的地方比较多,而且会占用多个端口,如何处理端口和启动/关闭第三方应用成了难题. 初级解决方案:在服务端上面写一堆bat文件,,,,_ ...

  8. 设计模式--桥接(Bridge)模式

    1.概述: 桥接模式:把抽象和行为分离开来,中间需要某个介质来连接抽象化和行为化.此模式的概述听起来非常像适配器模式,不要搞混了,虽然都是借用中间介质,但意义不同.最典型的桥接模式就是:JDBC.通过 ...

  9. NGINX X-Forwarded-For / XFF / xforword

    s https://en.wikipedia.org/wiki/X-Forwarded-For http://www.cnblogs.com/yihang/archive/2010/12/19/191 ...

  10. 【1】【leetcode-99】 恢复二叉搜索树

    (没思路) 99. 恢复二叉搜索树 二叉搜索树中的两个节点被错误地交换. 请在不改变其结构的情况下,恢复这棵树. 示例 1: 输入: [1,3,null,null,2]   1   /  3   \ ...