(接着上次博客的内容,现在我们进入css基础)
 
外部样式表  <link>
内部样式表  <style>
行内样式表  style  (多用于JS)
* css注释
  书写格式:/*   注释内容  */
 
* css规则
  选择器{
  属性:值;            (一条声明后面必须跟一个“  ;”)
  }
 
* css元素选择器
  书写格式:标签名{声明块};
  所有与该标记名匹配的元素,都将应用于该标签。
 
* css类选择器
  书写格式:. 类名 {声明块};
  类选择器是我们最常使用的选择器         
   使用原因:复用
  类选择器基于标签中的class属性进行书写的
 
* css  id 选择器
  书写格式:# id名 {声明块};
  id选择器具有唯一性,id的值不能重复使用
  一般多用于JS中使用
 
* *{   }    通配符
  可以选择所有元素
  margin  外边距
  padding 内边距
 
* 后代选择
  用空格表示
  例:ul    li{    }
 
* 子级选择
  用>符号表示
  例:ul > li{    }
 
* 并集选择
  用“ ,”隔开
  例:h1,h2,h3{    }
 
* 属性选择器
  多用于表单元素
  书写方式用【】把属性名和属性值给括起来
  例:[ herf="#" ]{    }
 
* 伪类选择器(伪类元素)
  :nth-child( )
  从上往下数的第几个,括号里填写需要选中的数量名
  例:ul>li:nth-child( 3 ){  }
 
  :nth-last-child( )
  从下往上数的第几个,括号里填写需要选中的数量名
  例:ul>li:nth-last-child( 3 ){  }
 
  :nth-child( n )
  从0开始算,n代表的倍数,在n前面加上数子得到你需要的倍数
  例:ul>li:nth-child( 3n ){  }
 
  若括号里填odd或者even,则表示奇数或者偶数
  odd:奇数         even:偶数
 
* 用于a标签的伪类元素
  a:link{   }  未访问的样式
  a:visited{  }    访问后的样式
  a:hover{  }     当鼠标移入或者悬停时的样式
  a:active{  }      点击时的样式
  如果4个样式需要同时出现,那么书写顺序为  l,v,h,a
 
* 伪元素
  before   在什么之前
  after    在什么之后
  例:a::before {  };
  ​        a::after {  };
 
  first-letter     首字母的变化
  例:h1::first-letter{  };
 
* 伪类元素和伪元素的区别
  伪类元素由一个“ :”隔开
  伪元素由两个“::”隔开,但为了兼容第版本的浏览器通常用 “ :”
 
* 声明冲突
  指属性相同,值不同,就是声明冲突
* 层叠
  :层叠是一种机制,用于解决css 声明冲突
  层叠过程:比较优先级,比较特殊性,比较源次序
* 比较优先级
  !important    重要声明
  若属性后跟了重要声明则表示它优先,否则就是普通声明
  例:color:red   !important  ;
 
* 比较特殊性
  |                   | 嵌入 | id   | class | 元素 |
  | ----------------- | ---- | ---- | ----- | ---- |
  |                   | a    | b    | c     | d    |
  | style             | 1    | 0    | 0     | 0    |
  | id                | 0    | 1    | 0     | 0    |
  | calss,属性,伪类 | 0    | 0    | 1     | 0    |
  | 元素,伪元素      | 0    | 0    | 0     | 1    |
  | 通配符            | 0    | 0    | 0     | 0    |
  | ! important       | 最高 | 最高 | 最高  | 最高 |
 
* 继承
  子元素会自动拥有父元素的某些css属性,文本类型会被继承
* 常见的字符
  &nbsp:  空格
  &lt:小于符号
  &gt:大于符号
  &copy:版权符号
  &amp:并且符号

