CSS页面布局

2.1 什么是CSS

作用：美化页面和布局。（Cascading Style Sheets 层叠样式表）
层叠：层层叠加，多个样式可以同时作用在同一个html元素上，同时生效。如果没有冲突的部分就共同作用，有冲突的部分以优先级高的为主。
样式表：多个样式的集合。
css不能单独使用，要和html结合使用。

2.2 css和html结合的3种方式

2.2.1 内嵌样式

语法：在标签中通过style属性引入css样式。
特点：只对当前的元素有效果，不方便复用，属于结构和表现耦合，不方便后期的维护

例：

    <p style="background-color: green;font-size: 30px;color: red;">锄禾日当午</p>
    <p>锄禾日当午</p>
    <p style="background-color: green;font-size: 30px;color: red;">锄禾日当午</p>
    <p style="background-color: green;font-size: 30px;color: red;">锄禾日当午</p>
    <p style="background-color: green;font-size: 30px;color: red;">锄禾日当午</p>
    <p style="background-color: green;font-size: 30px;color: red;">锄禾日当午</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>
        <style type="text/css">
           p{
               background-color:pink;
               color:darkorange;
               font-size: 20px;
           }
        </style>
    </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>
    <!--引入外部的a.css-->
    <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>

    <style type="text/css">
        p{
          background-color:pink;
        }

        h4{
            background-color:green;
        }
    </style>
</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>

    <style type="text/css">
        #d1{
          color:red;
        }

        #d2{
            font-size: 50px;
        }
    </style>
</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>

    <style type="text/css">
        .c1{
            color: yellow;
            font-size: 60px;
        }
    </style>
</head>
<body>
    <p>锄禾日当午</p>
    <p>锄禾日当午</p>
    <p id="d1">锄禾日当午3</p>
    <p>锄禾日当午4</p>
    <p>锄禾日当午</p>
    <p class="c1">锄禾日当午AAA</p>
    <p>锄禾日当午</p>

    <h4>汗滴禾下土</h4>
    <h4 id="d2">汗滴禾下土2</h4>
    <h4>汗滴禾下土</h4>
    <h4>汗滴禾下土</h4>
    <h4 class="c1">汗滴禾下土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:同时设置粗细颜色线型
边框是一个复合属性,可以单独设置某一个条边框

posted @ 2025-07-27 15:52 汣姒阅读(21) 评论(0) 收藏举报

刷新页面返回顶部

jiusi-94