CSS
1、CSS介绍
- CSS英文全称:
Cascading Style Sheets
,通常我们称之为CSS样式
或层叠样式表
。样式
:给HTML标签添加需要展示的效果(可以理解为外观
)层叠
:使用不同的添加方式,给同一个HTML标签添加样式,最后所有的样式都叠加到一起
,共同作用
于该标签。
- CSS的作用:主要用于设置HTML页面中的文本内容(字体、大小、对其方式等)、图片的外形(高宽、边框样式、边距等)以及版面的布局等外观显示样式。简单来讲,
CSS可以让HTML页面更美观
。 - 问题:
- 1.css写在哪里?
- 2.如何找到标签添加的样式
- 3.都有什么样式
2、CSS样式规则
- 使用HTML时,需要遵从一定的规范。CSS亦如此,要想熟练的使用CSS对网页进行修饰,首先需要了解CSS样式规则。具体格式如下:
选择器 {
属性1 : 属性值;
属性2 : 属性值;
..
}
- 在上面的样式规则中,
“选择器”
用于指定CSS样式作用的HTML对象
,花括号
内是对该对象设置的具体样式
。属性和属性值以键值对
方式出现,使用英文冒号“:”
分隔。多个属性之间使用英文分号“;”分隔。例如:
<style>
h2{
color : red ;
font-size : 100px ;
}
</style>
- 初学者在书写CSS样式时,除了要遵循CSS样式规则,还必须注意CSS代码结构中的几个特点,具体如下:
- l CSS样式
“选择器”严格区分大小写
,“属性”和“属性值”不区分大小写
。 - l 多个属性之间必须用
英文状态下的分号
隔开,最后一个属性后的分号可以省略,但是,为了便于增加新样式最好保留。 - l 如果属性的值由
多个单词组成且中间包含空格
,则必须为这个属性值加上英文状态下的引号
。例如: p { font-family:“Times New Roman”;} - l 在编写CSS代码时,为了提高代码的可读性,通常会加上CSS注释,例如:
/* 这是CSS注释文本,此文本不会显示在浏览器窗口中 */
- l 属性的
值和单位之间是不允许出现空格的
,否则浏览器解析时会出错。- 例如,下面这行代码就是不正确的。
h1{ font-size:20 px; } /* 20和单位px之间有空格,错误 */
- l CSS样式
3、引入CSS样式
- CSS使用非常灵活,既可以嵌入在HTML文档中,也可以是一个单独的文件,如果是单独的文件,则必须以.css为扩展名。CSS和HTML的结合3种常用方式:
1. 行内样式
- 行内样式,是通过标签的style属性来设置元素的样式
<
!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS样式演示</title>
</head>
<body>
<!--方式1:行内样式
color : 表示字体颜色
font-size : 表示字体大小
-->
<span style="color:#ff0000;font-size:28px;">大牛播客</span>
</body>
</html>
2. 内部样式
- 内部样式又称为内嵌式,是将CSS代码集中写在HTML文档的head头部标签体中,并且使用style标签定义。
- l 给当前html文件中的多个标签设置样式。
- l 在html的head标签中使用style标签来定义CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS样式演示</title>
<!--方式2:内部样式 -->
<style type="text/css">
span {
color: #ff0000;
font-size: 30px;
}
</style>
</head>
<body>
<!-- span标签会引用<style>中声明的span样式 -->
<span>大牛播客</span>
</body>
</html>
内嵌式CSS样式只对其所在的HTML页面有效
,可以对多处标签统一设置样式,因此,仅设计一个页面时,使用内嵌式是个不错的选择。但如果是一个网站,不建议使用这种方式,因为他不能充分发挥CSS代码的重用优势。
3. 外部样式 (前端开发,都采用该方式 主流方式)
- 外部样式又称为链入式,是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过link标签将样式连接到HTML文档中
- css_demo1.html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS样式演示</title>
<!--方式3:外部样式
rel="stylesheet", 固定值,当前文件和引入文件的关系,rel是relationship的缩写,stylesheet是样式表
type="text/css", 固定值,表示浏览器解析方式
href="xxx.css", 表示css文件位置
-->
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<!-- 引用了css/sytle.css中的span样式 -->
<span>大牛播客</span>
</body>
</html>
- 链入式最大的好处是同一个CSS样式表可以被不同的HTML页面链接使用,同时一个HTML页面也可以通过多个link标记链接多个CSS样式表
三种样式的优先级
- 行内样式 > 内部样式|外部样式(谁写在后边,使用谁,后边的会覆盖前边的)
4、选择器
- 要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器,本小节将对CSS基础选择器进行详细地讲解。
4.1、元素选择器
- 元素选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。其基本语法格式如下:
标签名{
属性1 : 属性值1;
属性2 : 属性值2;
属性3 : 属性值3;
}
- 该语法中,所有的HTML标签名都可以作为元素选择器(标记选择器),例如body、p、div、span等。用标记选择器定义的样式对页面中该类型的所有标记都有效。例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS样式演示</title>
<!--方式2:内部样式 -->
<style type="text/css">
span {
color: #ff0000;
font-size: 30px;
}
</style>
</head>
<body>
<!-- span标签会引用<style>中声明的span样式 -->
<span>大牛播客</span>
</body>
</html>
4.2、ID选择器
- id选择器使用“#”进行标识,后面紧跟id名,其基本语法格式如下:
#id名{
属性1 : 属性值1;
属性2 : 属性值2;
属性3 : 属性值3;
}
- 该语法中,id名即为HTML元素的id属性值,大多数HTML元素都可以定义id属性,元素的id值是唯一的,只能对应于文档中某一个具体的元素。即使在页面中使用多个相同id值也不会报错,但是会影响到javascript的网页特效。例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS样式演示</title>
<style type="text/css">
#demo1 {
color: #00ff00;
}
</style>
</head>
<body>
<!-- id=”demo1”会引用<style>中声明的#demo1样式 -->
<h1 id="demo1">大牛播客</h1>
</body>
</html>
4.3、类选择器
- 类选择器使用“.”(英文点号)进行标识,后面紧跟类名,其基本语法格式如下:
.类名{
属性1 : 属性值1;
属性2 : 属性值2;
属性3 : 属性值3;
}
- 该语法中,类名即为HTML元素的class属性值,大多数HTML元素都可以定义class属性。类选择器最大的优势是可以为元素对象定义单独或相同的样式。例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS样式演示</title>
<style type="text/css">
.myClass {
font-size: 25px;
}
</style>
</head>
<body>
<h1 class="myClass">大数据课程</h1>
</body>
</html>
5、CSS样式
5.1、边框和尺寸
-
border :设置边框的样式
- 格式:宽度 样式 颜色
- 例如:style=”border : 1px solid #ff0000” ,1像素实边红色。
- 样式取值:solid 实线,none 无边,double 双线 等
-
width、height :用于设置标签的宽度、高度。
-
参考代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS样式演示</title>
<style type="text/css">
div {
border: 1px solid #000; /*1像素,实边,黑色*/
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- 运行结果:
- 扩展 : 可以分别设置4个边
- border-left : 左
- border-right : 右
- border-top : 上
- border-bottom : 下
5.2、转换
- HTML提供丰富的标签,这些标签被定义成了不同的类型,一般分为:块标签和行内标签。
- l 块标签:以区域块方式出现。每个块标签独自占据一整行或多整行。
- 常见的块元素: <h1>、<div>、<ul> 等
- l 行内元素:不必在新的一行开始,同时也不强迫其他元素在新的一行显示。
- 常见的行内元素: <span>、<a> 等
- 在开发中,希望行内元素具有块元素的特性或者块元素具有行内元素的特性,可以使用display进行转换
选择器{display:属性值}
常用的属性值:
inline:此元素将显示为行内元素(行内元素默认的display属性值)
block:此元素将显为块元素(块元素默认的display属性值)
none:此元素将被隐藏,不显示,也不占用页面空间。
- 案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS样式_转换属性</title>
<style type="text/css">
div{
border: 1px solid red;
}
span{
border: 1px solid green;
}
</style>
</head>
<body>
<div>我是一个div,我会霸占一行</div>
<div style="display: inline;">我是一个div,被转换为了行内元素,不在占用一行
</div>
<span>我是一个span标签,只占用一行中的一部分</span>
<span style="display: block;">我是一个span标签,被转换为了行间元素,会霸占一行
</span>
<div style="display: none;">我是一个隐藏的div,你是看不到我的</div>
</body>
</html>
5.3、字体
- color :颜色,字体颜色
- font-size : 字体的大小,像素px
- font-family : 字体 (例如:幼圆,宋体,楷体…)
- text-decoration : none 取消文字上的下划线
- 案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS样式_字体</title>
</head>
<body>
<a href="#" target="_blank" style="color: red;">我是红色超链接</a>
<a href="#" target="_blank" style="font-size:50px">我是最大超链接</a>
<a href="#" target="_blank" style="font-family: 楷体;">我是楷体超链接</a>
<a href="#" target="_blank" style="text-decoration: none;">我是无下划线的超链接</a>
</body>
</html>
5.4、背景色
- background-color : 设置背景色
- background-image : url(背景图片的连接)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置背景色和设置背景图片属性</title>
</head>
<!--给body添加一个背景图片-->
<body style="background-image: url(img/bg.jpg);">
<div style="background-color: yellow;">我是一个div</div>
</body>
</html>
5.5、布局
- 通常默认的排版方式,将页面中的元素从上到下一一罗列,而实际开发中,需要左右方式进行排版,就需要使用浮动
选择器{float:属性值;}
常用属性值:
left:元素向左浮动
right:元素向右浮动
none:元素不浮动(默认值)
- 由于浮动元素不再占用原文档流的位置,所以它会对页面中其他元素的排版产生影响。如果要避免影响,需要使用clear属性进行清除浮动。
选择器{clear:属性值;}
常用属性值:
left:不允许左侧有浮动元素(清除左侧浮动的影响)
right:不允许右侧有浮动元素(清除右侧浮动的影响)
both:同时清除左右两侧浮动的影响
- 案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS样式_布局</title>
</head>
<body>
<!--默认上下布局-->
<div>
<div>区域1-1</div>
<div>区域1-2</div>
</div>
<hr />
<!--浮动左右布局-->
<div>
<div style="float: left;">区域2-1</div>
<div style="float: left;">区域2-2</div>
</div>
<!-- 重点关注下面这行代码,查看页面效果 -->
<div style=" float: left;">区域X</div>
<hr />
<div>
<div style="float: left;">区域2-1</div>
<div style="float: left;">区域2-2</div>
<div style="float: left;">区域2-3</div>
</div>
</body>
</html>
- 运行效果:
- 修改代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS样式_布局</title>
</head>
<body>
<!--默认上下布局-->
<div>
<div>区域1-1</div>
<div>区域1-2</div>
</div>
<hr />
<!--浮动左右布局-->
<div>
<div style="float: left;">区域2-1</div>
<div style="float: left;">区域2-2</div>
</div>
<!--取消浮动,另起一行布局-->
<div style="clear:both">区域X</div>
<!--<div style="float: left;">区域X</div>-->
<hr />
<div>
<div style="float: left;">区域2-1</div>
<div style="float: left;">区域2-2</div>
<div style="float: left;">区域2-3</div>
</div>
</body>
</html>
- 运行效果:
5.6、CSS的盒子模型
5.6.1、什么是盒子模型
- 何一个网页元素包含由这些属性组成:内容(content)、内边距(padding)、边框(border)、边界(margin), 这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解,所以叫它盒子模型。
- 内容(content)就是盒子里装的东西;
- 内边距(padding) 就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料;
- 边框(border) 就是盒子本身了;
- 外边界(margin) 则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出。
- 外边距:当前元素 与 它外面元素之间的距离
- 内边距:当前元素 与 它内部的内容(可以是标签,可以是文本内容)之间的距离
5.6.2、盒子模型的相关属性
- 盒子模型相关的属性:border 边框,padding 内边距;margin 外边距;
属性 | 作用 |
---|---|
border | 边框属性 |
padding | 内边距 |
margin | 外边距 |
内边距:padding
- 内边距四边距离定义:
内边距的写法 | 含义 |
---|---|
padding-top:10px; | 上内边距 |
padding-left:10px; | 左内边距 |
padding-bottom: 10px; | 下内边距 |
padding-right:10px; | 右内边距 |
外边距:margin
外边距的写法 | 含义 |
---|---|
margin-top:10px; | 上外边距 |
margin-left:10px; | 左外边距 |
margin-bottom: 10px; | 下外边距 |
margin-right:10px; | 右外边距 |
- 简写形式:
外边距的写法 | 含义 |
---|---|
margin:10px | 四边相同 |
margin:10px 20px; | 上下 左右 |
margin:10px 20px 30px; | 上 左右 下 |
margin:10px 20px 30px 40px; | 上 右 下 左 |
- margin:上下左右 都使用同一个边距。margin:10px
- margin:上下相同、左右相同 margin:10px(上下 ) 20px(左右);
- margin:上下不同 、左右相同 margin:10px(上) 20px(左右) 5px(下)
- margin: 10px(上) 20px(右) 5px(下) 15px(左)