(接着上次博客的内容,现在我们进入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. 使用matplotlib库绘制函数图

    函数如下: z = x^2 * y / (x^4 +y^2) 代码如下: import numpy as np import matplotlib.pyplot as plt import mpl_t ...

  2. How to: Use the Entity Framework Model First in XAF 如何:在 XAF 中使用EF ModelFirst

    This topic demonstrates how to use the Model First entity model and a DbContext entity container in ...

  3. 微服务-Springboot+Redis缓存管理接口代码实现

    废话少说,上代码,结合代码讲解: 一.创建maven工程:导入依赖: <packaging>war</packaging><!--修改jdk的版本--><pr ...

  4. python从小白到大咖方便查看链接

    直通BAT面试题 PyCharm快捷键 一.python基础 01 python基础 02python中基本数据类型以及运算符 03流程控制之if,while,for 04基本数据类型内置方法一 05 ...

  5. 文件迁移到FileTable中

    看此文档前,先参考一下文档 https://blog.csdn.net/downmoon/article/details/24374609 环境:阿里云ECS SQL Server 2017 + De ...

  6. PC端视频播放器

    视频播放器:Potplayer 它是一款纯净的.无广告.极速

  7. IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值4

    6  鼠标光标属性 在网页中默认的鼠标指针只有两种,一种是最普通的箭头,另一种是当移动到链接上时出现的“小手”.但现在越来越多的网页都使用了CSS鼠标指针技术,当将鼠标移动到链接上时,可以看到多种不同 ...

  8. Python3字典update()方法

    描述 Python字典update()函数把字典参数dict2的key/value(键/值)对更新到字典dict里. update()方法语法: dict.update(dict2) 参数 dict2 ...

  9. Go 自定义类型来实现枚举类型限制

    今天使用iota 发现一个问题.定义别名类型的时候 调用函数报错.废话不多说,我们看一段示例(关于iota的用法这里就不介绍了,手册介绍滴比较详细): package main import &quo ...

  10. MacOS~jenkins里解决docker执行权限问题

    一 全局配置项设置 需要添加全局变量项,例如名称docker,路径/usr/local 添加一个jenkinsfile文件,用于运行docker命令 pipeline { agent any tool ...