css发展史的更多相关文章

  1. 前端(二)之 CSS

    前端之 CSS 前言 昨天学习了标记式语言,也就是无逻辑语言.了解了网页的骨架是什么构成的,了解了常用标签,两个指令以及转义字符:其中标签可以分为两大类: 一类是根据标签内容可以分类单双标签,单标签指 ...

  2. CSS入门笔记

    CSS @author:伏月廿柒 Cascading Style Sheet 层叠级联样式表 CSS:表现(美化) 字体,颜色,边距,高度,宽度,背景图片,网页定位,网页浮动-- CSS发展史 CSS ...

  3. 《CSS 揭秘》作者Lea Verou:我喜欢分享开源的行业文化

    本文仅用于学习和交流,不用于商业目的.非商业转载请注明作译者.出处,并保留本文的原始链接:http://www.ituring.com.cn/art... 访谈嘉宾: Lea VerouW3C CSS ...

  4. Python 44 前端概述 、三剑客 、常用标签与分类

    1.前端三剑客是哪三位?文件的后缀内容?在前端开发中的功能是什么? HTML:   .htm .html   内容 CSS:   .css   效果 JS:   .js   行为 2.简述三剑客的主要 ...

  5. front-end——HTML5/CSS3基础

    概述 1.什么是前端 前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页,随着互联网技术的发展,html5,css3,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率,完 ...

  6. 020_CSS3

    目录 如何学习CSS 什么是CSS 发展史 快速入门 css的优势 三种CSS导入方式 拓展:外部样式两种写法 选择器 基本选择器 层次选择器 结构伪类选择器 属性选择器 美化网页元素 为什么要美化网 ...

  7. 19.CSS3

    前端三要素: HTML (结构)+ CSS(表现)+ JavaScript (行为) 一.什么是 CSS 1. CSS 是什么 CSS :Cascading Style Sheets ,层叠(级联)样 ...

  8. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  9. 前端html、Javascript、CSS技术小结

    简单地总结了一下前端用过的html.javascript.css技术,算是清点一下,做个大略的小结,为进一步的学习给个纲领. 一.HTML 由于HTML5的兴起,简单地判断一个网页是否是html5网页 ...

随机推荐

  1. MongoDB(一):NoSQL简介、MongoDB简介

    1. NoSQL简介 1.1 什么是NoSQL NoSQL(NoSQL= Not Only SQL),意即“不仅仅是SQL",是一项全新的数据库理念,泛指非关系型的数据库. 1.2 为什么需 ...

  2. typeORM 多对多关系不同情况的处理

    本文以RBAC权限管理中的用户和角色举例,两个实体存在多对多的关系,一个用户拥有多个角色,一个角色属于多个用户.typeorm的中文文档没有对自定义中间表的说明,发现英文有相关说明,但示例代码貌似有问 ...

  3. Git实战指南----跟着haibiscuit学Git(第三篇)

    笔名:  haibiscuit 博客园: https://www.cnblogs.com/haibiscuit/ Git地址: https://github.com/haibiscuit?tab=re ...

  4. MySQL Aborted_clients和 Aborted_connects状态变量详解

    Aborted_clients和 Aborted_connects状态变量详解   By:授客 QQ:1033553122 状态变量定义 Aborted_clients 因客户端消亡时未恰当的关闭连接 ...

  5. ionic项目使用Google FCM插件和Google maps插件打包android报错冲突问题

    这段时间在调FCM推送服务的插件 ,原本以为去年调通过,应该很容易,没想到还是出问题了.现将问题及解决方法整理如下,仅供参考: 先看打包报错截图:         详细报错信息:Please fix ...

  6. 023.[转] 尚硅谷_Maven笔记

  7. SQL Server 之事务执行,让语句在事务中执行

    BEGIN TRAN     BEGIN  TRY DELETE FROM dbo.表 INSERT INTO  dbo.表(    Id,   字段....) SELECTId,字段...    F ...

  8. python 基础学习笔记(4)--字典 和 集合

    **字典:** - [ ] 列表可以存储大量的数据,但是如果数据量大的话,他的查询速度比较慢,因为列表只能顺序存储,数据与数据之间的关联性不强.所以便有了字典(dict)这种容器的数据类型,它是以{} ...

  9. Test Case:: 12C ASMCMD New feature (Doc ID 1589249.1)

    Test Case:: 12C ASMCMD New feature (Doc ID 1589249.1) APPLIES TO: Oracle Database - Enterprise Editi ...

  10. A:linux基础章节导航

    本章的内容主要有: 模板机的安装 常用的小命令 find awk vim sed