css基础教程
css基础教程
文章目录
- css基础教程
-
- 一、css简介
- 二、css语法
- 三、css的引入方式
-
- 1、内部样式表（内联式）
- 2、外部样式表（外联式）
- 3、内联样式表（内嵌式）
- 四、css选择器
-
- 1、元素选择器
- 2、类选择器
- 3、id选择器
- 4、群组选择器
- 5、包含选择器
- 6、伪类选择器
- 7、通配符
- 五、浮动
- 六、定位（position）
-
- 1、相对定位（relative）
- 2、绝对定位（absolute）
- 3、固定定位（fixed）
- 七、元素属性
-
- 1、块级元素
- 2、行内元素
-
-
-
- 行内元素转为块级元素-------->display : block;
- 块级元素转为行内元素--------->display : inline;
- 隐藏元素----------->display : none;
-
-
- 八、盒模型
- 九、文本声明
- 十、溢出
-
-
-
-
- 解决方法：
- 方法如下：
-
- 1、先控制文本不换行
- 2、确认宽度
- 3、溢出处理
- 4、文本溢出
-
-
-
- 十一、列表声明
-
-
-
- 列表符号
- 列表位置
- 取消列表符号
- 导航
-
-
- 十二、过渡
-
-
-
- 1、鼠标划过就移动
- 2、鼠标划过缩放
- 3、旋转
- 4、倾斜转换
-
-
-
-
-
- 总结： 2D Transform方法
-
-
- 十三、动画
-
-
-
- 总结：CSS动画属性
-
-
- 十四、背景声明
-
-
-
-
- 1、先设置背景图片所在的边框大小，再插入背景图片
- 2、设置背景图片的平铺问题
- 3、设置图片的位置
- 4、图片在边框内显示的尺寸
- 5、总写
-
-
-
- 十五、媒体查询
- 拓展
-
- 1、视频链接
- 2、鼠标划过成阴影效果
- 3、心跳
- 4、加载
- 5、火箭旋转
- 6、背景网页
- 7、响应式界面
一、css简介
css指层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML的一个应用）文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。简单而言，css是用来控制网页的外观的一种代码语言，定义了如何显示HTML元素
二、css语法
选择器 {属性 ： 属性值 ； 属性 ： 属性值}
1、语法分为两部分：选择器 和 一条或多条声明
2、声明包含属性和属性值，属性和属性值之间用冒号链接，属性和属性之间用分号隔开
3、当一个属性有多个属性值时，属性值之间部分先后顺序，用空格隔开
三、css的引入方式
1、内部样式表（内联式）
写在标签内部，添加
DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
<title>css基础title>
<style>
h3 {
color: lightgreen ;
}
style>
head>
<body>
<h3>花开花落h3>
body>
html>
效果图：
2、外部样式表（外联式）
创建一个独立的css文档，利用标签进行链接，书写在标签内部
HTML界面：
DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
<title>css基础title>
<link rel = "stylesheet" type = "text/css" href = "css/one.css" />
head>
<body>
<div>你站在桥上看风景，看风景的人在桥上看你div>
body>
html>
CSS界面：
div {
color : yellow;
height : 30px;
weight : 50px;
background-color : #90EE90;
border : 3px /* 宽度 */ solid /* 实线 */ #333 /* 颜色 */;
}
效果图：
3、内联样式表（内嵌式）
直接书写在标签内部，通过标签的style属性来使用
DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
<title>css基础title>
head>
<body>
<div style = "color: aqua; background-color: #333333; height : 30px; weight = 50px">我生平看过许多次的云，走过许多的桥div>
body>
html>
效果图：
四、css选择器
选择器表示要定义样式的对象，可以是元素本身，也可以是一类元素或者指定名称的元素
1、元素选择器
以标签名作为选择器的一种方式，p/div/ul/li…
元素选择器{ 属性 ：属性值 ； 属性 ： 属性值；}
HTML界面：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css选择器title>
<link rel = "stylesheet" type = "text/css" href = "css/one.css" />
head>
<body>
<p>人生若只如初见p>
body>
html>
CSS界面
p{
color : #9ACD32;
}
效果图：
2、类选择器
在HTML中添加一个class属性，在css中利用 . 加class名的方式进行书写
.css{ 属性 ： 属性值 ； 属性 ： 属性值；}
HTML界面
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css选择器title>
<link rel = "stylesheet" type = "text/css" href = "css/one.css" />
head>
<body>
<p class = "p1">今天下雪了p>
body>
html>
CSS界面
.p1{
color : aqua;
}
效果图：
【注】：class = " " 引号中是class名，ciass名的命名要是字母开头，可以结合下划线和数字。p1相当于是外号，所以可以有多个外号，如下：
HTML界面：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css选择器title>
<link rel = "stylesheet" type = "text/css" href = "css/one.css" />
head>
<body>
<p class = "p1 p2">今天下雪了p>
body>
html>
CSS界面：
.p1{
color : aqua;
}
.p2{
height : 100px ;
width : 200px ;
background-color : blue ;
border : aliceblue solid #00FFFF;
}
效果图：
3、id选择器
在标签中为一个元素定义一个id属性，在css中通过#加id名的方式来进行表示
#id名{属性 ： 属性值 ；属性 ： 属性值 ；} id具有唯一性（一个页面中同一个id名不能出现两次）
HTML界面
DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
<title>css选择器title>
<link rel = "stylesheet" type = "text/css" href = "css/one.css" />
head>
<body>
<h2 id = "box">我是一个栗子h2>
body>
html>
CSS界面
#box{
color : yellow ;
}
效果图如下：
4、群组选择器
当多个选择器有同样的样式设置时，可以将选择器用逗号分开，合并为一组
选择器1 ， 选择器2 ， 选择器3{属性 ： 属性值 ； 属性 ： 属性值 ；}
HTML界面：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css选择器title>
<link rel = "stylesheet" type = "text/css" href = "css/one.css" />
head>
<body>
<p class = "box_1">我是盒子p>
<p class = "box_2">我是盒子p>
<p id = "box_3">我是盒子p>
body>
html>
CSS界面：
.box_1 , .box_2 , #box_3{
height :50px ;
width : 100px ;
background-color : yellowgreen;
border : beige solid #00FFFF;
color : red ;
}
效果图：
5、包含选择器
利用父级元素对子集元素进行设置
选择器爷 选择器父 选择器子{属性 ： 属性值 ； 属性 ： 属性值 ；}
HTML界面：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css选择器title>
<link rel = "stylesheet" type="text/css" href = "css/one.css" />
head>
<body>
<div class = "box_a">
<p>我是小白兔p>
div>
body>
html>
CSS界面：
.box_a p{
color : #FF0000;
}
效果图：
6、伪类选择器
:hover{属性 ： 属性值 ； 属性 ： 属性值 ；}
HTML界面：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css选择器title>
<link rel = "stylesheet" type="text/css" href = "css/one.css" />
head>
<body>
<a class = "act" href = "https://www.baidu.com">百度a>
body>
html>
CSS界面：
.act:hover{
color : #FF0000 ;
}
效果图：
鼠标没划过：
鼠标划过：
7、通配符
对页面中所有的元素进行样式设置
*{属性 ： 属性值 ； 属性 ： 属性值 ；}
CSS界面：
*{
margin : 0; /*外边距*/
padding : 0; /*内边距*/
}
五、浮动
设置了浮动的属性的元素会向左或向右移动，设置元素水平方向的排列方式
第一步，让元素竖向排列
HTML界面：
DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
<title>浮动title>
<link rel = "stylesheet" type = "text/css" href = "css/one.css" />
head>
<body>
<div class = "box1">1div>
<div class = "box2">2div>
<div class = "box3">3div>
body>
html>
CSS界面：
*{
margin : 0 ;
padding :0 ;
}
.box1{
width : 200px ;
height :200px ;
background-color :greenyellow ;
}
.box2{
width : 200px ;
height :200px ;
background-color : blue;
}