CSS基础入门及案例一
一.CSS基础选择器
1.标签选择器
标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。
语法:
标签名 {
属性1: 属性值:
属性2: 属性值;
}
示例:
p {
color: red;
}
2.类选择器
如果想要差异化选择不同的标签, 单独选一个或者某几个标签,可以使用类选择器。
语法:结构需用class属性来调用class类的意思
.类名{
属性1: 属性值;
属性2: 属性值;
}
<div class='color'>你好明天</div>
<style>
.color {
color: red;
}
</style>
注:
1)类选择器使用“.”(英文点号)进行标识,后面紧跟类名(自定义)
2)长名称或词组可以使用中横线来为选择器命名(-)
3)不要使用纯数字、中文等命名,尽量使用英文字母表示
4)命名要有意义,尽量让人一眼就知道这个类名的目的
3.类选择器-多类名
可以给一个标签指定多个类名,从而达到更多的选择目的,这些类型都可以选出这个标签(即一个标签有多个名字),不同类名之间用空格隔开
<div class="类1 类2"></div>
4.id选择器
id选择器只能调用一次
<style>
#pink {
color: pink;
}
</style>
<div id="pink"></div>
5.通配符选择器
语法:
* {
属性1: 属性值;
}
注:
1)在CSS中,通配符选择器使用”*“定义,它表示选取页面中的所有元素(标签)。
2)通配符不需要调用,自动就给所有的元素使用样式
3)特殊情况才使用,(以下是清除所有的元素标签的内外边距)
* {
margin: 0;
padding: 0;
}
二、CSS字体属性
1.字体系列
CSS使用font-family属性定义文本的字体系列
.text {
font-family: "宋体";
}
注:
1)各字体之间必须用英文逗号隔开
2)如果有空格隔开的多单词组成的字体,需加引号
3)尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示
4)最常见的字体:
.ziti{
font-family:"Microsoft YaHei",tahoma,arial,"Hiragino Sans GB";
}
5)多字体时,浏览器依次匹配字体,若有,则使用,反之,再匹配下一个
2.字体大小
CSS使用font-size来定义字体大小
语法:
.ziti {
font-size: 16px
}
注:
1)标题标签比较特殊,需单独指定文字大小,若用body等通用匹配符进行配置,无法生效
3.字体粗细
CSS使用font-weight定义字体粗细
语法:
.ziti {
font-weight: normal;
}
属性值:
normal:默认值,正常字体,相当于number值为400
bold:粗体,相当于number为700
bolder:IE5+ 特粗体
lighter:IE5+ 细体
number:IE5+ 100|200|300|400|500|600|700|800|900
注:
1)number数字后面不需要跟单位
2)实际开发常使用number
4.文字样式
CSS使用font-style定义文本的风格
p {
font-style: normal;
}
属性值:
normal:默认值,浏览器会显示标准的字体样式
italic:斜体显示
注:
常用来使<em><i>倾斜的字体变正
5.复合属性
复合属性可以节约代码的书写,但格式顺序为固定式
p { 行高
font: font-style font-weight font-size/line-height font-family;
如:
font: italic bolder 16px/20px "宋体";
}
注:
1)使用font属性时,必须按照语法顺序书写,不能更换顺序,并且各个属性间用空格隔开
2)不需要设置的属性可以省略(默认值),但必须保留font-size和font-family属性,否则font属性将不起作用
如:font: 20px "宋体";
三、CSS文本属性
1.文本颜色
color属性定义文本的颜色
p {
color: red;
}
属性值:
预定义颜色值-red,green,blue
十六进制-#FF000
RGB代码-rgb(255,0,0)或rgb(100%,0%,0%)
2.对齐文本
text-align属性用于定义文本内容的对齐方式
p {
text-align: center;
}
属性值:
center
left
right
3.装饰文本
text-decoration属性规定添加到文本的修饰,可以给文本添加下划线、删除线、上划线等
属性值:
none:默认,没有装饰线
underline:下划线,链接a自带下划线
overline:上划线
line-through:删除线
blink:定义闪烁的文本(无法运行在 IE 和 Opera 中)。
4,文本缩进
text-indent属性用来指定文本的第一行的缩进,通常是段落的首行缩进
p {
text-indent: 10px;
text-indent: 10em; #相当于缩进10个文字
}
属性值:
数字+px:定义缩进多少个字符
数字+em:em是一个相对单位,就是当前元素(font-size)1个文字的大小,如果当前元素没有设置大小,则会按照父元素的1个文字大小
5.行间距
line-height属性用于定义行间的距离(行高),可以控制文字行与行之间的距离
四、CSS样式补充
1.透明度
opacity属性指定元素的透明度,取值范围在0.0-1.0之间,值越低,越透明。
div {
opacity: 0.3;
}
注:
1)使用opacity属性为元素添加背景透明度时,其所有子元素都继承相同的透明度,这可能会使完全透明的元素内的文本难以阅读。
2.background属性
background:可以一次性定义所有的背景属性
body {
background: #fff url("图片路径") no-repeat fixed top;
}
1)background-color:定义背景色
body {
background-color: red;
}
2)background-image:定义背景图片
body {
background-image: url("图片路径")
}
3)background-size:定义背景图片大小
属性值:
length:设置背景图像的宽度和高度(第一个参数为宽度,第二个参数为高度),若只写第一个参数,则第二个参数默认为auto
percentage:以百分比的方式设置图像的宽度和高度,若只设置一个参数,则第二个参数默认为auto
cover:把图像拓展到足够大,使图像可以完全覆盖背景区域,但背景图像的某些部分也许无法显示在背景区域内。
contain:把图像拓展至最大尺寸,使图片的宽度和高度完全适应背景区域
div {
background-size: 20px 50px;
background-size: 50px;
background-size: 50%;
background-size: cover;
background-size: contain;
}
4)background-attachment:属性设置背景图像是否固定或者随着页面的其余部分滚动。
scroll:默认值,背景图片会随着页面其余部分的滚动而滚动(图片留在原地)
fixed:当页面滚动时,背景图片不会移动
inherit:规定应该从父元素继承 background-attachment 属性的设置。
5)background-position:定义背景图片的位置
6)background-clip:定义背景的绘制区域
7)background-origin:定义背景图片的定位区域
8)background-repeat:定义背景图片是否平铺
9)inherit:定义从父元素继承background属性的设置
五、CSS的引入方式
按照CSS样式书写的位置(或者引入的方式),CSS样式表分为三大类:
1)行内样式表(行内嵌)
即将CSS代码单独写到<style>标签中,<style>一般放在<head>标签中
2)内部样式表(嵌入式)
直接在标签中添加style属性,如<div style="color: red;">
3)外部样式表(连接式)
即将CSS样式写到CSS文件中,之后把CSS文件引入到HTML页面中使用
外部样式表引用步骤:
1)创建.CSS文件,并将CSS样式写入到CSS文件中
2)在HTML页面中,使用<link>标签引入CSS文件
<link rel="stylesheet" href="CSS文件路径">
六、CSS的复合选择器
在CSS中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器的基础之上,对基本选择器进行组合形成的。
复合选择器可以由两个或多个基础选择器,通过不同的方式组合而成。
常用的复合选择器:后代选择器、子选择器、并集选择器、伪类选择器等
1.后代选择器
后代选择器又称包含选择器,可以选择父元素里面的子元素,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔,当标签发生嵌套时,内层标签就成为外层标签的后代。
语法:
元素1 元素2 {样式}
如:
ul li { 样式 } #选择ul里面的所有li标签元素
.nav li {样式}
注:
1)元素1和元素2中间用空格隔开
2)元素1是父级,元素2是子级,最终选择的是元素2
3)元素1和元素2可以是任意的标签选择器
2.子选择器
子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。
语法:
元素1 > 元素2 {样式}
如:
div > p {样式} #选择div里面所有最近一级P标签元素
注:
1)元素1和元素2中间用大于号隔开
2)元素1是父级,元素2是子级,最终选择的是元素2
3)元素2必须是亲儿子其孙子、重孙之类都不归它管。
3.并集选择器
并集选择器可以选择多组标签,同时为他们定义相同的样式,通常用于集体声明。
并集选择器是个选择器通过英文逗号(,)链接而成,任何形式的选择器都可以作为并集选择器的一部分。
约定的语法规范,并集选择器习惯竖着写
语法:
元素1,元素2 {
样式
}
div,
p,
.pig li {
样式
}
4.伪类选择器
伪类选择器用于向某些选择器添加特殊的效果,如给链接添加特殊效果(当鼠标移过去变颜色等),或选择第1个,第n个元素。
伪类选择器书写特点的用冒号(:)表示:
:hover、:fist-child
1)链接伪类选择器
a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接(鼠标按下未弹起的链接)
注:
1)为了确保生效,请按照LVHA的顺序声明:-:link -:visited -:hover -:active
2)因为a链接在浏览器中具有默认样式,所有实际工作中都需要给链接单独指定样式
2):focus伪类选择器
:focus伪类选择器用于选取获得焦点的表单元素
焦点就是光标,一般情况<input>类表单元素才能获取,因此这个选择器也主要针对于表单元素来说
input:focus {
background-color:yellow;
}
注:
1)用于input
2)用于a标签
六、CSS的元素显示模式
元素显示模式就是元素(标签)以什么方式进行显示,如<div>自己就独占一行,一行可以放多个<span>
HTML元素一般分为块元素和行内元素两种类型。
1.块元素
常见的块元素:<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等
块元素的特点:
1)比较霸道,独占一行
2)高度、宽度、外边距以及内边距都可以控制
3)宽度默认是容器(父级宽度)的100%
4)块元素是一个容器及盒子,里面可以放行内或块级元素
注:
1)文字类的元素内不能使用块元素
2)<p>标签主要用于存放文字,因此,<p>里面不能放块元素,特别是不能放<div>
3)同理,<h1>~<h6>
2.行内元素
常见的行内元素:<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,其中<span>是典型的行内标签,有的地方也将行内元素称为内联元素。
行内元素的特点:
1)相邻的行内元素在一行上,一行可以显示多个
2)高、宽直接设置是无效的
3)默认宽度就是它本身的宽度
4)行内元素只能容纳文本或其他行内元素
注:
1)链接里面不能再放链接
2)特殊情况链接<a>里面可以放块元素,但是给<a>转换一下块级模式最安全
3.行内块元素
在行内元素中有几个特殊的标签<img>、<input>、<td>,它们同时具有块元素和行内元素的特点,称行内块元素。
行内块元素的特点:
1)相邻行内元素(行内块)在一行上,但它们之间会有空白缝隙,一行可以显示多个(行内元素特点)
2)默认宽度就是它本身的宽度(行内元素的特点)
3)高度、行高、外边距以及内边距都可以控制(块级元素特点)
4.元素显示转换
特殊情况下,我们需要元素的转换,简单理解:一个模式的元素需要另一种模式的特性,如想要增加链接<a>的触发范围
模式转换:
1)转换为块元素:display:block;
2)转换为行内元素:display:inline;
3)转换为行内块元素:display:inline-block;
5.截图小工具snipaste
常用快捷键
1)F1截屏,同时测量大小、设置箭头、书写文字等
2)F3在桌面置顶显示
3)点击图片,alt可以取色(按下shift可以切换取色模式)
4)按下esc取消图片显示
6.文字垂直居中(原理)
当行高(line-height)等于盒子(height)高度时,文字垂直居中显示
div {
height: 40px;
line-height: 40px;
}
原理:盒子高度=文字高度+上下边距(正常上边距=下边距)
行高=文字高度+上下边距
故:
1)当行高=盒子高度时,由于上下边距相同,故文字会被挤到中间
2)当行高>盒子高度时,由于文字高度加上边距>盒子高度/2,故文字会被挤到中下方,即文字偏下显示
3)当行高<盒子高度时,由于文字高度加上上边距<盒子高度/2,故文字会偏上显示
七、案例
HTML代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="nav.css">
<title>小米侧边栏</title>
</head>
<body>
<div>
<ul>
<li>
<a href="#">手机 电话卡</a>
</li>
<li>
<a href="#">电视 盒子</a>
</li>
<li>
<a href="#">笔记本 平板</a>
</li>
<li>
<a href="#">出行 穿戴</a>
</li>
<li>
<a href="#">智能 路由器</a>
</li>
<li>
<a href="#">健康 儿童</a>
</li>
<li>
<a href="#">耳机 音响</a>
</li>
</ul>
</div>
</body>
</html>
CSS代码
li {
list-style: none;
}
ul li a:link {
display: block;
width:204px;
height: 42px;
background-color: rgb(83, 87, 88);
text-decoration: none;
color: white;
font-size: 16px;
padding-left: 30px;
line-height: 42px;
}
ul li a:hover {
background-color: rgb(255, 103, 0);
color: white;
}