CSS
2018-08-14 本文已影响0人
文化银儿
一、认识CSS
1.什么是css
css代码（css文件）我们又叫样式表
css是web标准中的表现标准，用来设置网页上标签的样式（长什么样、在什么位置），错了不会崩溃
作用：定制网页上的标签的样式的
目前我们使用的是css3
2.写在哪
（1）内联样式表---写在head标签中的style标签中
（2）内部样式表 ---写在标签的style属性中（style属性每个标签都有）
（3）外部样式表---写在一个专门的CSS文件中，然后在head中通过link标签来关联css文件
3.怎么写
选择器{属性：属性值；属性：属性值}
选择器作用：是用来选中需要设置样式的标签）
属性：css属性，（光css2中的属性就有两百多个）
属性值：如果属性值是数字，并且表示的是大小要在后面加px，否则无效
注意：每个属性之间用分号；隔开，否则属性无效
优先级：内联的优先级最高，内部和外部的优先级是，谁后写谁优先，后者会覆盖前者---（就近原则）
补充属性：
color---设置字体颜色
background-color---设置背景颜色
width---标签的宽度
height---标签的高度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--style标签
专门用来设置样式的标签
-->
<style type="text/css">
div{
background: greenyellow;
color:darkslategrey
}
</style>
<!--关联外部样式表-->
<link rel="stylesheet" type="text/css" href="04_css1.css"/>
</head>
<body>
<!--style属性：每个标签都有-->
<div style="color:brown;">我是谁？</div>
</body>
</html>
css文件
注意：css中所有和大小相关的数字后面必须加单位：px 或者 %
px:代表像素
% :指的是百分比
div{
width: 50%;
color: red;
}
image.png
css选择器
0.元素选择器(标签选择器)：标签名
选中所有的标签名对应的标签
1.id选择器：#id属性值
每个标签都有一个id属性，整个html中，id的值必须唯一
2.class选择器：.class属性值
每个标签都有一个class属性，
3.通配符：*
选中所有的标签
4.层级选择器：选择器1 选择器2...
5.群组选择器：选择器1，选择器，....
补充:
css中的颜色值：
1.颜色英语单词
2.16进制的颜色值 0-255 -- 00-ff (#ff0000-红色)
3.rgb值：rgb(红,绿,蓝) rgba(红,绿,蓝,透明度) - 透明度 0~1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*通配符*/
*{
font-size: 50px;
}
/*id选择器*/
.c1{
color: brown;
background-color: olive;
}
/*元素选择器*/
a{
background-color: yellow;
}
/*class选择器*/
#a1{
/*color:#ff0000;*/
color:rgba(0,0,255,0.4)
}
/*层级选择器*/
#all_a a{
color: pink;
}
div div a{
text-decoration: none;
}
/*群组选择器*/
/*同时选中所有h1标签和所有的span标签*/
h1,span{
background-color: #FFC0CB;
}
</style>
</head>
<body>
<h1>我是标题</h1>
<span id="">
我是span
</span>
<div >
<div id="">
<a href="">aaa</a>
<p></p>
</div>
<div id="all_a">
<a href="">a1</a>
<a href="">a2</a>
<a href="">a2</a>
<a href="">a2</a>
<a href="">a2</a>
</div>
</div>
<a id="a1" href="">我是a</a>
<a href="">我是a2</a>
<p class="c1">我是p</p>
<div id="" class="c1">
我是div
<a href="">我是a3</a>
</div>
<a href="">我是a4</a>
</body>
</html>
image.png
伪类选择器
-
选择器：状态
-
link：超链接的初始状态---即是一次都没有访问成功的时候的状态
-
visited：超链接访问后的装态---已经访问成功后的状态
-
hover:鼠标滑过超链接时对应的状态
-
active：鼠标按住的状态
-
给同一个标签通过伪类选择器给不同状态设置不同的样式的时候，要遵守爱恨原则(先要爱才能恨)--->LoVe HAte
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*同时设置a标签的所有状态*/
a{
color: black;
}
a:link{
color: green;
}
a:visited{
color: pink;
}
a:hover{
color: red;
font-size: 40px;
}
a:active{
color: yellow;
}
#d1{
width: 300px;
height: 100px;
background: green;
}
#d1:hover{
background-color: greenyellow;
}
</style>
</head>
<body>
<a href="http://taobao.com">百度一下</a>
<button id="d1">
</button>
</body>
</html>
image.png
选择器的权重
-
作用：判断优先级
-
类型选择器（元素选择器 ）、伪类选择器---0001
-
class选择器---0010
-
id选择器---0100
-
层级选择器（包含选择器）：多个选择器的权重之和
-
群组选择器：分开看每个选择器的权重
-
谁的权重的值大，谁的优先级就高
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body #d1{
color: peru;
}
.c1{
color: deepskyblue;
}
#d1{
color: green;
}
a{
color: red;
}
</style>
</head>
<body>
<a href="" id="d1" class="c1">百度一下</a>
</body>
</html>
浮动
-
标准流：
块标签---一个占一行，从上往下布局；
行内标签---一行可以显示多个，从左往右布局，直到遇到边界才自动换行 -
脱流：
（1）浮动:让竖着的横着来，float---值：left，right
（2）定位 -
注意：
（1）如果要使用浮动，那么同一级的所有标签都要浮动
（2）如果父标签浮动，那么子标签的位置会跟着一起浮动
（3）布局基本顺序：从上往下，从左往右
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#top{
float :left;
width: 100%;
height: 120px;
background-color: aliceblue;
}
#m1{
float: left;
width:25%;
height: 500px;
background-color:pink;
}
#m2{
float:left;
width:50%;
height:500px;
background-color:greenyellow;
}
#m3{
float: right;
height: 500px;
width:25%;
background-color:yellow;
}
#bottom{
float:left;
height: 100px;
width: 100%;
background-color: plum;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="m1"></div>
<div id="m2"></div>
<div id="m3"></div>
<div id="bottom"></div>
</body>
</html>
效果如下：
image.png
文字环绕
- 文字环绕: 被文字环绕的标签浮动，文字标签不浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*被环绕的对象浮动*/
#d1{
float: left;
width: 60px;
height: 60px;
/*background-color: yellow;*/
}
#d2{
width: 400px;
}
</style>
</head>
<body>
<img id="d1" src="img/luffy3.png"/>
<p id="d2">
方递费加哈萨克货到付款撒都<br />分开哈萨克东方航<br />空撒货到付款阿士大夫<br />看撒谎快递费开始浇返回
</p>
</body>
</html>
效果如下：
image.png
清除浮动
-
清除浮动是指：因为浮动而产生的问题（高度塌陷）
-
注意：问题并不是什么时候都产生，一般就在父标签不浮动，而子标签浮动是产生
-
怎么清除浮动：
-
(1)添加空的div
在父标签（高度塌陷的标签）的最后添加一个空的div，并设置这个div的样式表：clear:both
缺点：可能会产生大量额外的代码
-
(2)overfloat:hidden---兼容市场上大部分浏览器
在父标签中设置样式表的overflow的值为hidden -
(3)万能清除法
after{display:block;clear:both;content:".";visibility:hidden;height:0;} clear{zoom:1;}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*2.清除浮动方案2*/
/*.clear{
overflow: hidden;
}*/
/*3.清除浮动方案3*/
.clear:after{
display:block;
clear: both;
content: "";
visibility: hidden;
height: 0;
}
.clear{
zoom: 1;
}
</style>
</head>
<body>
<div style="height:100px;background-color: hotpink;"></div>
<div style="background-color: red;"class="clear">
<div style="float:left;width: 30%;background-color: paleturquoise;height: 300px;"></div>
<div style="float:left;width: 30%;background-color: bisque;height: 300px;"></div>
<!--1.清除浮动方案1-->
<!--<div style="clear:both;"></div>-->
</div>
<div style="height:100px;background-color: black;"></div>
</body>
</html>
效果如下：
image.png
display属性
-
1.HTML中标签分为
(1)块---一个占一行，默认宽度是100%，高度根据内容来定
(2)行内 -
2.CSS中标签分为（前提：在标准流中）：
(1)块标签(display:block)---一个占一行，默认宽度是100%，高度根据内容来定，直接设置宽高有效
(2)行内块标签(display:inline-block)---一行可以有多个，默认宽高是内容的宽高，直接设置宽高有效
(3)行内标签（display:inline）---一行可以有多个，默认宽高是内容的宽高；设置宽高无效 -
通过改变标签的display的值，可以让一个标签在块，行内块和行内之间任意切换
-
注意：inline-block标签的右边默认都有个问题，不能喝其他标签无缝连接（这个间隙目前无法清除）
定位
-
1.距离
（1）top:标签顶部距离其他标签的位置
（2）bottom:标签的底部距离其他标签的位置
（3）left:标签左边到其他标签的位置
（4）right:标签右边到其他标签的位置 -
2.position
想要设置标签的top,bottom,left,right的值有效，必须设置标签的参考方法
（1）initial:(默认值)没有参考对象
（2）absolute:绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
（3）relative:相对定位元素的定位是相对其正常位置。
（4）fixed：元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：
（5）sticky:粘性定位（没有超出一屏，就在最后，超出一屏，就相对浏览器一直在下面）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#d1{
position: relative;
width: 500px;
height: 500px;
background-color: cadetblue;
/*margin-top: 320px;*/
/*top: 320px;*/
top: 20px;
}
#d2{
position: fixed;
width: 100px;
height: 100px;
background-color: salmon;
/*top: 100px;*/
right: 20px;
bottom: 50px;
}
#d3{
/*float: right;*/
position: sticky;
/*top: 120px;*/
width: 100px;
bottom: 20px;
/*right: 20px;*/
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
</div>
</div>
<div id="" style="height: 20px; background-color: yellow; width: 200%;">
</div>
<div id="d3" style="height: 60px; background-color: purple;">
</div>
</body>
</html>
标签的盒子模型
每一个标签都是由4个部分组成：
- 1.内容：显示内容的部分，可见（设置宽高的样式就是设置内容部分的大小）
- 2.内边距（padding）：可见，不能显示内容（通过设置padding值来改变其值，默认是0，）
- 3.边框（border）：可见，如果有padding则显示在内边距上，否则就显示在内容上
- 4.外边距（margin）：不可见，但是会占据浏览器的空间
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*注意：以后再写网页的时候，在样式表的最前面关闭自带的所有的margin和padding（即赋值为0）*/
*{
margin: 0;
padding: 0;
}
div{
background-color: aquamarine;
/*设置内容大小*/
width: 100px;
height: 100px;
/*padding的值有四个
可以单独设置，也可以一起设置
* */
/*padding-left:20px;
padding-top:10px;*/
padding: 10px; /*上右下左的内边距都是10*/
padding:20px 40px; /*上下是20，左右是40*/
/*padding: 10px,20px,30px,40px;*/
/*3.边框
可以单独设置，也可以一起设
格式：宽度 样式 颜色
样式：solid---实线
double---双线
dotted---点状线
dashed---虚线
* */
border-left:3px dashed darkgoldenrod ;
border-bottom: 4px solid red;
border-right: 5px dotted gold;
border-top: double gray;
/*设置边框圆角的弧度
* 是添加到padding上的，如果没有padding则是添加到内容分上的*/
border-radius: 30px;
/*设置左上角的圆角*/
border-top-left-radius: 10px;
/*同时设置4条边框的宽度，样式，颜色*/
border: 3px solid blueviolet;
/*单独设置某条边的样式*/
border-bottom-style: dashed;
/*4。外边距*/
margin-top:100px;
/*同时设置所有方向的外边距的值为100*/
margin: 100px;
/*两个值，上下为10,左右为20*/
margin:10px 20px;
/*四个值，顺序为：上右下左*/
margin: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div>abc</div>
</body>
</html>
效果如下：
image.png
居中
- 1.垂直居中
(1)固定标签高度
(2)设置属性line-height的值和高度一样 - 2.水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;
padding: 0;
}
div{
height:100px;
width: 100%;
background-color: darkcyan;
}
p{
width:300px;
background-color: saddlebrown;
/*垂直居中*/
height: 50px;
line-height: 50px;
/*水平居中*/
text-align: center;
}
</style>
</head>
<body>
<div>
<p>鹅鹅鹅，曲项向天歌</p>
</div>
</body>
</html>
效果如下：
image.png
文字相关的CSS属性
- 1.文字大小
- 2.文字颜色
- 3.字体
- 4.字体粗细---> 值：100-900（且不需要加px）
- 5.文字倾斜
italic(主要记住这个)
oblique - 6.内容对齐方式
center---居中
left---左对齐
right---右对齐 - 7.垂直居中
(1)先设置背景颜色
（2）设置高度
（3）设置行高（当文字只有一行的时候，设置行高和标签高度一样的时候，可以让文字垂直居中；多行无效） - 8.文字修饰
none---去掉文字修饰
underline---添加下划线
overline---添加上划线
line-through---添加删除线 - 9.首行缩进
单位：em---空格 - 10.字间距
单位可以是px,也可以是em
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
p{
/*1.文字大小*/
font-size: 16px;
/*2.文字颜色*/
color: greenyellow;
/*3.字体*/
font-family:"仿宋";
/*4.字体粗细
值：100-900（且不需要加px）
* */
font-weight: 900;
/*5.文字倾斜
italic(主要记住这个)
oblique
* */
font-style: italic;
/*6.内容对齐方式
center---居中
left---左对齐
right---右对齐
* */
text-align: center;
/*7.垂直居中
(1)先设置背景颜色
（2）设置高度
（3）设置行高（当文字只有一行的时候，设置行高和标签高度一样的时候，可以让文字垂直居中；多行无效）
* */
background-color: black;
height: 50px;
line-height: 50px;
/*8.文字修饰
none---去掉文字修饰
underline---添加下划线
overline---添加上划线
line-through---添加删除线
* */
text-decoration: line-through;
/*9.首行缩进
单位：em---空格
* */
text-indent: 4em;
/*10.字间距
单位可以是px,也可以是em
* */
letter-spacing: 5px;
}
</style>
</head>
<body>
<p>你是我沿途最美的风景
红尘岁月，心系沧海
笑看流年，待春暖花开
站在我们相遇的地方，为你摇曳一生
冬雨摇曳，一季淡寒
你的心是一泓清澈的泉水，浇灌了我干涸的生命
今生爱上你，注定是一种流泪的幸福
春意盎然，迷醉江南三月天
剪剪风，一路春雨花香
如花人生，谁落寞了我的繁华！
日光倾城，春暖花开
红尘有爱，便不孤单
流年静好，只是曾经
守望远去的岁月
幽草漾斜阳墨染词殇
坚持，成就梦想
那弯浅浅的月，那滩浅浅的水
指尖里的夏天
写在沙滩上的故事
月色流离，守一季相思苦
自在飞花轻似梦，无边丝雨细如愁
寻找生活的美如果有来生
写给青春，写给岁月
为了爱而活着
这个夏日的风景
雪花飘落的时候
倾一座城，淡一场梦
破碎的美丽
你知道生活的意义吗？
等待着，一场邂逅
我的十一月
情怀的诉说
再见一帘幽梦
一脉心香，泪亦美丽
关于青春旅途
岁月无痕【原创】
年末的感思
记忆中的乡村夜晚
聆听的瞬间
你的名字，是我枕边的暖
深秋那抹阳光里有我们幸福的微笑
生命中的柳树
生命的幸福
心灵的驿站，梦恋的窗口
唯美的秋韵
不知名的花树
云淡风轻有何不可
</p>
</body>
</html>
效果如下：
image.png
列表相关的CSS属性
- 1.设置符号样式
none---去掉列表符号（常用）
disc---实心圆
circle---空心圆
square---实心方块 - 2.设置图片的符号
- 3.设置符号的位置
outside---在li标签的外面
inside---在li标签的里面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*选择器是ul或者是li都可以*/
li{
background-color: blueviolet;
}
ul{
background-color: darkkhaki;
/*1.设置符号样式
none---去掉列表符号（常用）
disc---实心圆
circle---空心圆
square---实心方块
* */
list-style-type: none;
/*2.设置图片的符号*/
list-style-image: url(img/images/icon.ico);
/*3.设置符号的位置
outside---在li标签的外面
inside---在li标签的里面
* */
list-style-position: outside;
}
</style>
</head>
<body>
<ul>
<li>python</li>
<li>H5</li>
<li>Java</li>
<li>测试</li>
</ul>
</div>
</body>
</html>
效果如下：
image.png
背景相关
- 1.背景图
如果背景图大于盒子的大小，背景图能显示多少就显示多少
如果背景图小于盒子的大小，就会平铺（重复显示） - 2.是否平铺
- 3.设置背景图片的位置
background-position:x y;
x---left,center,right,坐标值
y---top,center,bottom,坐标值 - 4.同时设值
background:图片地址 是否重复 x y
background:图片地址 是否重复 x y 背景颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*------背景相关--------*/
#d1{
height: 100px;
width: 200px;
/*1.背景图
如果背景图大于盒子的大小，背景图能显示多少就显示多少
如果背景图小于盒子的大小，就会平铺（重复显示）
* */
background-image: url(img/images/codebg.png);
/*2.是否平铺*/
background-repeat: no-repeat;
/*3.设置背景图片的位置
background-position:x y;
x---left,center,right,坐标值
y---top,center,bottom,坐标值
*
* */
background-position: center;
/*4.同时设值
background:图片地址 是否重复 x y
background:图片地址 是否重复 x y 背景颜色
* */
background: url(img/images/icon.ico) no-repeat center top honeydew;
}
</style>
</head>
<body>
<div id="d1">
<!--<img src="img/images/codebg.png" style="width: 100%;height: 500px;"/>-->
</div>
</body>
</html>
效果如下：
image.png
