一、认识css
css简介：用于美化网页，布局页面，可以让HTML更加漂亮，俗称网页的美容师
定义：css是层叠样式表的简称，也称css样式表或级联样式表，也是一种标记语言
作用：①主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)
②设置图片的外形(高度、边框样式、边距等)
③设置版面的布局和外观显示样式
④css的出现让HTML可以专注于去做结构呈现，而样式交给css，实现结构样式相分离
二、css语法规范
格式标准：选择器 {样式}
<style>
P {
color: rgb(9, 172, 66);
}
</style>
<body>
<p>你好，好久不见</p>
</body>
ps：①选择器是用于指定css样式的HTML标签，花括号{}内是对该对象设置的具体样式
②属性和属性值以“键值对”的形式出现
③属性是对指定的对象设置的样式属性，例如文本颜色，字体大小等
④属性和属性值之间用英文“:”分开，多个“键值对”之间用英文“;”进行区分
三、css选择器
选择器定义：根据不同的需求把不同的标签选择出来，即用来选择标签的
分类：1、基础选择器(由单个选择器组成)
四类(①标签选择器、②类选择器、③id选择器、④通配符选择器)
标签选择器 | 用HTML标签名作为选择器，按标签名分类，为页面中某一类标签指定统一css样式 |
基本语法：
<style>
P {
color: rgb(164, 56, 222);
}
div {
color: aquamarine;
}
</style>
</head>
<body>
<p>哈喽</p>
<p>哈喽</p>
<p>哈喽</p>
<div>要开心</div>
<div>要开心</div>
<div>要开心</div>
</body>
类选择器 | 差异化选择不同标签，单独选择一个或者几个标签 |
基本语法：样式点定义，结构类调用，一个或多个，开发最常用
<style>
.red {
color: red;
}
.green{
color:green;
}
</style>
<body>
<ul>
<li class="red">懒羊羊</li>
<li class="green">美羊羊</li>
<li>沸羊羊</li>
<li class="red">暖羊羊</li>
</ul>
</body>
特例：多类名选择器
基本语法：
<style>
.box {
width: 50px;
height: 50px;
font-size: 12px;
}
.color1 {
background-color: cadetblue;
}
.color2 {
background-color: chartreuse;
}
</style>
<body>
<div class="box color1">天天开心</div>
<div class="box ">努力学习</div>
<div class="box color2">健康成长</div>
</body>
id选择器 | 为标有特定id的HTML元素指定特定样式，多用于js |
基本语法：样式#定义，结构id调用，只能调用一次，别人切勿使用（js）
<style>
#rgb {
color: rgb(21, 239, 159);
}
</style>
<body>
<div id="rgb">平安顺遂</div>
</body>
通配符选择器 | 选取页面中的所有元素，使其具有统一样式，使用 * 定义 |
基本语法：
<style>
* {
color: chocolate;
}
</style>
<body>
<div>苹果</div>
<div>香蕉</div>
<span>大家</span>
<ul>
<li>猪猪侠</li>
<li>小菲菲</li>
</ul>
</body>
四、css字体属性
定义：用来设置字体系列、大小、粗细、以及文字样式
1、字体系列 —— font-family
例：
<style>
h2 {
font-family: '微软雅黑';
}
p {
font-family: Arial, Helvetica, sans-serif;
}
</style>
<body>
<h2>《爱之乐章》</h2>
<p>爱，是清晨的第一缕阳光</p>
<p>温柔地洒在脸庞，唤醒沉睡的梦想</p>
<p>它如微风轻拂，细腻而悠扬</p>
<p>在心底泛起层层温暖的波浪</p>
</body>
ps：①各种字体之间必须使用英文状态的逗号隔开
②如果有空格隔开的多个单词组成的字体加引号
③尽可能使用默认字体
2、字体大小 —— font-size
例：
<style>
p {
font-size: 20px;
}
</style>
<body>
<p>爱，是一首永远写不完的诗</p>
<p>字里行间，流淌着真挚的情思</p>
<p>岁月流转，爱永不褪色</p>
<p>在生命的长河中绽放绚丽的姿</p>
ps：①px(像素)大小是网页的最常用单位
②可以给body整个页面设置字体的大小，但是标题标签需要单独设置
3、字体粗细 —— font-weight
例：
<style>
.bold {
font-weight: bold;
}
.bold1 {
font-weight: 700;
}
h2 {/* 让加粗的文字不加粗 */
font-weight: normal;
}
</style>
<body>
<h2>《爱之乐章》</h2>
<p>爱，是一首永远写不完的诗</p>
<p>字里行间，流淌着真挚的情思</p>
<p class="bold">岁月流转，爱永不褪色</p>
<p class="bold1">在生命的长河中绽放绚丽的姿</p>
</body>
4、文字样式 —— font-style
例：
<style>
p {
font-style: italic;
}
em {
/* 让倾斜的文字不倾斜 */
font-style: normal;
}
</style>
<body>
<p>每一片花瓣都诉说着深情</p>
<em>在时光里演绎着浪漫的歌</em>
</body>
5、字体复合属性
规定语法格式：
<style>
div {
/* 必须严格按照这个顺序font: font-style font-weight font-size/font-height font-family; */
font: italic bold 16px '微软黑体';
}
</style>ps：①使用font属性时，必须严格按照上面的顺序书写，并且各个属性之间用空格隔开
②不需要设置的属性可以省略，但必须保留font-size和font-family
五、css文本属性
定义：用来定义文本外观，例如：文本的颜色、对齐文本、装饰文本、文本缩进、行间距等
1、文本颜色 —— color
例：
<style>
div {
color: pink;
/* color: #e08383;
color: rgb(red, green, blue); */
}
</style>
<body>
<div>好好学习，天天向上</div>
</body>
2、对齐文本 —— text-align
例：
<style>
.center {
text-align: center;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
</style>
<body>
<h1 class="center">居中对齐的标题<h1>
<h1 class="left">左对齐的标题<h1>
<h1 class="right">右对齐的标题<h1>
</body>
3、装饰文本 —— text-decoration
例：
<style>
.underline {
/* 下划线 */
text-decoration: underline;
}
.line-through {
/* 删除线 */
text-decoration: line-through;
}
.overline {
/* 上划线 */
text-decoration: overline;
}
a {
/* 取消下划线 */
text-decoration: none;
color: black;
}
</style>
<body>
<div class="underline">天天开心</div>
<div class="line-through">天天开心</div>
<div class="overline">天天开心</div>
<a href="#">特定链接</a>
</body>
4、文本缩进 —— text-indent
例：
<style>
p {
/* text-indent: 30px; */
text-indent: 2em;
}
</style>
<body>
<p>在张嘉佳的《云边有个小卖部》中，云边镇宛如一个世外桃源，它静静地坐落在山的那边，云的下边。这里有漫山遍野的油菜花，有潺潺流淌的小溪，还有那熟悉的小卖部。对于主人公刘十三来说，云边镇是他生命的摇篮，是他梦想起航的地方，也是他心灵的归宿。
</p>
<p>刘十三自幼与外婆王莺莺相依为命，在这个小小的镇上，他度过了无忧无虑的童年时光。外婆的小卖部是他儿时的乐园，那里有各种各样的零食和小玩具，每一样东西都承载着他美好的回忆。然而，刘十三心中却怀揣着一个大大的梦想，他渴望走出云边镇，去大城市闯荡，追寻自己的未来。
</p>
<p>在成长的道路上，刘十三努力学习，拼命想考上好大学，只为了能离自己的梦想更近一步。他就像一颗顽强的种子，在现实的土壤中努力挣扎着生长，尽管过程充满了艰辛和挫折，但他从未放弃。这种对梦想的执着追求，让我们看到了生命的坚韧与不屈。就如同现实生活中的我们，每个人心中都有一个属于自己的梦想，或许它遥不可及，或许在追寻的路上会遇到无数的困难，但只要我们怀揣着希望，不断努力前行，就一定能在梦想与现实之间找到属于自己的那片天空。
</p>
</body>
5、行间距 —— line-height
行间距：文本高度+上间距+下间距
例：
<style>
p {
line-height: 25px;
}
</style>
<body>
<p>在张嘉佳的《云边有个小卖部》中，云边镇宛如一个世外桃源，它静静地坐落在山的那边，云的下边。这里有漫山遍野的油菜花，有潺潺流淌的小溪，还有那熟悉的小卖部。对于主人公刘十三来说，云边镇是他生命的摇篮，是他梦想起航的地方，也是他心灵的归宿。
</p>
<p>刘十三自幼与外婆王莺莺相依为命，在这个小小的镇上，他度过了无忧无虑的童年时光。外婆的小卖部是他儿时的乐园，那里有各种各样的零食和小玩具，每一样东西都承载着他美好的回忆。然而，刘十三心中却怀揣着一个大大的梦想，他渴望走出云边镇，去大城市闯荡，追寻自己的未来。
</p>
<p>在成长的道路上，刘十三努力学习，拼命想考上好大学，只为了能离自己的梦想更近一步。他就像一颗顽强的种子，在现实的土壤中努力挣扎着生长，尽管过程充满了艰辛和挫折，但他从未放弃。这种对梦想的执着追求，让我们看到了生命的坚韧与不屈。就如同现实生活中的我们，每个人心中都有一个属于自己的梦想，或许它遥不可及，或许在追寻的路上会遇到无数的困难，但只要我们怀揣着希望，不断努力前行，就一定能在梦想与现实之间找到属于自己的那片天空。
</p>
</body>
六、css引入方式
1、内部样式表（嵌入式）
定义：内部样式表式是写到html页面内部，将所有css代码抽取出来，单独放到一个<style>标签中
语法格式：
<style>
/* 具体样式内容 */
</style>ps：①并没有实现结构和样式的完全分离
②方便控制当前整个页面中的元素样式，位于html页面内部
2、行内样式表（行内式）
定义：在元素标签内部的style属性设定css样式
语法格式：
<body>
<p style="color: aqua; font-size: 20px;">生活多彩像画卷</p>
</body>ps：①只可以控制当前的标签的样式
②未实现结构和样式的分离
3、外部样式表（链接式）
定义：把样式单独写到css文件中，之后再把css文件引入到html页面中
具体步骤：第一步：新建一个后缀名未.css的文件，把所有css代码放入此文件中
第二步：在html页面中，使用<link>标签引入这个文件
<link rel="stylesheet" href="css文件路径">
语法格式：
/* css文件内容 */
div{
color: aquamarine;
}<!-- html文件内容 -->
<head>
<!-- 引入css文件 -->
<link rel="stylesheet" href="css基础学习9.29.css">
</head>
<body>
<div>好好学习，天天向上</div>
</body>七、综合案例
body {
font: 16px/28px 'Microsoft YaHei';
}
h1 {
/* 文字不加粗 */
font-weight: normal;
/* 标题居中对齐 */
text-align: center;
}
.gray {
color: #8888;
font-size: 12px;
text-align: center;
}
a {
text-decoration: none;
}
.search {
color: #666;
width: 170px;
}
.btn {
font-weight: normal;
}
p{
text-indent: 2em;
}
.pic{
text-align: center;
}<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css综合案例</title>
<link rel="stylesheet" href="css综合案例9.29.css">
</head>
<body>
<h1>大风蓝色预警信号！直降8～10℃，7级或以上阵风抵达成都</h1>
<div class="gray">成都市气象台2024年9月29日14时00分发布 <a href="#">中国天气网</a> <input type="text" value="请输入..." class="search">
<button class="btn">搜索</button>
</div>
<hr>
<p>受冷空气影响，预计未来12小时我市锦江区、青羊区、金牛区、武侯区、成华区、高新西区、高新南区、青白江区和东部新区的所有镇（街道）将受大风影响，平均风力可达6级，阵风可达7级或以上。大风影响时伴有降温和降雨，请注意防范。</p>
<p class="pic"><img src="./picture/css综合案例9.29.jpg " alt=""></p>
<h4>成都未来几天多雨</h4>
<p>2024年9月29日14时20分四川省气象台发布强对流短时临近预报：预计未来3小时，成都、德阳、绵阳、广元、巴中、南充、达州、泸州、南充9市、阿坝州中部和甘孜州东部部分地方有阵雨或雷雨，局地有短时强降水和阵性大风等强对流天气，盆地内最大小时雨量20～50毫米。
</p>
<p>据成都气象，今日早间我市西部地区普遍降水，最大降雨量为108.1毫米，出现在彭州。预计今天白天阴天有小到中雨，局部地方大雨，普遍有5-7级偏北风，中东部局部地方可达8级。11时全市平均气温23.1℃。随后两天成都以雨天为主，29日夜间偏北风3～5级，东部局部地方可达6级或以上。
</p>
<h4>国庆7天气温波幅不大，总体适宜出游</h4>
<p>29日，四川省气象台发布国庆专题天气预报。红星新闻记者了解到，预计国庆假期，盆地大部以多云间阴的天气为主，总体适宜出游和户外活动。川西高原和攀西地区以阴天间多云的天气为主，多阵雨或小雨，局部中到大雨。</p>
<p>10月1日白天到晚上：雅安、泸州2市阴天间多云有小雨，盆地其余地方以多云间阴天气为主；甘孜州和阿坝州中部南部以及攀西地区西部阴天间多云有阵雨或雷雨，其中甘孜州南部有中雨，个别地方大雨，阿坝州北部和攀西地区东部多云间阴有分散阵雨。10月2日白天到晚上：盆地北部多云，南部多云间阴，其中雅安、眉山、乐山、宜宾、泸州、自贡、内江7市的部分地方有阵雨；甘孜州和阿坝州南部以及攀西地区阴天间多云有阵雨或雷雨，其中甘孜州中部和攀西地区中部有中雨，阿坝州北部多云。
</p>
</body>
</html>
扫一扫
3598
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
