(目录)
CSS
CSS的语法规则非常简单! 每一个CSS语句包含两个部分:选择器 + 应用属性。
内部样式表
内部样式表
<style>
p {
/* 设置字体颜色 */
color: red;
/* 设置字体大小 */
font-size: 30px;
}
</style>
<p>hello</p
上面的代码,就是最典型的例子。 其中 style 标签的内容,就是一个 CSS的代码。
内联样式
内联样式 / 行内样式表
这种内联样式,是属于一种比较特殊的用法,通常会搭配 JS 来使用。 另外,这种写法只适合于样式特别简单的情况。 如果样式比较复杂,这里就会显得很乱。 内联样式只是针对当前元素生效。 也就是说,不需要写选择器,也不用写 {},直接写CSS属性和值即可。
外部样式
外部样式
这种样式,在实际开发中是用的最多的。 这种样式,就是把 CSS 代码给单独提取出来,放到一个 CSS 文件中。 然后在 HTML 代码量,
通过 link 标签,来引入CSS文件
<link rel="stytlesheet" herf="test.css">
样式大小写
CSS 是不区分大小写,但是我们开发时统一使用小写。
HTML 和 CSS 一样,都是不区分大小写的,并且同时使用小写。 正是因为统一使用小写,所以在 CSS中 就不存在 “驼峰命名法”。 比如:将 hello world 挨在一起。
小驼峰:helloWorld 大驼峰:HelloWorld
CSS
里面通常会使用“脊柱命名法”:hello-world
也就是使用 - 号来进行分割单词。
选择器
首先,我们选择器的功能,就是选中页面的元素(标签)。 选择器可以一次选中一个,也可以一次选中一批。
选择器的分类
主分成
2 大类:
1、
基础选择器
(单个选择器构成的)2、
复合选择器
(把多种基础选择器综合运用起来.)
1. 基础选择器
标签选择器
写的选择器,就是一个 HTML 的标签名
类选择器
这个类选择器,可以说是我们最常使用的一个选择器,而且也是最灵活的。 通过 类选择器,我们可以随心所欲的选择任意想要的元素。
理论上来说:只要有这一种选择器就够了。
就是说:有了类选择器,其它的选择器都可以不用。
类选择器怎么创建?
首先,需要在 CSS 代码中,创建一个 类名。
在对应的 HTML 元素中,通过
.class 属性来引用这个类名
此时,具有该类名的元素,就都会应用上相关 CSS 属性
id 选择器
id 选择器的用法,和类选择器有点相似。 但是,与类选择器相比,id选择器还是具有一定的局限性。 想要使用 id 选择器,先给被选中的元素,设定一个 id 属性
首先,要注意 id 在 一个页面中,
是唯一的,不可重复的
。因此,
id 选择器只能选中一个元素,不能选中多个元素
。
通配符选择器
通配符选择比较简单,就是一个单单的 * 号
通配符,在将 MySQL的时候,概念相似
比如 select 操作中,有一个 模糊匹配的操作,里面就涉及到 通配符的概念。
% 和 _
%: 代表 任意个字符【任意个:大小不做限制,可以是很大或者很小的数。包括0】,且每个字符又可以表示为任意字符(就是打牌中赖子一样,可以将它当做任意一张牌)。 _ :下划线它只能代表一个字符,但是这一个字符是“赖子”,即:可以表示任意字符。
CSS中 * 号,也是类似。
起到的作用:
直接选中了页面上的所有元素
最大的用途就是:取消浏览器的默认样式
2.复合选择器
复合选择器,其实就是把上面的基础选择器,进行了组合操作。 通过这个组合,来完成更方便选择元素的一个效果
后代选择器
:可以通过多个选择器的组合,能够选中 某个元素里面的子元素,孙子元素(后代元素)
子选择器
:通过多个选择器的组合,能够选中某个元素里面的子元素
.
后代选择器
后代选择器:
ul .name{
color: red;
}
子代选择器
子代选择器
ul >.name{
color: red;
}
这两个有什么区别?
并集选择器
并列的写多个选择器
中间使用逗号来分割
伪类选择器
这个选择器,就不展开介绍了
伪类选择器,其实它是属于一些特殊场景的应用。
伪类选择器个数:选择器 + 冒号 + 不同元素的状态+{应用属性}。
比如:链接伪类选择器
a:link
选择未被访问过的链接a:visited
选择已经被访问过的链接a:hover
选择鼠标指针悬停上的链接a:active
选择活动链接(鼠标按下了但是未弹起) link 和 visited 不常用。 hover 和 active 比较常用
我演示两个:
弹性布局 ( flex )
弹性布局,主要是安排页面上的元素的 位置 / 排序方式。
默认的网页布局,是从上到下的。(尤其是块级元素独占一行) 实际中的网页不仅仅需要从上到下,也需要从左到右。
所以,我们就可以
借助弹性布局,既能完成 水平方向的布局,又能完成垂直方向的布局
先来看水平方向的布局
举例:
通过
水平方向排列
方式查看 弹性布局
justify-content :
flex 布局中的最常见的三种操作:
1、
设置为弹性布局 – display: flex
来实现2、设置
水平方向的排序 – justify-content: flex-start/center/flex-end
3、设置
垂直方向的排序 – align-items: flex-start/center/flex-end
基于上述内容,就可以实现一些主流的页面布局效果了
实战
实现一个典型的页面最典型的布局
下面我们就来基于 弹性布局,来实现出这样的一个页面布局。
<!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>基于弹性布局: 实现典型的页面结构</title>
</head>
<body>
<style>
*{
/* 外边距设置为 0 */
margin: 0;
/* 内边距设置为 0 */
padding: 0;
/* 盒子模型,保证不影响页面排版 */
box-sizing: border-box;
}
.navigation{
/* 宽度设置页面的宽度 */
width: 100%;
/* 高度一般为50px */
height: 50px;
/* 当行背景,取自本题图片城市 */
background-image: url(城市.jpg);
/* 字体颜色 白色 */
color: white;
/* 文本居中 */
text-align: center;
/* 文本垂直居中 */
line-height: 50px;
/* 字体大小:20像素 */
font-size: 20px;
/* 字体样式:楷体 */
font-family: "楷体";
}
.container{
width: 100%;
height: 1000px;
background-image: url(城市.jpg);
/* 字体颜色 白色 */
color: white;
/* 字体大小:20像素 */
font-size: 20px;
/* 字体样式:楷体 */
font-family: "楷体";
display: flex;
justify-content: center;
align-items: center;
}
.container .left, .container .right{
height: 100%;
width: 8%;
background-image: url(海.jpg);
}
.container .content{
height: 100%;
/* 左右边框占16% */
width: 84%;
background-image: url(城市.jpg);
background-size: cover;
}
</style>
<div class="navigation">导航栏</div>
<div class="container">
<div class="left">
左侧边栏
</div>
<div class="content">
内容区域
</div>
<div class="right">
右侧边栏
</div>
</div>
<div class="footer">
页脚
</div>
</body>
</html>