CSS学习笔记

🐹 CSS GENERAL

  • css存在意义
  • css基本语法
  • css样式属性
  • css与（X）HTML

🎳 CSS BASICS

  • 规则：css中简单的表达式；由“场所”、“墙”、“不同颜色的漆”组成
  • 选择符：指定对哪些元素应用规则
  • 继承 不是所有属性都有继承的功能
  • 继承的覆盖 浏览器一般会执行更具体的规则
  • 注释：/ /
  • 添加元素类：用class属性
  • 如何应用样式：
  • 是否有选择符直接选择你的元素
  • 如果没，就看继承
  • 还是没，元素的属性值就是浏览器定义的默认值
  • 若有多个选择符选择同一个元素，那么最具体的规则将“胜出”
  • 若具体性都相同，那就要靠样式表里的规则排序了，排最后的规则胜

🗻 CSS DETAILS

字体（大小、颜色、字体、粗细、正斜、修饰）：

  • CSS提供许多属性来控制字体外观
  • 定义字体大小方式：px、em、%、keywords
  • 斜体：italic、oblique
  • 字体系列：serif、sans-serif、monospace、cursive、fantasy。宜在font-family属性中定义多个字体，最后一个字体通常用来“保底”，即一种通用字体如sans-serif或serif。
  • text-decoration text-align text-transform:uppercase
  • font系列：-family -style -size -weight -varient

轮廓(位于元素边框的外围）：

  • outline-color
  • outline-width
  • outline-style

行间距：

  • line-height：1.5em

盒模式：

  • 在css眼中，所有html元素都可看作一个个盒子。
  • css用盒模式控制元素显示的方式。
  • 盒子由内容区、补白（padding）、边框（border）、边界(margin)组成，都是可选的，背景颜色只会延伸到补白。
  • background-image：url（...）；给元素设置背景图像。还有background-repeat（no-repeat repeat-x repeat-y inherit） background-color background-position。
  • border-style:solid/groove/outset/double/dotted/dashed/ridge border-width:medium/thin/thick or ..px border-color: border-top-...: 锯齿形边框：虚线边框+颜色白色
  • id属性
  • 使用多样式表时链接样式表的顺序很重要，下面的会覆盖上面的
  • 样式表有media属性

<div>:

  • 把页面分成几个合理的逻辑结构，有助于网页结构的清晰和样式化。

子孙选择符

  • 父类元素 子类元素

用缩写指定属性：

  • 提高了书写速度

<span>

  • 内联元素，有利于行元素内

样式化不同状态下的链接：

  • a:link{color:green;}
  • a:visited{color:red;}
  • a:hover{color:yellow;}
  • 也可直接a{color:yellow;}
  • 链接还有focus、active状态
  • 伪类：:link, :visited, :hover，:active 都可以样式元素就如类一样，它们被叫做伪类。

Cascading：

  • 作为网页作者，可以应用多样式表到XHTML；用户也可提供自己的样式；浏览器也有它默认的样式；另外还会有应用于相同元素多选择符。
  • 层叠就是浏览器决定某个元素采用哪种样式的方法。
  • 假设有个元素，你想知道它的属性：
  • 把所有样式表集中起来
  • 找到所有匹配的声明
  • 所有匹配的规则找出后，将它们以作者读者浏览器的顺序排列。
  • 根据规则的具体程度排序，具体的在前
  • 将所有冲突规则按照它们在各自样式表中出现的顺序排序（后者胜）
  • 元素的属性就是获胜的那条规则定义的属性
  • 计算具体度：此选择符有id便加100，有类或伪类则加10，有元素名称则加1

布局和排版：

  • 流
  • float属性
  • clear属性
  • 流动、冻结和凝胶设计：流动布局什么也不用；冻结固定整个body内容的width，缺点是浏览器变宽时效果太差；凝胶则在冻结的基础上只需margin：auto，使变宽时效果变好一点
  • top、right、bottom、left用来放置绝对、固定和相对布置的元素
  • 绝对布局（无需用float漂移元素）：position:absolute（默认static），然后用top、right、bottom、left属性指明位置。每个绝对布置的元素有个一描述元素重叠行为的属性z-index：99（值大的在上）。px值(可负）是跟“最近放置的包含块元素的元素”相对而言的。
  • 固定布置：position:fixed 是相对于浏览器窗口（视口）的偏移，而不像绝对布置是页面。
  • 相对布置：position：relative 是相对于元素在正常流中的位置相对的偏移量。

表格与列表样式：

  • 表格：添加summary和caption
  • 列表的主属性为list-style-type：disc/circle/square/none，还有list-style-position：inside/outside list-style-image：url(...);

表单(需学PHP）：

  • GET：将数据打包并将数据包附在URL上 POST：将数据打包并作为请求的一部分发送
  • 用表格布局表单
  • 需要web服务器上有php程序

伪元素： :first-letter 向文本的第一个字母添加特殊样式。
:first-line 向文本的首行添加特殊样式。
:before 在元素之前添加内容。
:after 在元素之后添加内容。

选择器系列：

  • 属性选择符 e.g. img[width] {...} 即选择了所有有width属性的<img>元素。
  • id选择符
  • 元素选择符
  • 伪元素选择符
  • 类选择符
  • 伪类选择符
  • 相邻兄弟选择符
  • 后代选择符（子孙选择符）
  • 子元素选择符
  • 组合选择符

行内块状元素:

综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。

行内块状元素特征：(1)不自动换行

　　　　　　　　　(2)能够识别宽高

　　　　　　　　　(3)默认排列方式为从左到右

float是一个inline-block化的属性。

201907

results matching ""

    No results matching ""