CSS
CSS
层叠级联样式表
CSS:表现(美化网页)
字体,颜色,宽度,高度,背景图片,网页定位,网页浮动
1. 快速入门
< style>可以编写css代码,每一个声明最好用分号结尾
语法:
选择器{
声明1;
声明2;
声明3;
}
用link进行连接
css优势:1.内容和表现分离
2.网页结构表现统一,可以实现复用
3.样式丰富
4.建议使用独立于html的css文件
5.利用seo,容易被搜索殷勤引擎收录
2.CSS的n种导入方式
- 内部样式表
- 外部样式表
- 行内样式
优先级:就近原则
拓展:外部样式两种写法
- 链接式
<link rel="stylesheet" href="css/style.css ">
- 导入式(不建议)
<style>
@import url("css/style.css");
</style>
3.选择器
作用:选择页面上某一个或一类元素
3.1基本选择器
- 标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器会选择页面上所有的标签*/
h1{
color: #0040ff;
background: red;
border-radius: 23px;
}
p{
font-size: 80px;
}
</style>
</head>
<body>
<h1>学java</h1>
<p>听网课</p>
</body>
</html>
- 类选择器class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*类选择器: .class的名称{}
好处:可以多个标签归类,相当于同一个class,可以复用
*/
.xuebo{
color: red;
}
.xue{
color: #0040ff;
}
</style>
</head>
<body>
<h1 class="xuebo">标题1</h1>
<h1 class="xue">标题2</h1>
<h1 class="xuebo">标题3</h1>
<p class="xuebo">p标签</p>
</body>
</html>
- id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* id选择器:id必须保证全局唯一
#id名称{}
*/
#xuebo{
color: red;
}
.sytle1{
color: bisque;
}
h1{
color: blue;
}
</style>
</head>
<body>
<h1 id="xuebo">标题一</h1>
<h1 class="sytle1">标题二</h1>
<h1 class="sytle1">标题三</h1>
<h1>标题四</h1>
<h1>标题五</h1>
</body>
</html>
优先级:
id选择器>类选择器>标签选择器
标签选择器:选择一类标签 :标签{}
类选择器:选中所有class属性一致的标签 :。类名
id选择器:全局唯一
3.2层次选择器
1.后代选择器:在某个元素的后面 :
/*
1.后代选择器
*/
body p{
background: red;
}
2.子选择器:只有一代
/*子选择器*/
body>p{
background: red;
}
3.相邻选择器:同辈
相邻兄弟选择器:只有一个,相邻(向下)
/*相邻兄弟选择器:只有一个,相邻(向下)*/
.active +p{
background: red;
}
4.通用选择器
选中元素的向下所有兄弟元素
/*通用选择器:选中元素的向下所有兄弟元素
*/
.active~p{
background: red;
}
3.3结构伪类选择器
/*ul的第一个子元素*/
ul li:first-child{
background: red;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: green;
}
/*选中p1
选择当前p元素的父级元素,选中父级元素的第一个,并且是当前元素才生效
按顺序选
*/
p:nth-child(1){
background: blue;
}
/*选中父元素下的p元素的第二个,按类型选*/
p:nth-of-type(2){
background: purple;
}
伪类:条件
3.4属性选择器
属性名, 属性名=属性值
=绝对等于
*=包含这个元素
^=以这个开头
$=以这个结尾
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: #0040ff;
text-align: center;
color: gray;
text-decoration: none;
margin-right: 5px;
font:bold 20px/50px Arasda;
/*存在id属性的元素 a[]{}
属性名, 属性名=属性值
=绝对等于
*=包含这个元素
^=以这个开头
$=以这个结尾
*/
}
/*a[id]{*/
/* background: yellow;*/
/*}*/
a[id=first ]{
background: yellow;
}
a[class*="links"]{
background: red;
}
a[href^=http]{
}
</style>
</head>
<body>
<p class="demo">
<a href="https://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.html" 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">9</a>
<a href="abcd.doc" class="links item last">10</a>
</p>
</body>
</html>
4.美化网页
span标签
4.1字体样式
font:family 字体
font:size字体大小
font:weight字体粗细
color:字体颜色
4.2文本样式
颜色:单词,rgb,rgba
排版:text-align (center,right,left)
首行缩进:text-indent:2em
行高:line-hight
行高和块的高度一致,可以上下居中
下划线:text-decoration:underline
中划线:line-through
上划线:overline
去划线:none
水平对齐:vertical-align:middle(需要参照物)
4.3超链接伪类
a:hover{}(鼠标悬浮时的状态)
text-shadow:()(阴影)
4.4列表
list-style:列表前面的样式
#nav{
width: 300px;
background: gray;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 40px;
background:red;
}
/*ul li*/
/*
list-style:
none:去掉圆点
circle:空心圆
decimal:数字
square:正方形
*/
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
background: gray;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: orange;
}
4.5背景
- 背景颜色
- 背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 1000px;
height: 700px;
border: 1px solid red;
background-image: url("images/2.PNG");
/* 默认是全部平铺*/
}
.div1{
background-repeat: repeat-x;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
background:颜色,图片,图片位置(10px 10px),平铺方式
4.6渐变
- 径向渐变
- 圆形渐变
background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
5.盒子模型
5.1什么是盒子
margin:外边距
padding:内边距
border:边框
5.2什么是边框
边框的粗细
边框的样式
边框的颜色
border:粗细,样式,颜色
border: 1px solid red;
body有默认的外边距
margin:0px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0px;
}
#app{
width: 300px;
border: 1px solid red;
}
h2{
font-size: 16px;
background-color: #8EC5FC;
line-height: 60px;
color: white;
}
form{
background: dimgray;
}
form div:nth-of-type(1) input{
border: 3px solid black;
}
form div:nth-of-type(2) input{
border: 3px solid palegreen;
}
form div:nth-of-type(3) input{
border: 3px solid palegreen;
}
</style>
</head>
<body>
<div id="app">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名:</span>
<input type="text">
</div>
<div>
<span>年龄:</span>
<input type="text">
</div>
<div>
<span>邮箱:</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
5.3内外边距
外边距的妙用:居中元素
margin:0 auto
盒子的计算方式:元素到底多大
margin+border+padding+内容
5.4圆角边框
border-radius: 0px 50px 50px 0px;
5.5盒子阴影
box-shadow(x,y, )
6.浮动
6.1标准文档流
标准文档流:自上而下
块级元素(独占一行):h1-h6 ;p ;div ; 列表。。。
行内元素(不独占一行):span a img。。。。
行内元素可以被包在块级元素中,反之不可
6.2display
block 块元素
inline 行内元素
inline-block 保持快元素的特性但可以写在一行
none:消失
6.3 float
左右浮动 float
6.4父级边框塌陷
clear:right清除右侧浮动
clear:left左侧不允许有浮动
clear:both两侧都不允许有浮动元素
clear:none
解决方案:1.增加父级元素高度
2.增加一个空div标签,清除浮动
3.overflow(overf:hidden:隐藏超出部分)(overflow:scroll 添加滚动条)
4.在父类添加一个伪类:after
#father:after{
content='';
display:block;
clear:both;
}
1.浮动元素后面加空div。特点:简单,但代码中尽量避免空div
2.设置 父级元素的高度。特点:简单,元素假设有了固定高度就会被限制
3.overf。特点:简单,但超出去的会被切掉
4.在父类添加伪类。(推荐)特点:写法复杂,没有副作用
6.5对比
display和float
display不可控制方向,float可以控制方向
float浮动起来会脱离标准文档流,需要解决父级边框塌陷问题
7.定位
7.1相对定位
相对于自己原来的位置进行偏移,相对定位仍然在标准文档流中,原来的位置被保留
position: relative;
top: -20px;
left: 20px;
7.2绝对定位
基于xxx定位,在父级元素或浏览器范围内移动,绝对定位后,不在标准文档流中,原来的位置不被保留
position: absolute;
1.没有父级元素定位的前提下,相对于浏览器定位
2.假设父级元素存在定位,相对于父级元素定位
7.3固定定位
position: fixed;
7.4z-index
图层
z-index:默认是0,最高是无限
.tipText{
color: red;
z-index: 999;
}
背景透明度: opacity: 0.5;