随笔分类 - CSS
CSS学习记录
摘要：本章将介绍用于改变元素具体外观的 CSS 属性和值，包括元素四周的内边距、边框和外边距，以及可能出现的轮 8.1 基本元素框 文档中的每个元素都会生成一个矩形框，我们称之为元素框（element box）。这个框体描述元素在文档布局中所占的空间。 默认情况下，渲染出来的文档中，各矩形框的排布方式在视
阅读全文
摘要：7.1 元素框基础 不管什么元素，CSS 都假定每个元素都生成一个或多个矩形，我们称之为元素框（element box）。 各元素框的中心是内容区域，四周有可选的内边距、边框、轮廓和外边距。之所以说这些区域是可选的，是因为它们的宽度都可以设为零，即把它们从元素框上删除。 外边距、边框和内边距都分别针
阅读全文
摘要：文本和字体之间有什么区别呢？简单而言，文本是内容，而文字是用于显示内容的。 6.1 缩进和行内对齐 块级方向指当前书写模式放置块级元素的方向。 行内方向指块级元素中行内元素的书写方向。 6.1.1 缩进文本 CSS 借助 text-indent 属性缩进文本。 text-indent 属性把元素第一
阅读全文
摘要：5.1 字体族 CSS 定义了五种通用字体族： 衬线字体：这种字体中的字形宽度各异，而且有衬线。 无衬线字体： 这种字体中的字形宽度各异。 等宽字体：等宽字体中的字形宽度一样。一般用于显示编程代码或表格数据，这种字体的各个字符在横向上所占的空间是一样的。 草书字体：这种字体尝试模仿人类笔记或手写体。
阅读全文
摘要：4.1 关键字、字符串和其他文本值 样式表中的一切都是文本，但是有些类型的值表示的是字符串本身，而不是数字或颜色等。表示字符串本身的值有 URL 和让人难以置信的图像。 4.1.1 关键字 有时，声明的值用一个词表示，这叫关键字。接受关键字的属性，所取的关键字必须在那个属性允许使用的关键字范围之内。
阅读全文
摘要：继承是指把一个元素的某些属性值传递给后代的机制。确定应该把哪些值应用到元素上时，用户代理不进要考虑继承，还要考虑声明的特指度，以及声明的来源。这个过程称为层叠。 1、特指度：同一元素可能被多个选择器匹配，当多个选择器中有相同规则时，最终使用哪个选择器的规则，需要用到特指度。 选择符的特指度由选择符本
阅读全文
摘要：1、元素选择符，文档中的元素是最基本的选择符 html { color: red; } p { font: medium Helvetica; } 2、群组选择符 a、多个选择符之间用逗号隔开 h1 , p { color : gray; } 即对 h1 元素和 p 元素均设置颜色gray b、 *
阅读全文
摘要：创作人员可以通过媒体查询定义浏览器在何种媒体环境占用使用指定的样式表。 媒体查询可以用在下属几个地方使用： 1、link元素的media属性 2、style元素的media属性 3、@import声明的媒体描述符部分 4、@media声明的媒体描述符部分 媒体类型： 就是指明不同媒体的标注。 all
阅读全文
摘要：CSS的注释与C/C++非常相似，即： /* 这里写注释 */ CSS注释支持单行和多行，但不可嵌套。 CSS注释相当于没有出现过，所以，可以写在规则内部，也可以写在规则外部。 <!DOCTYPE html> <html lang="en"> <head> <style type="text/css
阅读全文
摘要：CSS规则由两部分组成：选择符和声明块。声明块由一个或多个声明组成，一个声明由一个属性和对应的属性值组成。 一个样式表由一系列规则构成。 p{ color: aqua; font-size: 36px; } 见上，就是一个完整的规则，规则中的p是选择符，代表你选中的，想要添加样式的标签。大括号内是声
阅读全文
摘要：link标签：作用是把其他文档与当前文档关联起来。 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type=“text/css” href="../CSS/style1.css"> <style type="text/c
阅读全文
摘要：CSS ： 层叠样式表（·Cascading Style Sheet）,声明样式语言， 影响一个或一组文档的表现。 “层叠”是指样式可以结合起来使用，而且具有优先级。 元素： 元素（element）是文档结构的根基，CSS 依赖元素。 元素通常有两种形式：置换元素和非置换元素。 置换元素指用来置换元
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Doc</title> <style type="text/css"> /* 字体属性主要包括下面几个 font-family，font-style，font-variant，fo
阅读全文
摘要：<!DOCTYPE html> <html> <head> <style> * {margin: 0;} .demo{background-color: aquamarine; padding: 1px; height: 300px;} .demo>div{width: 0px; height: 0
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> <style> #example1 { border: 10px dotted black; padding:35px; background: yell
阅读全文
摘要：background 可以设置 背景颜色、背景图片、定位等 ；而background-color 只能设置 背景颜色 ，设置时仅仅改变了背景色，但此时有一个默认的的background:repeat;而设置background: #aaa;后，相当于同时设置了background:no-repeat
阅读全文
摘要：a {text-decoration: none;}去下划线ul , ol {list-style: none;}去掉小圆点 / 去掉数字
阅读全文
摘要：设置父元素font-size: 0;
阅读全文
摘要：:first-child 选择器匹配其父元素中的第一个子元素。
阅读全文
