第01章-前端核心技术-CSS基础属性
第01章-前端核心技术-CSS基础属性
学习目标
了解CSS是什么
掌握CSS的简单使用
掌握CSS样式创建和引入的方法 重点
掌握CSS背景的使用 重点
掌握CSS文本的样式 重点
掌握CSS连接的样式 重点
CSS简介
什么是 CSS
CSS
指层叠样式表 (Cascading Style Sheets)
定义如何显示 HTML 元素
多个样式定义可层叠为一
CSS 语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
选择器通常是您需要改变样式的
HTML
元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。
每个属性有一个值。属性和值被冒号分开。
CSS 创建（引入方式）
插入样式表的方法有三种:
外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)
外部样式表
外部样式需要创建独立的css文件，并且使用link标签引入，推荐使用
内部样式表
内部样式直接在html文件内部使用style标签引入，通常放在head标签中
内联样式
内联样式直接在某个标签上通过style属性的引入，必须依赖与某个标签，不通用，但是优先级最高
这是一个段落。
多重样式优先级
（内联样式）> （内部样式）>（外部样式）> 浏览器默认样式
注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。
CSS简单选择器
选择器用于选择哪些元素
元素选择器（选一种元素）
p {
text-align:center;
}
设置HTML文档中所以 p 标签的文字居中对齐。
案例01
前端学习之CSS 元素选择器
前端学习之CSS 元素选择器
前端学习之CSS 元素选择器
所有p标签，无论在哪里都会被修改为红色字体
效果展示：
id 选择器（选一个）
id 选择器可以为标有特定id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器。CSS 中 id 选择器以 # 来定义。
css
abc {
text-align:center;
}
案例02
ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
效果展示：
class 选择器（选多个）
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示，在 CSS中，类选择器以一个点.号显示：
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
案例03
三种选择器优先级
id选择器（选一个） > class选择器（选多个） > 元素选择器 （选一种元素）
CSS 尺寸
尺寸主要指宽度和高度属性
属性描述height设置元素的高度。max-height设置元素的最大高度。max-width设置元素的最大宽度。min-height设置元素的最小高度。min-width设置元素的最小宽度。width设置元素的宽度。
注：width: 200px; margin: auto;可以让 区块元素 居中。
注：给上级元素添加text-align: center属性可以让 内联元素 居中，因为内联元素等同于文字处理。
案例04
效果展示：
CSS 背景颜色
属性描述background-color设置背景颜色（red 、#00aaff、#0af、rgb(0,255,0)、rgba(0,255,0,1)、hsl(360,10%,1%)）
rgb
RGB是从颜色发光的原理来设计定的，通俗点说它的颜色混合方式就好像有红、绿、蓝三盏灯，当它们的光相互叠合的时候，色彩相混，而亮度却等于三者亮度之总和，越混合亮度越高，即加法混合。
红色（R）
绿色（G）
蓝色（B）
hsl
HSL 即色相、饱和度、亮度（英语：Hue, Saturation, Lightness）。
色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。
饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取 0-100% 的数值。
亮度（L），取 0-100%，增加亮度，颜色会向白色变化；减少亮度，颜色会向黑色变化。
值描述hue - 色相定义色相 (0 到 360) - 0 (或 360) 为红色, 120 为绿色, 240 为蓝色saturation - 饱和度定义饱和度; 0% 为灰色， 100% 全色lightness - 亮度定义亮度 0% 为暗, 50% 为普通, 100% 为白
案例05
效果展示：
CSS 背景图片
背景图片包括多个属性，可以分别设置也可以合并设置
属性描述background-color设置背景颜色（red、#00aaff、#0af、rgb(0,255,0)、rgba(0,255,0,1)、hsl(360,10%,1%)）background-image设置背景图片（url(img/logo.png)）background-repeat设置背景图片是否重复（no-repeat、repeat）background-attachment设置背景图片是否固定（scroll、fixed）background-position设置背景图片的位置（left、right、top、bottom、center、%、px）background-size（不可合并）设置背景的大小（px、%、cover、contain）
注意：background属性设置多个背景时，用逗号分隔开来。
background-size属性
值描述像素设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)百分比将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为“auto(自动)”cover此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。contain此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
案例：
或者
案例06
哈哈
效果展示：
CSS 文本
文本属性有很多，常用的如下，描述中括号内的内容需要重点记忆
属性描述color设置文本颜色（纯文字）direction设置文本方向（ltr：[left to right]；rtl）unicode-bidi设置文本是否被重写（bidi-override）letter-spacing设置字符间距 （像素单位px，百分比单位）word-spacing设置字（单词间的空格）间距（像素单位px，百分比单位）white-space设置元素中空白的处理方式（pre：保留空格和换行；pre-line：只保留换行；nowrap：不保留空格和换行；normal：默认）vertical-align设置元素的垂直对齐（表格、图片、内联元素）（top、middle、bottom）text-align水平对齐元素中的文本（内联子元素）（left、right、center）text-decoration向文本添加上、中、下划线（overline、line-through、underline、none）text-indent缩进元素中文本的首行（像素单位px，百分比单位）text-transform控制元素中的字母（ 、uppercase）
案例07
效果展示：
CSS3 文字阴影
语法：
text-shadow: h-shadow v-shadow blur color
注意： text-shadow属性设置多重阴影文本，用逗号分隔开来。
属性值描述h-shadow必需。水平阴影的位置。允许负值。v-shadow必需。垂直阴影的位置。允许负值。blur可选。模糊的距离。color可选。阴影的颜色。
案例08
<head> <meta charset="UTF-8"> <title>HTML CSS样式</title> <style type="text/css"> #content { background: #ffffff url('bg.jpg') no-repeat fixed 100% 100%;
background-size: 100% 100%;
word-break: break-word;/*文字自动换行*/
}
h1 {
background-color: rgba(5, 66, 77, 0.8);
color: white;
text-align: center;
text-shadow: #FF0000 5px 5px 2px;
}
h4 {
background-color: rgba(55, 66, 5, 0.6);
color: wheat;
text-align: center;
}
.desc {
background-color: rgba(55, 123, 77, 0.7);
color: white;
text-align: center;
}
#content .pre {
text-align: center;
white-space: pre-line;
}
</style>
效果展示：
CSS 字体
CSS字体属性定义字体，加粗，大小，文字样式。
Property描述font在一个声明中设置所有的字体属性font-family指定文本的字体系列font-size/line-height指定文本的字体大小font-style指定文本的字体斜体（斜体：italic）font-weight指定字体的粗细（100：不加粗；900：加粗【bold】）。font-variant以小型大写字体或者正常字体显示文本。（small-caps）
font属性合并写法的顺序：
font-style
font-variant
font-weight
font-size/line-height
font-family
如果行高和高度一样，可以简单的让单行文字垂直居中。
1
height:50px;
line-height:50px;
字体系列
font-family 属性应该设置几个字体名称作为一种“后备”机制，如果浏览器不支持第一种字体，他将尝试下一种字体。
注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family：“宋体”。多个字体系列是用一个逗号分隔指明：
p{
font-family:"楷体","微软雅黑";
}
CSS单位
绝对单位：（像素单位）
设置一个指定大小的文本，不允许用户在所有浏览器中改变文本大小，确定了输出的物理尺寸时绝对大小很有用
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
相对大小：(可变单位)
Em
：相对于直接上级的元素的字体大小来设置大小
Rem
：相对于
html
的元素字体大小来设置大小
百分比
：相对于元素自身的大小来设置大小
vw : 1vw 等于视口宽度的1%
vh : 1vh 等于视口高度的1%
vmin : 选取 vw 和 vh 中最小的那个
vmax : 选取 vw 和 vh 中最大的那个
浏览器默认大小和普通文本段落一样，是16像素（16px=1em）。
如果上级元素的字体大小为20px，则（20px=1em）。
css
h1 {font-size:2.5em;} /* 40px/16=2.5em /
h2 {font-size:1.875em;} / 30px/16=1.875em /
p {font-size:0.875em;} / 14px/16=0.875em */
上面的例子，em的文字大小是与前面的例子中像素一样。
不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。
CSS 超链接属性
链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。特别的链接，可以有不同的样式，这取决于他们是什么状态。
这四个链接状态是：
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
注意： a:hover 必须在 a:link 和 a:visited 之后写，需要严格按顺序才能看到效果。
注意： a:active 必须在 a:hover 之后。
案例09
<head> <meta charset="UTF-8"> <title></title> <style> a:link { color: #000000; } /* 未访问链接*/ a:visited {
color: #00FF00;
}
/* 已访问链接 */
a:hover {
color: #FF00FF;
}
/* 鼠标移动到链接上 */
a:active {
color: #0000FF;
}
/* 鼠标点击时 */
</style>
CSS后代选择器
后代选择器（descendant selector）又称为包含选择器。使用符合空格
后代选择器可以选择作为某元素后代的元素。
举例来说，如果您希望只对 ul 元素中的 li元素应用样式，而不对ol元素中的li元素应用样式，可以这样写：
效果展示：
作业
1.制作如下艺术字效果
效果展示：
代码参考：
2.制作如下按钮效果
效果展示：
代码参考：
3.制作如下按钮button效果
要求实现hover和active状态的样式
效果展示：
代码参考：
<head> <meta charset="UTF-8"> <title>作业2</title> <style type="text/css"> #content{ text-align: center; } .btn-red{ line-height: 50px; width: 150px; background-color: rgba(255,0,0,1); color: white; font-size: 25px; text-align: center; font-weight: bold; } .btn-red:hover{ background-color: rgba(255,0,0,0.5); color: blue; } .btn-red:active{ background-color: rgba(0,0,0,0.5); color: blue; } .btn-green{ line-height: 50px; width: 150px; background-color: rgba(0,255,0,1); color: black; font-size: 25px; text-align: center; font-weight: bold; } .btn-green:hover{ background-color: rgba(0,255,0,0.5); color: blue; } .btn-green:active{ background-color: rgba(0,0,0,0.5); color: blue; } .btn-blue{ line-height: 50px; width: 150px; background-color: rgba(0,0,255,1); color: white; font-size: 25px; text-align: center; font-weight: bold; } .btn-blue:hover{ background-color: rgba(0,0,255,0.5); color: blue; } .btn-blue:active{ background-color: rgba(0,0,0,0.5); color: white; } </style> </head> <body> <div id="content"> <button class="btn-red">红色按钮</button> <button class="btn-green">红色按钮</button> <button class="btn-blue">红色按钮</button> </div> </body>4.实现如下菜单效果
要求实现hover和active状态的样式，整体宽度为200px
一级菜单：
背景颜色rgba(0,0,0,0.2)
Hover:背景rgba(255,0,0,0.8)
Active：背景rgba(0,0,0,0.3)
二级菜单
背景颜色rgba(0,0,0,0.1)
Hover:背景rgba(0,0,255,0.8)
Active：背景rgba(0,0,0,0.3)
分割线：rgba(0,0,0,0.3)
效果展示：
代码参考：
<head> <meta charset="UTF-8"> <title>作业4</title> <style type="text/css"> #menu{ width: 200px; } .menu-first{ line-height: 45px; background-color: rgba(0,0,0,0.2); color: black; font-size: 20px; text-align: left; font-weight: bold; } .menu-first:hover{ background-color: rgba(255,0,0,0.8); color: blue; } .menu-first:active{ background-color: rgba(0,0,0,0.2); color: blue; } .icon{ text-align: right; } .menu-second{ line-height: 45px; text-indent: 20px; font-size: 20px; background-color: rgba(0,0,0,0.1); } .menu-second:hover{ background-color: rgba(0,0,255,0.8); color: white; } .menu-second:active{ background-color: rgba(0,0,0,0.2); color: blue; } .device{ height: 1px; background-color: rgba(0,0,0,0.3); } .icon{ text-indent: 100px; letter-spacing: 40px; } </style> </head> <body> <div id="menu"> <div class="menu-first">┃系统设置</div> <div class="device"></div> <div class="menu-second">┗版本设置</div> <div class="device"></div> <div class="menu-second">┗标题设置</div> <div class="device"></div> <div class="menu-second">┗头部设置</div> <div class="device"></div> <div class="menu-second">┗底部设置</div> <div class="device"></div> <div class="menu-first">┃用户管理</div> <div class="device"></div> <div class="menu-second">┗用户列表</div> <div class="device"></div> <div class="menu-second">┗用户分类</div> </div> </body>5.实现如下进度条
要求：颜色分别是红绿蓝，进度颜色透明0.6
效果展示：
代码参考：
6.实现如下效果
要求:
hover:整体背景为rgba(0,0,255,0.8);
上面文字为颜色为：wheat
下面文字为颜色为：white
效果展示：
代码参考：
<head> <meta charset="UTF-8"> <title>作业5</title> <style type="text/css"> #content{ width: 400px; } .item{ background-color: #000000; } .title{ line-height: 18px; font-size: 18px; text-align: center; color: lightgray; font-weight: bold; } .item img{ width: 100%; } .desc{ line-height: 16px; font-size: 16px; text-align: center; color: gray; font-style: italic; } .item:hover{ background-color: rgba(0,0,255,1); } .item:hover .title{ color: white; } .item:hover .desc{ color: white; } </style> </head> <body> <div id="content"> <div class="item"> <div class="title"> 高薪达人 </div> <img src="img/04.jpg"/> <div class="desc"> 月薪百万，靠脸吃饭 </div> </div> </div> </body>7实现如下通讯录界面
要求：整个html，body最大宽度为750px
效果展示：
代码参考：
<head> <meta charset="UTF-8"> <title>作业4</title> <style type="text/css"> html,body{ max-width: 720px; height: 100%; } #page{ text-align: center; background-color: rgba(0,0,0,0.1); } #top{ text-align: center; line-height: 50px; background-color: darkblue; color: white; font-size: 18px; } #search input{ text-align: center; width: 96%; height: 30px; } .height-10{ height: 10px; } .device{ height: 1px; background-color: rgba(0,0,0,0.1); } #list .item{ text-align: left; text-indent: 2%; background-color: white; line-height: 45px; } #list .item img{ width: 30px; height: 30px; vertical-align: middle; } .type{ height: 16px; background-color: rgb(0,0,0,0.2); font-size: 14px; text-align: left; text-indent: 2%; } #bottom{ background-color: white; } #bottom table{ width: 100%; } #bottom td{ text-align: center; vertical-align: middle; width: 25%; } #bottom .icon img{ width: 20px; height: 20px; } #bottom .icon-text{ font-size: 12px; line-height: 5px; } </style> </head> <body> <div id="page"> <div id="top"> 通讯录 </div> <div id="search"> <div class="height-10"></div> <input type="search" placeholder="搜索" /> <div class="height-10"></div> </div> <div id="list"> <div class="item"> <img src="img/07.jpg"/> <span class="desc">新的朋友</span> <div class="device"></div> </div> <div class="item"> <img src="img/07.jpg"/> <span class="desc">群聊</span> <div class="device"></div> </div> <div class="type">我的朋友</div> <div class="item"> <img src="img/07.jpg"/> <span class="desc">张三</span> <div class="device"></div> </div> 这里使用br空出来 <br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/> </div> <div id="bottom"> <div class="device"></div> <div class="height-10"></div> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td> <div class="icon"> <img src="img/04.jpg"/> </div> <div class="icon-text"> 微信 </div> </td> <td> <div class="icon"> <img src="img/05.jpg"/> </div> <div class="icon-text"> 通讯 </div> </td> <td> <div class="icon"> <img src="img/06.jpg"/> </div> <div class="icon-text"> 发现 </div> </td> <td> <div class="icon"> <img src="img/08.jpg"/> </div> <div class="icon-text"> 我 </div> </td> </tr> </table> <div class="height-10"></div> <div class="device"></div> </div> </div> </body>
浙公网安备 33010602011771号