一、CSS简介
1、CSS----用于网页美化
CSS是层叠样式表(Cascading Style Sheets) 的简称,有时我们也叫CSS样式表或级联样式表。CSS主要用于设置HTML页面的文本内容(字体、大小、形状等)、图片的外形以及版面布局和外观显示样式。
CSS的最大价值: 由HTML去做页面的结构呈现,CSS去做样式的优化。即结构(HTML)和样式(CSS)相分离。
2、CSS的语法规范
CSS规则由两个主要的部分构成:选择器以及一条或多条声明。
二、CSS的基础选择器
1、选择器的分类
选择器分为基础选择器和复合选择器两大类,我们先看基础选择器。
基础选择器是由单个选择器组成的;
基础选择器又包括:标签选择器、类选择器、id选择器和通配符选择器。
2、标签选择器
标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中的某一标签指定统一的CSS样式。
语法:
标签名 {
属性1: 属性值1;
属性2: 属性值2;
......
}
作用: 标签选择器可以把某一类标签全部选择出来,比如所有的 < p > 标签。
优点: 能快速为页面中的同类型标签统一样式设置。
缺点: 不能做差异化设计,只能选择全部的当前标签。
3、类(class)选择器
如果想要差异化选择不同的标签,单独选择一个或几个标签,可以使用类选择器。
语法:
.类名 {
属性: 属性值;
......
}
注意:
● 类选择器使用" ."(英文点号)进行标识,后面紧跟着自定义类名。
● 自定义类名不能使用标签的名称。
● 一个标签可以使用多个类名 中间使用空格隔开。
4、id选择器
● id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
● HTML 以 id 属性来设置 id 选择器,CSS 中 id 选择器以 " # " 来定义。
● id 选择器和类选择器的不同住处就在于类选择器就好比人的名字,可以重名,id 选择器就相当于身份证号,每个人的都是唯一且不同的。
语法:
#id名 {
属性: 属性值;
......
}
5、通配符选择器
在 CSS 中,通配符选择器需要使用 “*” 定义,它表示选取当前页面中的所有标签。
通配符选择器不需要调用,它自动就给所有的元素使用样式。
语法:
* {
属性:属性值
......
}
基础选择器总结:
基础选择器 | 作用 | 特点 | 用法 |
---|---|---|---|
标签选择器 | 可以选出所有相同的标签,比如 p | 不能差异化选择 | p { color:red; } |
类选择器 | 可以选出一个或多个标签 | 可以根据需求选择 | .box { color:red; } |
id选择器 | 一次只能给一个标签调用 | id属性只能在每个HTML文档中出现一次 | #first { color:red; } |
通配符选择器 | 选择所有的标签 | 选择的太多,部分不需要 | * { color:red;} |
三、CSS高级选择器
1、层次选择器
1.1、后代选择器
后代选择器(descendant selector)又称为包含选择器。
后代选择器可以选择作为某元素后代的元素。
我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用。
举例来说,如果希望只对 h1 元素中的 span元素应用样式,可以这样写:
h1 span {
color:red;
}
1.2、子选择器
和后代选择器不同,子选择器只能选择某元素的子元素作为元素。
语法:
父元素 > 子元素 {
属性:...
}
例如:
h3 > p {
color: red;
font-family: 隶书;
font-size: 55px;
}
<h3>
<p>
子选择器只能选择父级元素的子元素作为元素
</p>
</h3>
1.3、相邻兄弟选择器
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。
比如你要选择h3下的第2个p,就可以使用相邻兄弟选择器,使用相邻兄弟选择器后,就意味着和它同辈的下一个元素被选中,就像下面这个例子,使用相邻兄弟选择器选中的就是第二个p标签second。
.active+p {
background: red;
font-family: 隶书;
font-size: 30px;
}
<h3>
<p class="active">first</p>
<p>second</p>
<p>third</p>
<p>last</p>
</h3>
1.4、通用兄弟选择器
通用兄弟选择器选择的是同级元素后面的所有的兄弟元素。
例如下面这个例子,你要选择 class 为 active 的 p 标签后面的所有的 p 标签,就可以使用通用兄弟选择器。.
.active~p {
background: #5f5eff;
font-family: 楷体;
}
<h3>
<p class="active">first</p>
<p>second</p>
<p>third</p>
<p>last</p>
</h3>
运行结果:
2、结构伪类选择器
用法:
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul li:first-child {
background: blue;
font-size: 20px;
font-weight: bolder;
}
h3 p:last-child {
background: red;
font-weight: lighter;
font-size: 25px;
}
ul li:first-of-type {
background: #34fff5;
}
h3 p:nth-of-type(2) {
background: #922d3a;
}
</style>
</head>
<body>
<ul>
<li>1张三</li>
<li>2李四</li>
<li>3王五</li>
<li>4赵倩</li>
<li>5李云飞</li>
</ul>
<h3>
<p>p1第一段</p>
<p>p2第二段</p>
<p>p3第三段</p>
<p>p4第四段</p>
</h3>
</body>
</html>
执行结果:
四、美化网页元素
1、美化网页的必要性
1、有效的传递页面信息;
2、使页面变得好看,吸引用户;
3、凸显网页的主题;
4、为用户提供更好地体验;
2、网页的字体样式
<style>
body {
font-family: 楷体;
font-size: large;
font-weight: bolder;
color: #0000FF;
}
</style>
3、文本样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
background: #34fff5;/*背景*/
color: rgba(146, 45, 58, 0.6);/*文本颜色和透明度*/
text-align: left;/*文本排版:居左*/
text-indent: 3em;/*段落首行缩进*/
text-decoration: underline;/*文本装饰:下划线*/
height: 100px;
line-height: 100px;/*把行高和这个段落的高度设置一样高,文本就可以在这个段落上下居中*/
}
</style>
</head>
<body>
<p>中国开发者在数量与贡献度上均位列第二。尤其是2019年的新注册用户中40%来自中国,</p>
<p>他们中90后的年轻人居多,完全出于兴趣与自我价值的实现参与开源项目。</p>
<p>可以说由于年轻人的不断加入,开源正在成为大型软件项目开发的新模式,成本很低并且效率很高,开源代表了IT业的未来。</p>
</body>
</html>
执行结果:
4、阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#shadow1 {
text-shadow: #4027ff 10px -10px 2px;/*四个参数分别是:阴影颜色 水平偏移 上下偏移 阴影半径*/
}
</style>
</head>
<body>
<p id="shadow1">可以说由于年轻人的不断加入,开源正在成为大型软件项目开发的新模式,成本很低并且效率很高,开源代表了IT业的未来。</p>
</body>
</html>
执行结果:
5、超链接伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*a:hover 鼠标悬浮在链接上的样式*/
a:hover {
color: #ff160e;
text-decoration: none;
font-size: 20px;
font-weight: bolder;
}
</style>
</head>
<body>
<a href="#">点我1</a>
<a href="#">点我2</a>
<a href="#">点我3</a>
</body>
</html>
6、列表样式
<style>
ul li {
font-size: 20px;
list-style: none;/*列表前面的样式 none:空 circle:空心圆 decimal:数字 square:正方形*/
}
</style>
7、网页背景
<style>
body{
background-image: url("images/1.jpg");/*网页背景图片*/
background-repeat: repeat-y;/*背景样式:垂直方向平铺*/
}
</style>
8、背景颜色渐变
<style>
body {
background-color: #FFFFFF;
background-image: linear-gradient(115deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%);
}
</style>
效果:
五、盒子模型
1、什么是盒子模型
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距,边框,内边距和实际内容。
盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。
2、盒子模型的三要素
Margin:外边距 Padding:边框 Border:内边距
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
</style>
</head>
<body>
<h2>盒子模型演示</h2>
<p>CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。</p>
<div>这里是盒子内的实际内容。有 25px 内间距,25px 外间距、25px 绿色边框。</div>
</body>
</html>
3、圆角边框
<style>
div {
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 50px; /*边框半径*/
}
</style>
4、盒子阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img {
border-radius: 50px;
box-shadow: 10px 10px 100px red;/*四个参数:水平偏移 上下偏移 阴影半径 阴影颜色*/
}
</style>
</head>
<body>
<div style="width: 200px;display: block;text-align: center">
<img src="images/74-1G22F93Q0.jpg" alt="#">
</div>
</body>
</html>
六、浮动
了解浮动之前,我们要先了解文 web 页面的几个特性:
(1)空白折叠现象:
无论多少个空格、换行、tab,都会折叠为一个空格。
(2)高矮不齐,底边对齐:
页面的元素默认都是底边对齐。
(3)自动换行:
当你写的内容一行写不满时,会自动换行在下一行写。
(4)行内元素和块级元素:
块级元素: 独占一行,例如 h1~h6 、p、div、等标签都是块级元素。
行内元素: 不是独占一行的,元素可以放在一行内。
行内元素可以放在块级元素中,但反之就不可以。
1、display 属性
block 块元素
inline 行内元素
inline-block 是块元素,但是可以内联,在一行!
none
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid red;
display: inline;
}
span {
width: 100px;
height: 100px;
line-height: 100px;
border: 1px solid red;
display: inline-block;
}
</style>
</head>
<body>
<div>
块级元素
</div>
<span>
行内元素
</span>
</body>
</html>
执行结果:
2、float 属性
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。
属性值:
float属性值 | 描述 |
---|---|
left | 使元素向左浮动 |
right | 使元素向右浮动 |
none | 默认值,元素不浮动 |
inherit | 规定从父元素继承 float 属性的值 |
七、解决父级边框塌陷问题
看下面的代码
html代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>浮动</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="father">
<div class="layer01"><img src="images/1.jpg" alt=""/></div>
<div class="layer02"><img src="images/2.jpg" alt=""/></div>
<div class="layer03"><img src="images/3.jpg" alt=""/></div>
<div class="layer04">
浮动的盒子可以向左浮动,也可以向右浮动,直到它的外边缘碰到包含框或另一个浮动盒子为止。
</div>
</div>
</body>
</html>
css代码:
div {
margin: 10px;
padding: 5px;
}
#father {
border: 1px #000 solid;
}
.layer01 {
border: 1px #F00 dashed;
display: inline-block;
float: left;
}
.layer02 {
border: 1px #00F dashed;
display: inline-block;
float: left;
}
.layer03 {
border: 1px #060 dashed;
display: inline-block;
float: left;
}
.layer04 {
border: 1px #666 dashed;
font-size: 12px;
line-height: 23px;
display: inline-block;
float: left;
}
运行效果:
我们可以看到包含这四个元素的父级边框已经塌陷进去了,浮动在父级边框之外。
解决方案:
1、给父级元素增加高度
#father {
border: 1px #000 solid;
height: 500px;
}
2、在增加一个空的 div 标签,把这个标签设置为清除浮动
<body>
<div id="father">
<div class="layer01"><img src="images/1.jpg" alt=""/></div>
<div class="layer02"><img src="images/2.jpg" alt=""/></div>
<div class="layer03"><img src="images/3.jpg" alt=""/></div>
<div class="layer04">
浮动的盒子可以向左浮动,也可以向右浮动,直到它的外边缘碰到包含框或另一个浮动盒子为止。
</div>
<div id="claer"></div> <!--添加的空div标签-->
</div>
</body>
给空标签设置属性:
#claer {
clear: both;
}
运行也可以解决问题:
3、给父级元素添加 overflow 属性
#father {
border: 1px #000 solid;
overflow: hidden;
}
运行结果:
同样也可以解决问题。
4、给父类添加一个伪类 :after
给父类添加一个伪类,然后添加一个空的内容,display 设置为 block,再清除浮动。
#father:after {
content: "";
display: block;
clear: both;
}
这个方案也是目前解决父级边框塌陷问题最常用的,它避免了在 html 代码中添加或修改代码,直接添加一个伪类即可,简单快捷。
八、CSS定位
CSS 定位 (Positioning) 属性允许你对元素进行定位。
定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
1、相对定位
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。
相对定位原理就是相对于元素自己原来的位置进行制定位置的偏移。
相对定位仍然在标准文档流中,原来的位置会被保留。
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style>
#father {
margin: 0px;
padding: 10px;
border: red solid 1px;
}
#first {
background: #34fff5;
border: #4027ff dashed 1px;
position: relative;/*相对定位属性*/
top: -20px;/*相对于顶部偏移-20px*/
left: 20px;/*相对于左边偏移20px*/
}
#second {
background: #922d3a;
border: #34fff5 dashed 1px;
}
#third {
background: #fad65c;
border: #922d3a dashed 1px;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
执行结果:
2、绝对定位
设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样
绝对定位使元素的位置与文档流无关,因此不占据空间。
绝对定位是基于某个内容进行上下左右偏移的。
绝对定位的三个要素:
a、 在没有父级元素定位的前提下,会相对于浏览器进行定位;
b、 假设父级元素存在定位,通常会相对于父级元素进行定位;
c、 元素在父级元素范围内进行偏移移动,不会超脱父级元素的范围。
3、固定定位 fixed
固定定位就是在一个 html 页面中,这个元素固定定位以后,不管网页有多长,网页如何变化,这个固定定位的元素的位置上不会发生改变,就像一般的网站中底部都有回到顶部那些按钮,不管网页上拉或下滑它的位置都不会发生改变。
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style>
body {
height: 1000px;
}
#father {
margin: 15px;
padding: 10px;
border: 1px solid red;
position: relative;
}
#first {
background: #34fff5;
border: #4027ff dashed 1px;
}
#second {
margin: 10px;
background: #922d3a;
border: #34fff5 dashed 1px;
position: fixed;
right: 0px;
bottom: 0px;
}
#third {
background: #fad65c;
border: #922d3a dashed 1px;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
执行结果:
像上面的案例,右下角的第二个盒子的位置不管滚动条怎么滑动,它的位置都不会改变。
4、z-index
定义和用法
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
九、总结
CSS 的基础知识就是以上的这些内容,其中我认为比较重要的知识就是选择器还有定位和浮动这些,这些知识我们在平时只要多加留意,自己在浏览网站时可以学习别人的好习惯和技术,多多练习就会掌握的。