文章目录
CSS基础
CSS概述:
1. 概念
CSS层叠样式表。表示内容和样式可以相分离,而且一个内容上面可以添加多层样式。这样便于用户修改样式,而不会影响内容的部分。
2. CSS语法
首先有一个选择器,来规定样式的名字
一对大括号之内,来规定样式的设置,包括 属性名:属性值;
p(选择器){
color(属性名):red(属性值);
}
将该网页文本设置成12号字,然后用蓝色加粗显示出来
CSS添加方法
1. 行内
将属性和属性的取值的设定,直接添加到当前需要添加样式的元素的 标签内部。
<p style="color:red;">
...
</p>
当前文字样式就会出现红色字体
2. 内嵌
将CSS代码内嵌到当前页面的head标签部分
style标签内嵌要放在head标签下来写;
type=“text/css” 表示当前样式 是以CSS文本来规定的
style标签内部 就是基本CSS语法,
选择器p,作用于所有p标签(只对p有效)
color:red; 就是属性名和属性值了
注意:
3. 单独文件
单独样式表文件,后缀以.css结尾
<!--外部式样式表文件 style.ss-->
p{
color:red; /*设置文字颜色*/
}
网页文件:1.html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<p>天使投资指早起投资,尤其指个人早起投资。</p>
</body>
</html>
目的是要将文本设置成红颜色,它跟内嵌样式语法结构是相同的。
- 外部文件是在定义样式,网页文件是在引用样式
- 如何引用:添加一个link标签,表示要进行一个文件的链接。rel属性表示要链接到什么类型的文件;后面的href属性与超链接中href是一样的,通过一个相对路径的设置,表示要链接到的文件的相对位置和文件名字。
选择器
标签选择器
通过标签名直接选择相应的标签。
style标签写在head标签之间
<head>
<style type="text/css">
body{
...
}
h1{...}
p{...}
hr{...}
</style>
</head>
<body>
<h1>标题</h1>
<hr>
<p>正文</p>
</body>
类别选择器
能把样式进行分类,让同样的标签拥有不同的样式
注意类别名 用“.”开头
<head>
<title>类别选择器</title>
<style type="text/css">
p{
font-size: 12px;
}
.one{font-size: 18px;}
.two{font-size: 24px;}
</style>
</head>
<body>
<p class="one">类别1</p>
<p class="one">类别1</p>
<p class="two">类别2</p>
<p class="two">类别2</p>
<p>正文</p>
</body>
ID选择器
“#”开头
<html>
<head>
<title>id选择器</title>
<style type="text/css">
#one
{
width:200px;
height:140px;
border: 1px solid black;
}
</style>
</head>
<body>
<div>区域一</div>
<div id="one">区域二</div>
<div>区域三</div>
</body>
</html>
盒子模型
什么是盒子模型?
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
-
Margin(外边距) - 清除边框外的区域,外边距是透明的
-
Border(边框) - 围绕在内边距和内容外的边框。
-
Padding(内边距) - 清除内容周围的区域,内边距是透明的。
-
Content(内容) - 盒子的内容,显示文本和图像。
-
一个盒子的实际宽度、高度:content+padding+border+margin
CSS文件
<html>
<head>
<style type="text/css">
#box{
width:100px;
height:100px;
border:1px solid;
padding:20px;
margin:10px;
}
</style>
</head>
html文件
<body>
<div id="box">
内容...
</div>
</body>
</html>
- overflow属性
hidden 超出部分不可见
scroll 显示滚动条
auto 如果有超出部分,显示滚动条
当内容溢出盒子框时,overflow属性取值
- border属性
border-width
border-style
border-color
border
margin属性、padding属性
对于盒子模型来说,默认的浏览器会给它一个默认值,
包括 字体字号,margin ,padding
为了正确的布局,首先我们要对浏览器默认的属性值设置清零。
- margin 有四个值,顺序分别是 top - right - bottom - left (上→右→下→左)
- 当margin只写一个值时,则四个值相同
- 当margin只写两个值时,上右的值,对应下左的值
- 当margin只写三个值时,右值 对应 被省略的左值
- margin的合并
- 垂直方向合并,水平方向不合并
- 合并后的边距不是两外边距之和,而是取两盒子外边距最大值