课程内容:了解CSS
1.CSS选择器
- css 用来描述页面的样子
- 样式内的注释使用:
/* 这里填写注释内容 */
2.HTML页面使用CSS的方式
- 第一种方式 : 直接在标签内添加style属性
<p style="fontsize:20px; fontfamily:宋体;">这是一段文字</p>
- 第二种方式 : 在head中添加(可直接给标签添加样式,也可通过id或者类添加)
<style>
p
{
fontsize:15px;
color:black;
}
</style>
或
<style>
.wenzi
{
color:blue;
fontsize:52px;
}
</style>
<p class="wenzi">这是一段文字</p>
- 第三总方式 : 将外部CSS样式文件导入(假设CSS文件名为111.css)
<link rel="stylesheet" type="text/css" href="111.css">
类型为CSS文件 文件名为111.css
此css文件为同一个文件夹内, 上级文件夹表示为…/111.css或可用绝对路径来表示: D:\学习\Java\年前课程\5 (此处正反斜杠均可,多使用正斜杠)
课程重点:
1.CSS选择器语法
2.文本字体相关的CSS属性以及值
- 部分文字属性及值
- fontfamily:"宋体"
字体
- fontweight:200px normal bold
字体重量(粗细) 值为100-900 正常 加粗(对应700)
- text-shadow:6px 6px 6px green; 文字阴影
分别对应横向偏移,纵向偏移,模糊扩散,阴影颜色
数值对应的方向变化为 ==左正右负,下正上负==
- text-decoration:underline line-through
文字声明 下划线 横穿线
- text-indent:32px 2em
文本缩进 浏览器默认1em=16px 1em即一个字符缩进
- text-align:center left right
文本对齐 居中 左对齐 右对齐
- letter-spacing:30px
字符间距
- text-transform
字体变形
3.CSS样式层叠
- 优先级 : 自身标签的style属性 > id选择器 > 类选择器 > 标签选择器
- 外部CSS样式与文件内style属性产生冲突或重叠,以后写的为准
附:
部分不需要结束标签的自闭和标签
| 标签 | 含义 |
|---|---|
| hr | 水平线 |
| br | 换行 |
| img | 图片 |
| input | 表单输入 |
| source | 资源 |
| param | 参数 |
| wbr | 文字换行 |
| link | 链接 |
| meta | 元数据 |
作业:
1.结合HTML的文本标签,练习文字相关的CSS属性以及值
2.利用HTML文本标签以及CSS文字相关属性编写一则新闻,要求如下:
- 标题字体为华文隶书,剧中,含有文字阴影
- 内容段落字体为宋体,首行缩进,段落不少于7段
- 第一段文字含有下划线
- 1.3.5.7段文字字体大小为30像素,颜色为绿色
- 2.4.6段文字字体大小为2像素,文字间距为20像素
3.预习HTML媒体元素
练习代码:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.bt
{
font-family: 华文隶书;
text-align: center;
text-shadow: 6px 6px 10px green;
}
.wd
{
font-family: 宋体;
font-size: 30px;
text-indent: 2em;
color: green;
}
.we
{
font-family: 宋体;
font-size: 20px;
text-indent: 2em;
letter-spacing: 20px;
}
</style>
</head>
<body>
<h1 class="bt">今日话题丨“珠峰景区永久关闭”不实，但珠峰上的垃圾就在那里</h1>
<p class="wd" style="text-decoration: underline;">最近，一则公告在网上热传。</p>
<p class="we">有媒体将其解读为觉得从此与登顶珠峰无缘了。</p>
<p class="wd">但当地政府随即辟谣：清理垃圾更不是发公告的主因。</p>
<p class="we">但当地政府随即辟谣：清理垃圾更不是发公告的主因。</p>
<p class="wd">但当地政府随即辟谣：清理垃圾更不是发公告的主因。</p>
<p class="we">但当地政府随即辟谣：清理垃圾更不是发公告的主因。</p>
<p class="wd">但当地政府随即辟谣：清理垃圾更不是发公告的主因。</p>
</body>
</html>
939
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
