一.什么是css?
1.CSS(Cascading Style Sheets) CSS通常称为CSS样式表或层叠样式表(级联样式表)
主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。
CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。
2.CSS 主要目的
控制网页中元素的样式 CSS 可以让我们从HTML结构和样式分离出来。 Css 可以让我们 专注结构。
专注结构: 就是h就是一个标题 p就是一个段落。 但是不应该再告诉我们,是什么颜色,是多大字号。
CSS 布局 弱化 标签布局。 代码更少, 语义更好, 搜索更容易.....
二.CSS选择器
帮助我们找到我们要修饰的标签或者元素
在一个style标签中,去编写CSS内容,最好将style标签写在这个head标签中
<style>
选择器{
属性名称:属性的值;
属性名称2: 属性的值2;
}
</style>
1、标签(元素)选择器 标记选择器是指用HTML标记名称作为选择器,按标记名称分类,为页面中某一类标记指定统一的CSS样式。其基本语法格式如下:
<style>
元素的名称{
属性名称:属性的值;
属性名称:属性的值;
}
</style>
标记选择器最大的优点是能快速为页面中同类型的标记统一样式,同时这也是他的缺点,不能设计差异化样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
span{
color: pink;
}
div{
color: blue;
}
</style>
</head>
<body>
<span>hello</span>
<span>world</span>
<div>hahaha</div>
<div>lalala</div>
</body>
</html>
2.ID选择器:
id选择器使用“#”进行标识,后面紧跟id名,其基本语法格式如下:
<style>
#ID的名称{
属性名称:属性的值;
属性名称:属性的值;
}
</style>
该语法中,id名即为HTML元素的id属性值,大多数HTML元素都可以定义id属性,元素的id值是唯一的,只能对应于文档中某一个具体的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div2{
color: pink;
}
</style>
</head>
<body>
<div id="div2">hahaha</div>
<div>lalala</div>
</body>
</html>
3.类选择器:
类选择器使用“.”(英文点号)进行标识,后面紧跟类名,其基本语法格式如下:
<style>
.类的名称{
属性名称:属性的值;
属性名称:属性的值;
}
</style>
类选择器最大的优势是可以为元素对象定义单独或相同的样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.fruit{
color: pink;
}
.vegetable{
color: yellow;
}
</style>
</head>
<body>
<div class="fruit">苹果</div>
<div class="fruit">香蕉</div>
<div class="fruit">橙子</div>
<div class="vegetable">西红柿</div>
<div class="vegetable">青菜</div>
<div class="vegetable">胡萝卜</div>
</body>
</html>
三.CSS的引入方式
1.外部样式: 通过link标签引入一个外部的css文件
HTML文件中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="fruit">苹果</div>
<div class="fruit">香蕉</div>
<div class="fruit">橙子</div>
<div class="vegetable">西红柿</div>
<div class="vegetable">青菜</div>
<div class="vegetable">胡萝卜</div>
</body>
</html>
css文件中
.fruit{
color: pink;
}
.vegetable{
color: yellow;
}
2.内部样式: 直接在style标签内编写CSS代码
3. 行内样式: 直接在标签中添加一个style属性, 编写CSS样式
四.css的浮动
CSS浮动 : 浮动的元素会脱离正常的文档流,在正常的文档流中不占空间
float属性:
left
right
clear属性: 清除浮动
both : 两边都不允许浮动
left: 左边不允许浮动
right : 右边不允许浮动
流式布局