目录
CSS简介
什么是CSS:
CSS(Cascading Style Sheets的缩写),翻译为“层叠样式表”或者“级联样式表”,简称样式表。
CSS的主要作用:
主要用来给HTML网页设置 外观或者样式(HTML网页中的文字大小、颜色、字体、网页的背景颜色、背景图片等)。
CSS的语法规则:
CSS代码由选择器和一对括号组成;大括号里面是由一条条的声明语句组成;每一条语句都要使用英文状态下面的分号;每一条语句是由“属性:值”组成;CSS中的属性值一般不加引号;在CSS中如果属性值为数值型数据的时候,一般情况下需要加单位,单位一般都是px(像素);在CSS中不能出现HTML标签。
CSS代码的书写方式:
1.嵌入式:是通过HTML中的<style>标签将CSS代码嵌入到HTML中,语法规则如下:
<style type="text/css">
/*书写CSS代码,如果使用的是HTML5文档,type属性可以省略*/
选择器{属性:值;属性:值}
</style>
2.外链式:是指单独写一个以.css为扩展名的文件,然后在<head></head>标签中使用<link/>标签,将这个css文件链接到html文件中,语法规则如下:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=], initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/index.css">
</head>
引入外部样式表步骤:
1.新建一个后缀名为.css的样式文件,把所有的CSS代码都放入此文件中
2.在HTML页面中使用<link>标签引入这个文件
<link rel="stylesheet" href="css文件路径">
如果确保引入文件成功,以谷歌浏览器举例:
刷新网页出现.css文件可以说明我们引入文件成功,我们也可以引入多个CSS文件,只需要写link标签就可以了。
行内式:是指将CSS代码书写在HTML标签的style属性(style是一个通用属性,每一个标签里面都拥有这个属性)中,其语法格式如下:
<标签名 style="属性:值;属性:值"></标签名>
例如
<div style="width: 100px; height:100px; background-color:red"></div>
总结:
使用嵌入式的方式来书写CSS代码,它只能作用于当前的HTML文件。
使用外链式的方式来书写CSS代码,它可以作用于多个HTML文件。
Emmet语法
快速生成html标签
1.生成标签直接输入标签名按Tab键就可以,如div然后按tab键,可以直接生成<div></div>
2.生成多个相同标签,如div*3
3.生成父子级关系,如ul>li
4.生成兄弟关系,如div+p
5.生成带有类名或者id名字的,直接写 .demo 或者 #two 然后tab键
6.生成div类名是有顺序的,可以用自增符号$
快速生成css样式
1.比如w200 按tab 直接生成 width:200px;
2.比如 ih26 按tab 直接生成 line-height:26px;
选择器
什么是选择器:
选择器是指通过一定的语法规则选取到对应的HTML标记,然后给这个对应的HTML标记设置样式
选择器的分类:
1.基本选择器
2.复合选择器
3.伪类选择器
4.属性选择器
基本选择器
选择器 | 格式 | 含义 | 举例 |
---|---|---|---|
标签选择器 | 标签名 {属性:值;} | 匹配对应的HTML标签 | p {font-size:15px;} |
类选择器 | .class属性值 {属性:值;} | 给拥有指定class属性值的元素设置样式 | .box {width:400px;} |
id选择器 | #id属性值 {属性:值;} | 只能使用一次 | #title {color:red;} |
通用选择器 | * {属性:值;} | 通用选择器,将匹配HTML所有标签(IE6不支持,给大型网站增加负担) | * {background-color:green;} |
复合选择器
1.后代选择器
2.子元素选择器
3.并集选择器(多元素选择器)
4.伪类选择器
选择器 | 含义 | 举例 |
---|---|---|
并集选择器(多元素选择器): 选择器1,选择器2, {属性:值;} | 多元素选择器,同时匹配选择器1和选择器2,多个选择器之间用逗号分隔 | p,h1,h2 {margin:0px;} |
后代元素选择器: E F {属性:值;} | 后代元素选择器,匹配所有属于E元素后代的F元素 E和F之间用空格分隔 | #slidebar p {font-color:#000;} |
子元素选择器: E>F{属性:值;} | 子元素选择器,匹配所有E元素的子元素F | div> p{color:#008000;} |
相邻元素选择器: E+F {属性:值;} | 相邻元素选择器,匹配所有紧随E元素之后的同级元素F | div + div{color:#008c8c} |
伪类选择器
伪类选择器是用来给超级链接的不同状态来设置样式。
超级链接的四种不同状态:正常状态、访问过后状态、鼠标放上状态、激活状态。
1.链接伪类 2.结构伪类 等
下方为链接常用伪类选择器
选择器 | 含义 |
---|---|
:link | 向未被访问的链接添加样式 |
:visited | 向已被访问的链接添加样式 |
:hover | 当鼠标悬浮在元素上方时,向元素添加样式 |
:active | 鼠标放在元素上面时,点击的一瞬间 |
<!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>
<style>
a:link{/* 正常状态 */
color: #f00;/* 红 */
}
a:visited{/* 访问过后状态 */
color: #000;/* 黑 */
}
a:hover{/* 鼠标悬停状态 */
color: gold;/* 黄 */
}
a:active{/* 激活状态 */
color: #0f0;/* 绿 */
}
</style>
</head>
<body>
<a href="http://www.bilibili.com">哔哩哔哩</a>
<a href="http://www.douyu.com">斗鱼</a>
<a href="http://www.123.com">123</a>
</body>
</html>
默认正常状态下,我们设置为红色如下
总结:
超级链接的不同状态它其实是有顺序的,也就是说伪类选择器设置其实是有顺序的。如果不按照伪类选择器的顺序,那么样式就会失效。
顺序:要遵循 “爱恨法则” 要先有爱,才有恨。“Love Hate”。
超级链接的美化:
我们通常会去掉超级链接的下划线,然后同时会给超级链接设置一个颜色。一般情况下:
正常状态与访问过后的状态的样式设置为一样;当鼠标放上的时候给其设置为另外一个颜色,激活状态一般不会设置,因为激活状态的时间太短。举例:
/*正常状态与访问过后的状态*/
a:link,a:visited{
text-decoration: none; color: #444;
}
/*鼠标放上状态*/
a:hover{
color: #f00;
text-decoration:underline;
}
下方为:focus伪类选择器
:focuss伪类选择器用于选取获得焦点的表单元素
焦点就是光标,一般情况下<input>类表单元素才能获取,因此这个选择器也主要针对于表单元素来说
input:focus {
background-color:yellow;
}
例如:
<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>:focus伪类选择器</title>
<style>
/* 把获得光标的input表单元素选取出来 */
input:focus {
/* 选框设置为红色 */
background-color: red;
/* 选框内的文字设置为绿色 */
color: green;
}
</style>
</head>
<body>
<!-- 三个表单 -->
<input type="text">
<input type="text">
<input type="text">
</body>
效果为:
CSS字体属性
1.字体系列
CSS使用font-family属性定义文本的字体系列
p {font-family:"微软雅黑";}
div {font-family:Arial,"Microsoft Yahei","微软雅黑";}
2.字体大小
CSS使用font-size属性定义文本的字体大小
p {
font-size:20px;
}
·px(像素)
·谷歌浏览器默认的文字大小为16ox
·不同浏览器默认显示的字号大小不一致,我们尽量给一个明确值,不要默认大小
3.字体粗细
CSS使用font-weight属性定义文本的字体粗细
属性值 | 描述 |
---|---|
normal | 默认值(不加粗的) |
bold | 定义粗体(加粗的) |
100~900 | 400等同于normal,700等同于bold,(数字后面不跟单位) |
4.文字样式
CSS使用font-style属性定义文本的风格
属性值 | 作用 |
---|---|
normal | 默认值,浏览器会显示标准的字体样式 font-style:normal; |
italic | 浏览器会显示斜体的字体样式 |
注意:平时我们很少给文字加斜体,反而要给斜体的标签(em,i)改为不倾斜的字体
5.文字复合属性写法
body {
font:font-style 风格是否斜体
font-weight 粗细
font-size/line-height 大小/行高
font-family 字体名称
;
}
注意:不能更换顺序,各个属性之间用空格隔开,必须保留font-size和font-family属性
6.字体属性总结
属性 | 表示 | 注意点 |
---|---|---|
font-size | 字号 | 常用单位是px,一定要跟上单位 |
font-family | 字体名 | 实际工作中按照约定来写 |
font-weight | 字体粗细 | 加粗是700或者bold,不加粗是400或normal,数字不要跟单位 |
font-style | 字体样式 | 倾斜是italic,不倾斜是normal |
font | 字体连写 | 1.不能更换顺序 2.各个属性之间用空格隔开 3.必须保留font-size和font-family属性 |
CSS的文本属性
1.文本颜色
color属性用于定义文本的颜色
div {
color:red;
}
表示 | 属性值 |
---|---|
预定义的颜色值 | red,green,blue,pink等 |
十六进制 | #FF000,#FF6600,#29D794 |
RGB代码 | rgb(225,0,0)或rgb(100%,0%,0%) |
2.对齐文本
text-align属性用于设置元素内文本内容的水平对其方式
属性值 | 解释 |
---|---|
left | 左对齐(默认) |
right | 右对齐 |
center | 居中对齐 |
3.装饰文本
text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。
属性值 | 描述 |
---|---|
none | 默认没有装饰线 |
underline | 下划线,链接a自带下划线 |
overline | 上划线 |
line-through | 删除线 |
4.文本缩进
text-indent属性用来指文本的首行缩进
div {
text-indent:10px;
}
通过设置该属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值
p {
text-indent:2em;
}
em是一个相对单位,就是当前元素(font-size)1个文字的大小,如果当前元素没有设置大小,则会按照父元素的1个文字大小。
5.行间距
line-height属性用于设置行间的距离(行高),可以控制文字行与行之间的距离
p {
line-height:26px;
}
6.文本属性总结
属性 | 表示 | 注意点 |
---|---|---|
color | 文本颜色 | 通常使用十六进制,比如简易形式#fff |
text-align | 文本对齐 | 设定文字水平的对齐方式 |
text-indent | 文本缩进 | 通常用于段落的首行缩进2个字的距离(2em) |
text-decoration | 文本修饰 | 下划线underline 取消下划线none |
line-height | 行高 | 控制行与行之间的距离 |
CSS的元素显示模式
1.块元素
常见的块元素有<h1>~<h6> <p> <div> <ul> <ol> <li>等,其中<div>标签是最典型的块元素
块元素特点:
1.比较霸道,自己独占一行
2.高度,宽度,外边距以及内边距都可以控制
3.宽度默认是容器(父级宽度)的100%
4.是一个容器及盒子,里面可以放行内或者块级元素
注意:文字类的元素内不能放块级元素
2.行内元素
常见的行内元素有<a> <strong> <b> <em> <i>等,其中<span>标签是最典型的行内元素,有的地方也将行内元素称为内联元素
行内元素特点:
1.相邻行内元素在一行上,一行可以显示多个
2.高宽直接设置是无效的
3.默认宽度就是它本身的宽度
4.行内元素只能容纳文本或者其他行内元素
注意:链接里面不能再放链接特殊情况下,<a>里面可以放块级元素,但是给<a>转化一下块级元素更安全
3.行内块元素
在行内元素中有几个特殊的标签:<img/><input/><td>它们同时具有块元素和行内块元素的特点。称他们为行内块元素
特点:
1.和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙,一行可以显示多个(行内元素特点)
2.默认宽度就是它本身内同的宽度(行内元素特点)
3.高度,行高,外边距以及内边距都可以控制(块级元素特点)
总结
元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
---|---|---|---|---|
块级元素 | 一行只能放一个块级元素 | 可以设置宽高 | 容器的100% | 容器级可以包含任何标签 |
行内元素 | 不可以直接设置宽度 | 不可以直接设置宽高 | 它本身内容的宽度 | 容纳文本或其他行内元素 |
行内块元素 | 可以直接宽度和高度 | 可以设置宽高 | 它本身内容的宽度 |
元素显示模式的转换
特殊的情况下,我们需要元素模式的转换,简单礼节:一个模式的元素需要另一种模式的特性
如:想要增加链接<a>的触发范围
转换为块元素:display:block;
转换为行内元素:display:inline;
行内元素转换为行内块元素:display: inline-block;
例如:
<style>
a {
width: 150px;
height: 50px;
background-color: pink;
/* 把行内元素a转换为块级元素 */
display: block;
}
div {
width: 150px;
height: 50px;
background-color: purple;
/* 把块元素div转换为行内元素 */
display: inline;
}
span {
width: 100px;
height: 80px;
background-color: skyblue;
/* 把行内元素span转换为行内块元素 */
display: inline-block;
}
</style>
</head>
<body>
<a href="#">金星阿姨</a>
<a href="#">金星阿姨</a>
<div>我是块级元素</div>
<div>我是块级元素</div>
<span>行内元素转换为行内块元素</span>
<span>行内元素转换为行内块元素</span>
</body>
一个小工具的使用 snipaste
简单而强大的截图工具,也可以将截图贴回屏幕上
常用快捷键:
1.F1截图,测量大小,设置箭头,书写文字
2.F3在桌面置顶显示
3.点击图片,alt取色
4.esc关闭
案例:小米侧边栏
<title>简单版小米侧边栏</title>
<style>
/* 1.把链接a转换为块级元素 */
a {
display: block;
width: 230px;
height: 40px;
background-color: #55585a;
font-size: 14px;
color: #fff;
text-decoration: none;
text-indent: 2em;
padding-top: 15px;
}
/* 2.鼠标经过链接变换背景颜色 */
a:hover {
background-color: #ff6700;
}
</style>
</head>
<body>
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本 平板</a>
<a href="#">出行 穿戴</a>
<a href="#">智能 路由器</a>
<a href="#">健康 儿童</a>
<a href="#">耳机 音响</a>
</body>
效果为
单行文字垂直居中的代码
CSS没有提供文字垂直居中的代码,这里可以使用一个小技巧来实现
解决方案:让文字的行高等于盒子的高度,就可以让文字在当前盒子内垂直居中
line-height:盒子的高度;
CSS的背景
背景属性可以设置背景颜色,背景图片,背景平铺,背景图片位置,背景图像固定等。
1.背景颜色
background-color:颜色值;
2.背景图片
background-image
语法格式:
background-image:none/url(url)
<style>
div {
width: 300px;
height: 300px;
/* 不要落下url()背景图片地址 */
background-image: url(images/logo.png);
}
</style>
</head>
<body>
<div></div>
</body>
参数值 | 作用 |
---|---|
none | 无背景图(默认) |
url | 使用绝对护着相对地址指定背景图像 |
(1)背景平铺
在html页面上对背景图像进行平铺,可以使用background-repsat属性
background-repsat:repeat(平铺);
no-repeat(不平铺);
repeat-x(沿x轴平铺);
repeat-y(沿y轴平铺);
<style>
div {
width: 300px;
height: 300px;
background-image: url(images/logo.png);
/*背景图片不平铺 */
background-repeat: no-repeat;
/*背景图片平铺 */
background-repeat: no-repeat;
/*背景图片沿着X轴平铺 */
background-repeat: repeat-x;
/*背景图片沿着Y轴平铺 */
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div></div>
</body>
注意:页面元素既可以添加背景颜色,也可以添加背景图片,只不过背景图片会压住背景颜色
(2)背景图片位置
利用background-position属性改变图片在背景中的位置
background-position:x y;
代表:X坐标和Y坐标 ,可以使用方位名词或者精确单位
参数值 说明 length 百分数/由浮点数字和单位标识符组成的长度值 position 方位名词:top(上)、center(中)、bottom(下)、left(左)、center(中)、right(右)
<1>当参数是方位名词:
两个值前后顺序无关,比如background-position:left top;和background-position:top left;效果一致。
只指定了一个方位名词,另一个值省略,则第二个默认居中对齐。
<2>当参数是精确单位:
如果参数值是精确坐标,第一个一定是X坐标,第二个一定是Y坐标。
如果只指定一个数值,那么该数值一定是X坐标,另一个Y坐标默认垂直居中 。
<3>当参数是混合单位:
如果指定的两个值是精确单位和方位名词混合使用,则第一个值是X坐标,第二个值是Y坐标。
(3)背景图像固定/背景附着
background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动
使用场景:后期可以制作视差滚动的效果
参数 | 作用 |
---|---|
scroll | 背景图像是随着对象内容滚动 |
fixed | 背景图像固定 |
(4)背景复合写法
为了简化背景属性的代码,我们可以将这些属性合并写在一个background中
当使用简写属性时,没有特定的书写顺序,一般习惯约定顺序为:
背景颜色
背景图片地址
背景平铺
背景图像滚动
背景图片位置
<style>
div {
background:black url(images/bg.jpg) no-repeat fixed center top;
}
</style>
(5)背景色半透明
background:rgba(0,0,0,0.3);
注意:
·最后一个参数是alpha透明度,取值范围在0~1之间
·习惯把最后一个0.3写成 .3
·背景半透明是指盒子背景半透明,盒子里面的内容不受影响
3.背景总结
属性 | 作用 | 值 |
---|---|---|
background-color | 背景颜色 | 预定义的颜色值 十六进制 RGB代码 |
background-image | 背景图片 | url(图片路径) |
background-repeat | 是否平铺 | repat no-repat repat -x repat-y |
background-position | 背景位置 | length position |
background-attachment | 背景附着 | scroll(背景滚动) fixed(背景固定) |
背景简写 | 书写更方便 | 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置 |
背景色半透明 | 背景颜色半透明 | background:rgba(0,0,0,0.3); 后面必须是4个值 |