CSS

语法:
selector { property:value}

引用方式

外部样式表
<link rel="stylesheet" type="text/css" href="mystyle.css">
内部样式表
<head>
<style>
    hr {
        color:sienna;
        }
    p {
        margin-left:20px;
        }
    body {
        background-image:url("images/back40.gif"
        )
</style>
</head>
内联样式
<p style="color:sienna;margin-left:20px">这是一个段落。</p>

常用选择器


class           .
id              #

分组选择器:
h1,h2,p

嵌套选择器:
h1 h2 p

组合选择器

后代选择器     div p
子元素选择器   div>p
相邻兄弟选择器 div+p
后续兄弟选择器 div~p

伪类

a:hover 把鼠标放上时变化
背景图像
body {background-image:url('paper.gif');}
文本的对齐方式
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

盒子模型

margin 外边距
border 边框
padding 内边距
content 内容
div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}
margin padding 简写
margin: 上 右 下 左

尺寸属性

line-height   设置行高

隐藏

h1.hidden {display:none;}

定位

fixed      相对浏览器固定
relative   相对其正常位置
absolute   相对其父级元素

浮动

float:left  脱离文档流浮起来

SHU标指针

cursor:pointer

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,228评论 1 92
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 725评论 0 1
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 1,635评论 1 4
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,499评论 0 6
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    程序员poetry阅读 16,031评论 32 459
  • 很多时候,改变是在明白不可改变的那一瞬间发生的。
    miuraurie阅读 99评论 0 0
  • 快回学校了!!26见
    张小娴2阅读 120评论 0 0
  • 徘徊在天堂与地狱之间 肖遥抵制住了诱惑,并没有转战绿豆,而是守住了大豆。好像是真的要考验肖遥的专一度一样,大豆期货...
    luozi阅读 162评论 0 0