1，css的三种引入方式

1，行内样式

2，内接样式

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

HTML的缺陷：

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

CSS 优点：

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

行内样式

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

行内样式的级别最高

内接样式

  1. <style type="text/css">
  2.     /*写我们的css代码*/
  3.  
  4.     span{
  5.     color: yellow;
  6.     }
  7.  
  8. </style>

外接样式-链接式

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

外接样式-导入式

  1. <style type="text/css">
  2.         @import url('./index.css');
  3. </style>

2，css的选择器

1，标签选择器

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset=utf-8>
  5.     <meta name=description content="">
  6.     <meta name=viewport content="width=device-width, initial-scale=1">
  7.     <title></title>
  8.     <style type="text/css">
  9.         /*标签选择器*/
  10.        a{
  11.            font-size: 12px;
  12.            text-decoration: none;
  13.        }
  14.  
  15.         /**/
  16.         span{
  17.             color: red;
  18.             /*让鼠标显示小手的样式*/
  19.             cursor: pointer;
  20.         }
  21.  
  22.         /*id选择器 一般不会设置样式，通常都与js有很大关系*/
  23.         #p1{
  24.             color: green;
  25.             font-size: 20px;
  26.         }
  27.  
  28.         /*类选择器*/
  29.  
  30.         .w{
  31.             width: 968px;
  32.             height: 100px;
  33.             background-color: blue;
  34.             border: 1px solid red;
  35.  
  36.             /*让一个盒子居中显示*/
  37.             margin: 0 auto;
  38.         }
  39.         .t{
  40.             border: 1px solid yellow;
  41.         }
  42.         .lv{
  43.             color: green;
  44.  
  45.         }
  46.         .big{
  47.             font-size: 40px;
  48.         }
  49.         .line{
  50.             text-decoration: underline;
  51.         }
  52.         .d:hover{
  53.             text-decoration: underline;
  54.             color: red;
  55.         }
  56.  
  57.         /**/
  58.  
  59.     </style>
  60. </head>
  61. <body>
  62.  
  63.     <!-- 基本选择器： 标签选择器、id选择器、class选择器、*通配符选择器 
  64.  
  65.         标签选择器：不管你的标签藏的多深，都会被选中，选的"共性"，而不是特性
  66.     -->
  67.  
  68.     <div>
  69.         <div>
  70.             <div>
  71.                 <span>内容</span>
  72.                 <a href="" class="d">哈哈</a>
  73.                 <a href="">哈哈</a>
  74.                 <a href="">哈哈</a>
  75.             </div>
  76.         </div>
  77.         <span>另一个内容</span>
  78.         <a href="">哈哈</a>
  79.         <p id="p1">一个段落</p>
  80.         <!-- <a href="" id="app">超链接</a> -->
  81.  
  82.         <div class="w t">
  83.  
  84.         </div>
  85.         <div class="w">
  86.  
  87.         </div>
  88.  
  89.         <div class="w">
  90.  
  91.         </div>
  92.  
  93.         <div>
  94.                <p class="lv big">段落1</p>
  95.              <p class="lv line">段落2</p>
  96.              <p class="line big">段落3</p>
  97.          </div>
  98.     </div>
  99.  
  100. </body>
  101. </html>
  102. <!DOCTYPE html>
  103. <html>
  104. <head>
  105.     <title>选择按钮</title>
  106. </head>
  107. <body>
  108.     <form>
  109.         姓名:<input type="radio" name="请输入用户名">
  110.     </form>
  111.  
  112. </body>
  113. </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. Java 多个文件压缩下载

    有时候会有多个附件一起下载的需求,这个时候最好就是打包下载了 首先下面这段代码是正常的单个下载 public void Download(@RequestParam("file_path&q ...

  2. python 字典的定义以及方法

    7.字典的转换: dict(x=1,y=2)  ==>  {'y': 2, 'x': 1} dict([(i,element) for i, element in enumerate(['one ...

  3. Contest1593 - 2018-2019赛季多校联合新生训练赛第三场（部分题解）

    H 10255 自然数无序拆分 H 传送门 题干: 题目描述 美羊羊给喜羊羊和沸羊羊出了一道难题,说谁能先做出来,我就奖励给他我自己做的一样礼物.沸羊羊这下可乐了,于是马上答应立刻做出来,喜羊羊见状, ...

  4. PostCSS理解与运用

    1.PostCSS是什么 它可以被理解为一个平台,可以让一些插件在上面跑 它提供了一个解析器,可以将CSS解析成抽象语法树 通过PostCSS这个平台,我们能够开发一些插件,来处理CSS.热门插件如a ...

  5. jmeter-实用插件

    1.官网下载插件管理工具 https://jmeter-plugins.org/downloads/all/ 2.将jar包放在jmeter的 lib/ext文件夹下 3.重启jmeter 4.点击“ ...

  6. beego 实现API自动化文档

    安装beego和bee工具 1.beego安装 go get -u github.com/astaxie/beego 2.安装bee工具 go get -u github.com/beego/bee ...

  7. 面向对象【林老师版】：__init__定制自己独有的特征（三）

    本节内容 1.是如何产生对象 2.实例化的步骤 3.类即类型 一.是如何产生对象? __init__方法用来为对象定制对象自己独有的特征 1.stu1=LuffyStudent()调用报错 1.代码 ...

  8. Java 读取propertoes文件

    我一直不懂,Java里面的路径是咋样的,怎么找到我的资源文件? 直到我看到了这篇文件,写的是真棒.这篇文章  看完之后,豁然开朗的感觉 下面做些笔记,首先,Java有一个targer文件,下面有一个c ...

  9. 立个Flag不学好PHP誓不罢休

    3年前从部队退伍退伍回来,就莫名其秒的爱上的编程,复学期间我几乎忘记了本专业的知识(原本我是读书籍设计的),从刚刚开始的C程序开始,一路走到一拿起书本我就几乎是睡着的状态,后来就开始了视频的学习之路, ...

  10. 阅读：ECMAScript 6 入门(4)

    参考 ECMAScript 6 入门 ES6新特性概览 ES6 全套教程 ECMAScript6 (原著:阮一峰) JavaScript 教程 重新介绍 JavaScript(JS 教程) 数组的扩展 ...