参考个人文章:http://www.zhuzhuman.com/nav-1/type-5/article/5.html
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文件当前所在的域名。
还有一种绝对路径“//www.forexample.com/css/mycss.css”,这种是省略了协议头,路径的协议头和页面协议头一样,即:页面是http,那该路径也是http,页面是https,该路径也是https
本例中使用的是相对路径,…/是指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标签无效?),
<style>
div{ /* div字体为红色,里面的p标签颜色也为红色,但里面的a标签好像不会变红,需单独给a加该样式*/
color:red;
}
</style>
<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; }
- 光标颜色:{caret-color:red;}
- 遮罩滤镜:{ opacity: 0.8; f i l t e r:alpha(opacity=80); } 用来控制透明度,f ilter为IE私有滤镜