目录
1.层叠样式表
网页实际上是一个多层的结构,通过 CSS 可以分别为网页的每一个层来设置样式,而最终我们能看到只是网页的最上边一层
总之一句话,CSS 用来设置网页中元素的样式
使用 CSS 来修改元素样式的方式大致可以分为 3 种
css选择器
eg:p{}(标签选择器),.class{}(类选择器) ,*{}(通配符选择器),#id{}(id选择器)
2.css字体属性:
字体复合属性如何写?里面有什么注意细节?
如果让加粗的文字不加粗显示,如何让倾斜的文字不倾斜显示?
1,font复合属性写法顺序为:font:font-style,font-weight,font-size/line-height,font-family
顺序不能颠倒,必须有font-size和font-style
2,font-size=“400”,font-style=“normal”
css文本属性:
文本颜色:color:
文本对齐:text-align
text-align
文本装饰
text-decoration
下划线 中划线 上划线 没有装饰线(通常使用在超链接上)
文本缩进
em是个相对单位,是对于本字段的font-size的大小而定的。两个文字大小就是2em。
行间距:line-height
总结css属性:
css引入方式:
1,内嵌样式表(内部样式表):把css放在html的内部
style标签可以放在html的任何一个地方但是一般内部样式表放在head标签中
一般在练习时使用内嵌式引入css
虽然代码结构清晰但是,并没有做到css与html分离
2,行内样式表:
更方便修改小的样式:
3,外部样式表(外链式):单独写一个css样式文件,适用于css样式代码比较多的时候,也是最常用的css引入方式。
用link连接html与css。
3.新闻案例(结合运用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/新闻案例.css">
</head>
<body>
<h1>北方高温明日达鼎盛京津冀多地地表温度将超60C
</h1>
<div>
<span class="gray">2987-29831-123-01 16:23:@3 来源:</span>
<a href="">中国天气网</a> <input type="text" placeholder="请输入查询内容"> <button class="btn">搜索</button></div>
<hr>
<p> C。预报显示,今后三天(3-5日),这一带的高温天气将继续发酵,高温范围以及强度将在4日达到鼎盛,预计
北京、天津、石家庄、济南等地明天的最高气温有望突破38C,其中北京和石家庄的最高气温还有望创今年以来
的新高。</p>
<h4>气温41. 4C!地温66.5!北京强势迎七月首个高温日</h4>
<p class="pic">
<img src="imagesss/梦想的草原.jpg" alt="dog's day">
</p>
<p>今天,华北、黄淮一带的高温持续发酵,截至今天下午2点,陕西北部、山西西南部、河北南部、北京、天津、
山东西部、河南北部最高气温已普遍超过35C。大城市中,北京、天津、郑州均迎来高温日。售
在阳光暴晒下,地表温度也逐渐走高。今天下午2点,华北黄淮大部地区的地表温度都在50°C以上,部分地区地
表温度甚至超过60°C。其中,河北衡水地表温度高达68.3°C, 天津站和北京站附近的地表温度分别高达66.6°C和
66.5°C。</p>
<h4>明日热度再升级!京津冀携手冲击38C+</h4>
<p>中国天气网气象分析师王伟跃介绍,明天(4日),华北、黄淮地区35°C以上的高温天气还将继续升级,并进入
鼎盛阶段,高温强度和范围都将发展到最强。 明天,北京南部、天津大部、河北中部和南部、山东中部和西部
山西南部局地、 河南北部、东北部分地区 的最高气温都将达到或超过35°C。
</p>
<p class="foot">
本文来源:昂克赛拉大家覅哦i会计法
</p>
</body>
</html>
css代码块:
body{
font: 16px/28px "微软雅黑";
}
h1{
text-align: center;
font-weight: 400px;
}
.gray{
color: gray;
text-align: center;
font-size: 12px;
}
a{
text-decoration: none;
color: goldenrod;
}
.btn{
font-weight: 700;
}
p{
text-indent: 2em;
}
.pic{
text-align: center;
}
.foot{
text-align: center;
color: #888888;
}
写下最后
点赞👍:您的赞赏是我前进的动力!
收藏⭐:您的支持我是创作的源泉!
评论✍:您的建议是我改进的良药!
山鱼🦈的个人社区:欢迎大家加—— 山鱼社区