CSS简述
css是什么?有什么作用?
HTML------>页面的结构------>人的面部(素颜)。
CSS------>美化页面------>给人化妆。
CSS通常称为CSS样式或层叠样式表,主要用于设置HTML页面中的文本内容(字体、大小、对其方式等)、图片的外形(高宽、边框样式、边距等)以及版面的布局等外观显示样式。
CSS可以使HTML页面更好看,CSS色系的搭配可以让用户更舒服,CSS+DIV布局更佳灵活,更容易绘制出用户需要的结构。
css入门案例
- 步骤1:创建一个HTML文件。
- 步骤2:在HTML上创建一个字体标签。
- 步骤3:字体标签中新增一一个 style属性,并修改style属性值。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<font size="7">hell,oworld</font>
<br />
<font size="70">hell,oworld</font>
<br />
<font style="font-size: 70px;">hell,oworld</font>
</body>
</html>
运行结果:
使用html的标签设置字体大小时最大就是7,而使用css设置字体标签时没有最大值。
为什么使用CSS替代HTML属性设置样式
因为HTML属性在单独使用时有一定的局限性,所以要配合CSS样式代码才可以展示更为丰富的效果。
css的代码规范
放置规范:
在< style >标签内容体中书写css样式代码。
< style >标签放置在< head >标签之中。
格式规范:
选择器名称 { 属性名1:属性值1; 属性名2:属性值2; … }
选择器:即指定CSS样式作用在哪些HTML标签上。
代码规范:
属性名和属性值之间是键值对关系。
属性名和属性值之间用“:”连接,最后“;”结尾。
例如: font-size:120px;
如果一个属性名有多个值, 多个值之间用空格隔开。
例如: border:5px solid red;
CSS注释:
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
span{
/* 设置span标签的大小 */
font-size: 70px;
/* 设置span标签的颜色 */
color: red;
/* 设置span标签的线框,有多个属性用空格隔开 */
border: 1px solid blue;
}
</style>
</head>
<body>
<span>111111111111</span>
<br />
<span>222222222222</span>
</body>
</html>
运行结果:
css选择器
基本选择器
元素选择器
HTML标签又名HTML元素。
元素选择器:即以HTML标签名作为选择器名称。
作用:选择CSS样式代码作用于对应标签名的标签上。
- 格式:
标签名:{
css样式代码
}
适用范围:适用于将相同样式作用在多个同名标签上。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
span{
font-size: 70px;
}
</style>
</head>
<body>
<span>我是span11111111</span>
<span>我是span22222222</span>
<div>我是div1111111111</div>
<div>我是div2222222222</div>
</body>
</html>
运行结果:
修改了span标签的样式
类选择器
每个HTML标签都有一个class属性,class 属性值即为类名。
类选择器:即以HTML的类名 (class 属性值) 作为选择器名称。
作用:选择CSS样式代码作用于对应类名的HTML标签上。
- 格式:
.类名{
css样式代码
}
适用范围:适用于将样式一次作用在相同类名的标签上。(即使标签名不同)
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.red{
color: red;
}
</style>
</head>
<body>
<span>span1:我是黑色</span>
<span class="red">span2我是红色</span>
<div>div1:我是黑色</div>
<div class="red">div2:我是红色</div>
</body>
</html>
运行结果:
span和div的标签名不一样,但是设置了类名也是可以一起修改的。
id选择器
每个HTML标签都有一个id属性,id的属性值必须在本页面是唯一的。
id选择器:即以HTML的id (id 属性值)作为选择器名称。
作用:选择CSS样式代码作用于某个规定id值的html标签上。
- 格式:
#id值{
css样式代码
}
适用范围:适用于将样式作用某个标签上。(更有针对性)
注意:必须手动保证id值在本页唯一。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#d2{
color: red;
}
</style>
</head>
<body>
<span>span1:我是黑色</span>
<span>span2:我是黑色</span>
<div>div1:我是黑色</div>
<div id="d2">div2:我是红色</div>
</body>
</html>
运行效果:
基本选择器的组合方式
层级关系
标签和标签之间有层级关系,例如: 标签的子标签为< body >标签。
我们可以对基本选择器进行组合,表现出层级关系,从而更加针对性地把样式作用于某些标签上。
- 格式:
选择器1 选择器2…{
css样式代码
}
选择器1下的选择器2,相当于< html >标签下的< body >。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div font{
color: red;
}
</style>
</head>
<body>
<div>
<font>我想变红</font>
</div>
<font>我保持黑色</font>
</body>
</html>
运行结果:
通过层级关系将div标签下的font标签中的内容体改为了红色。
边框属性
所有的HTML标签都有边框,默认边框不可见。
边框:border
设置边框的样式
- 格式:宽度 样式 颜色
例如: border:1px solid red ,1像素粗的 实线 红色边框。
线条样式:solid实线,none无边,double 双线。
宽度:width
用于设置标签的宽度
高度:height
用于设置标签的高度
背景颜色:background - color
用于设置标签的背景颜色。
背景颜色设置的两种主流方式:
①英文单词
例如: red,blue,yellow
②颜色代码
格式: #红绿蓝,每一个颜色用两个16进制位数表示。
例如: #ff1100 红色ff,绿色11,蓝色00,红色颜色最重,绿色其次,没有蓝色。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
border: 1px solid red;
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div>hello,word</div>
</body>
</html>
运行结果:
布局
浮动属性:float
通常默认的排版方式,将页面中的元素从上到下一一罗列,而实际开发中,需要左右方式进行排版,就需要使用浮动属性。
-
格式:
选择器{float:属性值;} -
常用属性值:
none:元素不浮动(默认值)。
left:元素向左浮动。
right:元素向右浮动。
注意:因为元素设置浮动属性后,会脱离原有文档流(会脱离原有的板式),从而会影响其他元素的样式,所以设置浮动以后,页面样式需要重新调整。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#d1 {
background-color: red;
width: 100px;
height: 100px;
float: right;
}
#d2 {
background-color: green;
width: 110px;
height: 110px;
float: right;
}
#d3 {
background-color: blue;
width: 120px;
height: 120px;
float: right;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
</html>
运行结果:
将三个div浮动到右方
转换
display
display属性可以使得元素在行内元素和块元素之间相互转换。
-
格式:
选择器{display:属性值} -
常用的属性值:。
block:此元素将显为块元素(块元素默认的display属性值)
inline:此元素将显示为行内元素(行内元素默认的display属性值)。
none:此元素将被隐藏,不显示,也不占用页面空间。
示例:
没有添加转换时的页面
添加转换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
display: inline;
}
li{
display: inline;
}
span{
display: block;
}
a{
display: none;
}
</style>
</head>
<body>
<h2>块级元素1-div----------由块元素转换为行内元素</h2>
<div>div1</div>
<div>div2</div>
<h2>块级元素2-无序列表</h2>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<h2>行内元素1-span----------由行内元素转换为块元素</h2>
<span>span1</span>
<span>span2</span>
<h2>行内元素2-a</h2>
<a>a1</a>
<a>a2</a>
html
</body>
</html>
运行结果:
块级元素都转换为了行内元素,而行内元素也转换为了块元素,最后的a标签页设置了none属性而隐藏了起来,但是也不占页面空间。
字体
大小:font-size
用于设置字体的大小。
颜色:color
用于设置字体的颜色。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
span{
font-size: 70px;
color: red;
}
</style>
</head>
<body>
你好吗
<span>我想要变大变红</span>
你好啊
</body>
</html>
运行结果:
css盒子模型
什么是盒子模型
所有的HTML元素,我们都可以看成一个四边形,即一个盒子。
用CSS来设置元素盒子的内边距、边框和外边距的样式的方式。
相当于设置盒子的样式,所以我们将其称之为盒子模型。
边框(border回顾及再概述)
边框:HTML元素盒子的框体,和css的边框属性是一样的。
边框有四个属性可以设置:
border- top:上边框。
border -right:右边框。
border -bottom:下边框。
border -left:左边框。
示例:
<span style="border-top: 1px solid red;">内容体</span>
效果:
通用性设置:
一次性设置上下左右边框样式为:1像素的 实体 红色线。
border:1px solid red;e
示例:
<span style="border: 1px solid red;">内容体</span>
效果:
内边距:padding
内边距: HTML元素里的内容体到HTML元素边框的距离。
内边距有四个属性可以设置:
padding-top:上边距
padding-right:右边距
padding-bottom:下边距
padding-left:左边距
通用性设置:
次性设置上下左右内边距距离为10px
padding:10px;
示例:
使用了通用性设置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
border: 1px solid red;
padding: 10px;
}
</style>
</head>
<body>
<div>内容体</div>
</body>
</html>
运行结果:
外边距:margin
外边距: HTML元素边框到其他HTML元素边框的距离
外边距有四个属性可以设置:
margin-top:上边距
margin-right:右边距
margin-bottom:下边距
margin-left:左边距
通用性设置:
一次性设置上下左右外边距距离为10px
margin:10px;
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
border: 1px solid red;
margin: 10px;
}
</style>
</head>
<body>
内容体
<div>内容体</div>
</body>
</html>
运行结果:
css和html的结合方式
内部样式
行内样式
行内样式,是通过标签的style属性来设置元素的样式。
格式:
< html标签 style="css 样式代码”/ >
示例:
<span style="font-size: 100px; color: red; ">hello,world</span>
效果:
< style >标签方式
当某些样式在页面中被多个标签重复使用,为了编码更加灵活,避免书写重复代码。
我们将样式代码从标签style属性中抽取出来,统一写入 到style标签中。
- 格式:
< style >
css样式
< /style >
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
span{
font-size: 100px;
color: red;
}
</style>
</head>
<body>
<span>hello,world</span>
<br />
<span>html</span>
</body>
</html>
运行结果:
应用环境:适合页面中进行样式复用,设置多个标签。
外部样式
< link/ >标签方式
< link/ >又称为链入式,是将所有的样式放在一个或多个以css为扩展名的外部样式表文件中,通过< link >标签将样式连接到HTML文档中。
格式:
< link rel=“stylesheet” type=“text/css” href=“css文件路径”/ >
rel=“stylesheet” ,固定值,表示样式表
type=“text/css”, 固定值,表示css类型
href,表示css文件位置
适合:不同页面进行样式复用。
示例:
HTML文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>
<a>hello</a>
<a>hello</a>
<a>hello</a>
<a>hello</a>
</body>
</html>
css文件
a{
font-size: 100px;
color: red;
}
运行结果: