目录
其他 前端知识:
前端教程网站:
一、CSS引入方式
有三种方式:外部样式表,内部样式表,行内样式表。
1、外部样式表
最常用。
CSS代码和HTML代码都单独放在不同文件中,然后在HTML文档中使用link标签来引用CSS样式表。
<link rel="stylesheet" type="text/css" href="CSS文件路径" />
rel取值固定为stylesheet,表示引入的是CSS文件。
type取值固定为text/css,表示这是标准的CSS。
2、内部样式表
把HTML代码和CSS代码放到同一个HTML文件中。
CSS代码放在style标签内,style标签是放在head标签内。
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
div{color:red;}
</style>
</head>
3、行内样式表
不推荐。
把HTML代码和CSS代码放到同一个HTML文件中。
CSS代码在“标签的style属性”中定义,而不是在“style标签”内定义。
<div style="color:red;">CSS</div>
二、CSS选择器
CSS选择器就是将想要添加CSS样式的元素选中,有很多种方法,这些不同的方法就是不同的选择器。
常见的CSS选择器有5种:元素选择器、id选择器、class选择器、后代选择器、群组选择器。
CSS选择器格式:
选择器
{
属性1 : 取值1;
……
属性n : 取值n;
}
1、元素选择器
举例:
div{color:red;}
把页面中所有的div元素选中,然后定义它们文本颜色为红色。
2、id选择器
元素最基本的属性是id和class。
id和class都是用来选择元素,以便进行CSS操作或者JavaScript操作。
id属性具有唯一性。
对于id选择器,id名前面必须要加上前缀“#”,否则该选择器无法生效。
id名前面加上“#”,表示这是一个id选择器。
举例:
#idname{color:red;}
3、class选择器(类选择器)
可以为同一个页面的相同元素或者不同元素设置相同的class,然后使得相同class的元素具有相同的CSS样式。
class名前面必须要加上前缀英句号(.),否则该选择器无法生效。
类名前面加上英文句号,表明这是一个class选择器。
举例:
.classname{color:red;}
4、后代选择器
选择元素内部中所有的某一种元素
举例:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#father1 div{color:red;}
#father2 #p1{color:blue;}
</style>
</head>
<body>
<div id="father1">
<div>CSS</div>
<div>CSS</div>
</div>
<div id="father2">
<p id="p1">CSS</p>
<p id="p2">CSS</p>
<span>CSS</span>
</div>
</body>
</html>
效果图:
5、群组选择器
指同时对几个选择器进行相同的操作。
两个选择器之间英文逗号(,)隔开。
#idname,.classname,p,span {color:red;}
6、相邻选择器
操作对象是该元素的同级元素。
选中该元素的下一个兄弟元素。
举例:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#idname+div{color:red;}
</style>
</head>
<body>
<div>CSS</div>
<div>CSS</div>
<div id="idname">
<p>CSS</p>
</div>
<div>CSS</div>
<div>CSS</div>
</body>
</html>
效果图:
三、字体样式
属性 | 说明 | 举例 |
---|---|---|
font-family | 字体类型 | font-family: “Times New Roman”; |
font-size | 字体大小(宽高) | font-size:15px; |
font-weight | 字体粗细 | font-weight:bold; |
font-style | 字体斜体 | font-style:italic; |
color | 颜色 | color:gray;或者color:#808080; |
font-family属性:字体类型只有一个英文单词,则、不需要加上双引号;若是多个英文单词或者中文的,则需要加双引号。 |
#000000是黑色,#FFFFFF是白色。
16进制RGB值在线获取:
Online Color Picker
四、文本样式
字体样式针对文字本身,使用”font“前缀。
文本样式针对整个段落。使用”text“前缀。
1、首行缩进:text-indent
举例:
<style type="text/css">
p
{
font-size:14px;
text-indent:28px;
}
</style>
首行缩进两个中文字符,text-indent值设为font-size值的2倍。
2、水平对齐:text-align
text-align对文本和图片(img元素)均有效。
属性 | 说明 |
---|---|
left | 左对齐(默认值) |
center | 居中对齐 |
right | 右对齐 |
3、文本修饰:text-decoration
属性 | 说明 |
---|---|
none | 去除所有的划线效果(默认值) |
underline | 下划线 |
line-through | 中划线 |
举例:去除超链接元素中的下划线 |
a{text-decoration:none;}
4、大小写转换:text-transform
属性 | 说明 |
---|---|
none | 无转换(默认值) |
uppercase | 转换为大写 |
lowercase | 转换为小写 |
capitalize | 只将每个英文单词首字母转换为大写 |
5、行高和间距
行高line-height
字间距letter-spacing
单词间距word-spacing
行高是指”一行的高度“,而行间距是指”两行文本之间的距离“。
五、边框样式
属性 | 说明 | 取值 |
---|---|---|
border-width | 边框的宽度 | 像素值 |
border-style | 边框的外观 | dashed虚线、solid实线 |
border-color | 边框的颜色 | 关键字或16进制RGB值 |
举例: |
border-width: 1px;
border-style: solid;
border-color: red;
等价于以下简写形式
border: 1px solid red;
上边框border-top、下边框border-bottom、左边框border-left、右边框border-right同样可以按照上例进行简写。
去除某一边框可以将其设置成0px或写成none。
六、列表样式
list-style-type属性是针对ol或者ul元素的,而不是li元素。
属性 | 说明 |
---|---|
decimal | 1、2、3…(默认值) |
lower-roman | :i、ii、iii… |
upper-roman | I、II、III… |
lower-alpha | a、b、c… |
upper-alpha | A、B、C… |
属性 | 说明 |
---|---|
disc | 实心圆●(默认值) |
circle | 空心圆○ |
square | 正方形■ |
去除列表符号:
list-style-type: none;
定义列表项图片:
list-style-image: url(图片路径);
七、表格样式
1、表格标题位置:
caption-side: 取值; /*取值为top、bottom*/
2、表格单元格间空隙:
举例:表格边框合并
<style type="text/css">
table,th,td{border:1px solid silver;}
table{border-collapse: collapse;}
</style>
border-collapse默认值为separate,表示边框分开,有空隙。
3、表格边框间距:
border-spacing: 像素值;
八、图片样式
1、图片对齐
(1)水平对齐
text-align属性取值为left、center、right
举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
width: 300px;
height: 80px;
border: 1px solid silver;
}
.div1{ text-align: left; }
.div2{ text-align: center; }
.div3{ text-align: right; }
img{ width: 60px; height: 60px; }
</style>
</head>
<body>
<div class="div1">
<img src="img/girl.gif" alt=""/>
</div>
<div class="div2">
<img src=" img/girl.gif" alt=""/>
</div>
<div class="div3">
<img src=" img/girl.gif" alt=""/>
</div>
</body>
</html>
图片的水平对齐不是在img元素中定义,而是在其父元素中定义。
(2)垂直对齐
vertical-align取值为top(顶部对齐)、middle(中部对齐)、baseline(基线对齐)、bottom(底部对齐)
2、文字环绕
float取值为left(元素向左浮动)、right
举例:
<style type="text/css">
img{float:left;}
p{
font-family:"微软雅黑";
font-size:12px;
}
</style>
九、背景样式
可以使用background或者bgcolor这两个“HTML属性”来为元素定义背景颜色或背景图片。现在,对于元素的背景样式,都是使用CSS属性来实现。
1、背景颜色
background-color: 颜色值;
color用于定义字体颜色。
2、背景图片样式
background-image: url(图片路径);
其中,图片路径可以加双引号,也可以不加。
举例:不显示背景图片(宽度和高度都为0)
div{background-image: url(img/haizei.png);}
举例:可以正确显示
div
{
width:250px;
height:170px;
background-image: url(img/css.png);
}
3、背景图片位置
background-position: 像素值/关键字;
background-position属性常用取值有两种:一种是“像素值”;另外一种是“关键字”
(1)像素值
要同时设置水平方向和垂直方向的数值,表示背景图片距离该元素左上角的水平方向距离,垂直方向距离。
水平距离和垂直距离这两个数值之间要用空格隔开,两者取值都是像素值。
举例:
<style type="text/css">
div
{
width:300px;
height:200px;
border:1px solid silver;
background-image:url(img/css.png);
background-repeat:no-repeat;
background-position:40px 20px;
}
</style>
(2)关键字
也要同时设置水平方向和垂直方向的值
background-position: 水平距离 垂直距离;
十、超链接样式
1、默认样式
(1)鼠标样式
当鼠标移入网页上的某个超链接时,其样式会变为一只小手;当鼠标移出超链接区域时,样式会再次回到箭头形状。
(2)颜色及下划线
默认情况:字体为蓝色,带有下划线;
鼠标点击时:字体为红色,带有下划线;(一瞬间)
鼠标点击后:字体为紫色,带有下划线;
如果某一个地址的超链接在之前被点击过,浏览器就会记下你的访问记录。那么下次你再用这个地址作为超链接地址时,显示的是紫色.
清空浏览器的历史记录会让超链接的颜色再次变回蓝色。
2、超链接伪类
用来定义超链接在鼠标点击的不同时期的样式。
a:link{…}
a:visited{…}
a:hover{…}
a:active{…}
必须按照“link、visited、hover、active”的顺序进行,不然浏览器可能无法正常显示这4种样式。
记忆方法:love hate,“爱恨原则”。
不是每个超链接都必须定义这4种状态,实际开发中,只会用到两种状态:未访问时状态和鼠标经过时状态(a:hover)。
对于未访问时状态(默认状态),直接针对a元素定义即可,没必要使用a:link
伪类 | 说明 |
---|---|
a:link | 定义a元素未访问时的样式 |
a:visited | 定义a元素访问后的样式 |
a:hover | 定义鼠标经过a元素时的样式 |
a:active | 定义鼠标点击激活时的样式 |
举例:
<style type="text/css">
a
{
color:red;
text-decoration: none;
}
a:hover
{
color:blue;
text-decoration:underline;
}
</style>
结果:未访问时是红色,鼠标经过时是带下划线的蓝色。
3、:hover的其他用法
元素:hover{…}
举例:使用:hover为div元素定义鼠标经过时就改变背景色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
width:100px;
height:30px;
line-height:30px;
text-align:center;
color:white;
background-color: lightskyblue;
}
div:hover
{
background-color: hotpink;
}
</style>
</head>
<body>
<div>css</div>
</body>
</html>
结果:默认蓝底白字,鼠标经过时是粉红背景白字。
举例::hover为img元素定义鼠标经过时就为其添加一个边框。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
img:hover
{
border:2px solid red;
}
</style>
</head>
<body>
<img src="img/css.gif" alt="">
</html>
4、鼠标样式
(1)浏览器鼠标样式
cursor: 取值;
(2)自定义鼠标样式
cursor: url(鼠标图片地址), 属性值;
“属性值”一般为3种:default、pointer和text。
十一、CSS盒子模型
所有元素都可以看成一个盒子。
属性 | 说明 |
---|---|
content | 内容,可以是文本或图片 |
padding | 内边距,用于定义内容与边框之间的距离 |
margin | 外边距,用于定义当前元素与其他元素之间的距离 |
border | 边框,用于定义元素的边框 |
![]() |
1、内容区
必备,其余组成部分均可选。
内容区有3个属性:width、height和overflow。
使用width和height属性可以指定盒子内容区的高度和宽度。
width和height这两个属性是针对内容区content而言,不包括padding部分。
当内容过多超出width和height时,可以使用overflow属性来指定溢出处理方式。
只有块元素可以设置width和height,行内元素无法设置width和height。
可以使用display属性将行内元素转换为块元素,也可以将块元素转换为行内元素。
2、内边距
常被称为“补白”。
指内容区和边框之间的空间,可以看成是内容区的背景区域。
内边距的属性有5种:padding-top、padding-bottom、padding-left、padding-right以及综合了以上4个方向的简写内边距属性padding
padding写法有如下3种:
padding: 像素值;
padding: 像素值1 像素值2;
padding: 像素值1 像素值2 像素值3 像素值4;
举例:
padding:20px表示4个方向的内边距都是20px。
padding:20px 40px表示padding-top和padding-bottom为20px,padding-right和padding-left为40px。
padding:20px 40px 60px 80px表示padding-top为20px,padding-right为40px,padding-bottom为60px,padding-left为80px。
按照顺时针方向记忆。
让文本在一个元素内部居中,可以使用padding来实现。
3、外边距
指两个盒子之间的距离,使元素不紧凑的连接在一起。
外边距的属性也有5种:margin-top、margin-bottom、margin-left、margin-right以及综合了以上4个方向的简写外边距属性margin。
4、边框
与CSS入门中五、边框样式一样。
参考: