当前位置：首页 > news >正文

css初学者第二天

news 2025/7/31 9:22:59

<1>css文本属性

css text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

1.1 文本颜色

color属性用于定义文本的颜色

表示	属性值
预定义颜色值	red，green，blue等
十六进制（最常用）	#FF0000，#FF6600，#29D794
RGB代码	rgb（255,0,0）或rgb（100%，0%，0%）

1.2 对齐文本

text-align属性用于设置元素内文本内容的水平对齐方式。

属性值	说明
left	左对齐（默认值）
right	右对齐
center	居中对齐

1.3 装饰文本

text-decoration属性规定添加到文本修饰。可以给文本添加下划线、删除线、上划线等。

属性值	描述
none	默认。没有装饰线（最常用）
underline	下划线。链接a自带下划线（常用）
overline	上划线。（几乎不用）
line-through	删除线。（不常用）

1.4 文本缩进

text-indent属性用来指定文本的第一行缩进，通常是将段落的首行缩进。

通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。

单位有px或者em，em是一个相对大小，1em相当于一个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小。

1.5 行间距

line-height属性用于设置行间的距离。单位为px

<2>css的三种样式表

按照css样式书写的位置（或者引入的方式），css样式表可以分为三大类：

2.1 内部样式表

内部样式表是写到html页面内部，是将所有的css代码抽取出来，单独放到一个<style>标签中。

-<style>标签理论上可以放在html文档的任何地方，但一般会放在文档的<head>标签中。

-通过此方式，可以方便控制当前整个页面中的元素样式设置。

-代码结构清晰，但没有实现结构与样式完全分离。

-使用内部样式表设定css，通常也被称为嵌入式引入。

2.2 行内样式表

行内样式表是在元素标签内部的style属性中设定了css样式，适合修改简单样式。

例如：

<div style="color: red; font-size: 12px;">啦啦啦啦啦啦啦</div>

-style其实就是标签的属性

-在双引号中间，写法要符合css规范

-可以控制当前的标签设置样式

-使用行内样式表设定css通常也被称为行内式引入、

2.3 外部样式表

实际开发都是外部样式表，适合样式比较多的情况，核心是：样式单独写到css文件中，之后把css文件引入到html页面中。

使用外部样式表分两步：

1.新建一个后缀名为.css的样式文件，把所有css代码都放入此文件中。

2.在html页面中，在<head>标签内使用<link>标签引入这个文件。

<link rel="stylesheet" href="css文件路径">

属性	作用
rel	定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
href	定义所链接外部样式表文件的URL，可以是相对路径也可以是绝对路径

