web前端笔记2：CSS入门

2016-03-24 本文已影响145人简单才快乐

学习的资料

MDN HTML入门
[MDN CSS入门教程](https://developer.mozilla.org/zh-- CN/docs/Web/Guide/CSS/Getting_started)
慕课HTML+CSS基础教程视频

css介绍

CSS 是用来指定文档显示的，让页面有不同的外观。
如何定义一个样式，可以新建一个文件 strong.css 在文件中写如下代码
strong {color: red;}。然后在你的html文件头部加入一行 <link rel="stylesheet" href="style1.css">。再打开网页你会发现之前标记 <strong> 的文字由原来的黑色加粗变为了红色。
三种样式写法
优先级为 内联式 > 嵌入式 > 外部式

/*内联式，直接写在标签中*/
<span style="color:blue;">超酷的互联网</span>
/*内嵌式，写在html文件中*/
<head>
    ......
    <style type="text/css">
        span{color:blue;}
    </style>
</head>
/*外联式，写在单独文件中，如上段中介绍的用法*/

CSS的层叠与继承
CSS的来源有三种，浏览器默认样式、用户定义样式和开发者定义样式，而优先级依次提高，也就是开发者定义的样子优先级最高会覆盖前两种定义的样式。
同时样式之间也有继承关系，如 strong 就继承自 p，子类样式有更高的优先级。
上面所定义的如 strong 为一条规则，而 strong 被称为标签选择器( 也就是说为某一标签设置样式规则 )。规则还可以有 class 和 id 两个属性，对应有类选择器和id选择器。这三个优先级也是依次提高。

<p class="key" id="principal">`

类选择器 在一个CSS样式表中, 下面的规则将使所有class属性等于key的元素文字颜色呈现绿色。（这些元素不一定都是<p>元素。）。一个标签可以有多个类用空格隔开

.key { color: green;}

id选择器 下面的规则将使 id 等于 principal 的那个元素的文字变为粗体。同一html文件中 id必须唯一

#principal { font-weight: bolder;}

:before :after 在元素前面或者后面加元素

CSS伪类选择器 是加在选择器后面的用来指定元素状态的关键字。比如， hover 会在鼠标悬停在选中元素上时应用相应的样式。

a:hover{color:red:} /*鼠标移动到链接上时链接文字变红*/

关系选择器

选择器	选择的元素
`A E`	任何是元素A的后代元素E (后代节点指A的子节点，子节点的子节点，以此类推)
`A > E1`	任何元素A的子元素
`E:first-child`	任何元素的第一个子元素E
`B + E`	任何元素B的下一个兄弟元素E
`B ~ E`	B元素后面的拥有共同父元素的兄弟元素E

你可以任意组合以表达更复杂的关系。
你还可以使用星号（*）来表示”任意元素“。

分组选择器

h1,span{color:red;} /*使用这种写法为多个选择器设置相同规则*/

!important
在分号前加 !important 提高样式为最高优先级

p{color:red!important}

常用属性

属性	代码	说明
字体	`{font-family:"宋体";}`	-
字号	`{font-size:12px}`	-
颜色	`{color:#ffffff}`	颜色表示有多种：#ffffff,rgb{0,0,0},red
加粗	`{font-weight:bold;}`	-
斜体	`{font-style:italic;}`	-
下划线	`{text-decoration:underline;}`	-
删除线	`{text-decoration:line-through;}`	-
缩进	`{text-indent:2em;}`	-
行间距	`{line-height:3em;}`	-
字间距	`{letter-spacing:20px;}`	-
对齐	`{text-align:center;}`	-
背景色	`{background:pink;}`	-
设置成块	`{display:block;}`	-
设置成内联元素	`{display:inline;}`	-
设置成内联块	`{display:inline-block;}`	-
宽	`{width:30px;}`	-
高	`{height:30px;}`	-

盒模型

元素分类
常用的块状元素 <div> <p> <h1>...<h6> <ol> <ul> <dl> <table> <address> <blockquote> <form>
常用的内联元素 <a> <span> <br> <i> <em> <strong> <label> <q> <var> <cite> <code>
常用的内联块状元素 <img> <input>
块级元素

a{display:block;} /*将a标签设置成块级元素*/

每个块级元素都从新的一行开始，并且其后的元素也另起一行。元素的高度、宽度、行高以及顶和底边距都可设置。元素宽度在不设置的情况下，是它本身父容器的100%。

内联元素

p{display:inline;} /*将p标签设置成内联元素*/

和其他元素都在一行上；元素的高度、宽度及顶部和底部边距不可设置；元素的宽度就是它包含的文字或图片的宽度，不可改变。

内联块状元素

display:inline-block;

和其他元素都在一行上；元素的高度、宽度、行高以及顶和底边距都可设置。

边框

/* dashed（虚线）| dotted（点线）| solid（实线）。 */
div{
    border-width:2px;
    border-style:solid;
    border-color:red;
}
/* 可简写为如下 */
div{border:2px solid red;}
/* 可单独设置某一边框，使用如下属性名 */
border-bottom border-top border-right border-left

宽度高度

/*  */
div{
    width:200px;
    height: 20px;
}

填充
表示元素和边框之间的距离。填充分成上右下左顺时针写，如下

div{padding:20px 10px 15px 30px;}
/*  也可以分开写，如下 */
div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
}
/* 如果上、右、下、左的填充都为10px;可以这么写 */
div{padding:10px;}
/* 如果上下填充一样为10px，左右一样为20px，可以这么写*/
div{padding:10px 20px;}

边界
元素与其它元素之间的距离可以使用边界。属性名为 margin, 用法如同填充，将 padding 换成 margin

布局模型

流动模型
块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布。内联元素都会在所处的包含元素内从左到右水平分布显示。
浮动模型
设置元素浮动就可以实现两个块状元素并排显示。

/* 这样设置元素浮动 */
div1{float:left;}

层模型
层模型有三种形式：
1、绝对定位(position: absolute)
设置position:absolute(表示绝对定位)，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

div{
  position:absolute;
  top:20px;
  right:100px;
  bottom:30px;
  left:50px;
}

2、相对定位(position: relative)
设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
3、固定定位(position: fixed)
与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。

#div1{
    position:fixed;
    left:100px;
    top:50px;
}

水平居中设置

行内元素
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。如下代码：

div.txtCenter{ text-align:center; }

定宽块状元素
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。

margin:20px auto;

不定宽块状元素
有三种方式。方式一如下

/* 第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。 */
<div>
<table margin:0px auto>
<tbody>
  <tr>
    <td>
      <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
       </ul>
      </td>
    </tr>
</tbody>
</table>
</div>

第二种方法：改变块级元素的 display 为 inline 类型，然后使用 text-align:center 来实现居中效果。
方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中。

垂直居中设置

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。

.wrap h2{
    margin:0;
    height:100px;
    line-height:100px;
    background:#ccc;
}

父元素高度确定的多行文本（方法一）：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
说到竖直居中，css 中有一个用于竖直居中的属性 vertical-align，但这个样式只有在父元素为 td 或 th 时，才会生效。所以将在居中的元素放在td中，将td设置一个高度，再设置 vertical-align：middle（默认已为middle）。
父元素高度确定的多行文本（方法二）：在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。

.container{
    height:300px;
    background:#ccc;
    display:table-cell;/*IE8以上及Chrome、Firefox*/
    vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}

隐性改变display类型

有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
position : absolute
float : left 或 float:right
元素会自动变为以 display:inline-block 的方式显示，当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素。