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. vue2.0项目实战（2）使用 vue-cli 搭建项目

    Vue-cli是官方推荐的快速构建单页应用的脚手架.官方给的建议,如果你是初次尝试Vue,哪就老老实实用普通的书写引入js文件,这里牵扯太多的东西,例如webpack .npm .nodejs 等等, ...

  2. javascript学习笔记二

    1.js的string对象 **创建 String对象 *** var str = "abc"; **方法 和 属性(文档) *** 属性 length : 字符串的长度 ***方 ...

  3. JVM 辣鸡回收

    垃圾回收算法 标记清除法 先标记出需要回收的对象,然后一次性回收.缺点:会产生内存碎片,并且效率也不高. 标记压缩法 先标记出需要回收的对象,然后让存活对象向一端移动,移动的过程中进行回收辣鸡.避免了 ...

  4. Go语言反射规则

    Go语言反射规则 - The Laws of Reflection 转:http://my.oschina.net/qbit/blog/213720 原文地址:http://blog.golang.o ...

  5. Linux里的eval命令

      这个命令之前没有用过,在网上查了一下资料,觉得人家写的很好,所以复制过来了. 标题:linux命令eval的用法 链接:http://blog.chinaunix.net/uid-21411227 ...

  6. HDU4560 二分最大流

    http://acm.hdu.edu.cn/showproblem.php?pid=4560 网络流好像经常搭配上二分和拆点. n个歌手,m种歌曲流派(n<=m<=75) 我们想要安排尽可 ...

  7. 信用评分卡 (part 5 of 7)

    python信用评分卡(附代码,博主录制) https://study.163.com/course/introduction.htm?courseId=1005214003&utm_camp ...

  8. Java_去除字符串空格

    String ss = " happy new year "; System.out.println(ss + "------" + ss.length()); ...

  9. Xstart Insatll And Usage

    不进入 Linux 桌面环境,又需要运行一些图形化的软件,比如 Oracle 数据库的安装等 安装 Windows 上 Xstart 安装:https://www.cnblogs.com/jhxxb/ ...

  10. .aspx、MasterPage、.ascx加载顺序

    1．    Master page中的用户控件的 page_init2．    Aspx页面中的用户控件的 page_init3．    Master page的page_init4．    Aspx ...