前端学习笔记2-1 CSS

CSS 全称：“层叠样式表”（Cascading Style Sheets）

CSS用于定义HTML内容在浏览器内显示的样式，如文字大小，颜色，加粗，背景，位置，行高等等。CSS3中新加了许多样式，还增加了动画。

1-1 CSS代码语法

例：p{color:red;}
css代码有两部分组成：选择符和声明。
p：选择符。指页面里的p标签，选择符不仅能直接用标签名，还可以通过标签的id获取：#id名；class获取：.class名；等等
{color:red;} {}里面为声明。用来写样式，声明由属性和值组成，属性和值用英文“:”隔开，多条声明之间用英文“;”隔开，最后一条声明可不加“;”，但为了方便修改常加上去。为了方便阅读，可将每条代码单独写一行。color属性(字体颜色)。red是属性值。

1-2 CSS可以写在哪些地方

css书写分三种：内嵌式，嵌入式，外链式。

1-2-1 内嵌式

<p style="color:red;font-size:12px;">内嵌式</p>

把css代码直接写在html元素的开始标签的style属性里面，书写规则同上。

1-2-2 嵌入式

<style type="text/css">
#myp{
color:red;
font-size: 12px;
}
</style>

把css代码写在style标签里面，style标签一般放在head标签里面，其中#myp是根据id名获取的标签，某个标签起了id名myp，所以可以直接用#myp获取。

1-2-3 外链式

将样式写在一个.css类型的文件里面，然后使用link标签将该文件引入到页面里面。

/* 以.css结尾的文件，命名mycss.css */
#myspan{
font-weight: bold;  /* 字体加粗 */
font-family: "宋体"; /* 字体是宋体 */
}

另外一个html文件，命名test.html;

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

link标签一般放在head标签里面。

rel=”stylesheet” type=”text/css”是固定写法，用来声明引入的是什么文件。

href=”../css/mycss.css” 是css文件的路径，可以放绝对路径和相对路径，绝对路径是指：“http://www.forexample.com/css/mycss.css”这种类型，还有一种绝对路径是“/css/mycss.css”这种是省略了html文件当前所在的域名。本例中使用的是相对路径，../是指html文件的上一级文件夹。./或者不写是指当前级别文件夹，../css/mycss.css 是指：上一级文件夹 下的 css文件夹 下的 mycss.css文件。

1-2-4 三种样式的写法的优先级

如果一个元素分别用这三种方法定义了不同的字体颜色，那么这个字体显示哪一种颜色呢？

从本质上讲：元素样式是根据其权值来衡量的，权值高的优先显示。(权值后面会有解释)

如果先不考虑权值，三种样式优先级别：

内嵌式 > 嵌入式 > 外部式

即会显示内嵌式定义的那个颜色。(可以理解为就近原则，内嵌式离该标签最近，所以优先显示)

1-3 选择器

1-3-1 标签选择器

直接以标签名为选择符，例：

div{
width:100px;
height:100px;
}

1-3-2 ID选择器

给标签加一个id名(注：id名具有唯一性，一个html里面id名不能重复)，css书写用“#”+“id名字”例：

<div id="mydiv">举个例子</div>

相应的css书写：

#mydiv{
width:100px;
height:100px;
}

1-3-3 类选择器

给标签加一个class名(注：class名不具唯一性，一个html里面的标签可以起相同class名，一个标签也可以起多个class名)，css书写用“.”+“class名字”,类选择器可以修改所有叫该class名的标签样式。例：

<div class="example mydiv">举个例子</div>
<p class="example">举个例子</p>

相应的css书写：

.example{ /* div和p字体样式都会变为红色 */
color:red;
}
.mydiv{ /* div背景为黑色 */
background:#000000;
}

1-3-4 子选择器

用于指定标签元素的第一代子元素(儿子)，写法：父元素+“>”+第一代子元素。例

<style>
#box>ul{ /* div下的ul的外填充为0 */
margin:0;
}
#box>.myp{ /* #box下所有.myp字体颜色为红色 */
color:red;
}
</style>
<div id="box">
<ul id="list">
<li></li>
</ul>
<p class="myp">段落一</p>
<p class="myp">段落二</p>
</div>

1-3-5 包含(后代)选择器

用于指定标签的所有后代(包括后代的后代)。写法：父元素+“ ”+子元素

