1 CSS简介
CSS主要使用场景就是美化网页,布局页面的。
1.1 HTML的局限性
只是骨架,很简陋,丑;实现简单样式,复杂的很麻烦,臃肿
1.2 CSS-网页美容师
css是层叠样式表(cascading style sheets)的简称
有时我们也会称之为css样式表或级联样式表
css也是一种标记语言
1.3 CSS语法规范
1.3.1 css规则
由两个主要部分构成:选择器以及一条或多条声明。
<!-- 选择器 {属性:值;属性:值;} -->
h1 {color: red;font-size: 25px;}
注:css的最大价值:由HTML专注去做结构呈现,样式交给css,即结构(HTML)与样式(css)相分离
-
选择器是用于指定CSS样式的HTML标签,花括号内是对该对象设置的具体样式
-
属性和属性值以“键值对”的形式出现(属性+值的形式,如color:red;)
-
style其实就是标签的属性
-
样式属性和值中间是:
-
多组属性值直接用;隔开
-
只能控制当前的标签和以及嵌套在其中的字标签,造成代码冗余。
-
缺点:没有实现样式和结构相分离。
1.3.2 CSS注释
/* 这是注释 */
1.4 CSS代码风格
-
样式格式书写
①紧凑型
h3 {color: deeppink;font-size: 20px;}
②展开格式
h3 {
color: deeppink;
font-size: 20px;
}
注:font-字型
注:一般用展开格式
2.样式大小写
推荐样式选择器,属性名,属性值,关键字全部使用小写字母,特殊情况除外。
3.空格规范
①属性值前后,冒号后面,保留一个空格
②选择器(标签)和大(花)括号中间保留空格
2 CSS基础选择器
2.1 CSS选择器的作用
找到指定的HTML页面元素,不同标签有不同的样式需求,选择标签用的。
如:
h1 {color: red;font-size: 25px;}
-
找到所有的h1标签,选择器(选对人)。
-
设置这些标签的样式,比如颜色为红色(做对事)。
2.2 选择器分类
选择器分为基础选择器和复合选择器两个大类,我们这里先讲解一下基础选择器
-
基础选择器是由单个选择器组成的
-
基础选择器又包括:标签选择器、类选择器、id选择器和通配符选择器
2.3标签选择器
-
标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。
-
作用:可以把某一类标签全部选择出来。
-
优点:快速为网页中同类型的标签统一样式
-
缺点:不能设计差异化样式。
标签名 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
2.4 类选择器
实现差异化选择不同的标签,单独选一个或某几个标签,可以使用类选择器
语法:
/* 类选择器口诀:样式点定义 结构类(class)调用 一个或多个 开发最常用*/ <style> .类名 { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } </style> <body> <p class='类名'></p> </body>
-
优点:可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签。
-
注意:类选择器使用“.”(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)
-
长名称或词组可以使用中横线-来为选择器命名。
-
不要纯数字、中文等命名, 尽量使用英文字母来表示。
-
多类名选择器:各个类名中间用空格隔开。
-
命名要有意义
-
命名规范:见附件(web前端开发规范手册.doc)
课堂案例:
利用类选择器画三个盒子:
-
-
类选择器的使用
-
div就是一个盒子,用来装网页内容的
< style >
.red {
color: red;
}
.green {
color:green;
}
< /style >
< body >
< div class="red">< /div>
< div class="green">< /div>
< div class="red" >< /div>
< /body >
2.4.1类选择器-多类名
1.多类名使用方式
< div class="red font20">亚瑟< /div>
①在标签class属性中写多个类名
②多个类名中间必须用空格分开
< div class="red font">亚瑟< /div>
2.使用场景
①相同样式放在一个类里
②这些标签都可以调用这个公共的类,然后再调用自己独有的类
③从而节省css代码,统一修改也非常方便
④多类名选择器在后期布局比较复杂的情况下,还是较多使用的
2.5 id选择器
id选择器使用#
进行标识,后面紧跟id名
<style>
/* id选择器的口诀:样式#定义,结构id调用,只能调用一次,别人切勿使用 */
#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
</style>
<body>
<p id="id名"></p>
</body>
-
区别于class选择器:唯一性,1个id用1次,不能重复
2.6 通配符选择器
通配符选择器用*
号表示,*
就是选择所有的标签。它是所有选择器中作用范围最广的,能匹配页面中所有的元素。
-
注意:会匹配页面所有的元素,降低页面响应速度,不建议随便使用
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
例如下面代码,使用通配符选择器定义CSS样式,清除所有HTML标记的默认边距。
* {
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}
2.7 基础选择器总结
选择器 | 作用 | 缺点 | 使用情况 | 用法 |
---|---|---|---|---|
标签选择器 | 可以选出所有相同的标签,比如p | 不能差异化选择 | 较多 | p { color:red;} |
类选择器 | 可以选出1个或者多个标签 | 可以根据需求选择 | 非常多 | .nav { color: red; } |
id选择器 | 一次只能选择器1个标签 | 只能使用一次 | 不推荐使用 | #nav {color: red;} |
通配符选择器 | 选择所有的标签 | 选择的太多,有部分不需要 | 不推荐使用 | * {color: red;} |
2.8 CSS复合选择器(拔高)
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的
2.8.1 后代选择器
又称为包含选择器
-
用来选择元素或元素组的子孙后代
-
其写法就是把外层标签写在前面,内层标签写在后面,中间用「空格」分隔,先写父亲爷爷,再写儿子孙子。
-
子孙后代都可以这么选择。或者说,它能选择任何包含在内 的标签。
父级 子级{属性:属性值;属性:属性值;} .class h3 {color:red;font-size:16px;}
-
当标签发生嵌套时,内层标签就成为外层标签的后代。
-
子孙后代都可以这么选择。或者说,它能选择任何包含在内的标签。
2.8.2 子元素选择器
-
子元素选择器只能选择作为某元素子元素(亲儿子)的元素。
-
其写法就是把父级标签写在前面,子级标签写在后面,中间跟一个
>
进行连接 -
这里的子,指的是亲儿子。不包含孙子 重孙子之类。
.class>h3 {color:red;font-size:14px;}
2.8.3 交集选择器
-
其中第一个为标签选择器,第二个为class选择器,两个选择器之间
不能有空格
,如h3.special。
交集选择器是并且的意思,即...又...的意思 比如: p.one 选择的是: 类名为 .one 的段落标签。 /*用的相对来说比较少,不建议使用。*/
2.8.4 并集选择器
如果某些选择器定义的相同样式,就可以利用并集选择器,可以让代码更简洁。并集选择器(CSS选择器分组)是各个选择器通过,
连接而成的,通常用于集体声明。
-
任何形式的选择器(包括标签选择器、class类选择器 id选择器等),都可以作为并集选择器的一部分。
-
并集选择器通常用于集体声明 ,逗号隔开的,所有选择器都会执行后面样式,逗号可以理解为和的意思。
比如
.one,
p ,
#test {color: #F00;}
表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。
通常用于集体声明。
2.8.5 链接伪类选择器
用于向某些选择器添加特殊的效果。写的时候,他们的顺序尽量不要颠倒,按照lvha的顺序。否则可能引起错误。
链接伪类,是利用交集选择器.
-
a:link
未访问的链接 -
a:visited
已访问的链接 -
a:hover
鼠标移动到链接上 -
a:active
选定的链接
实际工作中,很少写全四个状态,一般写法如下:
a { /* a是标签选择器 所有的链接 */
font-weight: 700;
font-size: 16px;
color: gray;
text-decoration: none; /* 清除链接默认的下划线*/
}
a:hover { /* :hover 是链接伪类选择器 鼠标经过 */
color: red; /* 鼠标经过的时候,由原来的 灰色 变成了红色 */
}
2.8.6 复合选择器总结
选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
---|---|---|---|---|
后代选择器 | 用来选择元素后代 | 是选择所有的子孙后代 | 较多 | 符号是空格 .nav a |
子代选择器 | 选择 最近一级元素 | 只选亲儿子 | 较少 | 符号是> .nav>p |
交集选择器 | 选择两个标签交集的部分 | 既是 又是 | 较少 | 没有符号 p.one |
并集选择器 | 选择某些相同样式的选择器 | 可以用于集体声明 | 较多 | 符号是逗号 .nav, .header |
链接伪类选择器 | 给链接更改状态 | 较多 | 重点记住 a{} 和 a:hover 实际开发的写法 |
3.CSS字体属性
CSS Fonds(字体)属性用于定义字体系列、大小、粗细和文本样式(如斜体)
3.1 字体系列
font-family属性用于设置哪一种字体。
p { font-family:"微软雅黑";}
div {font-family: Arial,"Microsoft Yahei","微软雅黑";}
/*建议写英文*/
-
字体间用逗号隔开,如果字体名有空格,用引号包起来(单引号、双引号都行)
-
为什么写好几种字体?为了浏览器的兼容性,从左到右提供多种选择
-
尽量使用系统默认字体
-
常见字体:body{font-family: 'Microsoft Yahei',tahoma,arial,'Hiragino Sans GB';}
3.2 字体大小
font-size
<style>
body {font-size: 20px;}
h2 {font-size: 16px;}
/* 标题标签比较特殊,需要单独指定文字大小(body中不能包含) */
</style>
<body>
<h2>标题</h2>
<p>普通文字</p>
<p>普通文字</p>
<p>普通文字</p>
<p>普通文字</p>
</body>
-
font-size属性用于设置字号(字体大小)
-
px(像素)大小是我们网页的最常用的单位
-
谷歌浏览器 默认的文字大小为16px
-
不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小。一般给body指定整个页面文字的大小。
-
可以给body指定整个页面文字的大小
-
标题像素需要单独指定
3.3 字体粗细
CSS 使用font-weight属性设置文本字体的粗细。
属性值 | 描述 |
---|---|
normal | 默认值(不加粗的) |
bold | 定义粗体(加粗的) |
100~900 | 400 等同于 normal,而 700 等同于 bold (数字表示粗细用的多),不加单位 |
-
normal可以让加粗标签(比如h和strong等)不加粗,或者其他标签加粗
3.4 文字样式
font-style属性用于定义字体风格,如设置斜体、倾斜或正常字体,其可用属性值如下:
属性 | 作用 |
---|---|
normal | 默认值,浏览器会显示标准的字体样式 font-style: normal; |
italic | 浏览器会显示斜体的字体样式。 |
注意:平时我们很少给文字加斜体,反而要给斜体标签(em,i)改为不倾斜字体
3.5 字体复合属性
字体属性可以把以上文字样式综合来写,这样可以更节约代码
/* 选择器 { font: font-style font-weight font-size/line-height font-family;} */
/* 顺序不可交换,font-size,font-style不可省略 */
.font { font: italic 700 16px/20px 'Microsoft Yahei';}
-
注意:使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,各个属性以
空格
隔开 -
其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。
3.6 字体属性总结
属性 | 表示 | 注意点 |
---|---|---|
font-size | 字号 | 我们通常用的单位是px 像素,一定要跟上单位 |
font-family | 字体 | 实际工作中按照团队约定来写字体 |
font-weight | 字体粗细 | 记住加粗是 700 或者 bold 不加粗 是 normal 或者 400 记住数字不要跟单位 |
font-style | 字体样式 | 记住倾斜是 italic 不倾斜 是 normal 工作中我们最常用 normal |
font | 字体连写 | 复合属性用:1. 字体连写是有顺序的 不能随意换位置 2. 其中字号 和 字体 必须同时出现 |
4.CSS文本属性
CSS Text(文本)属性可定义文本的外观,比如文本的颜色,对齐文本、装饰文本、文本缩进、行间距等。
4.1 文本颜色
color属性用于定义文本的颜色
div {
color: red;
}
表示表示 | 属性值 |
---|---|
预定义的颜色值 | red,green,blue,pink |
十六进制 | #FF0000,#FF6600,#29D794 |
RGB代码 | rgb(255,0,0)或rgb(100%,0%,0%) |
-
实际工作中,用16进制的写法是最多的,且我们更喜欢简写方式比如#f0代表红色。
4.2 对齐文本
text-align属性用于设置元素内文本内容的水平对齐方式。
div {
text-align: center;
}
-
注意:是让盒子里面的文本内容水平居中, 而不是让盒子居中对齐
其可用属性值如下:
属性 | 解释 |
---|---|
left | 左对齐(默认值) |
right | 右对齐 |
center | 居中对齐 |
4.3 装饰文本
text-decoration属性通常我们用于给链接修改装饰效果。可以给文本添加下划线、删除线、上划线等。
div {
text-decoration: underline;
}
值 | 描述 |
---|---|
none | 默认。定义标准的文本。取消下划线(最常用) |
underline | 下划线。定义文本下的一条线。下划线 也是我们链接自带的(常用) |
overline | 上划线。定义文本上的一条线。(不用) |
line-through | 删除线。定义穿过文本下的一条线。(不常用) |
使用场景(可将链接文本的下划线去掉):
a {
text-decoration: none;
}
<a href="#">链接文字</a>
4.4 文本缩进
text-indent属性用于设置首行文本的缩进(indent:缩进)
p {
/*行间距*/
line-height: 25px;
/*首行缩进2个字 em 1个em 就是1个字的大小*/
text-indent: 2em;
}
-
其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%,允许使用负值。
-
建议使用em作为设置单位。(em是一个相对单位,相对于当前元素的一个文字大小(font-size)来说的)
-
1em 就是一个字的宽度。如果是汉字的段落,1em 就是一个汉字的宽度
4.5 行间距
line-height属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离。
p {
line-height: 26px;
}
-
行间距包括上距离、内容高度、下距离
-
一般情况下,行距比字号大7--8像素左右就可以了(line-height: 24px;)
4.6 文本属性总结
属性 | 表示 | 注意点 |
---|---|---|
color | 颜色 | 我们通常用 十六进制 比如 而且是简写形式 #fff |
line-height | 行高 | 控制行与行之间的距离 |
text-align | 水平对齐 | 可以设定文字水平的对齐方式 |
text-indent | 首行缩进 | 通常我们用于段落首行缩进2个字的距离 text-indent: 2em; |
text-decoration | 文本修饰 | 记住 添加 下划线 underline 取消下划线 none |
5. CSS的引入方式
5.1 CSS的三种样式表
按照CSS样式书写的位置(或者引入方式),CSS样式表可以分为三大类:
1、行内样式表(行内式)
2、内部样式表(嵌入式)
3、外部样式表(链接式)
5.2 内部样式表
内部样式表(内部样式表)是写到html页面内部,是将所有的CSS代码抽取出来,单独放到一个< style >标签中。
<style>
div {
font-size:26px;
}
</style>
-
理论上可以放在HTML文档的任何地方,但一般会放在文档的< head >标签中
-
通过此种方式,可以方便控制当前整个页面中的元素样式设置
-
代码结构清晰,并没有实现结构样式的完全分离
5.3 行内样式表
行内样式表(内联样式表)是在元素标签内部的style属性中设定CSS样式。适合于修改简单样式
<div style="color: red;font-size: 12px;">青春不常在,抓紧谈恋爱</div>
-
style其实就是标签的属性
-
在双引号中间,写法要符合CSS规范
-
可以控制当前的标签设置样式
-
由于书写繁琐,并且没有体现出结构与样式相分离的思想,所以不推荐大量使用,只有对当前元素添加简单样式的时候,可以考虑使用。
-
使用行内样式表设定的CSS,通常也被称为行内式引入
5.4 外部样式表
实际开发都是外部样式表。核心:样式单独写到CSS文件中,之后把CSS文件引入到HTML页面中使用。
引入外部样式表分为两步:
1、新建一个后缀名为.css的样式文件,把所有css代码都放入此文件中。
2、在HTML页面中,在< head >中使用< link >标签引入这个文件。
<link rel="stylesheet" href="css文件路径">
注:stylesheet-样式表,sheet-表格
属性 | 作用 |
---|---|
rel | 定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件 |
href | 定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。 |
-
使用外部样式表设定CSS,通常也被称为外链式或链接式引入,这种方式是开发中常用的方式。
5.5 CSS引入方式总结
样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
---|---|---|---|---|
行内样式表 | 书写方便 | 结构样式混写 | 较少 | 控制一个标签 |
内部样式表 | 部分结构与样式相分离 | 没有彻底分离 | 较多 | 控制一个页面 |
外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多,吐血推荐 | 控制多个页面 |
综合案例:新闻页面
制作页面整体可以分为两步:
1、搭建html结构页面
2、修改css样式
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css-style.css">
</head>
<body>
<h1>北方高温明日达鼎盛 京津冀多地地表温度将超60℃</h1>
<div class="grey align">2019-07-03 16:31:47 来源: <a href="#">中国天气网</a>
<input type="text" value="请输入查询条件"><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>
<div class="grey">本文来源:中国天气网 责任编辑:刘京_NO5631</div>
</body>
</html>
CSS:css-style.css
h1 {
font-weight: 400;
text-align: center;
}
body {
font: 16px/28px "Microsoft Yahei";
}
p {
text-indent: 2em;
}
a {
text-decoration: none;
}
.btn {
font-weight: 700;
}
.align {
text-align: center;
}
.pic {
text-align: center;
}
.grey {
color: #888888;
font-size: 12px;
}
7.Chrome
Chrome浏览器提供了一个非常好用的调试工具,可以用来测试我们的HTML结构和CSS样式。
1、打开调试工具
快捷键:f12键
2、使用调试工具
①Ctrl+滚轮——放大缩小工具代码
②左边是HTML元素结构,右边是CSS样式
③右边CSS样式可以改动数值调试(左右箭头或者直接输入)和查看颜色。
④Ctrl+0复原浏览器大小。
⑤如果点击元素,发现右侧没有样式引入,极有可能是类名或者样式引入错误。
⑥如果有样式,但是样式前面有黄色叹号提示,则是样式属性书写错误