CSS我们可以简单的理解为一种用来修饰HTML的层叠样式表。我们项目的前端页面往往是十分美观的,如果使用HTML自带的属性来设置页面的样式(字体,颜色,位置等)会十分麻烦,而CSS就是专门用来设置HTML样式的。
CSS的优点:
css样式的写法有三种:
行内样式表
在需要引用CSS的标签中,定义一个style标签。在标签内设置key/value。
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
head>
<body>
<div style="font-size:30px;color:red;">行内样式表div>
body>
html>
内部样式表
在head中定义一个style标签,在这个标签中写当前页面的样式
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
.box{
font-size: 40px;
color: rgb(0,255,0);
}
style>
head>
<body>
<div class="box">内部样式表div>
body>
html>
外部样式表
在html文件外创建.css结尾的文件,在文件中写css样式,引入页面需要使用link标签
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<link rel="stylesheet" href="style.css">
head>
<body>
<div class="box">外部样式表div>
<div class="box1">外部样式表div>
body>
html>
一个页面中会有多个标签的样式是一样的,这是我们可以使用选择器来选择所以满足条件的标签来统一设置CSS属性值,提升复用性。
,css中通过 #container
找到对应元素,然后可以统一设置样式。
,css中通过 .box
找到对应的元素,然后可以统一设置样式。
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<link rel="stylesheet" href="./style.css">
head>
<body>
<div class="news">
<ul id="list0">
<li>
<h3>猫咪1h3>
<img src="./maomi/maimi1.jpg" alt="图片加载失败" class="pic">
<p>猫咪1简介p>
<p>猫咪社p>
li>
<li>
<h3>猫咪1.5h3>
<img src="./maomi/maomi2.jpg" alt="图片加载失败" class="pic">
<p>猫咪1.5简介p>
<p>猫咪社p>
li>
ul>
div>
<div class="news">
<ul id="list1">
<li>
<h3>猫咪2h3>
<img src="./maomi/maomi3.jpg" alt="图片加载失败" class="pic">
<p>猫咪2简介p>
<p>猫咪网p>
li>
ul>
div>
body>
html>
/*类选择器*/
.news{
margin-left: 50px;
}
/*id选择器*/
#list0{
list-style: none;
}
/* /*后代选择器+id选择器*/
.news #list1{
list-style: none;
}
/*后代选择器+标签选择器*/
.news #list0 li{
border-bottom: 3px solid #000;
}
/*子集选择器*/
li>h3{
display: inline-block;
}
/*通用选择器*/
*{
margin: 0;
padding: 0;
}
盒模型(每一个标签都是盒模型,都可以看成是一个盒子)
盒模型都有以下几个属性:
块级元素、行内-块级元素可以设置宽高,这里设置的宽和高指的是content的宽高
padding/margin/border
都是是四个方向上,四个方向上的值可以不同。四个方向:上为top
,下为bottom
,左为left
,右为right
。
border由三个属性组成:宽度(border-width)、样式(border-style)、颜色(border-color)
border的简写方式:border:1px(宽度) solid(实线)/dotted(点线)/dashed(虚线) #000(颜色)
;(三个属性没有顺序要求)例如:border-bottom:3px red solid
;(只设置下边框)
padding/margin的简写:
padding:10px;
padding:10px 20px;
padding:10px 20px 30px;
padding:10px 20px 30px 40px;
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 600px;
height: 400px;
border: 1px solid #000;
margin: 50px auto;
}
.first{
width: 200px;
height: 100px;
border: 2px dotted red;
display: inline-block;
padding: 20px;
margin-right: 50px;
}
.second{
width: 200px;
height: 100px;
border: 2px dashed blue;
display: inline-block;
}
style>
head>
<body>
<div class="box">
<div class="first">firstdiv>
<div class="second">seconddiv>
div>
body>
html>
CSS中设置字体的常用字段如下:
"box">
"first">first
"second">second
CSS设置背景的常用字段如下:
"box">
汉字
元素:hover{}
什么是浮动:让元素脱离文档流,“漂”起来。
文档流:前端页面在浏览器中展示时是从左上角开始排练,横向从左到右依次排练行内元素或行内块元素,纵向是从上到下依次排练块级元素。
浮动关键字:float: left / right
浮动后:元素会脱离文档流,"漂"在离它最近的上一个块级元素之后,变成行内-块级元素
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
div{
border: 1px solid #000;
}
.two{
float: left;
}
style>
head>
<body>
<div class="first">firstdiv>
<div class="two">twodiv>
<div class="three">threediv>
body>
html>
结果如下:
元素浮动后一个问题:
浮动元素后面元素会受浮动影响,使用浮动后需要清除浮动
清除浮动方案:
1.添加一个空标签,给空标签设置clear属性 clear:left / right / both
2.给有浮动的元素添加一个父级元素,然后让父级元素清除浮动(overflow: hidden;)
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 600px;
height: 400px;
border: 1px solid #000;
}
.one{
width: 100px;
height: 100px;
border: 1px dotted red;
/*相对定位*/
position: relative;
top: 100px;
}
style>
head>
<body>
<div>
<div class="one">hahadiv>
div>
body>
html>
结果如下:
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 600px;
height: 400px;
border: 1px solid #000;
}
.one{
width: 100px;
height: 100px;
border: 1px dotted red;
float: left;
/*绝对定位*/
position: absolute;
top: 100px;
}
.ck{
width: 100px;
height: 100px;
border: 1px dotted red;
float: left;
}
style>
head>
<body>
<div class="box">
<div class="one">hahadiv>
<div class="ck">参考盒子div>
div>
body>
html>
固定定位(fixed):相当于浏览器窗口定位,不会随页面滚动发生位置改变,也是脱离文档流的
定位有四个方向:
top:相对顶部的偏移量
bottom:相对顶部的偏移量
left:相对左边的偏移量
right:相对右边的偏移量