java web央视新闻样式学习
标题书写：
标题
1.h1-h6 分别表示标题的大小 大小从高到低
2.<h1>表示是特定的标题标签
超链接：
1.<a>使用a标签表示超链接
2.格式： <a href="地址" target="_blank">标题</a>
其中
target：打开方式
_blank：在新窗口打开
_self：在当前窗口打开 -->
颜色样式：
1.颜色的表示方式
直接拼写 rgb、rgba 十六进制 HSL
2.书写方式
行内 :
<!-- <span style="color: gray;">2025.04.06 20：07</span> -->
内部:
定义span标签 所以span标签的都会变对应的颜色
span{
color：red；
}
外部:
（注意css文件的位置）
情况 A：CSS 放在子文件夹里
项目文件夹/ ├─ 4.央视新闻-标题-样式.html └─ css/ ← 子文件夹 └─ news.css ← CSS 文件在这里<link rel="stylesheet" href="css/news.css">css/表示：从当前 HTML 文件所在目录，进入css子文件夹news.css表示：在这个子文件夹里找news.css
情况 B：CSS 和 HTML 在同一个文件夹
项目文件夹/ ├─ 4.央视新闻-标题-样式.html └─ news.css ← CSS 和 HTML 平级这时候路径要改成：
<link rel="stylesheet" href="news.css">情况 C：CSS 放在上级文件夹
项目文件夹/ ├─ css/ │ └─ news.css └─ pages/ └─ 4.央视新闻-标题-样式.html ← HTML 在子文件夹里这时候路径要写成：
<link rel="stylesheet" href="../css/news.css">../表示：回到上一级目录
3.css选择器
（1）元素选择器
直接通过标签名 进行书写。即同一个标签名 颜色相同。
（2）类选择器
·写法：.cls{
color:red;
}
<span class="cls“”>内容</span>
仅选取class 为cls的标签
（3）id选择器
id可以作为元素的唯一标识 可以唯一定位到一个元素
书写：
#time{
color：blue；
}
<span class="cls”，id=“time”>内容</span>
优先级：id>类>元素
·其他选择器
（4）分组选择器
（5）属性选择器
（6）后代选择器
4.下划线样式
书写格式：text-decoration: 样式 + 颜色(可选) + 线条类型;
样式：underline（下划线）
如果想要去除下划线 直接书写
a{
text-decoration:none;
}
正文书写
1.插入视频 音频：
<video src="https://vjs.zencdn.net/v/oceans.mp4" controls width="100%"></video>
<audio src=" .mp3" controls ></audio>
video标签属性：
src:视频地址
controls:显示控制条
autoplay:自动播放
loop:循环播放
muted:静音播放
width:视频宽度
hight:视频高度
（仅设置一个即可 另一个会等比例缩放）
px:像素
%：百分比（相当于父元素的百分比）
-->
2.文字 图片段落
2.1 文字 图片导入
<p>标签进行段落的书写，用p标签包裹住这段落的内容。
<img>标签导入图片
src：图片访问地址
1.绝对路径
1.1绝对磁盘路径（不推荐）
1.2绝对网络路径
2.相对路径
2.1 ./当前目录 （可省略）
2.2 ../上一级目录
2.2 文字排版
1.行高设置
p{
line-height: 2;
}
2.加粗
使用标签<b>或<strong>包裹段落中的文字
补充：<u>/<ins> 下划线
<i>/<em> 倾斜
<s>/<del> 删除线
3.缩进
（1）使用 作为空格 每行添加（效率低）
补充其他字符实体：< 表示<
> 表示>
（2）text-indent: 2em;
首行缩进两个字符
还可以使用 px、%设置
2.3整体布局
1.实现 居中显示 左右等比例空白
演示设置为居中的70%
#content-container{
width:70%;
margin-left:auto;
margin-right:auto;
}
使用<div></div>将body中的正文部分全部包裹进去 并命名id为content-container
2.盒子模型
（解释margin-left，margin-right）
组成部分：
content padding border margin
注意事项：
属性名-位置 可以设置某个方位的边框
注意：1.img是自闭合标签
2.controls是视频的
3.页面居中 但图片不居中：增加图片的设置
img { display: block; margin: 15px auto; max-width: 100%; }