CSS页面布局

广性 · 6 小时前

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 h1  h2  h3  div
(div没有任何的效果，不会为元素设置样式，一般是用于布局)
内联元素：
只占本身大小的元素a  img span  b 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 #00ff00 rgb(0,255,0);
font-size:文字大小
font-family：字体
text-align:文字的对齐方式：left center 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:浮动属性 left right
clear:清除浮动 left right both
2.6.7 边框属性

border-width:边框粗细
border-color:边框颜色
border-style:边框线型：solid(实线) dotted(点线) dashed(虚线)
border:同时设置粗细颜色线型
边框是一个复合属性,可以单独设置某一个条边框

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

账号		自动登录	找回密码
密码			立即注册