前端学习笔记 - Css初级篇

有话先说：我是一只菜鸟，一只都是，从前是现在也是。

CSS中的会计元素与行内元素

块级元素特性：
占据一整行，总是重起一行并且后面的元素也必须另起一行显示。
内联元素特性：
和其他内联元素显示在同一行。

可以知道的是，行内元素和块级元素之间是能够相互转换的。趋于对网页模块化的搭建，后期行内转换为块级的例子会很多很多。

html中的块级元素列举如下：
 div（文档分区）,article（文章内容）, aside（伴随内容）, audio（音频播放）, blockquote（块引用）, canvas（绘制图形）, dd（定义列表中定义条目描述）, dl（定义列表）, fieldset（表单元素分组）, figcaption（图文信息组标题）, figure（图文信息组）, footer（区段尾或页尾）, form（表单）, h1-h6（标题）, header（区段头或页头）, hgroup（标题组）, hr（水平分割线）, noscript（不支持脚本或禁用脚本时显示的内容）, ol（有序列表）, output（表单输出）, p（段落）, pre（预格式化文本）, section（一个页面区段）, table（表格）, tfoot（表脚注）, ul(无序列表), vidio（视频）。

内联元素列举如下：
b（粗体）, big（大号字体）, i（倾斜）, small（小号字体）, tt（等宽）, abbr（缩写）, cite（引用）, code（计算机代码文本）, dfn（定义项目）, em（强调）, kbd（键盘文本）, strong（语气强调）, samp（样本文本）, var（定义变量）, a（链接）, bdo（元素可覆盖默认的文本方向）, br（换行）, img（图像）, map（图像映射）, object（对象）, q（引用）, script（定义客户端脚本）, span（组合行内元素）, sub（下标）, sup（上标）
button（按钮）, input（输入）, label（标注）, select（表单控件）, textarea（文本域）。

CSS样式的类型

内部样式表（<style>...</style>）

外部样式表（<link href="style.css" rel="stylesheet"/>）

内联样式表（<p style="..."></p>）

border属性

 

border-width:边框宽度；

 

border-style：边框样式；（solid 实线,dashed 虚线，dotted 点线,）

 

border-color:边框颜色；

border:边框宽度 边框样式 边框颜色;（常常这样简写）

常见样式

结构样式：width:宽度； height：高度；background：背景；border：边框； padding ： 内边距；margin： 外边距；

文本样式：font-size:文字大小（一般为偶数，最小一般设置为12px）font-family:字体；color:文字颜色；line-hight：行高；text-align:文本对齐方式； text-indent：文本缩进(2em);font-weight:文字着重；font-style:文字倾斜；text-decaration:文本修饰（下划线，上划线，删除线）letter-spacing:字母间距； word-spacing:单词间距；

background属性

repeat:背景图重复，默认就是背景图重复，还有no-repeat(背景图不重复)，repeat-x(水平轴上背景图重复)，repeat-y(竖直背景图重复)10px(x轴),50px(Y轴)也可为负数。center top(水平居中，竖直在顶端),fixed(背景固定，不管怎么拖动滚动条，该背景图都固定在相应位置。)

background-size:设置背景图的宽高；

选择器

 

类选择器（类选择器在css样式编码中是最常用到，可重复调用，英文圆点开头可任意命名）；

ID选择器（在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别。为标签设置id="ID名称"，而不是class="类名称"；ID选择符的前面是井号（#）号，而不是英文圆点（.）。）

子选择器（还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。）

包含选择器（即加入空格,用于选择指定标签元素下的后辈元素。）

通用选择器（功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素）

伪类选择符（它允许给html不存在的标签（标签的某种状态）设置样式）