CSS (Cascading Style Sheet)层叠样式表,用于设计页面风格。
解决了传统HTML网页维护困难,标记不足,定位困难的缺点。使得网页的字体更美观,更方便排版,轻松控制页面布局,实现网站中的多个网页风格统一
目录
一、CSS基础
1.1 CSS语法
CSS是一个由包含一个或多个规则的文本文件
规则: 选择器 {属性:属性值}
注释方式:/* 注释信息*/
P{
font-size:12px; /*字号*/
color:blue; /*文字颜色*/
font-weight:bold; /*加粗*/
}
1.2 CSS的定义与引用
CSS有三种样式类型:
1. 行内样式
指直接在html文件body部分当中的标签内定义。
style的多个属性之间用分号隔开;
行内样式表只影响单个标签
基本语法:
<标签 style=“属性 : 属性值 ; 属性 : 属性值 ;”>
<p style= "color:red; font-size:28px;">
行内样式表
</p>
2. 内嵌样式
指在html文件head部分定义
影响单个文件
基本语法:
<head>
<style type="text/css">
p{
color:red;
}
</style>
</head>
3. 外部链接样式
将样式属性写在单独的 .css文件中
页面结构HTML代码与样式CSS代码完全分离,维护方便
可以在同一个HTML文件内部引用多个外部样式表
基本语法:
<head>
<link type="text/css" rel="stylesheet" href="外部样式表的文件相对路径以及文件名称(带后缀.css)" />
</head>
CSS样式表的优先级:
多重样式可以层叠,覆盖
样式的优先级按照 就近原则
行内样式 > 内嵌样式 > 外部链接样式 > 浏览器默认样式
例如:
/*外部样式表*/
h1{
color:red;
text-align:left
font-size:12px;
}
/*内嵌样式*/
h1{
text-align:right;
font-size:20px;
}
按照样式表的优先级,内嵌样式优先于外部样式,所以两个样式表共有的属性将采取内嵌样式里的属性值,而内嵌样式表中没有的属性将采用外部样式表中的属性及属性值。
最终 h1 得到的样式为:
color:red;
text-align:right;
font-size:20px;
1.3 CSS选择器
CSS选择器有四种类型:
1 .标签选择器
对HTML的标签重新定义
基本语法:
p,h1{font-size:30px;color:red;}
2 .类选择器
以 <标签 class=" "的形式给标签定义一个名字,. class值{},分别定义不同名字的标签的样式
基本语法:
<style type="text/css">
p {font-size:12px}
.one {font-size:18px}
.two {font-size:24px}
</style>
<body>
<p >类别选择器</p> /*样式 font-size:12px*/
<p class="one">类</p> /*样式 font-size:18px*/
<p class="one">别</p> /*样式 font-size:18px*/
<p class="two">选</p> /*样式 font-size:24px*/
<p class="two">择</p> /*样式 font-size:24px*/
</body>
3. ID选择器
先以<标签 id=" "的形式给id赋一个名字,# id值{},分别定义不同名字的标签的样式
基本语法:
<style type="text/css">
#one{font-size:12px;}
#two{font-size:24px;}
</style>
<body>
<p id="one"> I </p> /*样式 font-size:12px*/
<p id="two"> D </p> /*样式 font-size:24px*/
</body>
ID选择器与类选择器的区别:
(1)类选择器可以给任意多的标记定义样式,但ID选择器在页面中标签中只能使用一次;
(2)ID选择器样式比类选择器样式优先级高。ID选择器局限性大,只能单独定义某个元素的样式(特殊情况下使用)
二、CSS样式
2.1 文本样式
文字大小单位
px 像素
em 字符(1em等于一个字符)
% 百分比
注意:
在HTML继承关系中,子元素中的文本会默认继承父元素中的文本大小,而百分比的运用就是在父元素文本大小的基础上运算得出结果。例如:
文本属性
字体 font
2.2 背景与超链接
背景属性
空元素需要先定义元素的高度和宽度
background-color : 背景颜色
background-image : url (“logo.jpg”)
background-repeat : repeat | repeat-x | repeat-y | no-repeat
(图片填充方式)
background : 背景颜色 | 背景图片 | repeat
链接的四种状态
a:link -------初始状态下,未被访问的链接
a:visited —用户已访问的链接
a:hover — 鼠标悬停在链接上时
a:active — 链接被点击的时刻
注意:
a:hover必须位于a:link和a:visited之后
a:active必须位于a:hover之后
四种状态对应效果:
2.3 列表与表格
列表样式属性:
无序列表和有序列表共用样式
list-style (所有用于列表的属性设置于一个声明中)
list-style-image : url(“image/logo.gif”);
(为列表项标志设置图像)
list-style-position : inside | outside;
(标志的位置)
list-style-type : none | disc | …;
(标志的类型)
常见标志类型:
表格大小:
table{
width:500px; /* 宽 */
height:200px; /* 高 */
}
表格边框:
table,td,th{
border: 1px solid #eee;
}
table{
border-collapse:collapse; /*取消外边框*/
}
奇偶选择器:
即隔行样式 odd为基数,even为偶数
tr:nth-child(odd){
background-color:black; /*奇数行背景色为黑色*/
}
三、CSS布局与定位
常见排版:
3.1 盒子模型
W3C组织建议所有网页上的对象都放在一个盒中,通过创建定义来控制这个盒的属性,这些对象包括段落、列表、标题、图片以及层。
盒子模型主要定义为四个区域:
margin (边界,外边距)
border (边框)
padding (填充,内边距)
content (内容)
盒子的宽度和高度:
一个盒子的实际宽度、高度为:
content + padding + border + margin
基本语法:
#box{
width:100px;
height:100px;
border:1px solid;
padding:20px;
margin:10px;
}
<body>
<div id="box">
内容
</div>
</body>
overflow属性
当内容溢出盒子时,overflow属性取值
hidden ----超出部分不可见
scroll ------显示滚动条
auto -------如果有超出部分,显示滚动跳
border属性
border-width: px | thin | medium | thick
border-style: dashed | dotted | solid | double
border-color: 颜色
border: width | style | color
margin属性
基本语法:
margin: top长度 right长度 bottom长度 left长度
即从top开始顺时针方向
margin缩写
margin: 1px; 等同于 margin: 1px 1px 1px 1px;
margin: 1px 2px; 等同于 margin: 1px 2px 1px 2px;
margin: 1px 2px 3px; 等同于 margin: 1px 2px 3px 2px;
原理:
margin的合并:
垂直方向合并,水平方向不合并
两个盒子之间的距离,由两个盒子的外边距(margin)中的最长一个外边距决定。
即:
3.2 CSS定位机制
1. 文档流定位
HTML文件默认为文档流定位
block元素:
独占一行
元素的height width margin padding 都可设置
inline元素:
不单独占一行
width height不可设置
width就是它包含的文字或图片的宽度,不可改变
元素之间有一个间距问题
inline-block元素:
同时具备inline和block元素的特点
不单独占用一行
元素的height width margin padding 都可设置
元素类型转换 display属性:
display:none 元素不被显示
display:block 显示为block元素
display:inline 显示为inline元素
display:inline-block 显示为inline-block元素
2. 浮动定位
float属性:
left-----左浮动
right—右浮动
none–不浮动
float属性的特点
clear属性
both 清除左右两边的浮动
left和right 清除左右其中一个方向的浮动
none 默认值,只在需要移除已指定的清楚值时用到
3. 层定位
position属性(相对于谁定位)
static:默认值
(没有定位,元素出现在正常的流中)
fixed:固定定位
(相对于浏览器窗口定位)
relative-:相对定位
(相对于其直接父元素进行定位)
脱离正常的文档流,但其在文档流中的原位置依然存在
案例:
#box1{
width:170px;
height:190px;
position:relative;
top:20px;
left:20px;
}
absolute:绝对定位
(相对于static定位以外的第一个父元素进行定位)
脱离正常文本流,但其在正常流的原位置不再存在
案例:
#box1{
position:absolute;
top:20px;
left:20px;
}
相对定位 VS 绝对定位