CSS页面布局
2.1 什么是CSS[*]作用：美化页面和布局。（Cascading Style Sheets 层叠样式表）
层叠：层层叠加，多个样式可以同时作用在同一个html元素上，同时生效。如果没有冲突的部分就共同作用，有冲突的部分以优先级高的为主。
样式表：多个样式的集合。
[*]css不能单独使用，要和html结合使用。
2.2 css和html结合的3种方式
2.2.1 内嵌样式
[*]语法：在标签中通过style属性引入css样式。
[*]特点：只对当前的元素有效果，不方便复用，属于结构和表现耦合，不方便后期的维护
例：
<p >锄禾日当午</p>
<p>锄禾日当午</p>
<p >锄禾日当午</p>
<p >锄禾日当午</p>
<p >锄禾日当午</p>
<p >锄禾日当午</p>2.2.2内部样式
[*]语法：在head标签的内部通过style标签来引入css样式。
选择器{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
.....
}
[*]特点：可以同时为多个元素设置样式,可以实现了样式的复用。表现和结构进一步分离
[*]作用范围：仅仅在当前页面中有效
例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>一行白鹭上青天</p>
<p>一行白鹭上青天</p>
<p>一行白鹭上青天</p>
<p>一行白鹭上青天</p>
<p>一行白鹭上青天</p>
<b>哈哈哈</b>
</body>
</html>2.2.3 外部样式
单独创建一个css文件，在这个文件中编写 css样式。然后在需要样式的文件中引入该css文件
[*]通过link标签引入
[*]rel:引入文件和当前文件的关系
[*]type:告知浏览器引入文件的类型
[*]href:引入文件的路径
特点：完全使表现和结构分离，可以使得样式可以复用。使用link引入，可以利用浏览器的缓存，加快了用户访问的速度，提高了用户体验。
作用范围：引入的文件
例：a.css
p{
color: red;
font-size: 50px;
}html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="../css/a.css">
</head>
<body>
<p>英雄不问出处电缆不问来处</p>
</body>
</html>2.3 CSS的语法
选择器{
css样式；
}
选择器：选择具有相同或者相似特征的一类元素。
css的样式；
属性1：属性值1;
属性2：属性值2;
属性2：属性值2;
css的注释： /*注释的内容*/
2.4 块元素和内联元素
块元素：
独占一行的元素，无论内容有多少 他们都会独占一行。p h1h2h3div
(div没有任何的效果，不会为元素设置样式，一般是用于布局)
内联元素：
只占本身大小的元素aimg spanb i
span标签也没有任何效果，一般用于选中文字 给文字添加样式。
div块元素主要是用于布局。span内联元素主要是用于选中文字，给文字设置样式。
使用时：
1.块元素可以包含内联元素内联元素不能包含块元素。
2.a元素可以包含任意元素。【任何内容都可以作为超链接使用】 但是除了本身。
3.p元素不可以包含其他的块元素。
2.5 css中的选择器
2.5.1基础选择器
2.5.1.1 元素选择器
标签选择器：选择具有相同标签名的元素
语法：标签名{css样式}
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>锄禾日当午</p>
<p>锄禾日当午</p>
<p>锄禾日当午</p>
<h4>汗滴禾下土</h4>
<h4>汗滴禾下土</h4>
<h4>汗滴禾下土</h4>
</body>
</html>
2.5.1.2 id选择器
id选择器：根据id的值选择到对应的元素
语法：#id属性值{css样式}
在同一个页面中 id属性值需要保证唯一。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>锄禾日当午</p>
<p>锄禾日当午</p>
<p id="d1">锄禾日当午3</p>
<p>锄禾日当午</p>
<p>锄禾日当午</p>
<p>锄禾日当午</p>
<p>锄禾日当午</p>
<h4>汗滴禾下土</h4>
<h4 id="d2">汗滴禾下土2</h4>
<h4>汗滴禾下土</h4>
<h4>汗滴禾下土</h4>
<h4>汗滴禾下土</h4>
</body>
</html>
2.5.1.3 类选择器
类选择器：选择具有相同class属性值的一类元素【class属性值可以重复】
语法：.class属性值{css样式}
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>锄禾日当午</p>
<p>锄禾日当午</p>
<p id="d1">锄禾日当午3</p>
<p>锄禾日当午4</p>
<p>锄禾日当午</p>
<p >锄禾日当午AAA</p>
<p>锄禾日当午</p>
<h4>汗滴禾下土</h4>
<h4 id="d2">汗滴禾下土2</h4>
<h4>汗滴禾下土</h4>
<h4>汗滴禾下土</h4>
<h4 >汗滴禾下土AAA</h4>
</body>
</html>
注意：
优先级：id选择器 > 类选择器> 标签选择器2.5.2 扩展选择器
2.5.2.1 选择所有元素
*号表示通配符,能选择到页面中的所有元素
*{
css样式
}2.5.2.2 并集选择器
语法:选择器1,选择器2....{css样式}
多个选择器之间使用逗号隔开
2.5.2.3 子选择器[后代选择器]
祖先元素 后代元素{
css样式
}2.5.2.4 父选择器
选择器1(父)> 选择器2(子){
css样式;
}2.5.2.5 属性选择器
元素名称[属性="属性值"]{
css样式;
}2.6 css的属性
2.6.1 文字属性
[*]color:文字颜色 red green #00ff00rgb(0,255,0);
[*]font-size:文字大小
[*]font-family：字体
[*]text-align:文字的对齐方式：leftcenter right
[*]text-decoration：文字的下划线属性:none没有下划线underline表示有下划线
[*]line-height:行高
2.6.2 背景属性
[*]background-color:设置背景颜色
[*]background-image:设置背景图片
[*]background-repeat：设置背景图片的平铺方式
[*]no-repeat：不平铺
[*]repeat-x:横向平铺
[*]repeat-y:纵向平铺
[*]repeat:平铺
2.6.3 尺寸属性
width:设置元素的宽度
height:设置元素的高度
2.6.4 列表属性;
list-style-type 设置列表项前面的标识
list-style-image:设置列表项前面的图片:url:指定图片的路径
2.6.5 显示属性
display:设置内容隐藏或者显示
[*]none:表示隐藏
[*]inline:表示显示,行级显示
[*]block:表示显示,换行显示
2.6.6 浮动属性
float:浮动属性 leftright
clear:清除浮动 leftrightboth
2.6.7 边框属性
[*]border-width:边框粗细
[*]border-color:边框颜色
[*]border-style:边框线型：solid(实线)dotted(点线) dashed(虚线)
[*]border:同时设置粗细颜色线型
边框是一个复合属性,可以单独设置某一个条边框
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]