免费资源
享你所想

CSS学习笔记

前端学习笔记之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 }
元素分类:
块状元素
  1. 自成一块
  2. 周身属性皆可设置
  3. 宽度默认为父容器的100%宽度
内联元素
  1. 和其他元素在一行
  2. 周身不可设置
  3. 宽度不可设置
内联元素转换为块状元素 display: block
块状元素转换为内联元素 display: inline
内联块状元素 display:inline-block
内联块状元素 img input
  1. 和其他元素在一行
  2. 周身皆可设置
盒模型:
边框 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. 流动模型 (Flow)
  2. 浮动模型 (Float)
  3. 层模型 (Layer)
流动模型 — 默认布局 独占一行
1.块状元素在所处的包含元素内自上而下按顺序垂直分布,默认情况下宽度为100%.
2.内联元素在所处的包含元素内从左到右水平分布.
浮动模型 — 浮动显示
1.可以让两个块状元素并排显示.
{ float: left/right }
层模型
  1. 相对定位 position: relative
相对于以前的位置
  1. 绝对定位 position: absolute
body(浏览器窗口)
  1. 固定定位 position: fixed
相对于浏览器窗口,且不随浏览器窗口的滚动而变化.
相对其他元素定位 — 相对 + 绝对
  1. 必须参照于前辈元素
  2. 参照定位的元素必须加入position:relative.
  3. 定位元素加入position: absolute.
赞(0) 打赏
未经允许不得转载:无梦博客 » CSS学习笔记
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

无梦博客

币池塘关于本站

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