和 HTML 类似,CSS 也不是真正的编程语言,甚至不是标记语言。它是一门样式表语言,这也就是说人们可以用它来选择性地为 HTML 元素添加样式。

CSS规则集

  • 选择器(Selector):元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素。

  • 声明(Declaration):如 color: red; 用来指定添加样式元素的属性

  • 属性(Properties):本例中 color 就是<p>元素的属性。

  • 属性的值(Property value):从指定属性的众多外观中选择一个值。

常用CSS选择器

选择器的种类远不止于此,更多信息请参阅 选择器

选择器 示例
类型选择器 h1 { }
通配选择器 * { }
类选择器 .box { }
ID选择器 #unique { }
标签属性选择器 a[title] { }
伪类选择器 p:first-child { }
伪元素选择器 p::first-line { }
后代选择器 article p
子代选择器 article > p
相邻兄弟选择器 h1 + p
通用兄弟选择器 h1 ~ p
联合选择 p, li, h1 { }
  • CSS选择器优先级:范围越小优先级越高

  • ! important(强制优先) > 行内样式 > id选择器 > 类选择器 > 标签通配符 > 浏览器默认属性

盒子模型与常用属性

CSS 布局主要就是基于盒模型的。每个占据页面空间的块都有这样的属性:

  • padding:即内边距,围绕着内容(比如段落)的空间。

  • border:即边框,紧接着内边距的线。

  • margin:即外边距,围绕元素外部的空间。

  • width :元素的宽度

  • background-color :元素内容和内边距底下的颜色

  • color :元素内容(通常是文本)的颜色

  • text-shadow :为元素内的文本设置阴影

  • display :设置元素的显示模式(如给与块级元素行为)

常用字体与文本样式:

  • font-family:字体

  • font-size:字体大小

  • line-height:行高

  • letter-spacing:字间距

最新文章

  1. 数据访问模式:Identity Map(标识映射)模式
  2. lnmp下启动mysql报错 The server quit without updating PID file
  3. jenkins + Git 搭建持续集成环境
  4. 如何删除或重置spfile中的参数
  5. factor graph model
  6. MQTT开发小记(一)
  7. 3 B. Lorry
  8. 台式电脑部署xen虚拟化的各种问题
  9. CKEditor + CKFinder 实现编辑上传图片配置
  10. SVM支持向量机算法
  11. [Poi2000]公共串 &amp;&amp; hustoj2797
  12. 紧急求助!配置SMTP插件出错,SMTP connect() failed
  13. 《R语言入门与实践》第七章:程序
  14. jenkins经验
  15. 安卓开发_计时器(Chronometer)的简单使用
  16. 学习记录特别篇之sql,类的继承
  17. 6.翻译:EF基础系列---什么是EF中的实体?
  18. 【CentOS】centos7 稳定使用版本,centos镜像的下载
  19. C# listview控件右击导出数据到txt文本
  20. (Python mysql驱动的解决)_mysql.c(42) : fatal error C1083: Cannot open include file: &#39;config-win.h&#39;:问题的解决

热门文章

  1. Java程序操作Hive
  2. 树与图的DFS与BFS
  3. 牛客NC15879 A Simple Problem
  4. 【noi 2.6_8786】方格取数(DP)
  5. 一篇文章图文并茂地带你轻松学完 JavaScript 设计模式(二)
  6. vue中获取元素并控制相应的dom
  7. confirm() :带有指定消息和 OK 及取消按钮的对话框
  8. Netty (一) IO 基础篇
  9. TensorFlow+restore读取模型
  10. 加密算法大全图解 :密码体系,对称加密算法,非对称加密算法,消息摘要, Base64,数字签名,RSA,DES,MD5,AES,SHA,ElGamal,