CSS
1.如何学习css
-
CSS是什么
-
CSS怎么用（快速入门)
-
CSS选择器(重点＋难点)
-
美化网页(文字，阴影，超链接，列表,渐变....)盒子模型
-
浮动
-
定位
-
网页动画(特效效果)
什么是css
Cascading Style Sheet 层叠及联样式表
CSS：表现层(美化网页) 字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动....
CSS发展史
cSS1.0 CSS2.0 DIⅣ(块) + CSS，HTML与CSS结构分离的思想，网页变得简单，SEO cSs2.1浮动，定位 cSS3.0圆角，阴影，动画..浏览器兼容性~
语法
注释：/**/
1.最基本的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
能在这里编写css代码
语法：选择器{
声明1；
声明2；
}
-->
<style>
h1{
color: blue;
}
</style>
</head>
<body>
<h1>我是落月</h1>
</body>
</html>
2.分离
<link rel="stylesheet" href="./1.css">
这是链接，样式在css文件中写
3.优势
-
内容和表现分离
-
网页结构表现统一，可以实现复用
-
样式十分的丰富
-
利用SEO，容易被搜索引擎收录!
-
建议使用独立于html的css文件
CSS的3种导入方式
<!--内部样式-->
<style>
h1{
color: black;
}
</style>
<link rel="stylesheet" href="./1.css">
<!--优先级：就近原则>
</head>
<body>
<!--行内样式-->
<h1 style="color: chartreuse">我是落月</h1>
/*外部样式*/
h1{
color: blue;
}
外部样式俩种写法
-
链接式
html中的
<link rel="stylesheet" href="./1.css">
-
导入式
@import是CSS2.1特有的
<style> @import url(./1.css); </style> </head> <body> <h1>落月敲代码</h1> </body> </html>
2.选择器
作用
选择页面上的某一个或者某一类元素
基本选择器
-
标签选择器:选择一类标签标签 标签名{}
-
类选择器class:选择所有class属性一致的标签，跨标签 .class{}
-
ld选择器:全局唯一!#id名{}
-
标签选择器
<head> <meta charset="UTF-8"> <title>标签选择器</title> </head> <style> /* 标签选择器会选择这个页面上的所有标签 有局限性*/ h1{ color: chartreuse; background-color: antiquewhite; border-radius: 30px; } </style> <body> <h1>落月是侠士</h1> <p>又是一个安静的晚上</p> <h1>一个人窝在摇椅里乘凉</h1> </body> </html> -
类选择器 class
<style> /*类选择器格式 .class{ } 优势：可以多个标签归类，跨标签使用，是同一个class，可以复用 */ .yue{ color: deeppink; } </style> </head> <body> <h1 class="luo">落月111</h1> <h1 class="yue">落月222</h1> <h1 class="luo">落月333</h1> <h1 class="as">落月444</h1> </body> </html> -
id选择器
<h1 id="luo">标题1</h1> <h1 id="yue">标题2</h1> id名字不能相同，相同就会错误 <h1 id="luo">标题3</h1>
<style>
/* id选择器格式：#id名称：{}
id必须保证全局为一
优先级不遵循就近原则
id>类>标签选择器
*/
#luo{
color: deeppink;
}
h1{
color: chartreuse;
}
</style>
</head>
<body>
<h1 id="luo" class="la">标题1</h1>
<h1 id="yue">标题2</h1>
<h1 id="lu">标题3</h1>
<h1 id="s">标题4</h1>
<h1 id="a">标题5</h1>
</body>
</html>
层次选择器
-
后代选择器：在某个元素的后面都会被选到，即下一代的所有代。
-
/*后代选择器 父代 标签{} */ body p{ color: chartreuse; } -
子选择器：下一代。
/*子代选择器 父代>标签{} */ body>p{ background-color: deeppink; } -
相邻兄弟选择器
/*相邻兄弟选择器 .class+标签{} 同辈相邻的兄弟（向下） */ .luo+p{ background-color: deeppink;} </style> </head> <body> <P class="luo">p1</P> <P>p2</P> <P>p3</P> -
通用选择器
/*通用兄弟选择器
.class~标签{}
同辈相邻的所有兄弟（向下）
*/
.luo~p{
background-color: deeppink;}
</style>
</head>
<body>
<P class="luo">p1</P>
<P>p2</P>
<P>p3</P>
<P>p4</P>
<P>p5</P>
<ul>
<li>苹果<p>a</p></li>
<li>香蕉<p>x</p></li>
<li>菠萝<p>b</p></li>
<li>哈密瓜<p>h</p></li>
</ul>
<p class="luo">p6</p>
<p >p7</p>
p6也会被选中
结构伪类选择器
<!--避免使用class id 选择器-->
<style>
/*ul的第一个孩子*/
ul li:first-child{
background-color: deeppink;
}
/*ul的最后一个孩子*/
ul li:last-child{
background-color: chartreuse;
}
</style>
</head>
/*body的第一个p
选中p1定位到父元素，选择当前第一个元素
选择当前父元素的第一个元素，并且是当前元素才生效 顺序
*/
p:nth-child(2){
background-color: blue;
}
/*body的第2个p
选中p1定位到父元素，选择当前第一个元素
选择当前父元素的第一个元素，并且是当前元素才生效 类型顺序
*/
p:nth-of-type(2){
background-color: aqua;
}
a:hover{
background-color: black;
}
</style>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">点击</a>
带冒号的是伪类选择器
属性选择器（常用）
id+class结合
= 绝对等于
*= 包含
^= 以什么开头
$= 以什么结尾
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.luoyue a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background-color: #0088ff;
text-align: center;
color: #dcdcdc;
text-decoration: none;
margin-right: 5px;
font: bold 20px / 50px Arial;
}
/* #first {
background-color: deeppink;
}*/
/*选中带有id的元素 a[]{}*/
/* a[id]{
background-color: antiquewhite;
}*/
/*选中带有id某个的元素 a[]{}*/
/*a[id=ha]{
background-color: forestgreen;
}*/
/*选中class带有links的元素 a[]{}*/
/*a[class*=links]{
background-color: forestgreen;
}*/
/*选中href以http开头的元素 a[]{}*/
a[href^=http]{
background-color: chartreuse;
}
a[href^=images]{
background-color: deeppink;
}
/*选中href以什么结尾的元素 a[]{}*/
a[href$=pdf]{
background-color: chartreuse;
}
</style>
</head>
<body>
<p class="luoyue">
<a href="http://www.baidu.com" class="links item first" id="first">1</a>
<a href="" class="links item active" target="_blank" title="test">2</a>
<a href="images/123.htm1" class="links item">3</a>
<a href="images/123.png" class="links item">4</a>
<a href="images/123.jpg" class="links item">5</a>
<a href="abc" class="links item">6</a>
<a href="/a.pdf" class="links item">7</a>
<a href="/abc.pdf" class="links item">8</a>
<a href="abc.doc" class="links item" id="ha">9</a>
<a href="abcd.doc" class="links item last" id="last">10</a>
</p>
</body>
</html>
3.美化网页元素
为什么
-
有效的传递页面信息
-
美化网页，页面漂亮，才能吸引用户
-
凸显页面的主题
-
提高用户的体验
span标签：重点要突出的字，使用这个套起来
<title>Title</title>
<style>
#a{
font-size: 50px;
}
</style>
</head>
<body>
欢迎来到<span id="a">JAVA</span>
</body>
</html>
字体样式
font-size:大小 font-family：种类 font-weight：粗细 color：颜色
文本样式
-
颜色
-
文本对齐的方式
text-align:center 居中 left 左 right 右
-
首行缩进
text-indent：2em
-
行高
line-height:10px height:10px 行高和块高一样就会上下居中
-
装饰
text-decoration:overline 上划线
text-decoration:line-through 中划线
text-decoration:underline 下划线
-
图片文字水平居中：a,b{
vertical-align:middle
}
超链接伪类
正常情况下，a a:hover
/*默认的颜色*/
a{
text-decoration : none;
color: #000;
}
/*鼠标悬浮的状态（只需要记住:hover)*/
a:hover{
color: orange;
font-size:50px;
}
列表
ul li{
/*list-style
none 没有
circle 空心圆
decimal 数字
square 正方形
*/
line-height: 30px;
list-style: none;}
背景
背景颜色
背景图片
div{
width: 1000px;
height: 800px;
border: 1px red solid;
background-image: url("image/1.png"); /*图片默认是平铺的repeat*/
}
.a{
background-repeat: repeat-x; /*图片是沿x平铺的*/
}
.b{
background-repeat: repeat-y; /*图片是沿y平铺的*/
}
.c{
background-repeat: no-repeat; /*图片只有一个*/
}
渐变
/*径向 圆形渐变 网址：https://www.grabient.com/*/
body{
background-color: #D9AFD9;
background-image: linear-gradient(275deg, #D9AFD9 0%, #97D9E1 50%, #ffffff 100%);
}
4.盒子模型
什么是盒子
margin：外边距
border：边框
padding: 内边距
主体
边框
属性：粗细，样式，颜色
/*body总有一个默认的外边距margin:8 规范初始化 * /
h1,ul,i,a, body{
margin: 0;
padding: 0;
text-decoration: none;
}
/*border:粗细，样式，颜色*/
#box{
width: 300px;
border: 1px solid red;
}
div:nth-of-type(1)inputi
border: 3px solid black;
}
/*
soid: 实线
dashed 虚线
*/
内外边距
外边距
margin 外边距的妙用用来居中
margin：0 auto
margin :上下 左右
margin ：上 左 下 右（顺时针）
内边距
padding
盒子的计算方式
外边距+边框+内边距+本体
圆角边框
div{
height: 300px;
width: 300px;
border: 10px solid red;
/*边框圆角顺时针 两个值是 左上右下 右上左下*/
/*border-radius: 50px 20px 50px 20px;*/
/* 圆角=半径 既是圆*/
border-radius: 300px;
}
img{
height: 300px;
width: 300px;
border: 10px solid aliceblue;
border-radius: 150px;
}
还能实现p图
阴影
img{
height: 300px;
width: 300px;
border: 10px solid aliceblue;
border-radius: 150px;
box-shadow: 5px 10px 100px greenyellow;
}
div{
/*使图片居中*/
text-align: center;
}
5.浮动
标准文档流
行内元素可以被包含在块级元素中，反之，则不可以~
display
display 属性（规定元素生成框的类型）控制页面元素是否显示（none）或者是堆叠（block）还是并排（inline）显示。
在html的元素中可以把元素分为块级元素和行内元素。
块级元素默认占据一行，允许通过css设置宽度和高度。
行内元素默认不会占据一行，允许在一行中放置很多个元素。
不可以直接通过CSS设置宽度和高度，可以通过display属性值去改变。
div{
height: 300px;
width: 300px;
border: 1px solid red;
display: inline;
}
span{
/*行内元素设计不了大小
display:inline-block;变成块元素可以内连能在一行
display: inline;变成行内元素
display:block;变成块元素
none消失但存在
*/
height: 300px;
width: 300px;
border: 1px solid red;
display:block;
}
这是一种行内元素排列的方式，但很多情况下会使用浮动
float
float属性定义元素在哪个方向浮动。以往这个属性总是应用于图像，使文本围绕在图像周围，不过在 CSS中，任何元素都是可以浮动。
浮动的元素会生成一个个的块级框，而不论它本身是哪一种元素。
.b{
display: inline-block;
float: left;
clear: both;
/* 清除*/
}
父级边框塌陷
clear
clear:right /*清除右侧浮动*/ clear:left /*清除左侧浮动*/ clear:both /*清除两侧侧浮动*/ clear:none /*清除右侧浮动*/
浮动有时候会跑到外面去
解决方法
1.增加父级元素高度
2.增加一个空的div,清除浮动
<div class=clear></div>
div{
clear:both;
padding:0;
margin:0;
}
3.overflow
在父级元素在增加一个：
overflow:hidden;
4.在父级中添加一个伪类（在css中实现不用修改html)
#father:after{
content:'';
display:block;
clear:both;
}
小结
-
浮动元素后面增加空div
简单，代码中尽量避免空div
-
设置父元素的高度 简单，元素假设有了固定的高度，就会被限制
-
overflow 简单，下拉的一些场景避免使用
-
父类添加一个伪类: after(推荐)
对比
display与float
作用：都能使元素排在一列，但是
display : 不能控制方向 不会存在父级塌陷问题
float:能控制方向但 浮动起来会脱离标准文档流，会存在父级塌陷
6.定位
为什么需要定位
-
某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。当我们滚动窗口的时候，盒子是固定在屏幕的某个位置的。 在标准流和浮动都无法快速实现，此时需要定位来实现。
-
浮动和定位的两者比较：
浮动可以让多个块级盒子在一行中没有缝隙排列显示，经常用于横向排列盒子。 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中的某个位置，并且可以压住其它盒子。
定位的组成
定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位=定位模式+边偏移。
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。
相对定位
任然在标准文档流中，原来的位置会被保留，所以就不会出现父类塌陷
/*相对定位相对于自己原来的位置偏移*/
#father{
border:5px solid red;
}
#first{
background-color: #0088ff;
border:2px dashed yellowgreen;
position: relative;
/*
正数就是相反方向 负数就是相同方向
会覆盖别的盒子
*/
top: -50px;
left: 20px;
}
#b{
background-color: #D9AFD9;
border:2px dashed blue;
position: relative;
bottom:-50px
}
绝对定位
position:absolute 会使他脱离原来的位置会使它浮动
定位：基于某个元素或标签定位，上下左右
-
没有父级元素定位的前提下会基于浏览器定位。
-
假设父级元素存在定位，我们通常会相对于父级元素定位。
#father{
position：relative
}
-
不能脱离父级元素，会脱离标准文档流。
固定定位
body{
/*滚动条*/
height: 1000px;
}
/*绝对定位 会动*/
div:nth-of-type(1){
width: 100px;
height: 100px;
background-color: #0088ff;
border: 1px red solid;
position: absolute;
bottom:0;
right: 0;
}
/*固定定位 不会随浏览器动*/
div:nth-of-type(2){
width: 50px;
height: 50px;
background-color:magenta;
border: 1px red solid;
position: fixed;
bottom:0;
right: 0;
}
z-index
默认是0最高无限，首先得使用绝对定位使它浮起来把他们放一块。
.content{
padding:0;
margin: 0;
}
li{
list-style: none;
}
ul{
position: relative;
}
.dm{
/*设置位置 使它浮在上面*/
z-index: 999;
}
.dm,.a{
width:480px;
height: 35px;
/*给父级设置定位*/
position: absolute;
top:419px;
font-size: 20px;
color: white;
line-height: 35px;
}
.a{
background-color:black ;
opacity: 0.5;
/* 透明度*/
}
opacity: 0.5; /* 透明度*/
总结
2095
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
