一、CSS基本概念：

CSS（Cascading Style Sheet，叠层样式表），作用是美化HTML网页。

/*注释区域*/    此为注释语法

二、样式表的分类

1、内联样式表（和html联合显示，控制精确，但是可重用性差，冗余多）

例：<p style="font-size:14px;">内联样式表</p>

以上就是一个简单的内联样式表，用在<body>中的标签中，相当于style附在标签中，只改变该标签p中的样式和格式。

2、内嵌样式表

例：<style type="text/css">

p    //格式对p标签起作用

{ 样式；

}

</style>

这是一个内嵌样式表，就是把<style>样式单独抽出来，放在<head>中，独立控制p标签的样式和格式。

3、外部样式表（显而易见，就是独立于html的文件，但是仍然需要html调用该外部样式表才能发挥其作用）

需要新建一个CSS文件，用来单独存放样式表。当在html中调用此样式表时，需要在html文件右击---CSS样式--附加样式表。当连接成功后，在html文件<head>中会出现<link..>的类似连接路径的标签。

4、有些标签有默认的边距，一般写样式表代码的时候都会先去除（也可以设置其他样式），去除边距如下：

<style type="text/css">

*    //格式对所有标签起作用

{

  margin=0px auto;//auto表示居中，
 padding=0px;

}

</style>
三种方法的优先级：

        内联式 > 嵌入式 > 外部式

        就近原则，嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面

        以上规则适用于相同权值的情况
三、选择器

1.标签选择器。用标签名做选择器。

2.class选择器。都是以“.”开头。

3.ID选择器。以“#”开头。

<div id="样式名">

ID选择器只能在文档中使用一次，类选择器则可以使用多次

 一个元素可以使用多个类选择器同时设置多个样式，而ID选择器是不可以的，如 <span class="stress bigsize">三年级</span>

4.复合选择器

（1）用“，”隔开，表示并列。

（2）用空格隔开，表示后代。

（3）筛选“.”。

CSS 分组选择符

    多个标签使用逗号隔开：

        h1,span{color:red;}

    相当于：

        h1{color:red;}

        span{color:red;}

注：选择器作用到那个标签都那个标签起作用，有的要直接做用到某个标签上，才能起到作用

 

CSS样式表基础知识、样式表的分类及选择器的更多相关文章

  1. css+js+html基础知识总结

    css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...

  2. QT 样式表基础知识

    1. 何为Qt样式表2. 样式表语法基础3. 方箱模型4. 前景与背景5. 创建可缩放样式6. 控制大小7. 处理伪状态8. 使用子部件定义微观样式 8.1. 相对定位    8.2. 绝对定位 摘要 ...

  3. SQL server基础知识（表操作、数据约束、多表链接查询）

    SQL server基础知识 一.基础知识 (1).存储结构:数据库->表->数据 (2).管理数据库 增加:create database 数据库名称 删除:drop database ...

  4. oracle 基础知识(十一)----表空间结构

    一,逻辑结构图 二.tablespace 01,Oracle表空间 它是一个逻辑的概念,它在物理上是不存在的. 02,oracle 存储结构 03.表空间特性 一个数据库可以包含多个表空间,一个表空间 ...

  5. oracle 基础知识(二)-表空间

    一,表空间 01,表空间? Oracle数据库是通过表空间来存储物理表的,一个数据库实例可以有N个表空间,一个表空间下可以有N张表.有了数据库,就可以创建表空间.表空间(tablespace)是数据库 ...

  6. 关于CSS你应该知道的基础知识 - 样式应用篇

    上一篇简单总结了一下选择器,如果一个元素被多个选择器选中,元素的样式就会以级联方式被应用到.要搞清最终那个样式被应用到元素上了,首先要明白引用CSS代码的几种方式. CSS代码引用方式 如何应用CSS ...

  7. Selenium基础知识(四)表单切换

    在测试过程中,经常会碰到frame和iframe,嵌套等情况 这种情况下直接通过id,name等等是无法定位到的 好在selenium替我们想到了这个问题switch_to方法解决问题 switch_ ...

  8. python 基础知识3-列表元祖

    1.列表增. # append 追加,给列表的最后面追加一个元素 li = ['alex','wufa','太白','大白'] li.append('教师') li.append(1) print(l ...

  9. CSS的一些基础知识

    <!DOCTYPE html><html><head><meta charset="utf-8"><title>标题&l ...

随机推荐

  1. python 数字类型

    数值类型:整型(int)-通常被称为是整型或整数,是正或负整数,不带数点.长整型(long integers)-无限大小的整数,整数最后是一个大写或者小写的L浮点型(floadting point r ...

  2. 树莓派高级GPIO库，wiringpi2 for python使用笔记（一）安装

    网上的教程,一般Python用RPi.GPIO来控制树莓派的GPIO,而C/C++一般用wringpi库来操作GPIO,RPi.GPIO过于简单,很多高级功能不支持,比如i2c/SPI库等,也缺乏高精 ...

  3. Linux同平台Oracle数据库整体物理迁移

    Linux同平台数据库整体物理迁移需求:A机器不再使用,要将A机器的Oracle迁移到B机器.之前写过类似需求的文章: http://www.linuxidc.com/Linux/2015-05/11 ...

  4. linux中find批量删除空文件及空文件夹

    linux下批量删除空文件(大小等于0的文件)的方法  代码如下 复制代码 find . -name "*" -type f -size 0c | xargs -n 1 rm -f ...

  5. 第25周五迷茫定位&转行理论建议

    今天下午请假办了无房证明和单身证明,准备开始贷款买房的征程,在犹豫纠结中我选择推进这个事情,之前的经验告诉我生活中可以面临改变或不改变境况的选择是要尽可能的选择改变,因为我还年轻.回来后知乎上看了一个 ...

  6. [置顶] ※数据结构※→☆线性表结构（list）☆============单向链表结构（list single）（二）

    单向链表(单链表)是链表的一种,其特点是链表的链接方向是单向的,对链表的访问要通过顺序读取从头部开始:链表是使用指针进行构造的列表:又称为结点列表,因为链表是由一个个结点组装起来的:其中每个结点都有指 ...

  7. Codeforces 235B Let&#39;s Play Osu! 概率dp（水

    题目链接:点击打开链接 给定n表示有n个格子 以下每一个格子为O的概率是多少. 对于一段连续 x 个O的价值就是 x*x ; 问: 获得的价值的期望是多少. 思路: 把公式拆一下.. #include ...

  8. Android Develop【转】

    [Android Develop]   Android实现伸缩弹力分布菜单效果 摘要: 本文介绍下在Android中实现伸缩弹力分布菜单效果.关于这种菜单效果在IPhone中比较常见,效果比较酷.那么 ...

  9. What I Have Lived For（我为什么而活着-罗素）

    What I Have Lived For by Bertrand Russell Three passions, simple but overwhelmingly strong, have gov ...

  10. 全新安装mysql最新版本

    写在前面: 下面写的东西只是最近安装的一个说明,是在系统中没存在mysql的情况下安装的,后期会根据官方文档写一个详细有价值的文档 安装原理:利用mysql官方的mysql_apt-repositor ...