<style>
.box span{ /* .box下的所有span标签字体颜色都能变为红色(不止第一代子元素)。 */
color:red;
}
</style>
<div id="box">
<span>文本一</span>
<p class="myp">
<span>文本二</span>
</p>
<p class="myp">
<span>文本三</span>
</p>
</div>

1-3-6 通用选择器

作用于html里面所有标签。写法：“*”

*{ /* 说有标签的外边距为0，内填充为0 */
margin:0;
padding:0;
}

1-3-7 伪类选择器

书写方式：元素+“:”+伪类名。

常用的a标签：

a:hover{/* 这个a标签鼠标滑过是字体变为红色 */
color:red;
}

a标签还有其他伪类,顺序为：a:link > a:visited > a:hover > a:active

其他标签也有:hover伪类。(IE6不支持a以外其他的伪类；IE6以上支持所有标签的hover伪类)

1-3-8 分组选择器

当一些标签拥有共同的样式，一个个写太麻烦，可以使用分组选择符。书写方法：元素+“,”+元素+“,”+元素+“,”+元素 等

h1,span,p,#mydiv,.box{
color:red;  /* 上面这些标签的字体都为红色 */
}

1-3-8

书写方法：元素+条件元素

<style>
div#mydiv{ /* 拥有id名叫mydiv的div有1px的黑色边框 */
width:100px;
height:100px;
border:1px solid #000;
}
</style>
<div></div>
<div id="mydiv"></div>

1-4 影响样式的因素

元素样式都由哪些因素影响？

1-4-1 继承

css的某些样式具有继承性，拥有这些样式的元素的子元素也会具有这个样式，比如：color(对a标签无效？)，

div{ /* div字体为红色，里面的p标签颜色也为红色，但里面的a标签好像不会变红，需单独给a加该样式*/
color:red;
}

<div>
1
<p>2</p>
<a href="http://baidu.com">3</a>
</div>

1-4-2 权值

前面讲到，样式显示本质是显示权值高的的那个样式。

不同选择符的权值不同：

1. 继承：权值为0.1

2. 标签、伪类、伪对象：权值为1

3. 类选择符、属性选择符：权值10

4. id选择符：权值100

5. 内联样式：权值1000

6. !important : 权值无穷

#mydiv .box p{} → 权值伪100+10+1=111。

1-4-3 层叠

同一元素，不同css样式，权值也一样。根据先后顺序，最后应用最后那个样式，类似就近原则。可以理解为后面覆盖了前面的样式。

p{
color:blue;
}
p{ /* 显示这个样式 */
color:red;
}

1-4-4 重要性!important

!important 设置最高权值

p{  /* !important写在;前面 */
color:red!important;
}

1-5 CSS常用的样式

1-5-1 最常见样式

宽：width:300px; 最小宽度：min-width:100px；

高：height:200px; 最小高度：min-height:100px;

背景：background:#000000;还可跟图片：background:url(’ ‘) 2px 3px repeat-x;(背景图 x方向偏移量 y方向偏移量 重复方式)

边框：border:1px solid #cccccc; (边框线大小 边框样式实线 边框颜色)

外边距：margin:10px;

内填充：padding:5px;

字体颜色：color:#333333;

字体大小：font-size: 12px;

行间距： line-height: 20px;

浮动：float:left;

定位：position:relative; left: 10px; right: 5px;

溢出样式：overflow: hidden;

1-5-2 会用到的样式

字体：{ font-family: “宋体”; }

粗体：{ font-weight: bold; }

斜体：{ font-style: italic; }

上划线：{ text-decoration: overline; }

删除线(中划线)：{ text-decoration: line-through; }

下划线：{ text-decoration: underline; }

段落缩进：{ text-indent: 2em; }

中文/字母间距：{ letter-spacing: 5px; }

英文词间距：{ word-spacing: 3px; }

块状元素里面的文本、图片对齐：{ text-align: left; }

垂直对齐方式：{ vertical-align: top; }

文本换行：{ word-wrap: break-word; }

对象中空白处理：{ white-space: nowrap; }强制在一行显示

文本大小写：{ text-transform: capitalize; }首字母大写

光标样式：{ cursor: pointer; }

遮罩滤镜：{ opacity: 0.8; f i l t e r:alpha(opacity=80); } 用来控制透明度，f ilter为IE私有滤镜