CSS基础(1)
学习目标:
分清HTML、CSS优缺点、局限性;使用选择器设置字体文本样式;熟悉三种引入方式;
学习内容:
一、CSS构造块
1.介绍
HTML的局限性:HTML满足不了设计者的需求,可以将网页结构与样式相分离,这样就可以在不更改网页结构的前提下,更换网站的样式;操作html属性不方便;HTML里面添加样式带来的是无尽的臃肿和繁琐;
CSS网页的美容师:让我们的网页更加丰富多彩,布局更加灵活自如;让HTML从样式中脱离,实现了HTML专注去做结构呈现,样式交给CSS。
2.作用
主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)\图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式;
CSS以HTML为基础,提供了丰富的功能,如字体、样式、背景的控制及整体排版等,而且可以针对不同的浏览器设置不同的样式。
引入CSS样式表
行内式:通过标签的style属性来设置元素的样式;通过标签的style属性来设置元素的样式;多组属性值直接用;隔开;只能控制当前的标签和以及嵌套在其中的字标签,造成代码冗余。
内部样式表:也称为内嵌式,将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义;style标签一般位于head标签中,当然理论上他可以放在HTML文档的任何地方;只能控制当前的页面,没有彻底分离结构与样式。
外部样式表:也称链入式,是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中;
rel:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。
href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。
代码风格:
<!-- 紧凑格式 -->
h3 { color: deeppink;font-size: 20px;}
<!-- 展开格式 -->
h3 {
color: deeppink;
font-size: 20px;
}
二、CSS选择器
找到指定的HTML页面元素,选择标签。
1.基础选择器
标签选择器:用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式;可以把某一类标签全部选择出来;快速为网页中同类型的标签统一样式;但不能设计差异化样式。
标签名{属性1: 属性值1;属性2: 属性值2;属性3: 属性值3;}
类选择器:使用"."(英文点号)进行标识,后面紧跟类名。
.类名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
<p class="类名"></p>
可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签;长名称或词组可以使用中横线来为选择器命名;不要纯数字、中文等命名, 尽量使用英文字母来表示;多类名选择器:各个类名中间用空格隔开。
id选择器:使用#进行标识,后面紧跟id名;元素的id值是唯一的,只能对应于文档中某一个具体的元素。
#id名 {属性1: 属性值1;属性2: 属性值2;属性3: 属性值3;}
<p id="id名"></p>
通配符选择器:通配符选择器用**号表示,* 就是选择所有的标签。它是所有选择器中作用范围最广的,能匹配页面中所有的元素;但会降低页面响应速度,不建议随便使用。
* {
<!-- 定义外边距 -->
margin: 0;
<!-- 定义内边距 -->
padding: 0;
}
2.复合选择器
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的。
后代选择器:用来选择元素或元素组的子孙后代;写法就是把外层标签写在前面,内层标签写在后面,中间用「空格」分隔,先写父亲爷爷,再写儿子孙子;子孙后代都可以这么选择。或者说,它能选择任何包含在内的标签。
.class h3 {
color: red;
font-size: 26px;
}
子元素选择器:当标签发生嵌套时,内层标签就成为外层标签的后代;写法就是把父级标签写在前面,子级标签写在后面,中间跟一个 > 进行连接;子,指的是亲儿子,不包含孙子、重孙子之类。
.class>h3 {
color: red;
font-size: 26px;
}
交集选择器:其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,如h3.special。
并集选择器:如果某些选择器定义的相同样式,就可以利用并集选择器,可以让代码更简洁。并集选择器(CSS选择器分组)是各个选择器通过,连接而成的,通常用于集体声明;任何形式的选择器(包括标签选择器、class类选择器 id选择器等),都可以作为并集选择器的一部分;并集选择器通常用于集体声明 ,逗号隔开的,所有选择器都会执行后面样式,逗号可以理解为和的意思。
链接伪类选择器:用于向某些选择器添加特殊的效果。写的时候,他们的顺序尽量不要颠倒,按照lvha的顺序。否则可能引起错误。
a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标移动到链接上
a:active 选定的链接
三、CSS字体样式
1.font字体
font-size:用于设置字号(字体大小);不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小。一般给body指定整个页面文字的大小。
单位 | 说明 |
---|---|
em | 相对当前对象内文本的字体尺寸 |
px | 像素,最常用 |
in | 英寸 |
cm | 厘米 |
mm | 毫米 |
pt | 点 |
font-family:用于设置哪一种字体;指定多个字体,如果浏览器不支持第一个字体就会尝试下一个直到找到合适的字体,如果都没有,以电脑默认字体为准。
属性 | 表示 | 注意点 |
---|---|---|
font-size | 字号 | 我们通常用的单位是px 像素,一定要跟上单位 |
font-family | 字体 | 实际工作中按照团队约定来写字体 |
font-weight | 字体粗细 | 记住加粗是 700 或者 bold 不加粗是 normal 或者 400 记住数字不要跟单位 |
font-style | 字体样式 | 记住倾斜是 italic 不倾斜是 normal 工作中我们最常用 normal |
font | 字体连写 | 1. 字体连写是有顺序的 不能随意换位置 2. 其中字号 和 字体 必须同时出现 |
2.CSS外观属性
color:用于定义文本的颜色(red,green,blue,pink)。
text-align:用于设置文本内容的水平对齐方式,相当于html中的align对齐属性。
line-height:用于设置行间距,就是行与行之间的距离,即字符的垂直间距,一般称为行高。
text-indent:用于设置首行文本的缩进;其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%,允许使用负值。
text-decoration:用于给链接修改装饰效果(none,underline,overline,line-through)。
四、标签显示模式(display)
标签显示模式是标签以什么方式进行显示。HTML标签一般分为块标签和行内标签两种类型,它们也称为块元素和行内元素。
块级元素(block-level):独占一行;高度,宽度,外边距以及内边距都可以控制;宽度默认是容器(父级宽度)的100%;是一个容器及盒子,里面可以放行内或者块级元素。
注意:只有文字才能组成段落,因此p标签里面不能放块级元素,特别是p不能放div。同理,还有h1~h6,dt,它们都是文字类块级标签,里面不能放其他块级元素。
行内元素(inline-level):相邻行内元素在一行上,一行可以显示多个;高度、宽度直接设置是无效的;默认高度就是它本身内容的宽度;行内元素只能容纳文本或其他行内元素。
行内块元素(inline-block):和相邻行内元素(行内块)在一行上,但是之间会有空白风险。一行可以显示多个;默认宽度就是它本身内容的宽度;高度,行高,外边距以及内边距都可以控制。
五、CSS背景(background)
背景颜色 、背景图片(image)、背景平铺(repeat)、背景位置(position)、背景半透明(CSS3)
1.必须先指定background-image属性
2.position 后面是x坐标和y坐标。可以使用方位名词或者 精确单位。
3.如果指定两个值,两个值都是方位名字,则两个值前后顺序无关,比如left top和top left效果一致
4.如果只指定了一个方位名词,另一个值默认居中对齐。
5.如果position 后面是精确坐标, 那么第一个,肯定是 x 第二个一定是y
6.如果只指定一个数值,那该数值一定是x坐标,另一个默认垂直居中
7.如果指定的两个值是 精确单位和方位名字混合使用,则第一个值是x坐标,第二个值是y坐标
属性 | 作用 | 值 |
---|---|---|
background-color | 背景颜色 | 预定义的颜色值/十六进制/RGB代码 |
background-image | 背景图片 | url(图片路径) |
background-repeat | 是否平铺 | repeat/no-repeat/repeat-x/repeat-y |
background-position | 背景位置 | length/position 分别是x 和 y坐标, 切记 如果有 精确数值单位,则必须按照先X 后Y 的写法 |
background-attachment | 背景固定还是滚动 | scroll/fixed |
背景简写 | 更简单 | 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序 |
背景透明 | 让盒子半透明 | background: rgba(0,0,0,0.3); 后面必须是 4个值 |
案例代码:
<!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>
<style>
body {
font: 16px/28px 'Microsoft YaHei';
}
h1 {
font-weight: 400;
text-align: center;
}
a {
text-decoration: none;
}
.gray {
color: #888888;
font-size: 12px;
text-align: center;
}
.search {
color: #666;
width: 170px;
}
.btn {
font-weight: 700;
}
p {
text-indent: 2em;
}
.pic {
text-align: center;
}
.footer {
color: #888888;
font-size: 12px;
}
</style>
</head>
<body>
<h1> 北方高温明日达鼎盛 京津冀多地地表温度将超60℃</h1>
<div class="gray"> 2019-07-03 16:31:47 来源: <a href="#">中国天气网</a>
<input type="text" value="请输入查询条件..." class="search"> <button class="btn">搜索</button>
</div>
<hr>
<p>中国天气网讯 今天(3日),华北、黄淮多地出现高温天气,截至下午2点,北京、天津、郑州等地气温突破35℃。预报显示,今后三天(3-5日),这一带的高温天气将继续发酵,高温范围以及强度将在4日达到鼎盛,预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃,其中北京和石家庄的最高气温还有望创今年以来的新高。</p>
<h4>气温41.4℃!地温66.5!北京强势迎七月首个高温日</h4>
<p class="pic">
<img src="images/pic.jpeg" alt="">
</p>
<p>今天,华北、黄淮一带的高温持续发酵,截至今天下午2点,陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中,北京、天津、郑州均迎来高温日。</p>
<p>在阳光暴晒下,地表温度也逐渐走高。今天下午2点,华北黄淮大部地区的地表温度都在50℃以上,部分地区地表温度甚至超过60℃。其中,河北衡水地表温度高达68.3℃,天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。</p>
<h4>明日热度再升级!京津冀携手冲击38℃+</h4>
<p>中国天气网气象分析师王伟跃介绍,明天(4日),华北、黄淮地区35℃以上的高温天气还将继续升级,并进入鼎盛阶段,高温强度和范围都将发展到最强。 明天,北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。</p>
<p> 不过,专家提醒,济南被雨水天气完美绕开,因此未来一周,当地的高温还会天天上岗。在此提醒当地居民注意防暑降温,防范持续高温带来的各种不利影响。(文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽)</p>
<p class="footer"> 本文来源:中国天气网 责任编辑:刘京_NO5631</p>
</body>
</html>
案例页面:
学习路径即素材出处:黑马程序员pink老师前端入门教程