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. [Splay][学习笔记]

    胡扯 因为先学习的treap,而splay与treap中有许多共性,所以会有很多地方不会讲的很细致.关于treap和平衡树可以参考这篇博客 关于splay splay,又叫伸展树,是一种二叉排序树,它 ...

  2. [hdu5215][Cycle]

    题目链接 思路 首先可以通过二分图染色找到奇环和一部分偶环.这个比较简单 但是还有一种偶环容易忽略. 如图(别问我为啥没节点4) 第一次可以找到1-2-3-1)这个奇环,第二次可以找到(3-5-6-3 ...

  3. 机器学习三剑客之matplotlib 数据绘图展示

    线型图: #导包 import matplotlib.pyplot as plt #导入字体库 from matplotlib.font_manager import FontProperties # ...

  4. SNP在世界地图上的频率分布

    简单介绍两个网页工具,第一个是GGV,其界面如下: 第二个工具是HGDP,个人感觉画出来有点丑..都是同一所大学开发出来的:界面如下:

  5. Linux系统诊断必备技能之一：lsof 用法详解！

    lsof(list open files)是一个查看当前系统文件的工具.在linux环境下,任何事物都以文件的形式存在,用户通过文件不仅可以访问常规数据,还可以访问网络连接和硬件:如传输控制协议 (T ...

  6. Scoring and Modeling—— Underwriting and Loan Approval Process

    https://www.fdic.gov/regulations/examinations/credit_card/ch8.html Types of Scoring FICO Scores    V ...

  7. SQL Server日志过大，清理日志

    直接执行下面的代码 USE [master] GO ALTER DATABASE 数据库 SET RECOVERY SIMPLE WITH NO_WAIT GO ALTER DATABASE 数据库 ...

  8. Hadoop问题：There are 0 datanode(s) running and no node(s) are excluded in this operation.

    问题描述: org.apache.hadoop.ipc.RemoteException(java.io.IOException): File /tmp/hadoop-yarn/staging/hado ...

  9. JAVA核心技术I---JAVA基础知识（常量设计和常量池）

    一:常量---一种不会修改的变量 –Java没有constant关键字 –不能修改,final –不会修改/只读/只要一份,static –方便访问publicJava中的常量 –public sta ...

  10. python django基础一web框架的本质

    web框架的本质就是一个socket服务端,而浏览器就是一个socker客户端,基于请求做出相应,客户端先请求,服务器做出对应响应 按照http协议的请求发送,服务器按照http协议来相应,这样的通信 ...