CSS入门
css的优势
- 内容和表现分离
- 网页结构统一，可以实现复用
- 样式十分丰富
- 建议使用独立于html的css文件
- 利用SEO，容易被搜索引擎收录
第一个css文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范，<style>可以编写css编码 每一个声明最好以;结尾
语法：
选择器{
声明1;
声明2;
声明3;
}
-->
<link rel = "stylesheet" href="css/style.css">
</head>
<body>
<h1>标题</h1>
</body>
</html>
h1{
color: red;
}
css的几种导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内部样式-->
<style>
h1{
color: green;
}
</style>
<!--外部样式-->
<link rel = "stylesheet" href="css/style.css">
<!--导入式 不常用-->
<style>
@import "css/style.css";
</style>
</head>
<!-- 优先级：行内样式 > 内部样式 = 外部样式(就近原则） -->
<body>
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可 -->
<h1 style="color: red">哈哈</h1>
</body>
</html>
/*外部样式*/
h1{
color: blue;
}
选择器
作用：选择页面上的某一个或者某一类元素
基本选择器
- 标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器会选择该页面上所有的标签元素*/
h1{
color: #85fff2;
background: coral;
/*圆角*/
border-radius: 24px;
}
p{
font-size: 80px;
}
</style>
</head>
<body>
<h1>我爱学习</h1>
<h1>我爱学习</h1>
<p>学习爱我</p>
</body>
</html>
- 类选择器 class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*类选择器的格式 .class的名称{}
好处：可以多个标签归类
*/
.majiacheng{
color: coral;
}
.haha{
color: #85fff2;
}
</style>
</head>
<body>
<h1 class="majiacheng">标题1</h1>
<h1 class="haha">标题1</h1>
</body>
</html>
- Id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* id选择器 id保证全局唯一
#id 名称{}
*/
#acheng{
color: aquamarine;
}
</style>
</head>
<body>
<h1 id="acheng">标题1</h1>
<h1>标题2</h1>
<h1>标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>
权重：id选择器>class选择器>标签选择器
总结：
标签选择器：选择一类标签 标签{}
类 选择器 class ：选择所有class属性一致的标签，跨标签 .类名{}
id 选择器:全局唯一！ #id{}
层次选择器
-
后代选择器：在某个元素后所有的元素
/*后代选择器*/ body p{ background: coral; } -
子选择器：一代 儿子
/*子选择器*/ body>p{ background: aquamarine; } -
相邻兄弟选择器
/*相邻兄弟选择器:下一个*/ .active + P{ /*active周围的p标签*/ background: green; } -
通用选择器
/*通用兄弟选择器：当前选中元素向下的所有兄弟元素 */ .active~p{ background: red; }
结构伪类选择器
伪类：条件。看到带冒号的的基本就是伪类
/*ul的第一个子元素*/
ul li:first-child{
background: #85fff2;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: green;
}
/*选中p1：定位到父元素，选择当前的第一个子元素，要与当前元素类型相同*/
p:nth-child(1){
background: aliceblue;
}
/*选中父元素，下的p元素的第二个，类型*/
p:nth-of-type(2){
background: blanchedalmond;
}
hover 移动到这里变颜色
用法 元素属性：hover{color：xxx}
属性选择器
标签名[属性名=属性值]{}
=绝对等于
*=包含等于
^=以xxx为开头
$=以xx为结尾
美化网页元素
字体样式
span标签：重点要突出的字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#test{
font-size:50px;
}
</style>
</head>
<body>
欢迎学习<span id="test">java</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
font-family 字体
font-size 大小
font-weight 粗细
colo:字体颜色
-->
<style>
body{
font-family: "Arial Black",新宋体;
color: green;
}
h1{
font-size: 50px;
}
.p1{
font-weight: bold;
}
<!--合在一起-->
/*P{*/
/* font: oblique bold 16px "楷体";*/
/*}*/
</style>
</head>
<body>
<h1>CSS （层叠样式表）</h1>
<p class="p1">层叠样式表(英文全称：Cascading Style Sheets)是一种 用来表现HTML （标准通用标记语言的一个应用）
或XML（标准通用标记语言的一个子集） 等文件样式的计算机语言。</p>
<p> CSS不仅可以静态地修饰网页， 还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。</p>
</body>
</html>
文本样式
- 颜色 color rgb rgba
- 对齐方式 text-align = center
- 首行缩进 text-indent:2em;
- 行高 line-height;
- 装饰 a标签默认有下划线 text-decoration:none;可以去掉下划线
- 文本图片水平对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
颜色：RGBA 透明度
排版 text-align: center 居中
首行缩进 text-indent 一般用em来表示
行高 height 行高和块的高度一致就可以上下居中
text-decoration 上划线：underline 中划线line-through 下划线overline
-->
<style>
h1{
color: rgba(0,255,255,0.5);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p3{
background: yellow;
height: 300px;
}
.l1{
text-decoration: underline;
}
.l2{
text-decoration: line-through;
}
.l3{
text-decoration: overline;
}
/*
水平对齐 参照物 a,b；
*/
img,span{
vertical-align: middle;
}
</style>
</head>
<body>
<p>
<img src="images/a.png" alt="666">
<span>asfsdfgdsgfgeegrwregerg</span>
</p>
<p class="l1">123123123</p>
<p class="l2">123123123</p>
<p class="l3">123123123</p>
<h1>CSS</h1>
<p class="p1">层叠样式表(英文全称：Cascading Style Sheets)是一种 用来表现HTML （标准通用标记语言的一个应用）
或XML（标准通用标记语言的一个子集） 等文件样式的计算机语言。</p>
<p> CSS不仅可以静态地修饰网页， 还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
<p class="p3"> CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。</p>
</body>
</html>
超链接伪类
a:伪类标签 {}
- link用在未访问的连接上。
- visited用在已经访问过的连接上。
- active用于获得焦点（比如，被点击）的连接上。
- hover 用于鼠标光标置于其上的连接。
列表
ul li
list-style:
none 去掉圆点
circle 空心圆
decimal 数字
square 正方形
设置背景大小
#nav{
width:xxxpx;
background:#xxxxxx;
}
ul li{
list-style: none;
height: 30px;
text-indent: 1em;
}
a{
text-decoration:none;
font-size:14px ;
color: black;
}
#nav{
width: 300px;
background: #a0a0a0;
}
ul{
background: #a0a0a0;
}
a:hover{
color: coral;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 3em;
line-height: 35px;
background: red;
}
背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 1000px;
height: 1000px;
background: url("image/tx.png");
}
.div1{
background-repeat:repeat-x;
}
.div2{
background-repeat:no-repeat;
}
.div3{
background-position: xxx px xxx px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
渐变
网站： http://www.grabient.com/
盒子模型
什么是盒子
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KmgrEEQ8-1601016976631)(C:\Users\30563\AppData\Roaming\Typora\typora-user-images\image-20200923155343295.png)]
margin: 外边距 元素外边的距离
padding: 内边距
border: 边框
边框
- 边框的粗细
- 边框的样式
- 边框的颜色
border : xxx px solid(实线/虚线) #xxxxxx；
内外边距
居中： margin：0 auto; 要求有块元素，且块元素有固定的宽度。
上下左右 margin-top/buttom/left/right： xxx px
内边距：padding
元素的大小等于 margin+border+padding+内容宽度
圆角边框
border-radius: 左上 右上 右下 左下 顺时针
圆角=半径 圆形
阴影
box-shadow: xx px xx px xx px 颜色
浮动
标准文档流
块级元素：独占一行
h1-h6 p div 列表
行内元素:不独占一行
span a img strong…
行内元素 可以包含在块级元素中，反之不行
display
display：
block 块元素
inline 行内元素
inline-block 块元素，但是可以内联在一行
none
float
左右浮动 float：right/left
clear:right/left/both 右侧/左侧/两侧 不允许有浮动
父级边框塌陷问题
小结：
1.浮动元素后加一个空div
简单，但是代码中需要尽量避免使用空div
2.设置父级元素高度
简单，但是会对元素有限制
3.overflow 简单
不能被切除的场景不能使用
4.父类中添加伪类
#father:after{
content:'';
display:block;
clear:both;
}
推荐使用
对比
display 方向不可控制
float 浮动起来会脱离标准文档流，要解决父级边框塌陷问题。
定位
相对定位
position:relative
相对于原来的位置进行偏移，它任在标准文档流中，原来的位置会被保留
top/left/bottom/right：xxpx；
绝对定位
定位：基于xxx定位：上下左右
position:absolute
1.没有父级元素定位的前提下，相对于浏览器进行定位
2.当父级 positon:relative时，相对于父级元素进行漂移
固定定位
position:fixed
z-index
z-index: 默认是0，最高无限~999
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/css.css" rel="stylesheet">
</head>
<body>
<div id="content">
<ul>
<li><img src="images/qq会员.png" alt=""></li>
<li class="tipTest">开通qq会员，享受尊贵服务</li>
<li class="tipQq"></li>
<li>时间：2099-1-1</li>
<li>地点：火星</li>
</ul>
</div>
</body>
</html>
#content{
width: 220px;
padding: 0;
margin: 0;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px #000 solid;
}
ul,li{
padding: 0;
margin: 0;
list-style: none;
}
/*父级元素相对定位*/
#content ul{
position: relative;
}
.tipTest,.tipQq{
position: absolute;
width: 220px;
color: #85fff2;
height: 25px;
top:60px;
}
.tipTest{
left:35px;
}
.tipQq{
background: red;
opacity: 0.5; /*背景透明度 */
}
.tipTest{
z-index: 999;
}
扫一扫
1588
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
