今天主要是说一下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. HTML5 进阶系列：indexedDB 数据库

    前言 在 HTML5 的本地存储中,有一种叫 indexedDB 的数据库,该数据库是一种存储在客户端本地的 NoSQL 数据库,它可以存储大量的数据.从上篇:HTML5 进阶系列:web Stora ...

  2. [Git]05 如何使用分支

     作者:Younger Liu, 本作品采用知识共享署名-非商业性使用-相同方式共享 3.0 未本地化版本许可协议进行许可. 几乎每一种版本控制系统都以某种形式支持分支.使用分支意味着你可以从开发 ...

  3. Laravel 5.2 教程 - 数据填充

    一.简介 Laravel提供的填充类(seed),可以让大家很容易的实现填充测试数据到数据库.所有的填充类都位于database/seeds目录.填充类的类名完全由你自定义,但最好还是遵循一定的规则, ...

  4. 蓝桥杯-买不到的数目-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  5. SQL SERVER大话存储结构（2）_非聚集索引如何查找到行记录

              如果转载,请注明博文来源: www.cnblogs.com/xinysu/   ,版权归 博客园 苏家小萝卜 所有.望各位支持!      1 行记录如何存储     这里引入两个 ...

  6. Docker - 访问仓库

    仓库与注册服务器 仓库(Repository)集中存放镜像的项目或目录. 注册服务器(Registry)管理仓库的服务器,服务器上可以有多个仓库,每个仓库有多个镜像. 例如:在仓库地址docker.i ...

  7. php学习之string

    1. php str_replace函数: str_replace() 函数使用一个字符串替换字符串中的另一些字符. str_replace(find,replace,string,count) fi ...

  8. hdu1054 Strategic Game 树形DP

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1054 思路:树形DP,用二分匹配也能解决 定义dp[root][1],表示以root 为根结点的子树且 ...

  9. [刷题]算法竞赛入门经典(第2版) 6-7/UVa804 - Petri Net Simulation

    题意:模拟Petri网的执行.虽然没听说过Petri网,但是题目描述的很清晰. 代码:(Accepted,0.210s) //UVa804 - Petri Net Simulation //Accep ...

  10. 利用有限自动机(finite automata)进行模式匹配

    一.有限自动机定义及基本术语: 一个有限自动机 M 是一个5元组(Q, ,A, Σ, δ),其中: Q 是所有状态的有限集合;  ∈ Q (属于)是初始状态; A ⊆ Q (子集)是接受状态的集合; ...