前端-css-1-基础
CSS简介
# CSS
# HTML是骨架
# CSS是样式
# JS是动作
# css和html是分成两个文件编写的,这也是体现了文档内容和样式的解耦,
# CSS:层叠样式表(英文全称:Cascading Style Sheets)
CSS的内容列表
1,css的引入,三种方式
2,css的选择器,
基本选择器,有四种,p # . *
组合选择器,
属性选择器
分组和嵌套
伪类选择器
伪元素选择器
选择器的优先级
3,css的各种属性,
宽和高,width,height,
字体属性,font-size,font-weight,color,
文字属性,text-align,text-decoration,text-indent,
背景属性,background-color,background-repeat,background-image,background-position,
display
盒子模型,margin外边距,border边框,padding内填充,content内容
float,三种取值,left,right,none,
clear,清除浮动,
overflow,溢出属性,
定位position,
4,综合应用案例
CSS的引入
1,直接在标签中写style="样式1;样式2"
2,在head中通过style标签定义
3,把css文件单独写入一个文件,在head中通过link导入外部的css文件,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
color: blue;
}
</style>
<link rel="stylesheet" href="test.css">
</head>
<body>
<a href="" style="color: red">百度</a>
<p>海盐</p>
<h1>小明</h1>
</body>
</html>
css文件,test.css
h1{
color: green;
}
CSS的语法和注释
/*
css语法:
选择器{属性:值;属性:值}
CSS注释:
有了注释整个的代码就很清晰了
*/
/*解释性的说明,这个文件是做什么用的*/
/*全局性的样式*/
/*导航条的样式*/
/*商品列表的样式*/
p{
color: green;font-size: 48px;
}
CSS的常用选择器
/*
css选择器:
第一种:标签选择器
但是这种有局限,会导致所有的标签都是同样的样式,但是实际中往往是同样的标签可能会有不同的样式
*/
p{
color: green;
}
/*
第二种:id选择器
这个选择器的优先级要高于标签选择器,到这里基本一个页面的所有的样式都可以定义了,
但是一个网页有几百个标签都要表上id才可以,
有没有简单的办法呢?
*/
#p2{
color: red;
}
/*
第三种:类选择器,
因为id不能重复,但是类可以重复,所以只需要写一份类选择器就可以应用到多个标签,这个实际工作中是用的最多的,
*/
.c1{
color: black;
}
/*第四种:通用选择器
对整个页面进行样式设置
*/
*{
font-size: 18px;
}
/*
总结:
上面是最基本的选择器
# 标签选择器:适用于批量统一默认的样式,
# ID选择器:适用于给特定的标签设置样式
# 类选择器:适用于给某一些标签设置样式,
*/
对应的html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<p id="p1">andy</p>
<p id="p2">xiaomei</p>
<p class="c1">xiaomei</p>
<p class="c1">xiaomei</p>
<p class="c1">xiaomei</p>
<p class="c1">xiaomei</p>
</body>
</html>
CSS的组合选择器
/*
还有一些不常用的,但是也会用到的选择器
组合选择器
*/
/*
第一种组合选择器:后代选择器
*/
/*这是标示id是d1的标签,下面的p标签,包含所有的后代,儿子,孙子标签*/
/*#d1 p{*/
/*color: red;*/
/*}*/
/*
第二种组合选择器:儿子选择器,只有儿子标签起作用,孙子标签是不起作用的
*/
#d1>p{
color: red;
}
/*第三种组合选择器,毗邻选择器,必须是同级靠近的,而且只会往下找一个标签,再远的就不行了,
*/
div+p{
color: yellow;
}
/*第四种组合选择器,弟弟选择器,这是这个标签下面所有的标签都会受到影响
*/
div~p{
color: blue;
}
对应的html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div id="d1">
<!--这是儿子标签-->
<p>div里面的p标签</p>
<span>div里面的span标签</span>
<div>
<!--这是孙子标签-->
<p>div中的div里面里面的p标签</p>
<span>div中的div里面里面的span标签</span>
</div>
</div>
<!--毗邻选择器-->
<p>000</p>
<hr>
<div>111</div>
<p>222</p>
<p>333</p>
</body>
</html>
CSS属性选择器
/*属性标签*/
/*这是把属性是s9的标签,颜色变成红色*/
[s9]{
color: red;
}
/*第二种方式*/
[s9="1"]{
color: green;
}
对应的html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<p s9="1">这是一个p标签</p>
<p s9="2">这是一个p标签</p>
<p>这是一个p标签</p>
</body>
</html>
CSS的分组和嵌套选择器
/*分组选择器*/
/*第一种写法*/
/*建议分组的时候,如果有多个标签,采用分行,但是记住一定要加逗号,否则就变成了后代选择器,*/
div,
p{
color: red;
}
/*第二种写法*/
#d1,
p{
color: green;
}
/*嵌套选择器*/
/*意思就是说不是一定要是一个标签,也可以是一个id表示的*/
#d1+p{
color: yellow;
}
对应的html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div id="d1">这是一个div</div>
<p>这是一个p标签</p>
</body>
</html>
CSS伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--伪类选择器-->
<!--所有的标签都可以使用这个伪类选择器-->
<!--格式:选择器:命令{样式},选择器可以是元素选择器,也可以是id选择器,-->
<style>
/*<!-- 没有访问过的标签使用这个颜色,必须是浏览器没有访问过的,访问过了就不是这个颜色,-->*/
a:link {
color: red;
}
/*访问过的标签使用这个颜色*/
a:visited {
color: green;
}
/*鼠标移动上去,展示的颜色*/
/*这种网站上面用的非常的频繁,*/
a:hover{
color: aqua;
}
/*被选定*/
a:active{
color: chocolate;
}
/*input获取焦点时候的样式*/
input:focus{
outline: none;
background-color: yellow;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">baidu</a>
<a href="http://www.sohu.com">sohu</a>
<input type="text">
</body>
</html>
CSS伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--伪元素选择器-->
<!--这种下面有很多小的操作,用到的时候可以再查-->
<style>
/*<!--选择第一个字-->*/
p:first-letter {
color: red;
font-size: 48px;
}
/*这是在c1这个标签的前面加东西*/
.c1:before {
color: red;
content: "*";
}
/*这是在c2这个标签的后面加东西*/
/*点击可以调整,这个可以使用js来绑定事件*/
.c1:after {
color: red;
content: "[?]";
}
</style>
</head>
<body>
<p>
在苍茫的大海上,
在苍茫的大海上,
在苍茫的大海上,
在苍茫的大海上,
在苍茫的大海上,
在苍茫的大海上,
在苍茫的大海上,
在苍茫的大海上,
在苍茫的大海上,
</p>
<p class="c1">在苍茫的大海上</p>
<p class="c1">在苍茫的大海上</p>
</body>
</html>
CSS选择器的优先级
# 选择器的优先级
# 1,内联标签,直接在标签内部写style,这种优先级最高
# 2,选择器都一样,谁靠近标签谁生效,因为浏览器加载文件是从上到下加载的,
# 3,内联样式权重是1000,id选择器权重是100,类选择器权重是10,元素选择器权重是1,元素选择器就是标签选择器,
权重计算永不进位,10个元素选择器也大不过一个类选择器,
CSS字体属性
/*常用的css属性*/
/*全局通用的样式*/
* {
/*文字字体:如果浏览器不支持第一个字体,就就尝试下一个,如果都没有,就使用系统默认的,*/
font-family: "微软雅黑", "Arial", "sans-serif";
/*文字大小*/
font-size: 18px;
}
.c1 {
/*字体的粗细(权重)*/
font-weight: 100;
/*字体颜色*/
/*第一种颜色方式:直接英文*/
/*color: red;*/
/*第二种颜色方式:rgb*/
/*color: rgb(255,0,122);*/
/*第三种颜色方式:16进制*/
/*这种可以使用浏览器的取色器来取色*/
/*color: #e21f6d;*/
/*第四种方式:rgba*/
/*最后一位是透明度*/
color: rgba(255, 0, 0, 0.1);
}
.c2 {
font-weight: 900;
}
.c3 {
/*这是文本对齐方式的属性,有居中,左对齐,右对齐,两端对齐*/
/*text-align: center;*/
/*文本样式,可以下划线,上划线,删除线,等等,用的不多*/
text-decoration: underline;
/*这是首行缩进,28像素,因为一个中文字体是14像素*/
text-indent: 28px;
}
a {
/*有的公司会专门把超链接下面的默认的下滑线去掉,就是用这个,这个用的比较多*/
text-decoration: none;
}
对应的html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<p>这是一个p标签</p>
<p class="c1">c1</p>
<p class="c2">c2</p>
<div class="c3">围城</div>
<a href="http://baidu.com">百度</a>
</body>
</html>
CSS背景属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--css的背景属性-->
<style>
.c1 {
/*背景颜色*/
background-color: red;
}
.c2 {
width: 800px;
height: 800px;
/*这是填充背景图片*/
/*默认是重复展示,一直铺满*/
background-image: url("http://img3.imgtn.bdimg.com/it/u=3595140452,1077552905&fm=26&gp=0.jpg");
/*这是是否重复*/
/*这是不重复,默认是摆在左上角*/
background-repeat: no-repeat;
/*这是沿着x轴重复*/
/*background-repeat: repeat-x;*/
/*这是沿着y轴重复*/
/*background-repeat: repeat-y;*/
background-position: center;
/*把这个图片固定住*/
background-attachment: fixed;
/*边框的宽度*/
/*border-width: 10px;*/
/*边框的颜色*/
/*border-color: green;*/
/*边框的风格*/
/*border-style: solid;*/
/*这三个可以写到一起,简写*/
border: 10px solid green;
/*还可以专门设置左边的线,右边的线,*/
}
.c3 {
background-color: red;
/*设置不展示这个标签,页面不展示,都是代码是有的*/
/*display: none;*/
/*设置成行内*/
display: inline;
}
.c4 {
/*这是设置成为块*/
/*本身span标签是行内标签,不能设置高度和宽度,但是如果设置成了块级标签,就可以设置了,*/
display: block;
width: 100px;
height: 100px;
border: 10px solid green;
}
ul{
/*这是去掉小圆点*/
list-style-type: none;
}
li{
/*变成行内标签*/
display: inline;
/*这是设置在右侧有一个边框,黑色*/
border-right: solid 1px #666666;
}
li.last{
/*这是设置最后一个右侧没有边框,*/
border-right: none;
}
</style>
</head>
<body>
<div class="c3">div</div>
<div class="c1">围城</div>
<div class="c2"></div>
<span class="c4">span</span>
<ul>
<li>电脑</li>
<li>手机</li>
<li class="last">宝宝</li>
</ul>
</body>
</html>
CSS的盒子模型,这个非常的重要
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--盒子模型有四层
1,content,内容,width height 就是设置的内容的宽度,
2,padding,内填充,padding设置,
3,border,边框,border,border-width,border-color,border-style,都是设置的边框,
4,margin,外边距-->,margin设置,
<style>
.c1 {
width: 200px;
height: 300px;
border: 5px solid green;
/*调整两个标签之间的距离,就使用margin调整*/
/*这是margin上下左右都是10像素*/
/*margin: 10px;*/
/*margin-top: 50px;*/
/*margin-left: 100px;*/
/*右侧虽然设置了15,但是div是一个块级标签,在右侧空的地方还是会默认使用外边距进行填充*/
/*margin-right: 15px;*/
/*margin-bottom: 100px;*/
/*可以合到一起写,而且推荐也是合到一起写,按照上右下左的方式*/
/*margin: 5px 10px 15px 20px;*/
/*可以写两个,就是上下,左右*/
margin: 10px 20px;
/*调整内容和边框的距离,使用padding,padding也可以简写*/
padding: 10px;
}
ul {
/*这是去掉小圆点*/
list-style-type: none;
}
li {
/*变成行内标签*/
display: inline;
/*这是设置在右侧有一个边框,黑色*/
/*border-right: solid 1px #666666;*/
/*这样写padding是上下左右都是增加10像素*/
/*padding: 10px;*/
}
li.last {
/*这是设置最后一个右侧没有边框,*/
border-right: none;
}
li > a {
border-right: 1px solid red;
padding-right: 15px;
padding-left: 15px;
}
</style>
</head>
<body>
<div class="c1">12</div>
<ul>
<li><a href="">电脑</a></li>
<li><a href="">手机</a></li>
<li class="last"><a href="">宝宝</a></li>
</ul>
</body>
</html>
CSS浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*<!--清除浏览器默认的样式-->*/
* {
margin: 0;
padding: 0;
}
.c1 {
height: 100px;
width: 20%;
background-color: red;
/*浮动:float*/
/*在css中任何元素都可以浮动*/
/*浮动的作用就是在摆不开的时候可以往下自动移动*/
/*任何标签设置浮动之后,都会变成一个块级标签,都可以设置宽度和高度了,*/
/*div是块级标签,默认占据一行,我想要都往左堆积就要使用到浮动*/
/*可以使用浮动来做页面的布局*/
float: left;
}
.c2 {
height: 100px;
width: 80%;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div>
<div class="c1">12</div>
<div class="c2">12</div>
</div>
</body>
</html>
CSS的overflow,实现一个圆形的头像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
border: 1px solid black;
width: 120px;
height: 120px;
/*<!--如果标签空间小,但是内容多,会有溢出-->*/
/*可以加一个滚动条*/
overflow: auto;
}
/*这种网站头像会用到*/
.c2 {
border: 1px solid black;
width: 120px;
height: 120px;
/*这是显示一个圆的头像*/
border-radius: 100%;
/*这是溢出的隐藏起来*/
overflow: hidden;
}
img{
/*这是适应div大小*/
max-width: 100%;
}
</style>
</head>
<body>
<div class="c1">
fjljaldsjlf
jadslfjlajdslkfj
ajsdlfjladsjlfads
fadsf
adsfadfadsfad
fad
sf
</div>
<div class="c2">
<img src="http://b-ssl.duitang.com/uploads/item/201410/09/20141009224754_AswrQ.jpeg" alt="">
</div>
</body>
</html>
CSS清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
border: 1px solid red;
}
.c1 {
width: 50px;
height: 50px;
background-color: blue;
border: 1px solid black;
/*这个时候浮动了,但是父级标签的边框就浮到上面去了,从父标签跑出来,*/
float: left;
}
/*第一种解决方法:加一个空的div,然后让他左边不能有浮动的标签*/
/*.c2{*/
/*!*这是左边不能有浮动的标签*!*/
/*clear: left;*/
/*}*/
/*第二种方法:*/
/*#d1:after{*/
/*content: "";*/
/*clear: both;*/
/*display: block;*/
/*}*/
/*第三种方法,这是常用的方法*/
.clearfix:after{
content: "";
clear: both;
display: block;
}
/*清除浮动的副作用*/
</style>
</head>
<body>
<div id="d1" class="clearfix">
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<!--<div class="c2"></div>-->
</div>
</body>
</html>
CSS定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.c1,
.c2,
.c3,
.c4{
width: 100px;
height: 100px;
}
.c1{
background-color: red;
}
.c2{
background-color: blue;
/*这个相对定位是相对于原来的*/
position: relative;
left: 150px;
top: 100px;
}
.c3{
background-color: green;
}
.c4{
background-color: yellow;
/*决定定位,相对于最近的一个祖宗标签*/
position: absolute;
left: 150px;
top: 100px;
}
.fixed-text{
/*这是固定位置*/
position: fixed;
left: 20px;
top: 20px;
background-color: gray;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
<div class="fixed-text">c4</div>
</body>
</html>
css+html-博客首页
html页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<!--左侧边栏 开始-->
<div class="left">
<!--头像 开始-->
<div class="header-img">
<img src="http://b-ssl.duitang.com/uploads/item/201410/09/20141009224754_AswrQ.jpeg" alt="">
</div>
<!--头像 结束-->
<div class="blog-name">andy-blog</div>
<div class="blog-info">什么也没有</div>
<!--连接区 开始-->
<div class="blog-links">
<ul>
<li><a href="">关于我</a></li>
<li><a href="">关于我</a></li>
<li><a href="">关于我</a></li>
</ul>
</div>
<!--连接区 结束-->
<!--文章分类 开始-->
<div class="blog-links">
<ul>
<li><a href="">JS</a></li>
<li><a href="">HTML</a></li>
<li><a href="">CSS</a></li>
</ul>
</div>
<!--文章分类 结束-->
</div>
<!--左侧边栏 结束-->
<!--右边栏 开始-->
<div class="right">
<div class="artical-list">
<div class="artical">
<div class="artical-title">
<h1 class="artical-name">海盐</h1>
<span class="artical-date">2019-12-12</span>
</div>
<div class="artical-info">《斗破苍穹》是一本连载于起点中文网的古装玄幻小说,作者是起点白金作家天蚕土豆(李虎),已完结。
这里是属于斗气的世界,没有花俏艳丽的魔法,有的,仅仅是繁衍到巅峰的斗气...</div>
<div class="artical-tag">
#JS #CSS
</div>
</div>
<div class="artical">
<div class="artical-title">
<h1 class="artical-name">海盐</h1>
<span class="artical-date">2019-12-12</span>
</div>
<div class="artical-info">《斗破苍穹》是一本连载于起点中文网的古装玄幻小说,作者是起点白金作家天蚕土豆(李虎),已完结。
这里是属于斗气的世界,没有花俏艳丽的魔法,有的,仅仅是繁衍到巅峰的斗气...</div>
<div class="artical-tag">
#JS #CSS
</div>
</div>
<div class="artical">
<div class="artical-title">
<h1 class="artical-name">海盐</h1>
<span class="artical-date">2019-12-12</span>
</div>
<div class="artical-info">《斗破苍穹》是一本连载于起点中文网的古装玄幻小说,作者是起点白金作家天蚕土豆(李虎),已完结。
这里是属于斗气的世界,没有花俏艳丽的魔法,有的,仅仅是繁衍到巅峰的斗气...</div>
<div class="artical-tag">
#JS #CSS
</div>
</div>
<div class="artical">
<div class="artical-title">
<h1 class="artical-name">海盐</h1>
<span class="artical-date">2019-12-12</span>
</div>
<div class="artical-info">《斗破苍穹》是一本连载于起点中文网的古装玄幻小说,作者是起点白金作家天蚕土豆(李虎),已完结。
这里是属于斗气的世界,没有花俏艳丽的魔法,有的,仅仅是繁衍到巅峰的斗气...</div>
<div class="artical-tag">
#JS #CSS
</div>
</div>
</div>
</div>
<!--右边栏 结束-->
</body>
</html>
对应的css样式:
/*博客页面的相关样式*/
/*公共的样式*/
* {
/*font-family: "微软雅黑";*/
font-size: 14px;
margin: 0px;
padding: 0px;
}
/*去掉超链接的下滑线*/
a {
text-decoration: none;
}
/*左边栏 样式*/
.left {
width: 20%;
height: 100%;
position: fixed;
background-color: rgb(76, 77, 76);
left: 0;
top: 0;
}
.header-img {
height: 128px;
width: 128px;
border: 5px solid white;
/*这是显示一个圆的头像*/
border-radius: 100%;
/*这是溢出的隐藏起来*/
overflow: hidden;
margin: 0 auto;
margin-top: 20px;
}
.header-img > img {
max-width: 100%;
}
/*blog名称*/
.blog-name {
color: white;
font-size: 24px;
font-weight: bold;
text-align: center;
margin-top: 15px;
}
/*blog介绍*/
.blog-info {
color: white;
text-align: center;
border: 2px solid white;
margin: 5px 15px;
}
/*连接组和标签组*/
.blog-links,
.blog-tags {
text-align: center;
margin-top: 20px;
}
.blog-links a,
.blog-tags a {
color: white;
}
/*在标签前面都加上井号*/
.blog-tags a:before {
content: "#";
}
/*右边栏 样式*/
.right {
width: 80%;
height: 1000px;
background-color: rgb(238, 237, 237);
float: right;
}
.artical-list {
margin-left: 30px;
margin-top: 30px;
margin-right: 10%;
}
.artical {
background-color: white;
margin-top: 15px;
}
.artical-title {
padding: 15px;
border-left: red solid 3px;
}
.artical-name {
display: inline-block;
}
/*文章发布时间*/
.artical-date {
float: right;
}
.artical-info {
padding: 15px;
}
.artical-tag {
padding: 15px 0;
margin: 15px;
border-top: 1px solid #eeeeee;
}
css浮动做导航条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
.nav {
background-color: black;
padding: 15px 0;
}
.nav-left li {
float: left;
padding: 20px;
}
.nav-right {
float: right;
padding: 20px;
}
/*清除浮动*/
.clearfix:after,
.clearfix:before {
clear: both;
content: "";
display: block;
}
.ss {
width: 80%;
/*上下0,左右自动*/
margin: 0 auto;
}
</style>
</head>
<body>
<!--class里面可以放多个属性的,-->
<div class="nav">
<div class="ss clearfix">
<div class="nav-left">
<ul>
<li><a href="">玉米商城</a></li>
<li><a href="">玉米商城</a></li>
<li><a href="">玉米商城</a></li>
<li><a href="">玉米商城</a></li>
<li><a href="">玉米商城</a></li>
<li><a href="">玉米商城</a></li>
<li><a href="">玉米商城</a></li>
<li><a href="">玉米商城</a></li>
</ul>
</div>
<div class="nav-right">
<a href="">登陆</a>
<a href="">注册</a>
<a href="">购物车</a>
</div>
</div>
</div>
</body>
</html>
技术改变命运