今天主要是说一下css样式表!ＨＴＭＬ结合他使用可以是ＨＴＭＬ页面变得很绚丽多彩！

先简单介绍一下为什么要使用ＣＳＳ（Cascading Style Sheets）层叠样式表！

　　１．因为CSS样式表可以定义HTML 元素如何显示

　　2.所有主流浏览器都支持CSS样式表

　　3.样式表极大地提高了工作效率

　　4.并且,多重样式表可以层叠为一个

那如果当同一个HTML元素被不只一个样式定义的时候,会使用哪一个样式呢?

一般而言,所有样式会根据下面的规则层叠于一个新的虚拟样式表,其中第4条拥有最高优先权.

　　1.浏览器缺省设置

　　2.外部样式表

　　3.内部样式表(位于<head>标签内部)

　　4.内联样式(在HTML元素内部)

因此,内联样式拥有最高的优先权,这意味着它将优先于以下的样式声明:<head>标签中的样式声明,外部样式表中的声明,或者浏览器的样式声明(缺省值)!

下面在介绍以下他的语法:

　　css规则主要又两个部分构成:选择器,及一条及多条声明.

 div{

     width:100px;

     height:100px;

 }

选择器通常是您需要改变样式的HTML元素.

每条声明由一个属性和一个值组成!

属性(property)是您希望设置的样式属性(style attribute).每个属性有一个值.属性和值被冒号分开.

下面这行代码的作用是将H1元素内的文字颜色定义为红色,同时将字体大小设置为14像素.

在这个例子中.h1是选择器,color和font-size是属性.red和14px是值.

h1{

    color:red;

    font-size:14px;

}

　　下这幅图特意为您展示了上面这段代码的结构:

值的不同写法和单位:

除了英文单词red,我们还可以 使用十六进制的颜色值 #ff0000;

p{

    color:#ff0000;

}

　　我们还可以通过两种方法使用RGB值:

p{

    color:rgb(255,0,0);

}

p{

    color:rgb(100%,0%,0%);

}

记得写引号:

提示:如果值为若干单词,则要给值加引号;

p{

　　font-family:"sans serif";

}

今天天就先到这里!明天再见哦!!!

css简单了解的更多相关文章

  1. css3 calc()：css简单的数学运算-加减乘除

    css3 calc():css简单的数学运算–加减乘除 多好的东西啊,不用js,一个css就解决了. .box{ border:1px solid #ddd; width:calc(100% - 10 ...

  2. HTML与CSS简单页面效果实例

    本篇博客实现一个HTML与CSS简单页面效果实例 index.html <!DOCTYPE html> <html> <head> <meta charset ...

  3. CSS简单使用

    CSS简单使用 标签 : 前端技术 CSS(Cascading Style Sheet : 层叠样式表单)用来定义网页显示效果. 可以解决HTML代码对样式定义的重复,提高后期样式代码的可维护性,并增 ...

  4. 前端学习日记之HTML、CSS 简单总结

    前端学习日记之HTML.CSS 简单总结 标签(空格分隔): html css 前端学习日记 html超文本标记语言 一. h标题标签 h1-h7 <!DOCTYPE html> < ...

  5. css简单实现带箭头的边框

    原文地址 https://tianshengjie.cn/artic... css简单实现带箭头的边框 普通边框 <style> .border { width: 100px; heigh ...

  6. 3.8.1 HTML与CSS简单页面效果实例

    HTML与CSS简单页面效果实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  7. 有趣的css—简单的下雨效果2.0版

    简单的下雨效果2.0版 前言 笔者上一篇发布的文章有趣的css-简单的下雨效果中有位老哥给我提了一个很棒的建议,大致意思是波纹应该产生于雨滴的消失处. 这是按照老哥的建议完善后的效果图: 由于我制作G ...

  8. jQuery+CSS 简单代码实现遮罩层( 兼容主流浏览器 )

    /* ** jQuery版本:jQuery-1.8.3.min.js ** 浏览器:Chrome( v31.0.1650.63 m ),IE11,Firefox( v32.0.1 ),IETester ...

  9. JS+CSS简单实现DIV遮罩层显示隐藏【转藏】

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. css 简单 返回顶部 代码及注释说明

    1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 <a href="#top ...

随机推荐

  1. 【2017-04-24】winform基础、登录窗口、窗口属性

    一.winform基础  客户端应用程序:C/S 客户端应用程序可以操作用户电脑中的文件,代码要在用户电脑上执行,吃用户电脑配置. 窗体是由控件和属性做出来的 控件:窗体里所放的东西."视图 ...

  2. MySQL性能优化之参数配置

    1.目的: 通过根据服务器目前状况,修改Mysql的系统参数,达到合理利用服务器现有资源,最大合理的提高MySQL性能. 2.服务器参数: 32G内存.4个CPU,每个CPU 8核. 3.MySQL目 ...

  3. Typecho - MyTagCloud标签云插件

    一.前言: 标签云是博客.CMS类系统的常见功能,读者可以根据标签快速的查找和浏览自己喜欢的文章.个人很喜欢Typecho的简洁,但对于后台不能控制前台标签栏目的显示还是略表遗憾.令人高兴的是Type ...

  4. 查询表达式和LINQ to Objects

    查询表达式实际上是由编译器“预处理”为“普通”的C#代码,接着以完全普通的方式进行编译.这种巧妙的发式将查询集合到了语言中,而无须把语义改得乱七八糟 LINQ的介绍 LINQ中的基础概念 降低两种数据 ...

  5. 详解全站 HTTPS 访问优化

    HTTPS 协议就是 HTTP+SSL/TLS,即在 HTTP 基础上加入 SSL /TLS 层,提供了内容加密.身份认证和数据完整性3大功能,目的就是为了加密数据,用于安全的数据传输. HTTPS ...

  6. Hadoop技术在商业智能BI中的应用

    Hadoop是个很流行的分布式计算解决方案,是Apache的一个开源项目名称,核心部分包括HDFS及MapReduce.其中,HDFS是分布式文件系统,MapReduce是分布式计算引擎.时至今日,H ...

  7. SVN提交后自动推送消息到钉钉群

    钉钉设置机器人配置 1.进入配置机器人入口 2.添加机器人 3.测试WebHook请求 本人使用Postman进行测试 4.配置SVN 4.1 配置 Pre-commit hook 设置提交内容必须包 ...

  8. hadoop配置文件的作用

    core-site.xml <property> //指定hdfs的主端口 namenode要放在哪台机器上 <name>fs.defaultFS</name> & ...

  9. (5)微信二次开发 之 XML格式数据解析

    1.首先理解一下html html的全名是:HyperText Transfer markup language 超级文本标记语言,html本质上是一门标记(符合)语言,在html里,这些标记是事先定 ...

  10. Jdk1.6 JUC源码解析(12)-ArrayBlockingQueue

    功能简介: ArrayBlockingQueue是一种基于数组实现的有界的阻塞队列.队列中的元素遵循先入先出(FIFO)的规则.新元素插入到队列的尾部,从队列头部取出元素. 和普通队列有所不同,该队列 ...