菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
202
0

CSS:CSS基础

原创
05/13 14:22
阅读数 67041

和 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:字间距

发表评论

0/200
202 点赞
0 评论
收藏