css层叠样式表,主要作用就是解决内容与表现分离的问题。html标签有自己的意义当然也是有自己的默认样式的,但有时候我们想修改他的样式,这时候就需要了css。

例:给字体加上颜色,我们有如下几种方法:

  1、<h1><font color="red" size="11px">123</font></h1>

  2、在head里面加上style:

<style type="text/css">
                  h1{color: blue;font-size: 50px;}
           </style>

  3、<h1 style="color:#ff0">123</h1>

  4、在head里面加上link引入外部css

在这四种写入css的方式中:第一种方式现在基本不用了;第二种样式是“内部样式”;第三种是“内联样式”;最后一种是“外部样式”;优先级:第一种>第三种>第二种>第四种。

!important是为了提升样式优先级,不到万不得已不要用了,因为样式生效的话是依次执行的,也就是后面的样式会覆盖前面的。

css选择器:

  1、标签选择器,如:h1{属性:值}

  2、分组选择器,如:h1,p{属性:值};指h1和p元素的共有样式

  3、id选择器,如:#标签的id属性值(id值不能重复){属性:值}

  4、派生选择器,如:h1 p{属性:值};指h1里面的p元素的样式                               h1{color: blue;font-size: 50px;}

  5、类选择器,如:.标签的类属性值 {属性:值}

  6、伪类选择器,如:a: hover{属性:值}

选择器间可以组合使用

css具体写法:

以上均为个人观点,欢迎指正、讨论。

css简单介绍的更多相关文章

  1. CSS简单介绍及应用

    CSS的简介 概述: Cascading Style Sheets, 层叠样式表. 作用: 用来美化页面的. 分类: 行内样式: //直接写在元素(html的标签)中的样式. 内部样式: //写在&l ...

  2. WeX5的简单介绍及UI的简单讲解

    WeX5的简单介绍及UI的简单讲解 (2016-01-13 14:49:05) 标签: it 分类: WeX5的初步自学 一.WeX5的简单讲解 1.WeX5是前端快速开发框架,可开发跨端运行应用.是 ...

  3. HTML简单介绍及举例

    超文本标记语言(Hyper Text Markup Language,简称HTML)是为"网页创建和其他可在网页浏览器中看到的信息"设计的一种标记语言.HTML被用来结构化信息,也 ...

  4. css简单了解

    今天主要是说一下css样式表!HTML结合他使用可以是HTML页面变得很绚丽多彩! 先简单介绍一下为什么要使用CSS(Cascading Style Sheets)层叠样式表! 1.因为CSS样式表可 ...

  5. webpack入门篇--1.简单介绍

    简单介绍: webpack是一个模块打包工具,给js准备的打包工具,可以把很多的模块打包成很少的文件 目标: 1.切分依赖数,分到不同代码块里,按需加载,懒加 载 2.任何静态资源都可以被视为一个模块 ...

  6. Eclipse rap 富客户端开发总结(1) :rap简单介绍和开发环境搭建

    一.rap简单介绍 1 基本概念     RAP可以让开发人员使用JAVA API和按照Eclipse 插件的开发模式构建基于AJAX的Web 2.0应用程序, RAP的工作原理是采用交叉编译的方式将 ...

  7. Fiddler使用简单介绍

     一,fiddler简介 1.1,什么是fiddler Fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯,设置断点,查看所有的"进出&qu ...

  8. jQuery系列 第一章 jQuery框架简单介绍

    第一章 jQuery框架简单介绍 1.1 jQuery简介 jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极大的简化了开发人员对HTML文档,DOM,事 ...

  9. 浏览器中 F12 功能的简单介绍

    chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿! 首 ...

随机推荐

  1. 集合运算(UNION)

    表的加法 集合运算:就是满足统一规则的记录进行的加减等四则运算. 通过集合运算可以得到两张表中记录的集合或者公共记录的集合,又或者其中某张表中记录的集合. 集合运算符:用来进行集合的运算符. UNIO ...

  2. Step by Step 开发dynamics CRM

    这里是作为开发贴的总结. 现在plugin和workflow系列已经终结. 希望这些教程能给想入坑的小伙伴一些帮忙. CRM中文教材不多, 我会不断努力为大家提供更优质的教程. Plugin 开发系列 ...

  3. MAMP PRO mysql无法启动

    mac上可能勾选了软件自动更新,然后MAMP PRO 升级了. 升级了之后,mysql启动就出问题了,看报错日志: InnoDB: The error means the system cannot ...

  4. 接口测试与Postman

    阅读目录 1.接口测试简介 1.1 什么是接口测试  1.2 接口测试的必要性 1.3 接口测试流程 1.4 接口文档 1.5 接口测试用例设计 1.6 接口测试用例模板 2.Postman 2.1 ...

  5. php curl选项列表(超详细)

    第一类:对于下面的这些option的可选参数,value应该被设置一个bool类型的值:选项可选value值备注 CURLOPT_AUTOREFERER当根据Location:重定向时,自动设置hea ...

  6. JavaScript响应式轮播图插件–Flickity

    简介 flickity是一款自适应手机触屏滑动插件,它的API参数很丰富,包括对齐方式.循环滚动.自动播放.是否支持拖动.是否开启分页.是否自适应窗口等. 在线演示及下载 演示地址 下载页面 使用方法 ...

  7. Golang - 处理字符串

    目录 Golang - 处理字符串 1. 字符串操作 2. 字符串转换 Golang - 处理字符串 1. 字符串操作 func Contains(s, substr string) bool 字符串 ...

  8. python 用PIL Matplotlib处理图像的基本操作

    在 python 中除了用 opencv,也可以用 matplotlib 和 PIL 这两个库操作图片.本人偏爱 matpoltlib,因为它的语法更像 matlab. 一.matplotlib 1. ...

  9. 0809MySQL实战系列:大字段如何优化|数据存储结构

    转自https://yq.aliyun.com/articles/59256?spm=5176.100239.blogcont59257.9.5MLR2d 摘要: 背景 线上发现一张表,1亿的数据量, ...

  10. caffe中的前向传播和反向传播

    caffe中的网络结构是一层连着一层的,在相邻的两层中,可以认为前一层的输出就是后一层的输入,可以等效成如下的模型 可以认为输出top中的每个元素都是输出bottom中所有元素的函数.如果两个神经元之 ...