今天主要是说一下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. Sencha+cordova 构造 华丽手机程序，并讲讲，在商用项目中经常用到的cordova插件（一）

    采用 Sencha Architect 3 ,编辑设计,我只想说一个结论,jq能搞的 Sencha touch也能做到(只是 设计思路 更面向对象,学习知识量大点而已 ,不理解 MVC 就不用选了), ...

  2. vim 字符串替换整理

    公司项目测试,要在vi编辑其中进行多路径修改,这时候用到了字符串替换的知识,在这里我自己整理了一下. 一.基本内容替换,无特殊符号 :s/old/new/  替换当前行第一个 old 为 new   ...

  3. 安装php提示 configure: error: Cannot find OpenSSL's libraries 解决方案

    一次在安装php7其中提示错误信息 configure: error: Cannot find OpenSSL's libraries 出现这种有2中情况,一种是没有安装 openssl,另一种是安装 ...

  4. final修饰的变量是引用不能变还是对象的内容不能变？

    int a=1;此时a是变量: StringBuffer a=new StringBuffer();此时a就是引用变量,可以说是a引用String对象,通过a来操作String 对象 final St ...

  5. 清北Day 2

    清北第二天,感受到了来自这个世界的不友善,大概把没听过不会的"名词"记录下来就已经一面了,然后被大佬说这都是最基础的东西,就很皮,那就趁别人练习字符串的题的时候,来写波博客了,倒不 ...

  6. css 设置 checkbox复选框控件的对勾√样式

      效果 最终的样式,想要的效果:   我们要创建方框中的对勾,对于这一点,我们可以使用:after伪类创建一个新的元素,为了实现这个样式,我们可以创建一个5px * 15px的长方形并给他加上边框. ...

  7. java线程（一）

    java线程基础 什么是线程? 这里引用百度百科的一句话:"线程,有时被称为轻量级进程(Lightweight Process,LWP),是程序执行流的最小单元.一个标准的线程由线程ID,当 ...

  8. Swiper使用方法

    Swiper使用方法 1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件. <!DOCTYPE html> <html> <h ...

  9. springboot(十一)：Spring boot中mongodb的使用

    mongodb是最早热门非关系数据库的之一,使用也比较普遍,一般会用做离线数据分析来使用,放到内网的居多.由于很多公司使用了云服务,服务器默认都开放了外网地址,导致前一阵子大批 MongoDB 因配置 ...

  10. zoj1654 Place the Robots 二分图最大匹配

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=654 将每一行的包含空地的区域编号 再将每一列的包含空地的区域编号 然 ...