1.CSS格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html和CSS进行交互</title>
<!--1.可以在head标签中填写css样式-->
<style>
p{
color:red;
}
</style>
</head>
<body>
<p>你好！世界。</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html和CSS进行交互</title>
<!--可以在head标签中填写css样式-->
<!--
<style>
p{
color:red;
}
</style>
-->
<!--2.分开进行写css样式，并通过link进行关联-->
<link rel="stylesheet" href="第一个CSS.css">
</head>
<body>
<p>你好！世界。</p>
</body>
</html>
css优势
1.内容和表现分离
2.网页结构表现统一，可实现复用
3.样式十分的丰富
4.建立使用独立与html的css文件
5.利用SEO,容易被搜索引擎收录
2.css四种导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html和CSS进行交互</title>
<!--可以在head标签中填写css样式-->
<!-- 1.内部样式
<style>
p{
color:red;
}
</style>
-->
<!--2.外部样式-->
<link rel="stylesheet" href="第一个CSS.css">
</head>
<body>
<!--优先级：就近原则-->
<!--3.行内样式-->
<p style="color:chartreuse">你好！世界。</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!--4.导入式 css2.1版本中，相较于link方式使用较少。-->
@import url(第一个CSS.css);
</style>
</head>
<body>
<p >你好！世界。</p>
</body>
</html>
3.选择器
用来选择页面上的某一个或者某一类元素
3.1基本选择器
1.标签选择器：选择一类标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
color:#113456;
background: aquamarine;
border-radius:23px;
}
P{
color:red ;
background: slateblue;
border-radius:10px;
}
</style>
</head>
<body>
<h1>一级标题</h1>
<p>这是一个段落</p>
</body>
</html>
2.类选择器 class： 选择所有class属性一致的标签，跨标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*类选择器的格式：使用.class的类名{}，可以多个标签归类，是同一个class */
.xiaohong {
background: #5cd70f;
}
.xiaoming{
background: crimson;
}
.xiaoli{
background: #666777;
}
</style>
</head>
<body>
<h1 class="xiaoming">一级标题1</h1>
<h1 class="xiaohong">一级标题2</h1>
<h1 class="xiaoli">一级标题3</h1>
<p class="xiaohong">你好！世界。</p>
</body>
</html>
3.id选择器：全局唯一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style>
/*id选择器的格式：使用#class的类名{}，id全局唯一 */
#xiaohong {
background: #5cd70f;
}
#xiaoming{
background: crimson;
}
#xiaoli{
background: #666777;
}
</style>
</head>
<body>
<h1 id="xiaoming">一级标题1</h1>
<h1 id="xiaohong">一级标题2</h1>
<h1 id="xiaoli">一级标题3</h1>
<p class="xiaohong">你好！世界。</p>
</body>
</html>
3.2层次选择器
1.后代选择器：在某个元素的后面
body p{
background:#172688
}
2.子选择器;一代，儿子
body >p{
background:#172688
}
3.相邻兄弟选择器：同辈
.xiaohong+ p{
background:#172688
}
4.通用选择器
.xiaohong ~p{
background:#172688
}
3.3结构伪类选择器
<style>
<!--ul的第一个子元素-->
ul li:first-child{
background=red;
}
<!--ul的最后一个子元素-->
ul li:last-child{
background=red;
}
<!--选中P1，定位到父元素，选择当前的第一个元素-->
P:nth-child(1){
background:#112231;
}
</style>
3.4属性选择器
属性名=属性值（正则）
=绝对等于
*=包含这个元素
^=以这个元素开头
$以这个元素结尾
存在id属性的元素 a[]{}
a[id]{}或者a[id=value]{}
4.文字文本列表背景样式
4.1文字
span标签：重点要突出的字，使用span套起来；
font-family：字体
font-size：大小
font-weight ：字体粗细
a标签默认自带下划线，使用text-dectoration：none去除下划线；
4.2文本
1.颜色 color rgb rgba
2.文本对齐方式 text-align:center;
3.首行缩进 text-indent:2em;
4.行高 line-height
5.装饰 text-dectoration:underline(下划线)
6.文本图片水平对齐方式
a:hover{
color：red;
font-size:22px;
}/*鼠标悬浮时显示的状态；*/
a:active{
color：red;
font-size:22px;
}/*鼠标按住未释放的状态；*/
text-shadow: #125367 10px 22px 12px; /*文本阴影 参数：颜色，水平偏移，垂直偏移，阴影半径*/
4.3列表
list-style：
none 去掉原点
circle:空心圆
decimal:数字
square；正方形
4.4背景及渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
weight: 112px;
height: 233px;
border: crimson solid 1px;
background-image: url("1.png");
} /*默认是全部平铺的*/
.div1{
background-repeat: repeat-x;
}
.div2 {
background-repeat: repeat-y;
}
.div3{
background-repeat:round;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
/*渐变*/
background-color:red;
background-image:linear-gradient(115deg, #243455 0%, # 654883 50%,# FF0003 100%)
5.盒子模型
盒子的计算方式：这个元素到底多大？ margin+border+padding+内容；
margin:外边距
border:边框
padding:内边距
4.1 边框
1.边框粗细
2.边框样式
3.边框颜色
board:3px solid black;
solid实线，dashed虚线
body 总有一个默认的外边距margin：0；
4.2内外边距及div居中
4.2.1 外边距
margin:0;
margin:0 auto;
margin:1px 2px 2px 3px;
4.2.2 内边距
padding:0;
padding:0 auto;
padding:1px 2px 2px 3px;
4.2.3 div居中
margin:0 auto;可以居中 要求：块元素，有固定宽度；
4.3 圆角边框及阴影
board-radius:1px 2px 3px 4px; 顺时针方向；
box-shadow:1px 2px 3px red;
5.display 和浮动
disply: block(块元素);inline(行内元素);inline-block(是块元素，但是可以内联，在一行);none(消失);
浮动：float:right; float:left;
块级元素：独占一行；如 h1-h6标签，p标签，列表等
行内元素：不独占一行；如span标签，a标签，img标签，strong标签等；
行内元素可以被包含在块级元素中，反之，则不可；
5.1 父级边框塌陷问题
clear:
clear: right; 右侧不允许有浮动元素；
clear: left; 左侧不允许有浮动元素；
clear: both; 两侧不允许有浮动元素；
clear: none;
解决方案
1.增加父级元素的高度
2.增加一个空的div标签，清除浮动
<div class="clear"></div>
.clear{
clear:both;
margin:0;
padding:0;
}
3.overflow
在父级元素中增加一个overflow：hidden;
4.父类增加一个伪类：after
#father:after{
content:'';
display:block;
clear:both;
}
5.2小结与对比：
小结：
1.浮动元素后面增加div
简单，代码中尽量避免空div
2.设置父级元素的高度
简单，元素假设有了固定的高度，就会被限制；
3.overflow
简单，下拉的一些场景避免使用；
4.父类增加一个伪类：after(推荐使用)
写法稍微复杂点，但是没有副作用。
对比
display：方向不可控制；
float：浮动起来的话会脱离标准文档流，所以需要解决父级元素崩塌问题；
6.定位
6.1相对定位
相对定位：position：relative；
top:11px; bottom:33px; left:22px; right:12px;
相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中，原来的位置会保留。
6.2 绝对定位
position:absolute;
定位：基于xxx定位，上下左右
- 没有父级元素的前提下，相对于浏览器定位；
- 假设父级元素存在定位，通常会相对与父级元素进行偏移；
- 在父级元素内进行移动；
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会保留。
6.3 固定定位
position:fixed;
6.4 z-index
图层，z-index：默认是0，最高无限-999；
opacity:0.5; 背景透明度；
filter:Alpha(opacity=50);
267
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
