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. 代码合并工具Beyond Compare的使用技巧

    使用技巧 文件合并 过滤 https://edi.wang/post/2013/2/17/using-beyond-compare 文件夹比较 http://www.beyondcompare.cc/ ...

  2. JAVA 微信支付 native方式

    最近做了一个微信native方式支付的demo,整理一下. 首先到微信公众号官网阅读开发文档,虽然文档对于java没有例子,但是也可以作参考.https://pay.weixin.qq.com/wik ...

  3. POJ 1639 Picnic Planning 最小k度生成树

    Picnic Planning Time Limit: 5000MS   Memory Limit: 10000K Total Submissions:11615   Accepted: 4172 D ...

  4. Windows7安装程序无法定位现有系统分区,也无法创建新的系统分区

    解决Windows7.Windows8系统安装时“安装程序无法定位现有系统分区,也无法创建新的系统分区”提示. 方法一 把Windows7镜像发在你电脑的非系统盘的其他硬盘上. 重启机器,通过U盘启动 ...

  5. 浏览器console打印定义样式

    %指令 c:表示样式(css) 其他的大家查资料吧 console.log("%c dsajfklsdjljfdskl", "color:red;font-size:50 ...

  6. sklearn-数据预处理scale

    sklearn实战-乳腺癌细胞数据挖掘(博主亲自录制视频) https://study.163.com/course/introduction.htm?courseId=1005269003& ...

  7. samba服务器之无认证进入共享目录

    修改设备中的/log/samba/lib/smb.conf文件 security = share [web]                                               ...

  8. C#设计模式（9）——代理模式

    1.代理模式介绍 在软件开发中有时会遇到不能直接使用对象的问题,如我们要使用的对象在进程外,甚至在远程的机器上,但是我们要使用这个对象的功能怎么办呢?代理模式就可以用来解决这个问题.举一个生活中的例子 ...

  9. bootstrap实现checkbox全选、取消全选

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 最新版本的 ...

  10. js中得计算问题算式结果拼接成字符串怎么解决

    如题:经常遇到类似问题 一种:自定义的弱类型 var savNum=0; var num=$("#numU").val();//jsp页面获得得值 savNum=parseInt( ...