css 层叠样式表(英文名:Cascading Style Sheets),主要用于美化网页

1、css的表现形式

  1.1 行内样式(内嵌样式)

    写在标签内的样式,写在标签的开始部分的内部,style属性当中,即<div style=" width="100px";height="100px" "></div>

  1.2 内部样式(内联样式)

    写在HTML页面中,存放于<head></head>标签当中,样式则写在style标签中。

    <style>

      选择器{

        属性名2:属性值2;

        属性名2:属性值2;

        ......

      }

    </style>

    注意:style标签不要写在title标签上方

  1.3 外部样式(外联样式)

    写在css文件中,用的话,直接导入

    <link type="text/css" rel="stylesheet" href="文件所在的路径" />

2、css三大特性:

  2.1 继承

    父级的样式会被子级给继承。

    注意:!important不会被继承

  2.2 层叠

    当样式发生冲突的时候,样式会产生覆盖(层叠);

    解决方法为判断优先级的先后顺序或计算权重。

  2.3 优先级

    优先级的先后顺序为:

    !important > 内联样式 > ID > class(类) > 标签 > *(初始化) > 继承;

    如果记不清楚的话,可以用权重来计算,

    !important,权重值为10000;

    行内样式,例如:<div style="样式属性名:样式属性值;···"></div>,权重值为1000;

    ID名,例如:<p id="p"></p>,,权重值为100;

    class,例如:<p class="p"></p>,权重值为10;

    标签,例如:p、span、i、em等等,权重值为1;

    通配符(*)的权重值为0;

    仅仅作为参考,不能用做实际的计算。

CSS入门介绍(一)的更多相关文章

  1. CSS入门介绍

    一.背景 这里将陆续介绍前端CSS中相关知识,先介绍CSS2.1,后续会介绍CSS3的相关属性,通过该系列的文章,希望能给准备转战前端的人员一些帮助,同时也帮助自己梳理知识,文章中如有错误,欢迎指出. ...

  2. CSS入门介绍(二)CSS选择器

    css选择器 什么是选择器? 选择器是你构造好网页的结构,需要给这些结构赋予样式,这时候就需要用到选择器,利用选择器将元素与样式一一对应:两者的对应关系可以是一对一,一对多,多对一. 选择器的分类: ...

  3. html与css入门经典视频教程 千锋说要这样学

    PHP初学者看过来,老师带来的PHP入门经典视频教程,带你轻松入门,学习PHP就是这么简单. 很多人不理解为什么学习PHP要先学习HTML基础和CSS,其实PHP作为服务器的脚本语言,在开发过程中用于 ...

  4. [Python爬虫] 在Windows下安装PhantomJS和CasperJS及入门介绍(上)

    最近在使用Python爬取网页内容时,总是遇到JS临时加载.动态获取网页信息的困难.例如爬取CSDN下载资源评论.搜狐图片中的“原图”等,此时尝试学习Phantomjs和CasperJS来解决这个问题 ...

  5. [Python爬虫] scrapy爬虫系列 <一>.安装及入门介绍

    前面介绍了很多Selenium基于自动测试的Python爬虫程序,主要利用它的xpath语句,通过分析网页DOM树结构进行爬取内容,同时可以结合Phantomjs模拟浏览器进行鼠标或键盘操作.但是,更 ...

  6. CSS入门教程——定位(positon)

    CSS入门教程——定位(positon) CSS定位在网页布局中是起着决定性作用.   定位 CSS的定位功能是很强大的,利用它你可以做出各种各样的网页布局.本节就介绍一些CSS常用的定位语句. 1. ...

  7. React入门介绍(1)-ReactDOM.render()等基础

    React入门介绍-ReactDOM.render()等基础 首先,React是一个用于构建用户界面的Javascript库,但Peact并不是一套完整的MVC或MVVM的框架,它仅涵盖V-view视 ...

  8. 第五篇 CSS入门 明白 三种嵌套形式,三种常用控制器

    CSS入门 css是 层叠式样式表   css的作用是什么呢?举个抽象的例子啊,HTML是人,CSS则是衣服...   css给html穿上衣服,有三种形式: 内嵌.内联.外联. 这三种形式,优先级为 ...

  9. CSS入门指南-4:页面布局

    这是<CSS设计指南>的读书笔记,用于加深学习效果. display 属性 display是 CSS 中最重要的用于控制布局的属性.每个元素都有一个默认的 display 值.对于大多数元 ...

随机推荐

  1. elk 中kafka启动脚本和配置文件

    kafka启动脚本和配置文件 # more kafka #!/bin/sh # Init script for kafka ### BEGIN INIT INFO # Provides: kafka ...

  2. 1.4分布式-通讯协议TCP/IP

    服务器和浏览器的通讯依靠http协议,今天就来分析一下http协议的具体内容以及https的加密过程.除了这些协议,为了增加服务器和浏览器交互的可拓展性,也出现了rest风格的请求方式,方便调用接口. ...

  3. 无连接运输的UDP、可靠数据传输原理、面向连接运输的TCP

    由[RFC 768]定义的UDP只是做了运输协议能够做的最少工作.除了复用/分解功能极少量的差错检测外,它几乎没有对IP增加别的东西.如果应用程序开发人员选择UDP而不是TCP,则该应用程序差不多就是 ...

  4. Word中页眉、页码设置

    本篇博文简单介绍一下文档中页眉.页码设置的问题 一个项目中,封面一般不需要页眉,要关闭首页的页眉,可以在"页眉和页脚工具->选项->首页不同"可以如下设置: 图 1关闭 ...

  5. WEB内容换行

    word-wrap:break-word 单词间换行 word-break:break-all 单词内也可以换行 white-space属性指定元素内的空白怎样处理 normal 默认.空白会被浏览器 ...

  6. [物理学与PDEs]第1章第6节 电磁场的标势与矢势 6.3 例 --- 电偶极辐射

    1. 偶极子: 相距为 $l$, 带电量分别为 $\pm q$ 的一对电荷组成的系统. 称 $$\bex {\bf m}=q{\bf l} \eex$$ 为电偶极矩, 其中 ${\bf l}$ 为 $ ...

  7. LINQ to SQL 的常见异常及解决办法

    Ø  简介 本文主要介绍 LINQ to SQL 中常见的异常,以及对应的解决办法.包括以下内容: 1.   左连接情况下,右表非空类型字段可能抛出异常 1.   左连接情况下,右表非空类型字段可能抛 ...

  8. Javaweb学习笔记——(二十八)——————Servlet3.0、动态代理、类加载器

    web最后一天:完了. Servlet3.0          一.要求         1.MyEclipse10.0或以上版本         2.发布到Tomcat7.0或以上版本 二.步骤   ...

  9. 练习:javascript淡入淡出半透明效果

    划过无透明 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  10. pc端,移动端css重置样式

    pc: html{font-family:"Microsoft YaHei UI","Microsoft YaHei",sans-serif;-ms-text- ...