-使用外部样式表设定css，通常也被称为外链式或链接式引入，这种方式是开发中最常用的方式。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h1 {text-align: center;display: flex;justify-content: center;}.header-container {/* 使用弹性布局 */display: flex;  /* 垂直方向居中对齐 */align-items: center;/* 水平方向两端对齐 */justify-content: center;/* 上下外边距20px*//* 上右下左 *//* 上下 左右 *//* margin: auto;   */}.fubiaoti {color: rgb(132, 133, 130);font-size: 14px;font-family: 'Microsoft YaHei', 'Arial', sans-serif;margin: 0 100px 20px 0 ;/* 移除默认边距 */}.search-box {display: flex;align-items: center;/* 搜索框和按钮之间的间距 */gap: 10px;margin: 0 100px 20px 0 ;}.search-input {/* 内边距5px */padding: 5px;width: 200px;height: 15px;/* 边框样式 */border: 1px solid rgb(132, 133, 130);/* 边框圆角4px */border-radius: 4px;}.search-button {padding: 4px 10px;background-color: rgb(242, 244, 238);color: rgb(19, 18, 18);border: none;/* 边框圆角4px */border-radius: 4px;/* 鼠标悬停时显示手型光标 */cursor: pointer;}p {display: flex;/* 作为列，垂直的展示弹性项目 *//* flex-direction: column; */text-indent: 2em;font: 16px 'Microsoft YaHei', 'Arial', sans-serif;text-align: center;}.weather-image{display: block;margin: 20px auto;max-width: 100%;height: auto;}.shuipingxian {border: 0.5px solid black;}a {text-decoration: none;}</style>
</head><body><h1>全国多地天气 "水火两重天" 台风高温强对流齐登场</h1><div class="header-container"><p class="fubiaoti">2025-07-30 19:03 来源:<a href="#">中国天气网</a></p><div class="search-box"><input type="text" class="search-input" placeholder="请输入查询条件"><button class="search-button">搜索</button></div></div><div class="shuipingxian"></div><img src="天气图片.jpeg" alt="天气图片" class="weather-image"><p>今日（2025 年 7 月 30 日），全国天气舞台呈现 “多样化” 态势，台风 “竹节草” 持续影响东南沿海，川渝等地高温 “火力全开”，部分地区还遭遇强对流天气 “突袭”，各地气象预警信号密集发布。</p><h3>台风 “竹节草” 发威 东南沿海风雨交加</h3><p>受第 8 号台风 “竹节草” 影响，浙江多地陷入风雨重围。浙江省自然资源厅与气象局联合升级发布地质灾害气象风险红色预警，杭州机场截至上午 8 时 30 分已取消当日进出港航班 8 架次；宁波栎社国际机场取消 4架次航班，杭深高铁 G7575 次等列车临时停运。7 时 25 分，甬江流域姚江大闸站水位达 2.0 米警戒水位，今年首场编号洪水。</p><p>江苏如皋同样受台风影响，小时降水量达 23.1mm，位列全国第三，白蒲林梓 24 小时降水量居全省首位。当地气象台升级发布暴雨橙色预警，部分公交班次、汽渡临时停运，市民出行受阻。</p><p>安徽也加入台风影响圈，省气象台发布台风蓝色预警，预计未来 24 小时淮河以南大部阵风 7-8 级，水面和山区达 8-9级；宣城、马鞍山等市将有大雨到暴雨，局部大暴雨（100-150 毫米）。今夜至明日，淮北地区多云转阴天有阵雨，沿淮淮河以南阴天有雷雨，中东部或现暴雨到大暴雨。</p><h3>川渝鲁高温 “烤验” 局部地区超 40℃</h3><p>四川盆地今日 “炎值” 在线，大部多云间晴，西部沿山有阵雨或雷雨，局部中到大雨；盆地最高气温西部 35-38℃，其余地区 37-39℃。未来三天，高温仍将持续，局部或现短时强降水、阵性大风等强对流天气。</p><p>重庆高温态势更为凶猛，市气象台预计未来三天大部最高气温 36-39℃，部分地区 40-44℃。今日 07-16 时，19 个区县超 37℃，潼南、奉节等 3 个区县及中心城区局地超 40℃，巫溪以 43.2℃登顶。</p><p>山东邹城则遭遇 “高温 + 雷雨” 双重考验，气象台同时发布雷雨大风黄色预警与高温橙色预警：下午到夜间有雷阵雨，局地伴短时强降水和 7-9 级大风；今日下午至 31 日，持续 37℃以上高温，市民需做好防暑与防风雨准备。</p><h3>北京晴热伴风险 多地强对流预警生效</h3><p>北京今日天空晴朗，紫外线强，午后气温攀升至 32℃左右。由于前期降雨频繁，山区地质灾害风险仍处高位且具滞后性，气象部门提醒民众近期远离山区河道等危险区域。</p><p>此外，多地强对流天气预警持续生效：重庆江津区 17 时 40 分升级发布大风橙色预警，预计部分镇街阵风超 11 级，伴短时强降水、雷电；南通 17 时 48 分发布暴雨橙色预警，部分地区傍晚到夜里降雨量将达 50-100 毫米。</p><p>气象部门强调，当前天气复杂多变，公众需密切关注实时预警信息，高温地区注意防暑降温，台风及强对流影响区域警惕大风、暴雨引发的次生灾害，确保人身财产安全。</p>
</body></html>