目录
CSS入门(一)
样式表类型
内联样式
当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性
内嵌样式
当单个文件需要特别样式时,就可以使用内嵌样式表。你可以在 head 部分通过 <style> 标签定义内部样式表
外部样式
把已有的内嵌样式表代码(不含<style>和</style>)剪切到新建的文本文件中,保存文件到HTML文档同一文件夹下(文件名叫test.css),在head标签内添加link标签:
<link href="test.css" rel="stylesheet" type="text/css" />
选择器
1.元素选择器
可以使用标签名来选出指定名称的元素(标签),如:p、div、img、a等,甚至还包括 html 标签。
特别的选择符 “*” ,它可以代表任意标签
若需要将整个网页中所有的文字字号设置为12px,那可以写成: * { font-size : 12px; }
2.id选择器
我们可以为标签指定一个ID,如:<p id=”p1”></p>,这样在内联样式表或外联样式表中即可使用 #p1 选中该元素
3.类选择器
我们可以把HTML标签分为多个类别(类名自己定义),然后在标签中使用class属性说明该标签属于哪个分类
注意样式表中,类名最前面有个句点”.”
一个 class 属性中可以有多个样式类名, 使用空格分隔即可, 如: class="classA classB"
4.伪类选择器
对于诸如超链接 <a> 这样的标签,根据状态不同,它可能显示不同的显示外观。例如下面4个图分别是超链接处于普通链接状态(link)、鼠标处于其上方(hover)、鼠标按住(active)和已访问过(visited)4个不同状态
a:link { color : black; text-decoration:none;}
a:hover { color : red; text-decoration:underline;}
a:active { color : green; }
a:visited { color : blue; }
5.属性选择器
根据元素标签中的属性来进行选择
样式表:
a[title]{ color: red;}
a[href="http://www.cctv.com"]{color: green;}
a[href="http://www.cctv.com"][title="cctv"]{color: blue;}
HTML:
<a href="http://www.163.com" title="163">超链接1</a>
<a href="http://www.cctv.com">超链接2</a>
<a href="http://www.cctv.com" title="中央电视台">超链接3</a>
<a href="http://www.cctv.com" title="cctv">超链接4</a>
结果:
超链接1为红色,超链接2、3为绿色,超链接4为蓝色
注意:
1. 若”[ ]”中只有属性名(如第1行)则表示元素存在该属性即匹配;
2. ”[ ]”中既有属性名,又有值(如第2行),则表示元素必须存在该属性,且值为指定值。;
3. 若有多个”[]”,表示多个属性选择必须同时匹配
6.组合选择器
前述几种基本选择符还可以组合使用,根据组合形式不同,表示不同的选择方式
(1) 直接结合:例如: p.classA表示选择<p>标签中 class="classA" 的元素。
(2) 逗号分隔:表示并列关系。例如: p, span 表示选择 <p> 和 <span>
(3) 空格分隔:表示选择后代。例如: p span 表示选择 <p> 的后代中的 <span>
(4) “>”分隔:表示选择 “直接儿子”。例如:p > span 表示选择 <p> 的直接儿子中的 <span>
(5) “+”分隔:表示选择相邻的兄弟元素。例如:p + span表示选择 <p> 的兄弟元素中其后紧邻的 <span>。
# | 样式表 | HTML |
1 | p.classA {color : red;} | <p>段落1</p> <span>标签</span> <p class=”classA”>段落1</p> |
2 | p, span {color : red;} | <p>段落</p> <span>标签</span> <div>DIV里的文字</div> |
3 | p span {color : red;} | <span>标签</span> <p><span>标签</span></p> <p><a><span>标签</span></a></p> |
4 | p > span {color : red;} | <span>标签</span> <p><span>标签</span></p> <p><a><span>标签</span></a></p> |
5 | li + li {color : red;} | <ul> <li>第1项</li> <li>第2项</li> <li>第3项</li> </ul> |
常用属性
1.background
background-color : red;
背景为红色,支持多种颜色表示法, 如RGB表示法:#FF0000或#F00
background-image : url(“bg.jpg”);
设置背景图片为bg.jpg(相对路径表示) 设置了背景图,背景色就看不到了,除非背景图片失效
background-repeat : repeat-x;
背景图只在X方向(水平方向)上重复,还有其它值 ( repeat-y, no-repeat )
background-attachment : fixed;
背景图固定,不随滚动条滚动
background-position : 5px 10px;
设置背景图相对于元素左上角向右偏移5px, 向下偏移10px。可取负值。
2.font*
font-size : 12px;
设置文字大小为12像素 (请查阅其它资料了解其它单位)
font-family : 宋体;
设置文字字体为”宋体”。应避免使用非主流字体,原因此处暂略,请自行思考
font-weight : bold;
文字加粗
3.text*
text-align : center;
文字水平居中
text-decoration : underline;
文字加下划线
text-indent : 24px;
首行缩进24像素
4.color*
color : red;
文字为红色,支持多种颜色表示法, 如RGB表示法:#FF0000或#F00
5.line-height
line-height : 24px;
每行文字的行高为24像素
6.border*
以 border 开头的这一组修饰元素的边框。 边框分上、右、下、左四个方向,每个方向的边框可分别修饰”型”、”色”、”宽”。
样式 | 含义 |
border-left-color: red; border-left-style: solid; border-left-width:2px; | 设置元素左边框为2px宽的红色, 实线边框 |
border-left : 2px solid red; | 设置元素左边框为2像素宽的红色实线边 (上例的简写形式) |
border : 1px dotted red; | 设置元素四周边框为1px宽的红色虚线边 |
border-width : 2px 5px 10px 15px; border : 1px solid red; | 四周边框均为红色实线边,上、右、下、左边框宽度分别为2px、5px、10px、15px |
小结:
(1) 第2行的代码覆盖了第1行中关于宽度的说明
(2) 四个方向的边框可属性可一起简写说明,中间以空格分隔,顺序为从”上”开始顺时针方向一周
border : 1px solid red; border-width : 5px 10px; | 四周边框均为红色实线边,上下边为5px宽,左右边为10px. |
border : 1px solid red; border-width : 5px 10px 15px; | 等同于 border-width : 5px 10px 15px 10px; |
7.margin*
margin指的是元素边框之外的空白
8.padding*
padding则指元素边框之内与内容之间的空白。
其他样式属性
width:50px; height:100px; | 定义元素宽50px,高100px |
cursor: pointer; | 鼠标处于元素上方时显示为手指形状,类似处于超链接上方的效果 |
display | display: block; 设置元素以块标签方式显示 display: inline; 元素以行内标签方式显示 display: none; 隐藏元素。 |
visibility: hidden; | 隐藏元素 与display: none的区别在于: |
position: absolute; | 设置元素的定位方式为绝对定位。 |
left:50px; | 设置元素左外边距边界与其父容器左边界之间的偏移为50px left、top、right、bottom 4个属性的效果与position属性的取值有很大关系 |
z-index:999; | 设置元素的叠放层次,z-index值越大,就越靠上层。 |
float:left; | 元素向左浮动 |
clear:both; | 清除浮动效果, |
overflow:scroll; | 若元素中的内容超出了元素本身的大小,则显示滚动条。 |