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. 常用工具类（System,Runtime,Date,Calendar,Math）

    一.System: 一个java.lang包中的静态工具类. 三大字段: static PrintStream err “标准”错误输出流. static InputStream in “标准”输入流 ...

  2. 你真的知道什么是【共享Session】，什么是【单点登录】吗？

    一直有人问,为什么我实现的共享session不能单点登录,今天我也抽时间准备好好说一下. 我要喷(别喷我) 首先,网上水货文章很多,CSDN居多.CSDN转载率很高,也就是说同相同文章有很多,换汤不换 ...

  3. ThymeLeaf的eclipse插件安装

    “Help”----“Install New Software...” 输入: http://www.thymeleaf.org/eclipse-plugin-update-site/ 一路Next, ...

  4. js怎么获取微信浏览器内容的高度

    通过window对象来得到窗口相关的内外款高度信息,如下: outerHeight属性设置或返回一个窗口的外部高度,包括所有界面元素(如工具栏/滚动条).outerWidth属性设置或返回窗口的外部宽 ...

  5. Android Studio 每次运行都会再下载一遍，修改

    Android Studio 每次运行都会再下载一遍 把 gradle 设置 use local gradle distribution

  6. (贪心 模拟？) codeVs1098 均分纸牌

    题目描述 Description 有 N 堆纸牌,编号分别为 1,2,…, N.每堆上有若干张,但纸牌总数必为 N 的倍数.可以在任一堆上取若于张纸牌,然后移动. 移牌规则为:在编号为 1 堆上取的纸 ...

  7. Qt ------ QDir 路径

    QDir::currentPath() 获取当前路径 QDir::toNativeSeparators 把windows下的路径转换为Qt可以识别的路径,如"C:/Users/Adminis ...

  8. javaWeb中使用ajax上传文件

    javaWeb上传图片 上传文件所必要的两个jar包:commons-fileupload.jar.commons-io.jar. jar包下载:github路径 核心代码: String withP ...

  9. python: 多态与虚函数；

    通过python的abc模块能够实现虚函数: 首先在开头from abc import   ABCMeta, abstractmethod 例子 : #!/usr/bin/python #coding ...

  10. matlab : Nelder mead simplex 单纯形直接搜索算法；

    function [ param ] = NeldSearch( param ) %NERDSEARCH 此处显示有关此函数的摘要 % nelder mead simplex 单纯形直接搜索算法: % ...