CSS层叠样式表

最新推荐文章于 2023-10-30 09:42:13 发布

Han_Zhou_Z

最新推荐文章于 2023-10-30 09:42:13 发布

阅读量647

点赞数 2

文章标签： css html html5

本文链接：https://blog.csdn.net/Han_Zhou_Z/article/details/120647996

版权

一、CSS层叠样式表（cascading style sheet）

一、CSS层叠样式表（cascading style sheet）

1、CSS的主要作用

（1）可以美化页面的外观

（2）可以统一页面的风格

（3）可以实现内容和样式的分析，更适合团队的开发

2、CSS的使用方法

（1）行内嵌入式

给标签添加style属性，用来设置样式

<p style="color: aqua; font-size: 20px;">CSS展示</p>

但这种方法只对目前嵌入的标签有效

（2）页面嵌入式

在页面中使用<style></style>定义不同的样式规则

<style>
    body{
        text-align: center;

    }
    p{
        color: blueviolet; font-size: 40px;
    }
</style>
<body>
    <p>CSS展示</p>
</body>

（3）导入CSS文件的方式

第一步：创建扩展名为.css的样式文件

第二步：在页面中通过<link>标签将外部的css文件链接起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../10.8博客示范/css/css2.css">
</head>
<body>
    <p>css样式展示</p>
</body>
</html>

p{
    font-size: 40px;
    color: blueviolet;
    text-align: center;
}

3、CSS选择器

在CSS中定位页面中的标签（控件）

（1）标签名选择器

标签名{

样式规则（属性）：值；

}

p{
    font-size: 40px;
    color: blueviolet;
    text-align: center;
}

（2）类选择器

在页面中给标签添加class属性,标签的class属性值可以重复

.类名（标签的class属性值）{

样式属性：值；

}

<p class="c1">css样式展示</p>

.c1{
    color: brown;
}

（3）id选择器

在页面中给标签添加id属性,标签的id属性值不能重复

#id{

样式属性：值；

}

<p id="c1">css样式展示</p>

#c1{
    color: brown;
}

（4）通配选择符

*代表所有元素

样式属性：值；

}

*{
    color: brown;
}

注意，颜色的表达形式有三种

（1）颜色名：red、blue、green

（2）十六进制表示：#rgb或#rrggbb,r、g、b表示三原色的值（取值范围在0~f之间）#fff

（3）rgb（r，g，b）函数：r，g，b三个参数表示三原色的值（取值范围在0~255之间）

rgba（r，g，b，a）函数：r，g，b三个参数表示三原色的值（取值范围在0~255之间），参数a表示透明度（取值0.0~1.0之间)

二、CSS样式规则

1、字体规则（属性）

font--style	字体样式
font--size	字号
font--family	字体
font--weight	文字的粗细

2、列表样式

list-style-position	设置项目符号和文本的位置

最低0.47元/天解锁文章

Han_Zhou_Z

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS层叠样式表

一、CSS层叠样式表（cascading style sheet）1、CSS的主要作用（1）可以美化页面的外观（2）可以统一页面的风格（3）可以实现内容和样式的分析，更适合团队的开发2、CSS的使用方法（1）行内嵌入式给标签添加style属性，用来设置样式<p style="color: aqua; font-size: 20px;">CSS展示</p>但这种方法只对目前嵌入的标签有效（2）页面嵌入式在页面中使用<style&gt.
复制链接

扫一扫