CSS学习笔记-白日做梦

p { color: red; }

选择符 { 属性: 值; }

/* 注释 */

内联式：

<p style="color:red; ">红色的文字</p>

嵌入式：

<style type="text/css">

span {

color: red;

}

</style>

外部式：

写在单独文件中，后缀为.css

在<head>标签中使用 link 引用

<link href="test.css" rel="stylesheet" type="text/css" />

选择器：

<p class="aaa">我有两条狗，一条是<span id="bbb">黑狗</span>。一条是<span>白狗</span>。

标签选择器 

p { color: red; }

标签 { 样式; }

类选择器 可多次使用

.aaa { color: blue; }

.类 { 样式; }

ID选择器： 只能使用一次

#bbb { color: yellow; }

#id { 样式; }

子选择器：第一代后代

.aaa>span { color: black; }

.类>标签 { 样式 }

后代（包含）选择器： 所有子后代

.aaa span { color: black; }

.类 标签 { 样式 }

通用选择器：

* 匹配所有标签元素

* { color: red; } 全部设置为红色

分组选择器：

 , 逗号

p, span { color:red; } 

两个标签设置为同一颜色

权值： 哪个大就用哪个

标签 权值为1。

类选择符 权值为10。

ID选择符 权值为 100。

文字排版：

 字体 { font-family }

字号和颜色 {font-size: 12px; color: #666}

粗体 { font-weight: bold; }

斜体 { font-style: italic; }

下划线 { text-decoration:underline; }

删除线 { text-decoration:line-through; }

缩进 { text-indent: 2em; }

行高（行间距） { line-height: 2em; }

文字间距（单词和中文）{ latter-spacing: 50px }

单词间距 { word-spacing: 50px }

文本居中 { text-align: center/ left }

元素分类：

块状元素

内联元素

内联元素转换为块状元素 display: block

块状元素转换为内联元素 display: inline

内联块状元素 display:inline-block

内联块状元素 img input

盒模型：

边框 border

 三属性（粗细、样式、颜色）

 { border: 2px solid red }

分开写为

{

border-width: 2px;

border-style: solid;

// dashed(虚线) dotted(点线) solid(实线）

border-color: red;

}

可以单独设置边框属性

 border-top 上边框

 border-right 右边框

 border-bottom 下边框

 border-left 左边框

盒模型……宽度(width) 和 高度(height)

宽度/高度 ＝ 外边距＋边框＋内边距＋内容

盒模型

--填充（内边距） padding

--边界（外边距） margin

布局模型

流动模型 -- 默认布局 独占一行

 1.块状元素在所处的包含元素内自上而下按顺序垂直分布，默认情况下宽度为100%.

 2.内联元素在所处的包含元素内从左到右水平分布.

浮动模型 -- 浮动显示

 1.可以让两个块状元素并排显示.

 { float: left/right }

层模型

相对于以前的位置

body（浏览器窗口）

相对于浏览器窗口，且不随浏览器窗口的滚动而变化.

相对其他元素定位 -- 相对 + 绝对

文章版权归作者所有，未经允许请勿转载。

THE END